/**
 * Estilo EuropaSchule — sistema de diseño para todo el sitio.
 *
 * Dos capas:
 *   1. `.es` — componentes propios (prefijo es-). Se usan dentro de un
 *      bloque de código o de texto de Avada envuelto en <div class="es">.
 *      No tocan nada fuera de ese contenedor.
 *   2. `body.es-armonizado` — armonizadores opcionales para los elementos
 *      que ya existen en las páginas actuales (botones, tablas, avisos,
 *      acordeones de Avada y formularios de WPForms). Se activan desde
 *      Ajustes → Estilo EuropaSchule y no cambian la estructura, solo el
 *      aspecto.
 *
 * Los tokens salen de la paleta oficial de la marca (azul, naranja,
 * amarillo, cian verde, gris y café madera, cada uno en oscuro / normal /
 * claro) y de la tipografía Poppins / Open Sans que ya usa el tema. Los
 * tintes suaves y los tonos de texto sobre tinte se derivan de la paleta
 * para cumplir contraste AA. Nunca se escribe un color fuera de esta lista.
 *
 * Reglas de contraste que fijan el mapa:
 *   - Texto blanco solo sobre Azul Normal (4.7:1), Azul Oscuro (11.3:1),
 *     Cian Verde Oscuro (4.6:1) y rojo. Nunca sobre naranja, amarillo,
 *     Azul Claro ni Cian Verde Normal (todos por debajo de 3.5:1).
 *   - Sobre naranja y amarillo, el texto va en Azul Oscuro (5.1:1 y 8.5:1).
 *   - Azul Claro, Cian Verde Normal y Gris Normal son decorativos
 *     (iconos, marcadores, bordes): nunca texto sobre blanco.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
	/* Azul: la estructura */
	--es-blue: #0078c3;         /* Azul Normal: botones, enlaces, iconos, pasos */
	--es-blue-dark: #003f5c;    /* Azul Oscuro: títulos, hover, secciones oscuras, pie */
	--es-blue-light: #00a4e3;   /* Azul Claro: decorativo (iconos sobre oscuro, marcas) */
	--es-blue-soft: #e6f3fa;    /* tinte: pastillas de icono, avisos, chips */
	--es-blue-text: #005a92;    /* azul para texto pequeño sobre tinte azul */

	/* Naranja: la acción que convierte */
	--es-orange: #f8991d;       /* Naranja Normal: botón de acento con texto azul oscuro */
	--es-orange-dark: #e4891b;  /* Naranja Oscuro: asterisco, marcador "en espera" */
	--es-orange-light: #fbab18; /* Naranja Claro: eyebrow y detalles sobre azul oscuro */
	--es-orange-soft: #fef3e3;  /* tinte: avisos que piden algo, chip de atención */
	--es-orange-text: #8a4b00;  /* texto sobre el tinte naranja */

	/* Amarillo: resaltar */
	--es-yellow: #ffdf00;       /* Amarillo Normal: resaltado de palabra, borde de cita */
	--es-yellow-dark: #e4b60e;  /* Amarillo Oscuro: iconos decorativos */
	--es-yellow-soft: #fffbd6;  /* tinte */
	--es-yellow-text: #7a6200;  /* texto sobre el tinte amarillo */

	/* Cian verde: hecho, garantía, WhatsApp */
	--es-teal: #009c8d;         /* Cian Verde Normal: iconos, marcadores */
	--es-teal-dark: #00847c;    /* Cian Verde Oscuro: botones y estados con texto blanco */
	--es-teal-light: #00b1aa;   /* Cian Verde Claro: decorativo */
	--es-teal-soft: #e3f5f3;    /* tinte: aviso de garantía, chip "hecho" */
	--es-teal-hl: #c4ebe5;      /* resaltado de una palabra bajo el texto */
	--es-teal-text: #00665f;    /* texto sobre el tinte cian */

	/* Café madera: acento raro (naturaleza, Prebásica, madera) */
	--es-brown: #9a5a30;
	--es-brown-soft: #f6ede6;

	/* Error */
	--es-red: #b01818;
	--es-red-soft: #fdecec;

	/* Neutros: Gris Claro y Gris Normal de la paleta, el resto derivado */
	--es-white: #ffffff;
	--es-bg: #f7f8fa;
	--es-panel: #f0f1f3;
	--es-border: #e2e1e3;       /* Gris Claro */
	--es-border-strong: #c6c9ce;
	--es-placeholder: #858a92;  /* Gris Normal: solo marcadores, iconos apagados, bordes */
	--es-muted: #5f6b78;        /* texto secundario (5.4:1) */
	--es-text: #38475a;         /* párrafos (9.5:1) */
	--es-ink: #1b2a38;          /* énfasis, valores, controles */
	--es-heading: var(--es-blue-dark);

	/* Tipografía */
	--es-font: Poppins, "Helvetica Neue", Arial, sans-serif;
	--es-font-ui: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	/* Misma escala que el plugin de admisiones */
	--es-fs-display: 36px;
	--es-fs-h1: 30px;
	--es-fs-h2: 20px;
	--es-fs-h3: 16px;
	--es-fs-h4: 14px;
	--es-fs-lead: 15px;
	--es-fs-body: 14px;
	--es-fs-small: 13px;
	--es-fs-eyebrow: 11px;

	/* Espacio (base 4px) */
	--es-s1: 4px;
	--es-s2: 8px;
	--es-s3: 12px;
	--es-s4: 16px;
	--es-s5: 24px;
	--es-s6: 32px;
	--es-s7: 48px;
	--es-s8: 64px;
	--es-s9: 96px;
	--es-gap: 20px;
	--es-gap-sm: 12px;
	--es-section: 40px;

	/* Forma */
	--es-radius: 8px;
	--es-radius-lg: 10px;
	--es-radius-pill: 999px;
	--es-control: 50px;
	--es-control-sm: 40px;
	--es-shadow: 0 1px 2px rgba(0, 63, 92, 0.06);
	--es-shadow-hover: 0 10px 28px rgba(0, 63, 92, 0.12);
	--es-shadow-float: 0 1px 2px rgba(0, 63, 92, 0.06), 0 14px 36px rgba(0, 63, 92, 0.12); /* solo el hero */

	/* Anchos */
	--es-max: 900px;
	--es-max-wide: 1100px;
	--es-max-prose: 760px;
	--es-max-narrow: 720px;
}

/* ------------------------------------------------------------------ */
/* 2. Base dentro de .es                                               */
/* ------------------------------------------------------------------ */
.es {
	font-family: var(--es-font);
	font-size: var(--es-fs-body);
	line-height: 1.7;
	color: var(--es-text);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.es *, .es *::before, .es *::after { box-sizing: inherit; }
.es [hidden] { display: none !important; }
.es img { max-width: 100%; height: auto; display: block; }
.es p, .es ul, .es ol, .es figure { margin: 0; }
.es ul, .es ol { padding: 0; list-style: none; }

.es h1, .es h2, .es h3, .es h4, .es h5, .es h6 { font-family: var(--es-font); font-weight: 600; color: var(--es-heading); margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.es h1 { font-size: var(--es-fs-h1); line-height: 1.2; letter-spacing: -0.01em; }
.es h2 { font-size: var(--es-fs-h2); line-height: 1.3; }
.es h3 { font-size: var(--es-fs-h3); line-height: 1.3; }
.es h4, .es h5, .es h6 { font-size: var(--es-fs-h4); line-height: 1.4; }
.es .es-display { font-size: var(--es-fs-display); line-height: 1.1; letter-spacing: -0.015em; color: var(--es-heading); }
.es-lead { font-size: var(--es-fs-lead); line-height: 1.6; color: var(--es-text); }
.es-small { font-size: var(--es-fs-small); line-height: 1.6; }
.es-muted { color: var(--es-muted); }
.es-eyebrow { display: inline-block; font-size: var(--es-fs-eyebrow); font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--es-muted); }
.es-eyebrow--muted { color: var(--es-muted); }
.es-eyebrow--blue { color: var(--es-blue); }
.es strong, .es b { font-weight: 500; color: var(--es-ink); }
.es a { text-decoration: none; }
.es a:not([class]), .es .es-link { color: var(--es-blue); }
.es a:not([class]):hover, .es .es-link:hover { color: var(--es-blue-dark); text-decoration: underline; }
.es a:focus-visible, .es button:focus-visible, .es summary:focus-visible { outline: 3px solid var(--es-blue); outline-offset: 2px; }
.es-hl { box-shadow: inset 0 -0.38em 0 var(--es-teal-hl); padding: 0 2px; }
.es-num { font-variant-numeric: tabular-nums; }
.es-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* 3. Retícula y espacio                                               */
/* ------------------------------------------------------------------ */
.es-container { max-width: var(--es-max); margin: 0 auto; }
.es-container--wide { max-width: var(--es-max-wide); }
.es-container--prose { max-width: var(--es-max-prose); }
.es-container--narrow { max-width: var(--es-max-narrow); }
.es-section { padding: var(--es-section) 0; }
.es-section--tight { padding: var(--es-s5) 0; }
.es-section--panel { background: var(--es-bg); }
.es-section--panel { border-radius: var(--es-radius-lg); padding-left: var(--es-s6); padding-right: var(--es-s6); }
.es-section--blue { background: var(--es-blue-dark); color: rgba(255, 255, 255, 0.88); }
.es-section--blue .es-eyebrow { color: var(--es-orange-light); }
.es-section--blue h1, .es-section--blue h2, .es-section--blue h3, .es-section--blue strong { color: var(--es-white); }
.es .es-section--blue a:not([class]) { color: var(--es-white); text-decoration: underline; }
.es-stack { display: flex; flex-direction: column; gap: var(--es-gap); }
.es-stack--sm { gap: var(--es-s3); }
.es-stack--lg { gap: var(--es-s6); }
.es-cluster { display: flex; flex-wrap: wrap; gap: var(--es-s3); align-items: center; }
.es-grid { display: grid; gap: var(--es-gap); grid-template-columns: repeat(var(--es-cols, 3), minmax(0, 1fr)); }
.es-grid--2 { --es-cols: 2; }
.es-grid--3 { --es-cols: 3; }
.es-grid--4 { --es-cols: 4; }
.es-grid--5 { --es-cols: 5; }
.es-grid--sidebar { grid-template-columns: 220px minmax(0, 1fr); }
.es-grid--wide-left { --es-cols: 2; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.es-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--es-s6); align-items: center; }
.es-split--text-narrow { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.es-split--media-left > .es-split__media { order: -1; }
.es-divider { border: 0; border-top: 1px solid var(--es-border); margin: var(--es-s6) 0; }
.es-center { text-align: center; }
.es-mt-0 { margin-top: 0 !important; }
.es-mt-2 { margin-top: var(--es-s2) !important; }
.es-mt-4 { margin-top: var(--es-s4) !important; }
.es-mt-6 { margin-top: var(--es-s6) !important; }
.es-mt-8 { margin-top: var(--es-s8) !important; }

/* ------------------------------------------------------------------ */
/* 4. Cabecera de página, hero e introducción de sección               */
/* ------------------------------------------------------------------ */
.es .es-crumbs { display: flex; flex-wrap: wrap; gap: var(--es-s2); font-size: var(--es-fs-small); color: var(--es-muted); margin: 0 0 var(--es-s5); }
.es .es-crumbs a { color: var(--es-muted); }
.es .es-crumbs a:hover { color: var(--es-blue); }
.es-crumbs li + li::before { content: "›"; margin-right: var(--es-s2); color: var(--es-placeholder); }
.es-pagehead { display: flex; flex-direction: column; gap: var(--es-s2); padding-bottom: var(--es-s5); border-bottom: 1px solid var(--es-border); margin-bottom: var(--es-s6); }
.es-pagehead .es-lead { max-width: var(--es-max-prose); }
.es-pagehead__meta { font-size: var(--es-fs-small); color: var(--es-muted); }

/* Hero: tarjeta flotante, blanca y sin borde, con una sombra suave teñida de
   azul oscuro. Es la única sombra grande del sistema. */
.es-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: var(--es-white); border-radius: var(--es-radius-lg); box-shadow: var(--es-shadow-float); overflow: hidden; min-height: 340px; }
.es-hero__body { padding: var(--es-s6); display: flex; flex-direction: column; justify-content: center; gap: var(--es-s3); }
.es-hero__body .es-lead { color: var(--es-text); max-width: 40ch; }
.es-hero__media { position: relative; min-height: 240px; }
.es .es-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.es-hero__actions { display: flex; flex-wrap: wrap; gap: var(--es-s3); margin-top: var(--es-s2); }
.es .es-hero__actions .es-btn { padding-left: 20px; padding-right: 20px; }
.es .es-hero__title { font-size: 24px; line-height: 1.25; }
.es-hero--media-left .es-hero__media { order: -1; }
.es-hero--blue { background: var(--es-blue-dark); }
.es-hero--blue .es-display, .es-hero--blue h1 { color: var(--es-white); }
.es-hero--blue .es-lead { color: rgba(255, 255, 255, 0.85); }
.es-hero--blue .es-eyebrow { color: var(--es-orange-light); }
.es-hero--full { grid-template-columns: 1fr; min-height: 0; }
.es-hero--full .es-hero__body { padding: var(--es-s7) var(--es-s6); align-items: flex-start; }

.es-intro { display: flex; flex-direction: column; gap: var(--es-s2); margin-bottom: var(--es-s5); max-width: var(--es-max-prose); }
.es-intro--center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

/* ------------------------------------------------------------------ */
/* 5. Botones y enlaces de acción                                      */
/* ------------------------------------------------------------------ */
.es .es-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--es-s2); min-height: var(--es-control); padding: 8px 28px; border-radius: var(--es-radius); font-family: var(--es-font-ui); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.es .es-btn:hover { text-decoration: none; }
.es .es-btn--primary { background: var(--es-blue); color: var(--es-white); }
.es .es-btn--primary:hover { background: var(--es-blue-dark); color: var(--es-white); }
.es .es-btn--secondary { background: var(--es-white); color: var(--es-blue); border-color: var(--es-border-strong); }
.es .es-btn--secondary:hover { border-color: var(--es-blue); color: var(--es-blue); }
.es .es-btn--accent { background: var(--es-orange); color: var(--es-blue-dark); }
.es .es-btn--accent:hover { background: var(--es-blue-dark); color: var(--es-white); }
.es .es-btn--whatsapp { background: var(--es-teal-dark); color: var(--es-white); }
.es .es-btn--whatsapp:hover { background: var(--es-teal-text); color: var(--es-white); }
.es .es-btn--ghost { background: transparent; color: var(--es-white); border-color: rgba(255, 255, 255, 0.6); }
.es .es-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--es-white); }
.es .es-btn--link { background: transparent; color: var(--es-blue); padding: 0 var(--es-s2); min-height: 0; }
.es .es-btn--link:hover { text-decoration: underline; }
.es .es-btn--sm { min-height: var(--es-control-sm); padding: 6px 18px; font-size: 13px; }
.es .es-btn--lg { min-height: 54px; padding: 10px 32px; font-size: 15px; }
.es .es-btn[disabled], .es .es-btn--disabled { background: var(--es-border-strong); color: var(--es-white); border-color: transparent; cursor: not-allowed; }
.es .es-btn .es-icon { font-size: 16px; }
.es-actions { display: flex; flex-wrap: wrap; gap: var(--es-s3); align-items: center; }
.es-actions__note { font-size: var(--es-fs-small); color: var(--es-muted); }
.es .es-more { display: inline-flex; align-items: center; gap: var(--es-s2); font-weight: 500; color: var(--es-blue); }
.es-more::after { content: "›"; font-size: 1.2em; line-height: 1; transition: transform .15s; }
.es-more:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* 6. Iconos                                                           */
/* ------------------------------------------------------------------ */
.es-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; height: 1em; font-size: 20px; line-height: 1; color: currentColor; flex-shrink: 0; vertical-align: -0.15em; }
.es-icon--sm { font-size: 16px; }
.es-icon--lg { font-size: 28px; }
.es-icon--xl { font-size: 40px; }
.es-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--es-blue-soft); color: var(--es-blue); font-size: 20px; flex-shrink: 0; }
.es-icon-tile--sm { width: 36px; height: 36px; font-size: 16px; }
.es-icon-tile--lg { width: 56px; height: 56px; font-size: 24px; }
.es-icon-tile--solid { background: var(--es-blue); color: var(--es-white); }
.es-icon-tile--orange { background: var(--es-orange-soft); color: var(--es-orange-text); }
.es-icon-tile--teal { background: var(--es-teal-soft); color: var(--es-teal-text); }
.es-icon-tile--yellow { background: var(--es-yellow-soft); color: var(--es-yellow-text); }
.es-icon-tile--brown { background: var(--es-brown-soft); color: var(--es-brown); }
.es-icon-tile--white { background: var(--es-white); color: var(--es-blue); box-shadow: var(--es-shadow); }
.es-icon-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--es-s3); }
.es-icon-row > div { display: flex; flex-direction: column; align-items: center; gap: var(--es-s2); padding: var(--es-s3); border: 1px solid var(--es-border); border-radius: var(--es-radius); font-size: 11px; color: var(--es-muted); text-align: center; background: var(--es-white); }
.es-icon-row code { font-size: 11px; color: var(--es-muted); }

/* ------------------------------------------------------------------ */
/* 7. Tarjetas                                                         */
/* ------------------------------------------------------------------ */
.es-card { background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); box-shadow: var(--es-shadow); display: flex; flex-direction: column; overflow: hidden; }
/* Marcos de foto: la altura la fija el marco (aspect-ratio) y la foto va
   absoluta dentro, recortada por el centro. Con inset: 0 la foto llena el
   marco aunque el tema imponga height: auto a las imágenes. */
.es .es-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--es-panel); overflow: hidden; }
.es .es-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.es-card__body { padding: var(--es-s5); display: flex; flex-direction: column; gap: var(--es-s2); flex: 1; }
.es-card__body > h3 + p, .es-card__body > h4 + p { margin-top: var(--es-s1); }
.es-card__foot { margin-top: auto; padding-top: var(--es-s3); }
.es-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--es-s2) var(--es-s4); flex-wrap: wrap; }
.es-card__head > h2, .es-card__head > h3 { flex: 1 1 auto; min-width: 0; }
.es .es-card--link { transition: box-shadow .15s, transform .15s, border-color .15s; color: var(--es-text); }
.es .es-card--link:hover { box-shadow: var(--es-shadow-hover); transform: translateY(-2px); border-color: var(--es-border-strong); text-decoration: none; color: var(--es-text); }
.es .es-card--link:hover h3 { color: var(--es-blue); }
.es-card--icon .es-card__body { padding-top: var(--es-s5); }
.es-card--flat { box-shadow: none; }
.es-card--panel { background: var(--es-bg); border-color: transparent; box-shadow: none; }
.es-card--blue { background: var(--es-blue-dark); border-color: var(--es-blue-dark); color: rgba(255, 255, 255, 0.88); }
.es-card--blue h3, .es-card--blue h4, .es-card--blue strong { color: var(--es-white); }
.es-card--blue .es-eyebrow { color: var(--es-orange-light); }

/* Tarjeta de evento: fecha grande a la izquierda. */
.es-event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--es-s4); align-items: start; padding: var(--es-s4) 0; border-top: 1px solid var(--es-panel); }
.es-event:first-child { border-top: 0; padding-top: 0; }
.es-event__date { text-align: center; background: var(--es-blue-soft); color: var(--es-blue-text); border-radius: var(--es-radius); padding: var(--es-s2) 0; line-height: 1.1; }
.es-event__date b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.es-event__date--range b { font-size: 16px; }
.es-event__date span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.es-event__title { font-weight: 500; color: var(--es-ink); line-height: 1.4; }
.es-event__meta { font-size: var(--es-fs-small); color: var(--es-muted); }

/* Persona (docente, equipo). */
.es-person { display: flex; gap: var(--es-s4); align-items: center; }
.es-person__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--es-blue-soft); color: var(--es-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.es-person__name { font-weight: 500; color: var(--es-ink); line-height: 1.4; }
.es-person__role { font-size: var(--es-fs-small); color: var(--es-muted); line-height: 1.5; margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* 8. Mosaicos, acciones destacadas y pasos                            */
/* ------------------------------------------------------------------ */
.es-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--es-s3); }
.es-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--es-s2); padding: var(--es-s4) var(--es-s3); background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius); text-align: center; font-weight: 500; color: var(--es-ink); font-size: 14px; line-height: 1.35; min-height: 96px; transition: box-shadow .15s, border-color .15s; }
.es-tile .es-icon { font-size: 22px; color: var(--es-blue); }
.es-tile small { font-weight: 400; color: var(--es-muted); font-size: 12px; }
.es a.es-tile { color: var(--es-ink); }
.es a.es-tile:hover { text-decoration: none; border-color: var(--es-blue); box-shadow: var(--es-shadow-hover); color: var(--es-blue); }
.es-tile--muted { background: var(--es-bg); border-color: transparent; }

.es-cta-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--es-gap-sm); }
.es .es-cta-tile { display: flex; align-items: center; justify-content: center; gap: var(--es-s3); min-height: 72px; padding: var(--es-s4) var(--es-s5); border-radius: var(--es-radius); background: var(--es-white); border: 1px solid var(--es-border); box-shadow: var(--es-shadow); color: var(--es-ink); font-family: var(--es-font); font-weight: 500; font-size: 15px; line-height: 1.35; text-align: center; transition: border-color .15s, box-shadow .15s, color .15s; }
.es-cta-tile .es-icon { font-size: 22px; color: var(--es-blue); }
.es .es-cta-tile:hover { border-color: var(--es-blue); box-shadow: var(--es-shadow-hover); color: var(--es-blue); text-decoration: none; }
.es .es-cta-tile--accent { background: var(--es-orange); border-color: var(--es-orange); color: var(--es-blue-dark); }
.es .es-cta-tile--accent .es-icon { color: var(--es-blue-dark); }
.es .es-cta-tile--accent:hover { background: var(--es-blue-dark); border-color: var(--es-blue-dark); color: var(--es-white); }
.es .es-cta-tile--accent:hover .es-icon { color: var(--es-white); }
.es .es-cta-tile--whatsapp .es-icon { color: var(--es-teal-dark); }
.es .es-cta-tile--whatsapp:hover { border-color: var(--es-teal-dark); color: var(--es-teal-text); }

.es-steps { display: flex; flex-direction: column; counter-reset: es-step; }
.es-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--es-s4); padding: var(--es-s5) 0; border-top: 1px solid var(--es-border); counter-increment: es-step; }
.es-step:first-child { border-top: 0; padding-top: 0; }
.es-step::before { content: counter(es-step); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--es-blue); color: var(--es-white); font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; }
.es-step__body { display: flex; flex-direction: column; gap: var(--es-s2); padding-top: 8px; }
.es-step__body h3 { color: var(--es-ink); }
.es-step--done::before { background: var(--es-teal-dark); content: "✓"; }
.es-step--muted::before { background: var(--es-panel); color: var(--es-placeholder); }
.es-step--muted h3 { color: var(--es-muted); }

/* Pasos horizontales compactos (proceso en una línea). */
.es-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--es-s4); counter-reset: es-tl; }
.es-timeline > li { position: relative; padding-top: var(--es-s6); counter-increment: es-tl; font-size: 14px; }
.es-timeline > li::before { content: counter(es-tl); position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--es-blue); color: var(--es-white); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.es-timeline > li::after { content: ""; position: absolute; top: 13px; left: 36px; right: 0; height: 2px; background: var(--es-border); }
.es-timeline > li:last-child::after { display: none; }
.es-timeline > li strong { display: block; margin-bottom: var(--es-s1); }

/* ------------------------------------------------------------------ */
/* 9. Índice, listas, tablas, avisos, acordeón                         */
/* ------------------------------------------------------------------ */
/* Índice: una franja entre dos líneas finas, etiqueta a la izquierda y los
   capítulos numerados en dos columnas. Sin fondo ni color de acento. */
.es-toc { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--es-s4) var(--es-s6); border-top: 1px solid var(--es-border); border-bottom: 1px solid var(--es-border); padding: var(--es-s4) 0; counter-reset: es-toc; }
.es-toc__title { font-size: var(--es-fs-eyebrow); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--es-muted); line-height: 1.3; padding-top: 5px; }
.es-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--es-s2) var(--es-s5); font-size: 14px; }
.es-toc li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--es-s2); counter-increment: es-toc; line-height: 1.5; }
.es-toc li::before { content: counter(es-toc, decimal-leading-zero); font-size: 12px; font-weight: 500; color: var(--es-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.es .es-toc a { color: var(--es-ink); }
.es .es-toc a:hover { color: var(--es-blue); text-decoration: underline; }

.es-checklist { display: flex; flex-direction: column; gap: var(--es-s3); }
.es-checklist > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--es-s3); align-items: start; line-height: 1.6; }
.es-checklist > li .es-icon { font-size: 20px; color: var(--es-teal-dark); margin-top: 2px; }
.es-checklist--blue > li .es-icon { color: var(--es-blue); }
.es-checklist strong { color: var(--es-ink); }
.es-checklist--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--es-s3) var(--es-s6); }

.es-bullets { display: flex; flex-direction: column; gap: var(--es-s2); padding-left: 0; }
.es-bullets > li { position: relative; padding-left: 20px; }
.es-bullets > li::before { content: "–"; position: absolute; left: 2px; top: 0; color: var(--es-muted); }
.es-numbered { display: flex; flex-direction: column; gap: var(--es-s2); counter-reset: es-n; padding-left: 0; }
.es-numbered > li { position: relative; padding-left: 32px; counter-increment: es-n; }
.es-numbered > li::before { content: counter(es-n) "."; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--es-ink); font-variant-numeric: tabular-nums; }

.es-kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--es-s2) var(--es-s4); margin: 0; align-content: start; }
.es-kv dt { color: var(--es-muted); margin: 0; font-weight: 400; }
.es-kv dd { color: var(--es-ink); margin: 0; }

.es-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); background: var(--es-white); }
/* Desplazamiento horizontal: estilo.js marca el marco con is-scrollable
   mientras quede tabla a la derecha y con is-end al llegar al final. La
   sombra interior no se mueve con el contenido, así que funciona como
   "hay más" sin envoltorios extra. La pista de texto la inserta el script. */
.es-table-wrap.is-scrollable { box-shadow: inset -32px 0 24px -24px rgba(0, 63, 92, 0.22); }
.es-table-wrap.is-scrollable.is-end { box-shadow: none; }
.es-table-hint { display: flex; align-items: center; gap: var(--es-s2); font-size: var(--es-fs-small); color: var(--es-muted); margin: var(--es-s2) 0 0; line-height: 1.5; }
.es-table-hint .es-icon { font-size: 14px; color: var(--es-blue); }
.es-table-hint[hidden] { display: none; }
.es-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.es-table caption { caption-side: top; text-align: left; font-weight: 600; color: var(--es-ink); padding: var(--es-s4) var(--es-s5) var(--es-s2); }
.es-table th, .es-table td { padding: 12px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--es-border); line-height: 1.5; }
.es-table thead th { background: var(--es-panel); color: var(--es-ink); font-weight: 600; font-size: 13px; border-top: 0; }
.es-table tbody th { font-weight: 500; color: var(--es-ink); white-space: nowrap; }
.es-table tbody tr:nth-child(even) td, .es-table tbody tr:nth-child(even) th { background: var(--es-bg); }
.es-table .es-money, .es-table th.es-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-table tfoot th, .es-table tfoot td { font-weight: 600; color: var(--es-ink); border-top: 2px solid var(--es-border-strong); }
.es-table__note { font-size: var(--es-fs-small); color: var(--es-muted); padding: var(--es-s3) var(--es-s5) var(--es-s4); }

.es-notice { display: flex; gap: var(--es-s3); align-items: flex-start; border-radius: var(--es-radius-lg); padding: var(--es-s4) var(--es-s5); background: var(--es-blue-soft); color: var(--es-ink); line-height: 1.6; }
.es-notice .es-icon { font-size: 20px; margin-top: 2px; color: var(--es-blue); }
.es-notice__title { font-weight: 600; color: var(--es-ink); display: block; margin-bottom: 2px; }
.es-notice--success { background: var(--es-teal-soft); }
.es-notice--success .es-icon { color: var(--es-teal-text); }
.es-notice--warn { background: var(--es-orange-soft); color: var(--es-orange-text); }
.es-notice--warn .es-icon { color: var(--es-orange-text); }
.es-notice--muted { background: var(--es-panel); }
.es-notice--muted .es-icon { color: var(--es-muted); }

.es-acc { border-top: 1px solid var(--es-border); }
.es-acc:last-child { border-bottom: 1px solid var(--es-border); }
.es-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--es-s3); padding: var(--es-s4) 0; font-weight: 500; color: var(--es-ink); font-size: 15px; }
.es-acc > summary::-webkit-details-marker { display: none; }
.es-acc > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--es-blue-soft); color: var(--es-blue); font-weight: 600; flex-shrink: 0; transition: transform .15s; }
.es-acc[open] > summary::before { content: "–"; }
/* La apertura suave la hace assets/js/estilo.js (altura animada); sin JS el
   details nativo abre de golpe, que sigue siendo correcto. */
.es-acc.is-animating { overflow: hidden; }
.es-acc > summary:hover { color: var(--es-blue); }
.es-acc__body { padding: 0 0 var(--es-s5) 40px; display: flex; flex-direction: column; gap: var(--es-s3); }

.es-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 11px; border-radius: var(--es-radius-pill); font-size: 12px; font-weight: 500; line-height: 1.3; background: var(--es-panel); color: var(--es-muted); max-width: 100%; }
.es-chip--blue { background: var(--es-blue-soft); color: var(--es-blue-text); }
.es-chip--teal { background: var(--es-teal-soft); color: var(--es-teal-text); }
.es-chip--brown { background: var(--es-brown-soft); color: var(--es-brown); }
.es-chip--orange { background: var(--es-orange-soft); color: var(--es-orange-text); }
.es-chip--red { background: var(--es-red-soft); color: var(--es-red); }

/* ------------------------------------------------------------------ */
/* 10. Imágenes, figuras, banners, logos, citas                        */
/* ------------------------------------------------------------------ */
.es .es-figure { position: relative; border-radius: var(--es-radius-lg); overflow: hidden; background: var(--es-panel); }
.es .es-figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.es-figure--16x9 { aspect-ratio: 16 / 9; }
.es-figure--4x3 { aspect-ratio: 4 / 3; }
.es-figure--1x1 { aspect-ratio: 1 / 1; }
.es-figure--wide { aspect-ratio: 21 / 9; }
.es-figure__caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--es-blue); color: var(--es-white); font-size: 20px; font-weight: 400; padding: 6px 14px; border-radius: 4px; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.es-figure__caption strong { color: var(--es-white); font-weight: 600; }
.es-figure__caption--bottom { top: auto; bottom: var(--es-s4); transform: translateX(-50%); }
.es-figcaption { font-size: var(--es-fs-small); color: var(--es-muted); margin-top: var(--es-s2); }
/* Marcador de imagen: el sitio recibe las fotos a mano. */
.es-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--es-s4); border: 1px dashed var(--es-border-strong); border-radius: var(--es-radius-lg); background: repeating-linear-gradient(45deg, var(--es-bg) 0 12px, var(--es-panel) 12px 24px); color: var(--es-muted); font-size: 13px; line-height: 1.5; min-height: 120px; width: 100%; max-width: 100%; height: 100%; min-width: 0; overflow-wrap: anywhere; }
.es-placeholder strong { color: var(--es-muted); font-weight: 600; }

.es-banner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: var(--es-bg); color: var(--es-text); border-radius: var(--es-radius-lg); overflow: hidden; min-height: 180px; }
.es-banner__body { padding: var(--es-s6) var(--es-s6); display: flex; flex-direction: column; gap: var(--es-s3); justify-content: center; }
.es-banner--blue { background: var(--es-blue-dark); color: rgba(255, 255, 255, 0.88); }
.es-banner--blue h2, .es-banner--blue h3, .es-banner--blue strong { color: var(--es-white); }
.es-banner--blue .es-eyebrow { color: var(--es-orange-light); }
.es-banner--blue .es-hl, .es-hero--blue .es-hl, .es-section--blue .es-hl, .es-card--blue .es-hl { color: var(--es-teal-light); box-shadow: none; padding: 0; }
.es-banner__media { position: relative; min-height: 160px; }
.es .es-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.es-banner--full { grid-template-columns: 1fr; }

.es-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--es-s6); text-align: center; }
.es-logos > div { display: flex; flex-direction: column; align-items: center; gap: var(--es-s2); }
.es-logos img { max-height: 96px; width: auto; object-fit: contain; }
.es-logos .es-placeholder { max-width: 260px; height: 110px; min-height: 0; aspect-ratio: auto; }
.es-logos img, .es-logos .es-placeholder { margin-bottom: var(--es-s1); }
.es-logos strong { font-size: 14px; line-height: 1.4; }
.es-logos span { font-size: var(--es-fs-small); color: var(--es-muted); line-height: 1.4; }

.es-quote { border-left: 3px solid var(--es-yellow); padding: var(--es-s2) 0 var(--es-s2) var(--es-s5); margin: 0; font-size: var(--es-fs-lead); line-height: 1.6; color: var(--es-ink); }
.es-quote footer { margin-top: var(--es-s3); font-size: var(--es-fs-small); color: var(--es-muted); }

.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--es-s4); }
.es-stat { padding: var(--es-s4) var(--es-s5); background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.es-stat__num { display: block; font-size: 28px; font-weight: 600; color: var(--es-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.es-stat__label { font-size: 13px; color: var(--es-muted); }

/* ------------------------------------------------------------------ */
/* 10b. Currículo: parciales, bandas de edad, objetivos, iconos, código   */
/* ------------------------------------------------------------------ */
/* Cuatro parciales (1.–12. Grado) en fila; dos en tableta, uno en el celular. */
.es-parciales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--es-gap-sm); counter-reset: es-par; }
.es-parcial { background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius); padding: var(--es-s4); display: flex; flex-direction: column; gap: var(--es-s2); counter-increment: es-par; }
.es-parcial__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--es-blue); color: var(--es-white); font-weight: 500; font-size: 13px; }
.es-parcial h3 { font-size: 15px; display: flex; align-items: center; gap: var(--es-s2); }
.es-parcial__fechas { font-size: var(--es-fs-small); color: var(--es-muted); line-height: 1.5; }
/* Etiqueta de tiempo: esquinas de 6px, no pastilla, porque suele ocupar dos
   o tres líneas y una pastilla redonda se deforma. */
.es-parcial__tiempo { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--es-blue-text); background: var(--es-blue-soft); border-radius: 6px; padding: 5px 10px; align-self: flex-start; }
.es-parcial p { font-size: var(--es-fs-small); line-height: 1.6; }
.es-parcial__producto { border-top: 1px solid var(--es-border); padding-top: var(--es-s2); margin-top: auto; }
.es-parcial__producto strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--es-muted); font-weight: 600; margin-bottom: 2px; }

/* Regla de las nueve bandas de edad en tres etapas: tres grupos, tres
   bandas por grupo. En el celular los grupos se apilan. */
.es-bandas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--es-gap-sm); }
.es-bandas__grupo { display: flex; flex-direction: column; gap: 4px; }
.es-bandas__etapa { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--es-blue-text); background: var(--es-blue-soft); border-radius: var(--es-radius); padding: 6px 8px; }
.es-bandas__celdas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.es-bandas__banda { text-align: center; font-size: 12px; line-height: 1.35; color: var(--es-ink); min-width: 0; background: var(--es-bg); border: 1px solid var(--es-border); border-radius: var(--es-radius); padding: 8px 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* Ejemplo con títulos: una fila por banda dentro de cada grupo. */
.es-bandas--lista .es-bandas__grupo, .es-bandas__col { display: flex; flex-direction: column; gap: 4px; }
.es-bandas__fila { background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius); padding: 8px 12px; font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: 1px; }
.es-bandas__fila small { color: var(--es-muted); font-size: 11px; }
.es-bandas__fila b { font-weight: 500; color: var(--es-ink); }
.es-bandas__nota { font-size: var(--es-fs-small); color: var(--es-muted); margin-top: var(--es-s2); }

/* Iconos de las áreas de Prebásica (sprite del plugin Creative Curriculum,
   assets/img/cci.svg, a color propio). */
.es .cci { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.3em; }
.es .cci--lg { width: 44px; height: 44px; vertical-align: middle; }
.es-area-title { display: flex; align-items: center; gap: var(--es-s3); }

/* Dimensiones de un objetivo: a, b, c. */
.es-dims { display: flex; flex-direction: column; gap: 6px; counter-reset: es-dim; }
.es-dims > li { position: relative; padding-left: 28px; counter-increment: es-dim; line-height: 1.5; }
.es-dims > li::before { content: counter(es-dim, lower-alpha) ")"; position: absolute; left: 0; top: 0; width: 22px; font-weight: 500; color: var(--es-blue); font-variant-numeric: tabular-nums; }

/* Código de asignatura o de curso. */
.es-chip--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; background: var(--es-panel); color: var(--es-ink); }

/* Ficha en dos columnas de pares clave-valor. */
.es-kv--wide { grid-template-columns: 180px minmax(0, 1fr); }

/* ------------------------------------------------------------------ */
/* 11. Formularios (propios y WPForms armonizado)                      */
/* ------------------------------------------------------------------ */
.es-field { display: flex; flex-direction: column; }
.es-field > label, .es-label { display: block; font-weight: 500; color: var(--es-ink); margin-bottom: 6px; font-size: 14px; line-height: 1.5; }
.es-req { color: var(--es-orange-dark); }
.es-opt { color: var(--es-muted); font-weight: 400; }
.es-hint { font-size: var(--es-fs-small); color: var(--es-muted); line-height: 1.6; margin-top: 6px; }
.es-error { font-size: var(--es-fs-small); color: var(--es-red); line-height: 1.6; margin-top: 6px; }
.es .es-input, .es .es-select, .es .es-textarea { width: 100%; min-height: var(--es-control); border: 1px solid var(--es-border); border-radius: var(--es-radius); background: var(--es-white); padding: 0 16px; font-family: var(--es-font); font-size: 16px; color: var(--es-ink); margin: 0; box-shadow: none; appearance: none; -webkit-appearance: none; }
.es .es-input::placeholder, .es .es-textarea::placeholder { color: var(--es-placeholder); opacity: 1; }
.es .es-input:focus, .es .es-select:focus, .es .es-textarea:focus { outline: none; border-color: var(--es-blue); box-shadow: 0 0 0 3px rgba(0, 120, 195, 0.2); }
.es .es-input.is-error, .es .es-select.is-error { border-color: var(--es-red); }
.es .es-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ea0a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.es .es-textarea { min-height: 120px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
.es .es-check, .es .es-radio { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--es-ink); cursor: pointer; line-height: 1.6; }
.es .es-check input, .es .es-radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; border: 1px solid var(--es-placeholder); background: var(--es-white); cursor: pointer; display: inline-grid; place-content: center; }
.es .es-check input { border-radius: 4px; }
.es .es-radio input { border-radius: 50%; }
.es .es-check input:checked { background: var(--es-blue); border-color: var(--es-blue); }
.es .es-check input:checked::before { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--es-white); border-bottom: 2.5px solid var(--es-white); transform: translateY(-1px) rotate(-45deg); }
.es .es-radio input:checked { border: 6px solid var(--es-blue); }
.es-form { display: flex; flex-direction: column; gap: var(--es-s4); }
.es-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--es-s4); }
.es-form__span { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ */
/* 12. Contacto y pie                                                  */
/* ------------------------------------------------------------------ */
.es-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--es-s6); }
.es-contact__block { display: flex; flex-direction: column; gap: var(--es-s2); }
.es-contact__block h3 { font-size: var(--es-fs-h4); }
.es-contact address { font-style: normal; line-height: 1.7; }
.es-contact__line { display: flex; align-items: center; gap: var(--es-s2); }
.es-contact__line .es-icon { color: var(--es-blue); font-size: 16px; }
.es-map { aspect-ratio: 16 / 7; background: var(--es-panel); border-radius: var(--es-radius-lg); overflow: hidden; }
.es-map iframe { width: 100%; height: 100%; border: 0; }

.es-footer { background: var(--es-bg); border-top: 1px solid var(--es-border); color: var(--es-text); padding: var(--es-s7) 0 var(--es-s5); font-size: 14px; }
.es .es-footer a { color: var(--es-text); }
.es .es-footer a:hover { color: var(--es-blue); }
.es-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--es-s6); }
.es-footer h4 { color: var(--es-ink); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--es-s3); }
.es-footer ul { display: flex; flex-direction: column; gap: var(--es-s2); }
.es-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--es-s3); border-top: 1px solid var(--es-border); margin-top: var(--es-s6); padding-top: var(--es-s4); font-size: 13px; color: var(--es-muted); }
.es-footer__social { display: flex; gap: var(--es-s3); }
.es-footer__social a { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--es-border-strong); align-items: center; justify-content: center; color: var(--es-blue); }

/* ------------------------------------------------------------------ */
/* 13. Prosa: páginas informativas largas                               */
/* ------------------------------------------------------------------ */
.es-prose { max-width: var(--es-max-prose); font-size: var(--es-fs-body); line-height: 1.7; }
/* Con .es delante para ganar a `.es p { margin: 0 }`. */
.es .es-prose > * + * { margin-top: var(--es-s4); }
.es .es-prose > h2 { margin-top: var(--es-s6); }
.es .es-prose > h3 { margin-top: var(--es-s5); }
.es .es-prose > h4 { margin-top: var(--es-s4); }
.es .es-prose > h2 + *, .es .es-prose > h3 + *, .es .es-prose > h4 + * { margin-top: var(--es-s3); }
.es-prose ul, .es-prose ol { padding-left: 0; display: flex; flex-direction: column; gap: var(--es-s2); }
.es-prose ul > li { position: relative; padding-left: 20px; }
.es-prose ul > li::before { content: "–"; position: absolute; left: 2px; top: 0; color: var(--es-muted); }
.es-prose ol { counter-reset: es-p; }
.es-prose ol > li { position: relative; padding-left: 32px; counter-increment: es-p; }
.es-prose ol > li::before { content: counter(es-p) "."; position: absolute; left: 0; font-weight: 500; color: var(--es-ink); }
.es-prose a { text-decoration: underline; text-underline-offset: 2px; }
.es .es-prose blockquote { border-left: 3px solid var(--es-yellow); padding-left: var(--es-s5); margin: var(--es-s5) 0; color: var(--es-ink); font-size: var(--es-fs-lead); }
.es-prose hr { border: 0; border-top: 1px solid var(--es-border); margin: var(--es-s6) 0; }
.es-prose img { border-radius: var(--es-radius-lg); }
.es-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.es-prose th, .es-prose td { padding: 10px 14px; border-top: 1px solid var(--es-border); text-align: left; }
.es-prose thead th { background: var(--es-panel); border-top: 0; }
.es-prose .es-lead { font-size: var(--es-fs-lead); }

/* ------------------------------------------------------------------ */
/* 14. Chrome de la guía de estilo (solo en la página de la guía)      */
/* ------------------------------------------------------------------ */
.es-sg-toc { columns: 3; column-gap: var(--es-s5); font-size: 14px; }
.es-sg-toc li { break-inside: avoid; padding: 2px 0; }
.es-sg-section { margin-top: var(--es-s7); scroll-margin-top: 100px; }
.es-sg-section > h2 { font-size: 24px; padding-bottom: var(--es-s3); border-bottom: 1px solid var(--es-border); margin-bottom: var(--es-s5); }
.es-sg-pattern { margin-top: var(--es-s6); scroll-margin-top: 100px; }
.es-sg-pattern > h3 { font-size: 18px; }
.es-sg-when { font-size: 14px; color: var(--es-muted); margin: var(--es-s1) 0 var(--es-s4); max-width: var(--es-max-prose); }
.es-sg-preview { border: 1px dashed var(--es-border-strong); border-radius: var(--es-radius-lg); padding: var(--es-s5); background: var(--es-white); }
.es-sg-preview--panel { background: var(--es-bg); }
.es-sg-code { background: var(--es-ink); color: var(--es-border); border-radius: var(--es-radius); padding: var(--es-s4) 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; margin: var(--es-s3) 0 0; max-height: 420px; }
.es-sg-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--es-s3); }
.es-sg-swatch { border: 1px solid var(--es-border); border-radius: var(--es-radius); overflow: hidden; background: var(--es-white); font-size: 13px; }
.es-sg-swatch i { display: block; height: 56px; }
.es-sg-swatch div { padding: 8px 10px; line-height: 1.5; }
.es-sg-swatch code { color: var(--es-muted); overflow-wrap: anywhere; }
.es-sg-type { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--es-s3) var(--es-s5); align-items: baseline; }
.es-sg-type code { font-size: 12px; color: var(--es-muted); }
.es-sg-do, .es-sg-dont { border-radius: var(--es-radius); padding: var(--es-s4); font-size: 14px; line-height: 1.6; }
.es-sg-do { background: var(--es-teal-soft); }
.es-sg-dont { background: var(--es-red-soft); }
.es-sg-do strong, .es-sg-dont strong { display: block; margin-bottom: 4px; }
.es-sg-space { display: flex; align-items: flex-end; gap: var(--es-s3); }
.es-sg-space > div { background: var(--es-blue-soft); border: 1px solid var(--es-blue); border-radius: 3px; display: flex; align-items: flex-end; justify-content: center; font-size: 11px; color: var(--es-blue); }
.es-sg-inv { font-size: 13px; }
.es-sg-inv td, .es-sg-inv th { vertical-align: top; }

/* ------------------------------------------------------------------ */
/* 15. Armonizadores para elementos ya existentes (opt-in)             */
/* ------------------------------------------------------------------ */
body.es-armonizado .fusion-body .fusion-button, body.es-armonizado .fusion-body .fusion-button.button-default { background: var(--es-blue); color: var(--es-white); border-color: var(--es-blue); border-radius: var(--es-radius); font-family: var(--es-font-ui); font-weight: 600; text-shadow: none; box-shadow: none; }
body.es-armonizado .fusion-body .fusion-button:hover { background: var(--es-blue-dark); border-color: var(--es-blue-dark); color: var(--es-white); }
body.es-armonizado .fusion-body .fusion-button .fusion-button-text, body.es-armonizado .fusion-body .fusion-button i { color: var(--es-white); }
body.es-armonizado .fusion-body .fusion-alert { border-radius: var(--es-radius-lg); border-width: 0; }
body.es-armonizado .fusion-body .fusion-alert.success { background: var(--es-teal-soft); color: var(--es-teal-text); }
body.es-armonizado .fusion-body .fusion-alert.notice, body.es-armonizado .fusion-body .fusion-alert.general { background: var(--es-blue-soft); color: var(--es-ink); }
body.es-armonizado .fusion-body .fusion-alert.warning { background: var(--es-orange-soft); color: var(--es-orange-text); }
body.es-armonizado .fusion-body .table-1 table, body.es-armonizado .fusion-body .table-2 table, body.es-armonizado .post-content table { border-collapse: collapse; width: 100%; }
body.es-armonizado .post-content table th, body.es-armonizado .post-content table td { border: 0; border-top: 1px solid var(--es-border); padding: 12px 20px; text-align: left; }
body.es-armonizado .post-content table thead th { background: var(--es-panel); color: var(--es-ink); font-weight: 600; border-top: 0; }
body.es-armonizado .post-content table tbody tr:nth-child(even) td, body.es-armonizado .post-content table tbody tr:nth-child(even) th { background: var(--es-bg); }
body.es-armonizado .fusion-body .fusion-accordian .panel-title a { font-weight: 500; color: var(--es-ink); }
body.es-armonizado .fusion-body .fusion-accordian .fa-fusion-box { background: var(--es-blue-soft); color: var(--es-blue); }
body.es-armonizado .fusion-body .fusion-checklist .icon-wrapper { background: var(--es-blue-soft); color: var(--es-blue); }
body.es-armonizado .fusion-body .fusion-breadcrumbs, body.es-armonizado .fusion-body .fusion-breadcrumbs a { font-size: 13px; color: var(--es-muted); }
body.es-armonizado .fusion-body .fusion-page-title-bar h1, body.es-armonizado .fusion-body .fusion-title h1, body.es-armonizado .fusion-body .fusion-title h2, body.es-armonizado .fusion-body .fusion-title h3, body.es-armonizado .fusion-body .fusion-title h4, body.es-armonizado .fusion-body .fusion-title h5, body.es-armonizado .fusion-body .fusion-title h6 { font-weight: 600; }
body.es-armonizado .wpforms-container .wpforms-form input[type=text], body.es-armonizado .wpforms-container .wpforms-form input[type=email], body.es-armonizado .wpforms-container .wpforms-form input[type=tel], body.es-armonizado .wpforms-container .wpforms-form input[type=number], body.es-armonizado .wpforms-container .wpforms-form input[type=date], body.es-armonizado .wpforms-container .wpforms-form select, body.es-armonizado .wpforms-container .wpforms-form textarea { min-height: var(--es-control); border: 1px solid var(--es-border); border-radius: var(--es-radius); padding: 0 16px; font-family: var(--es-font); font-size: 16px; color: var(--es-ink); background: var(--es-white); box-shadow: none; }
body.es-armonizado .wpforms-container .wpforms-form textarea { padding: 12px 16px; }
body.es-armonizado .wpforms-container .wpforms-form input:focus, body.es-armonizado .wpforms-container .wpforms-form select:focus, body.es-armonizado .wpforms-container .wpforms-form textarea:focus { border-color: var(--es-blue); box-shadow: 0 0 0 3px rgba(0, 120, 195, 0.2); outline: none; }
body.es-armonizado .wpforms-container .wpforms-form .wpforms-field-label { font-weight: 500; color: var(--es-ink); font-size: 14px; }
body.es-armonizado .wpforms-container .wpforms-form .wpforms-field-sublabel, body.es-armonizado .wpforms-container .wpforms-form .wpforms-field-description { font-size: 13px; color: var(--es-muted); }
body.es-armonizado .wpforms-container .wpforms-form .wpforms-required-label { color: var(--es-orange-dark); }
body.es-armonizado .wpforms-container .wpforms-form button[type=submit], body.es-armonizado .wpforms-container .wpforms-form .wpforms-submit { background: var(--es-blue); color: var(--es-white); border: 0; border-radius: var(--es-radius); min-height: var(--es-control); padding: 8px 28px; font-family: var(--es-font-ui); font-weight: 600; font-size: 14px; }
body.es-armonizado .wpforms-container .wpforms-form button[type=submit]:hover, body.es-armonizado .wpforms-container .wpforms-form .wpforms-submit:hover { background: var(--es-blue-dark); }

/* ------------------------------------------------------------------ */
/* 16. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.es-grid--4, .es-grid--5 { --es-cols: 2; }
	.es-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	:root { --es-fs-display: 30px; --es-fs-h1: 26px; --es-fs-h2: 19px; --es-fs-h3: 16px; --es-section: 32px; }
	.es-grid, .es-grid--2, .es-grid--3 { --es-cols: 1; }
	.es-grid--4, .es-grid--5 { --es-cols: 2; }
	.es-grid--sidebar, .es-grid--wide-left, .es-split, .es-split--text-narrow, .es-contact, .es-banner { grid-template-columns: 1fr; }
	.es-hero { grid-template-columns: minmax(0, 1fr); }
	.es-hero__media { order: -1; min-height: 0; width: 100%; aspect-ratio: 16 / 9; }
	.es-hero--media-left .es-hero__media { order: -1; }
	.es-hero__body { padding: var(--es-s5); }
	.es-section--panel { padding-left: var(--es-s4); padding-right: var(--es-s4); }
	.es-hero__body .es-lead { max-width: none; }
	.es-hero--full .es-hero__body { padding: var(--es-s6) var(--es-s5); }
	.es-banner__media { order: -1; min-height: 0; width: 100%; aspect-ratio: 16 / 9; }
	.es-toc { grid-template-columns: 1fr; gap: var(--es-s3); }
	.es-toc ol { grid-template-columns: 1fr; }
	.es-parciales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.es-bandas { grid-template-columns: 1fr; }
	.es-step { padding: var(--es-s4) 0; }
	.es-checklist--cols { grid-template-columns: 1fr; }
	.es-kv { grid-template-columns: 1fr; gap: 2px 0; }
	.es-kv dd { margin-bottom: var(--es-s2); }
	.es-timeline { grid-template-columns: 1fr; gap: var(--es-s3); }
	.es-timeline > li { padding-top: 0; padding-left: 44px; }
	.es-timeline > li::after { top: 32px; left: 15px; right: auto; bottom: -16px; width: 2px; height: auto; }
	.es-form__row { grid-template-columns: 1fr; }
	.es-sg-toc { columns: 1; }
	.es-sg-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.es-sg-type { grid-template-columns: 1fr; }
	.es-figure__caption { font-size: 16px; white-space: normal; text-align: center; }
	.es-logos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.es .es-btn { width: 100%; }
	.es-actions { flex-direction: column; align-items: stretch; }
	.es-hero__actions { flex-direction: column; }
	.es-cta-tiles { grid-template-columns: 1fr; }
	.es-cta-tile { min-height: 60px; font-size: 15px; }
	.es-parciales { grid-template-columns: 1fr; }
	.es-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.es-grid--4 { --es-cols: 1; }
	.es-card__body { padding: var(--es-s4); }
	.es-event { grid-template-columns: 56px minmax(0, 1fr); }
	.es-footer__cols { grid-template-columns: 1fr; }
	.es-footer__bottom { flex-direction: column; }
	.es-table th, .es-table td { padding: 10px 14px; }
	.es-acc__body { padding-left: 0; }
}

/* ------------------------------------------------------------------ */
/* 17. Impresión                                                       */
/* ------------------------------------------------------------------ */
@media print {
	.es .es-btn, .es-actions, .es-footer, .es-cta-tiles { display: none !important; }
	.es-hero, .es-banner--blue, .es-section--blue { background: var(--es-white) !important; color: var(--es-ink) !important; border: 1px solid var(--es-border); box-shadow: none; }
	.es-hero .es-display, .es-banner h2, .es-banner h3 { color: var(--es-ink) !important; }
	.es-card { break-inside: avoid; box-shadow: none; }
}