/* ========================================================================= EDUCA.PRO · capa de marca sobre desistimiento.css ========================================================================= A diferencia de educapharos.com (donde el core ya viene con la marca y no hace falta redefinir nada), aquí cambia el sistema de diseño entero. FUENTE DE LOS VALORES: el bloque :root del style.css del tema hijo de educa.pro (variables --edu-*), leído directamente del repo local. No son valores inventados ni aproximados a ojo; son los mismos tokens que usa la web. Se anotan al lado de cada uno para poder cotejarlos. RESUMEN DEL CAMBIO FRENTE AL CORE tipografía Montserrat -> Work Sans acento amarillo #ffd200 -> índigo #6670C9 sobre acento texto oscuro -> texto BLANCO (el acento es oscuro) oscuro #111 -> #373d75 esquinas 4/6/10px -> 8/18px, y pill en los botones sombras casi ninguna -> sistema suave propio del tema Se carga DESPUÉS de desistimiento.css (declarada como dependencia suya en el site-pack), así que basta con redefinir los tokens en :root con la misma especificidad. Solo se baja al detalle de componente donde el core tiene algo a fuego que un token no alcanza. ========================================================================= */ /* ============ TOKENS ============ */ :root { --des-font: "Work Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Acento. El core lo llama "y" por herencia del amarillo de Pharos; aquí es índigo, pero el nombre se mantiene para no tocar el core. SE USA #5C66AD (--edu-btn del tema) Y NO #6670C9 (--edu-color-primary), por dos razones que apuntan al mismo sitio: 1. es el índigo que el tema usa DE VERDAD en sus botones; 2. el contraste del texto blanco encima es 5.30:1, que pasa AA. Sobre #6670C9 sería 4.44:1 — no llega al 4.5:1 exigido para texto normal, y el texto oscuro tampoco (4.25:1). Con el primary no hay color de texto que cumpla: el botón sería inaccesible se pinte como se pinte. El #6670C9 sí se usa más abajo para los acentos decorativos (viñetas, filetes), donde no hay texto encima y el contraste no aplica. */ --des-y: #5C66AD; --des-y-strong: #4e5899; /* --edu-btn-hover · blanco encima: 6.60:1 */ /* --edu-color-primary-dark */ --des-d: #373d75; --des-d-strong: #2b3059; /* --edu-color-text-soft, --edu-color-border-soft, --edu-color-bg-soft */ --des-muted: #333333; --des-line: #c9cce4; --des-bg-soft: #eef0f8; --des-surface: #ffffff; /* EL CAMBIO QUE NO ES SOLO DE COLOR: en Pharos el acento es un amarillo claro y el texto encima va oscuro. Aquí el acento es un índigo oscuro, así que el texto encima tiene que ser BLANCO (5.30:1 sobre --des-y, frente a 4.25:1 del oscuro, que no llegaría). Sin este token, todos los botones de acento —enviar solicitud, CTA del footer— saldrían con el texto oscuro que hereda del core y quedarían ilegibles. */ --des-on-y: #ffffff; --des-on-d: #ffffff; /* sobre --des-d (#373d75): 10.06:1 */ /* EL FOOTER DE ESTA WEB ES BLANCO (.ep-footer { background:#ffffff } en el style.css del tema hijo), al revés que el de educapharos.com. Con el blanco que trae el core, el texto de apoyo del CTA sería literalmente invisible: contraste 1.00:1. Se usa el gris de texto secundario, que sobre blanco da 12.6:1. No se copia el #9aa0d0 que el tema usa en su línea de copyright: ese da 2.53:1 y no llega ni al mínimo de texto grande, y aquí lo que se lee es el plazo legal de 14 días, no un aviso decorativo. */ --des-footer-note: #333333; /* --edu-radius-sm / --edu-radius-md */ --des-radius-card: 18px; --des-radius-btn: 999px; /* pill, como los botones del tema */ --des-radius-soft: 8px; } /* ============ COMPONENTES ============ Solo lo que los tokens no alcanzan. */ /* Los botones del tema son pill, de peso 500-600 y con elevación suave, no rectos y de peso 700 como en Pharos. */ .des-form__submit, .des-politica__descarga-btn, .des-footer-cta__btn, .des-form__file-btn { font-weight: 600; letter-spacing: .01em; } /* Sombra de tarjeta del tema (--edu-shadow-card) en lugar de la casi inexistente del core. */ .des-form-wrap { box-shadow: 0 8px 22px rgba(33, 41, 86, .12); } .des-politica__descarga { box-shadow: 0 8px 22px rgba(33, 41, 86, .12); border-color: var(--des-line); } /* El core tiñe el glow del hover con el amarillo de Pharos a fuego (es un rgba, no una variable, porque necesita el canal alfa). Aquí se repinta con el índigo. */ .des-form__submit:hover:not(:disabled), .des-footer-cta__btn:hover, .des-footer-cta__btn:focus-visible { box-shadow: 0 8px 24px rgba(33, 41, 86, .28); } /* Mismo motivo: el foco de los campos usa un halo amarillo a fuego. */ .des-form__input.des-form__input:focus { box-shadow: 0 0 0 3px rgba(102, 112, 201, .28); } .des-form__file-input:focus-visible + .des-form__file-btn { outline-color: rgba(102, 112, 201, .5); } /* El hero del core es un bloque plano de color oscuro. El tema usa un degradado suave en sus cabeceras (--edu-cta-overlay), así que se acerca sin depender de ninguna imagen subida a medios. EL padding-top ES OBLIGATORIO AQUÍ, no es estética: el header de esta web es `position: fixed` (.ep-site-header, top:18px, con .ep-header-inner de 86px de alto), así que flota SOBRE el contenido y tapaba el

del hero entero. El tema resuelve esto en sus propias páginas con exactamente estos valores —150px en escritorio y 130px por debajo de 1024px (ver .edu-resources-hero, .edu-faq-hero, .edu-catalog-hero…)—, así que se copian en lugar de inventar un número que se vería distinto al resto. */ .des-page__hero { background: linear-gradient(90deg, #373d75 0%, #444c94 100%); padding-top: 150px; } /* El CTA del footer va alineado a la izquierda, no centrado: el footer de esta web alinea a la izquierda todo su contenido (logo, descripción, redes) y un botón centrado rompía esa retícula. El core lo centra porque en educapharos.com sí encaja así. Además se le da el MISMO contenedor que .ep-footer__inner del tema (1160px centrados con 24px de padding). Sin esto quedaría pegado al borde de la ventana en vez de a la vertical del logo, porque el shortcode se inserta como hijo directo de