/* ========================================================================= edudevel.com — Hoja de estilos corporativa Identidad de marca (Manual eLearning Media / Edudevel): Azul #395da8 · Verde #a3ca63 Gris topo#776f65 · Negro #000000 Tipografía de referencia: Helvética (stack del sistema, sin dependencias externas para respetar la privacidad — no se cargan fuentes de terceros). ========================================================================= */ /* ----------------------------- Tokens ---------------------------------- */ :root { /* Marca */ --blue: #395da8; --blue-600: #335291; --blue-700: #2b4576; --blue-050: #eaf0fa; --green: #a3ca63; --green-600: #8fbb49; --green-700: #6f9a32; --green-050: #f0f6e4; --taupe: #776f65; --taupe-600: #635c53; /* Texto y neutros */ --ink: #2c2a26; /* texto principal (AA sobre blanco) */ --ink-soft: #514c44; /* texto secundario */ --muted: #837b70; /* texto terciario / metadatos */ --line: #e6e8ec; /* bordes sutiles */ --line-soft: #eef0f3; /* Fondos */ --bg: #ffffff; --bg-soft: #f7f8fa; --bg-softer: #eef1f6; --footer-bg: #1b2233; /* navy profundo derivado del azul */ --footer-line: #2c3650; /* Marca · degradado del manual */ --grad: linear-gradient(120deg, var(--blue) 0%, #5a8f8a 55%, var(--green) 100%); /* Sistema */ --container: 1140px; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(27, 34, 51, .06), 0 1px 3px rgba(27, 34, 51, .08); --shadow: 0 6px 18px rgba(27, 34, 51, .08), 0 2px 6px rgba(27, 34, 51, .06); --shadow-lg: 0 22px 48px rgba(27, 34, 51, .14), 0 8px 18px rgba(27, 34, 51, .08); --ease: cubic-bezier(.22, .61, .36, 1); --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif; } /* ----------------------------- Reset ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html { scroll-padding-top: 88px; } body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.65; font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: var(--blue-600); text-decoration: none; } a:hover { color: var(--blue-700); } ul, ol { padding-left: 1.2em; } h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* --------------------- Internacionalización (i18n) --------------------- */ /* Ambos idiomas viven en el DOM; se oculta el inactivo según . Esto preserva el display natural de cada elemento (inline, flex, etc.). */ html[lang="es"] [data-lang="en"], html[lang="en"] [data-lang="es"] { display: none !important; } /* ----------------------------- Layout ---------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } .section { padding-block: clamp(3.5rem, 7vw, 6rem); } .section--soft { background: var(--bg-soft); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 1.6rem; height: 3px; border-radius: 3px; background: var(--grad); } .lead { font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); } .muted { color: var(--muted); } .center { text-align: center; } .center .eyebrow::before { display: none; } .center .eyebrow { color: var(--blue-600); } /* ----------------------------- Botones --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: inherit; font-weight: 600; line-height: 1; padding: .92em 1.5em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .arrow { transition: transform .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(57, 93, 168, .28); } .btn--primary:hover { background: var(--blue-600); color: #fff; box-shadow: 0 10px 24px rgba(57, 93, 168, .34); } .btn--green { background: var(--green-700); color: #fff; box-shadow: 0 6px 16px rgba(111, 154, 50, .26); } .btn--green:hover { background: var(--green-600); color: #fff; box-shadow: 0 10px 24px rgba(111, 154, 50, .3); } .btn--ghost { background: #fff; color: var(--blue-700); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue-700); } .btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .btn--light:hover { background: rgba(255,255,255,.2); color: #fff; } /* ----------------------------- Header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(27, 34, 51, .05); } .nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; } .nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; } .nav__brand img { height: 34px; width: auto; } .nav__brand:focus-visible { outline-offset: 5px; } .nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; list-style: none; padding: 0; } .nav__links a { display: inline-block; padding: .5rem .85rem; border-radius: 8px; color: var(--ink-soft); font-weight: 500; font-size: .96rem; transition: color .15s var(--ease), background-color .15s var(--ease); } .nav__links a:hover { color: var(--blue-700); background: var(--blue-050); } .nav__actions { display: flex; align-items: center; gap: .9rem; } /* Selector de idioma */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; } .lang-switch button { font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .03em; padding: .4rem .7rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); } .lang-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; } .lang-switch button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--bg-softer); } /* Botón hamburguesa */ .nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; position: relative; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .25s var(--ease), opacity .2s var(--ease); } .nav__toggle span::before { transform: translate(-50%, -7px); } .nav__toggle span::after { transform: translate(-50%, 7px); } body.nav-open .nav__toggle span { background: transparent; } body.nav-open .nav__toggle span::before { transform: translate(-50%, 0) rotate(45deg); } body.nav-open .nav__toggle span::after { transform: translate(-50%, 0) rotate(-45deg); } /* ----------------------------- Hero ------------------------------------ */ .hero { position: relative; overflow: hidden; background: radial-gradient(1100px 520px at 88% -10%, var(--green-050), transparent 60%), radial-gradient(900px 520px at 0% 0%, var(--blue-050), transparent 55%), var(--bg); padding-block: clamp(3.5rem, 8vw, 7rem); } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero h1 { font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.65rem); letter-spacing: -.03em; } .hero h1 .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { margin-top: 1.25rem; max-width: 34ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } .hero__meta { margin-top: 2.25rem; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .6rem; } .hero__meta strong { color: var(--ink-soft); font-weight: 600; } /* Tarjeta visual del hero */ .hero__visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--grad); box-shadow: var(--shadow-lg); display: grid; place-items: center; overflow: hidden; } .hero__visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.28), transparent 50%); } .hero__visual img { width: 58%; filter: drop-shadow(0 12px 24px rgba(0,0,0,.18)); position: relative; z-index: 1; } /* ----------------------- Tira de confianza ----------------------------- */ .trust { border-block: 1px solid var(--line); background: #fff; } .trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding-block: 1.3rem; color: var(--muted); font-size: .92rem; } .trust__row span { display: inline-flex; align-items: center; gap: .5rem; } .trust__row svg { color: var(--green-700); flex-shrink: 0; } /* --------------------------- Características ---------------------------- */ .section__head { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .section--tight .section__head { margin-bottom: 1.5rem; } .section__head h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); } .section__head p { margin-top: .9rem; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .feature__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--blue-050); color: var(--blue); margin-bottom: 1.1rem; } .feature h3 { font-size: 1.15rem; margin-bottom: .45rem; } .feature p { color: var(--ink-soft); font-size: .97rem; } /* --------------------- Tarjetas de destino (rutas) --------------------- */ .routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } .route { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .route::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent, var(--blue)); } .route--blue { --accent: var(--blue); --accent-soft: var(--blue-050); --accent-strong: var(--blue-700); } .route--green { --accent: var(--green-700); --accent-soft: var(--green-050); --accent-strong: var(--green-700); } .route:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .route__tag { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); padding: .35rem .7rem; border-radius: 999px; margin-bottom: 1.3rem; } .route__logo { height: 40px; width: auto; margin-bottom: 1.1rem; } .route__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .2rem; } .route__domain { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-strong); font-weight: 600; font-size: .95rem; margin-bottom: 1rem; } .route__desc { color: var(--ink-soft); flex-grow: 1; } .route__list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .55rem; } .route__list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-soft); font-size: .96rem; } .route__list svg { color: var(--accent-strong); flex-shrink: 0; margin-top: .28em; } .route .btn { align-self: flex-start; margin-top: auto; } /* ----------------------------- CTA / Contacto -------------------------- */ .cta { position: relative; overflow: hidden; background: var(--grad); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.5rem); color: #fff; text-align: center; box-shadow: var(--shadow-lg); } .cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 140% at 50% -20%, rgba(255,255,255,.25), transparent 55%); } .cta > * { position: relative; z-index: 1; } .cta h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); } .cta p { margin: .9rem auto 1.8rem; max-width: 50ch; color: rgba(255,255,255,.92); } .cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; } /* ----------------------------- Footer ---------------------------------- */ .site-footer { background: var(--footer-bg); color: #aeb6c7; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .94rem; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--footer-line); } .footer__brand img { height: 30px; margin-bottom: 1.1rem; } .footer__brand p { max-width: 34ch; color: #8e97ab; } .footer__col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; } .footer__col ul { list-style: none; padding: 0; display: grid; gap: .65rem; } .footer__col a { color: #aeb6c7; transition: color .15s var(--ease); } .footer__col a:hover { color: #fff; } .footer__col a .ext { opacity: .5; } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; color: #7e879c; font-size: .88rem; } .footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer__bottom a { color: #7e879c; } .footer__bottom a:hover { color: #fff; } /* ----------------------- Banner de cookies ----------------------------- */ .cookie { position: fixed; left: 50%; bottom: clamp(.8rem, 2vw, 1.5rem); transform: translateX(-50%) translateY(0); width: min(720px, calc(100% - 2rem)); z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.2rem 1.3rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.4rem; align-items: center; opacity: 1; transition: transform .35s var(--ease), opacity .3s var(--ease); } .cookie[hidden] { display: none; } .cookie.is-hiding { opacity: 0; transform: translateX(-50%) translateY(140%); } .cookie p { font-size: .92rem; color: var(--ink-soft); } .cookie p strong { color: var(--ink); } .cookie__actions { display: flex; gap: .6rem; flex-wrap: wrap; } .cookie .btn { padding: .7em 1.2em; font-size: .92rem; } /* --------------------- Páginas legales (prosa) ------------------------- */ .page-head { background: radial-gradient(700px 300px at 100% -40%, var(--blue-050), transparent 60%), var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); } .page-head h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); } .page-head p { margin-top: .8rem; color: var(--muted); } .breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--blue-700); } .prose { max-width: 760px; margin-inline: auto; } .prose h2 { font-size: 1.4rem; margin-top: 2.6rem; margin-bottom: .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); } .prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; } .prose h3 { font-size: 1.1rem; margin-top: 1.6rem; margin-bottom: .5rem; } .prose p, .prose li { color: var(--ink-soft); } .prose p { margin-bottom: 1rem; } .prose ul, .prose ol { margin-bottom: 1rem; display: grid; gap: .45rem; } .prose strong { color: var(--ink); } .prose a { text-decoration: underline; text-underline-offset: 2px; } /* Marcador de dato pendiente de rellenar */ .fill { background: #fff7e0; border: 1px dashed #e3b53d; border-radius: 5px; padding: 0 .35em; font-weight: 600; color: #7a5800; font-style: normal; } .note { background: var(--blue-050); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: .92rem; color: var(--ink-soft); } .note strong { color: var(--blue-700); } /* Tabla de cookies */ .table-wrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; } table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); } table.data th { background: var(--bg-soft); color: var(--ink); font-weight: 600; } table.data tr:last-child td { border-bottom: 0; } .updated { font-size: .85rem; color: var(--muted); margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); } /* ----------------------------- Utilidades ------------------------------ */ .skip-link { position: absolute; left: 1rem; top: -100px; background: var(--blue); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; z-index: 300; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Animación de entrada al hacer scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* --------------------------- Responsive -------------------------------- */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { max-width: 360px; margin-inline: auto; order: -1; } .hero p.lead { max-width: none; } .features { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 720px) { .nav__toggle { display: block; } .nav__links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: .2rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .8rem 1.1rem 1.2rem; margin: 0; transform: translateY(-130%); transition: transform .3s var(--ease); max-height: calc(100vh - 72px); overflow-y: auto; } body.nav-open .nav__links { transform: translateY(0); } .nav__links a { padding: .8rem .85rem; font-size: 1.05rem; } .routes { grid-template-columns: 1fr; } .cookie { grid-template-columns: 1fr; text-align: left; } .cookie__actions { justify-content: flex-start; } } @media (max-width: 520px) { .features { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .hero__cta .btn, .cta__actions .btn { width: 100%; } } /* --------------------- Preferencias de movimiento ---------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }