/* ============================================================================
 * estilos.css — Los cuatro estilos de la plantilla maestra (2.3).
 * config.js pone <html data-estilo="nitido|cristal|relieve|noche"> y las
 * variables --e-* que arma PlantillaMaestra.tema() con UN color de marca, la
 * tipografía, la forma y el movimiento elegidos en el Estudio. Este archivo
 * traduce esas variables al sitio. Sin data-estilo, el sitio se ve como antes.
 * ========================================================================== */

/* ---------- 1 · Puente: variables del sitio ← variables del estilo ---------- */
:root[data-estilo] {
  --color-primario: var(--e-marca); --color-secundario: var(--e-texto); --color-acento: var(--e-acento); --color-terciario: var(--e-acento);
  --color-fondo: var(--e-fondo); --color-texto: var(--e-texto); --color-texto-suave: var(--e-texto-2); --color-borde: var(--e-borde);
  --color-texto-cabecera: var(--e-texto);
  --radio: var(--e-radio); --sombra: var(--e-sombra); --sombra-fuerte: var(--e-sombra-g);
  --degradado-marca: var(--e-marca);
  --fuente-titulos: var(--e-f-titulos); --fuente-texto: var(--e-f-texto);
  --transicion: var(--e-dur) var(--e-curva);
  --ancho-maximo: 1200px;
  color-scheme: light;
}
:root[data-estilo="cristal"], :root[data-estilo="noche"] { color-scheme: dark; }
:root[data-estilo] body { background: var(--e-fondo); color: var(--e-texto); font-family: var(--e-f-texto); letter-spacing: -0.005em; }
:root[data-estilo] h1, :root[data-estilo] h2, :root[data-estilo] h3, :root[data-estilo] h4 {
  font-family: var(--e-f-titulos); font-weight: var(--e-peso-titulo); letter-spacing: var(--e-tracking); color: var(--e-texto); text-wrap: balance;
}
:root[data-estilo] h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.08; margin: 0 0 .5em; }
:root[data-estilo] h3 { font-size: 1.12rem; line-height: 1.3; }
:root[data-estilo] p { text-wrap: pretty; }
:root[data-estilo] a { color: var(--e-enlace); }
:root[data-estilo] :focus-visible { outline: 2px solid var(--e-enlace); outline-offset: 3px; border-radius: 6px; }
:root[data-estilo] section { padding: clamp(56px, 8vw, 104px) 0; }
:root[data-estilo] .seccion-encabezado { text-align: left; max-width: 760px; margin: 0 0 clamp(28px, 4vw, 48px); }
:root[data-estilo] .seccion-encabezado p { color: var(--e-texto-2); font-size: 1.08rem; max-width: 60ch; }
:root[data-estilo] .seccion-pie { margin-top: 28px; color: var(--e-texto-2); display: flex; align-items: center; gap: 8px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 24px; height: 24px; flex: none; }
.ico-chico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.enlace-flecha .ico-chico { transition: transform var(--e-dur, .3s) var(--e-curva, ease); }
.enlace-flecha:hover .ico-chico { transform: translateX(3px); }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; vertical-align: 2px; background: var(--e-marca-suave, #eef); color: var(--e-enlace, inherit); }

/* ---------- 2 · Cabecera y navegación con píldora que se desliza ---------- */
:root[data-estilo] .cabecera { background: color-mix(in srgb, var(--e-fondo) 78%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--e-borde) 70%, transparent); }
:root[data-estilo] .cabecera.con-sombra { box-shadow: none; border-bottom-color: var(--e-borde); }
:root[data-estilo] .logo { color: var(--e-texto); font-family: var(--e-f-titulos); font-weight: var(--e-peso-titulo); letter-spacing: var(--e-tracking); }
@media (min-width: 1121px) {
  :root[data-estilo] .menu-principal { position: relative; gap: 0; padding: 4px; flex-shrink: 0; border-radius: 999px; background: color-mix(in srgb, var(--e-superficie-2) 85%, transparent); }
  :root[data-estilo] .menu-principal > li > a { display: block; padding: 8px 11px; border-radius: 999px; font-size: .875rem; white-space: nowrap; color: var(--e-texto-2); position: relative; z-index: 1; transition: color var(--e-dur) var(--e-curva); }
  :root[data-estilo] .menu-principal > li > a.activo, :root[data-estilo] .menu-principal > li > a:hover { color: var(--e-texto); }
  :root[data-estilo] .menu-principal a::after { display: none; }
  /* Cada ítem en una sola línea: el enlace y su ▾ juntos (el submenú es flotante en escritorio). */
  :root[data-estilo] .menu-principal > li { flex-wrap: nowrap; flex-shrink: 0; }
  :root[data-estilo] .menu-principal > li > .abrir-submenu { margin-left: -8px; margin-right: 4px; position: relative; z-index: 1; color: var(--e-texto-2); }
  :root[data-estilo] .cabecera .logo { white-space: nowrap; flex-shrink: 0; }
  :root[data-estilo] .menu-pildora { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--e-superficie); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px -6px rgba(0,0,0,.18); z-index: 0; opacity: 0; pointer-events: none;
    transition: left var(--pil-l, .36s) cubic-bezier(.2,.8,.2,1), width var(--pil-w, .55s) cubic-bezier(.65,0,.35,1), opacity .2s; }
  :root[data-estilo] .menu-pildora.visible { opacity: 1; }
  /* Muchas páginas en el menú: plantilla-ui.js lo nota (la cabecera no cabe) y lo compacta antes de desbordar. */
  :root[data-estilo][data-menu="compacto"] .menu-principal > li > a { padding: 7px 8px; font-size: .82rem; }
  :root[data-estilo][data-menu="compacto"] #cta-cabecera { padding: 6px 12px; }
}
:root[data-estilo] .btn-cta-cabecera { padding: 10px 18px; }

/* ---------- 3 · Botones ---------- */
:root[data-estilo] .btn { border-radius: var(--e-radio-boton); padding: 13px 22px; font-weight: 600; letter-spacing: -0.005em; border-width: 1px; transition: transform var(--e-dur) var(--e-curva), box-shadow var(--e-dur) var(--e-curva), background var(--e-dur) var(--e-curva); }
:root[data-estilo] .btn::before { display: none; }
:root[data-estilo] .btn:hover { transform: translateY(calc(-1px * var(--e-mov))); }
:root[data-estilo] .btn:active { transform: scale(.98); }
:root[data-estilo] .btn-primario { background: var(--e-marca); color: var(--e-marca-texto); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12); }
:root[data-estilo] .btn-primario:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px var(--e-marca); }
:root[data-estilo] .btn-secundario { background: var(--e-superficie); color: var(--e-texto); border-color: var(--e-borde); }
:root[data-estilo] .btn-secundario:hover { background: var(--e-superficie-2); color: var(--e-texto); }
:root[data-estilo] .btn-acento { background: var(--e-acento); color: var(--e-acento-texto); box-shadow: none; }
:root[data-estilo] .btn-chico { padding: 9px 14px; font-size: .88rem; }

/* ---------- 4 · Portada (hero) con vitrina ---------- */
:root[data-estilo] .seccion-hero { background: none; padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 7vw, 96px); }
:root[data-estilo] .seccion-hero .fondo-decorativo { display: none; }
:root[data-estilo] .seccion-hero .contenedor { grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); }
:root[data-estilo] .seccion-hero h1 { background: none; color: var(--e-texto); -webkit-text-fill-color: currentColor; font-size: clamp(2.5rem, 6.2vw, 5.1rem); line-height: .98; margin: 0 0 .35em; max-width: 14ch; }
:root[data-estilo] .seccion-hero .subtitulo { font-size: clamp(1.06rem, 1.5vw, 1.28rem); color: var(--e-texto-2); max-width: 44ch; }
:root[data-estilo] .hero-insignia { text-transform: none; letter-spacing: 0; font-weight: 600; background: var(--e-marca-suave); color: var(--e-enlace); }
:root[data-estilo] .hero-bullets li::before { content: ''; width: 16px; height: 16px; top: 3px; border-radius: 50%; background: var(--e-marca-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
:root[data-estilo] .seccion-hero .medio img, :root[data-estilo] .seccion-hero .medio video, :root[data-estilo] .seccion-hero .medio iframe { border-radius: var(--e-radio-g); box-shadow: var(--e-sombra-g); }
@media (max-width: 900px) { :root[data-estilo] .seccion-hero .contenedor { grid-template-columns: 1fr; } :root[data-estilo] .seccion-hero .medio { order: 2; } }

/* La vitrina: tres piezas del catálogo que se abren en abanico una sola vez al cargar. */
.vitrina { position: relative; height: clamp(300px, 34vw, 420px); }
.vitrina-pieza { position: absolute; left: 50%; top: 50%; width: min(78%, 300px); padding: 18px 18px 20px; border-radius: var(--e-radio-g, 22px); background: var(--e-superficie, #fff); border: 1px solid var(--e-borde, #e5e5e5); box-shadow: var(--e-sombra-g); display: grid; gap: 6px;
  transform: translate(-50%, -50%) rotate(calc((var(--k) - 1) * 7deg)) translate(calc((var(--k) - 1) * 46%), calc((1 - var(--k)) * 4%)); animation: abanico calc(var(--e-dur, .3s) * 2.4) var(--e-curva, ease) both; animation-delay: calc(var(--k) * 90ms + 120ms); }
.vitrina-pieza:nth-child(2) { z-index: 2; }
.vitrina-pieza img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--e-radio-g, 22px) - 8px); }
.vitrina-sigla { display: grid; place-items: center; aspect-ratio: 4/3; border-radius: calc(var(--e-radio-g, 22px) - 8px); font: 700 2.2rem/1 var(--e-f-titulos); letter-spacing: -0.04em; color: var(--e-marca-texto, #fff);
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--e-marca) 70%, #fff) 0%, var(--e-marca) 55%, color-mix(in srgb, var(--e-marca) 70%, #000) 100%); }
.vitrina-pieza:nth-child(3) .vitrina-sigla { background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--e-acento) 70%, #fff), var(--e-acento)); color: var(--e-acento-texto, #111); }
.vitrina-pieza b { font: var(--e-peso-titulo, 650) 1rem/1.25 var(--e-f-titulos); letter-spacing: -0.01em; color: var(--e-texto); }
.vitrina-precio { font-variant-numeric: tabular-nums; color: var(--e-texto-2); font-size: .92rem; }
.vitrina-vacia span { position: absolute; inset: 15% 20%; border-radius: var(--e-radio-g); background: var(--e-superficie-2); box-shadow: var(--e-sombra); }
@keyframes abanico { from { transform: translate(-50%, -46%) rotate(0deg); opacity: 0; } }
@media (max-width: 900px) { .vitrina { height: 300px; } .vitrina-pieza { width: min(62%, 240px); } }
@media (max-width: 480px) { .vitrina { height: 250px; } .vitrina-pieza { width: 58%; padding: 12px; } .vitrina-pieza b { font-size: .86rem; } }

/* ---------- 5 · Tarjetas, planes, testimonios, preguntas ---------- */
:root[data-estilo] .tarjeta, :root[data-estilo] .tarjeta-plan, :root[data-estilo] .testimonio, :root[data-estilo] .calculadora, :root[data-estilo] .paso-proceso {
  background: var(--e-superficie); border: 1px solid var(--e-borde); border-radius: var(--e-radio-g); box-shadow: var(--e-sombra); color: var(--e-texto);
  backdrop-filter: blur(var(--e-desenfoque)); -webkit-backdrop-filter: blur(var(--e-desenfoque));
}
:root[data-estilo] .tarjeta::before { display: none; }
:root[data-estilo] .tarjeta:hover { transform: translateY(calc(-3px * var(--e-mov))); box-shadow: var(--e-sombra-g); border-color: var(--e-borde); }
:root[data-estilo] .tarjeta p, :root[data-estilo] .testimonio p, :root[data-estilo] .paso-proceso p { color: var(--e-texto-2); }
:root[data-estilo] .tarjeta-plan.destacado { outline: 2px solid var(--e-marca); outline-offset: -2px; }
:root[data-estilo] .tarjeta-plan-badge { background: var(--e-marca); color: var(--e-marca-texto); }
:root[data-estilo] .tarjeta-plan-precio { font-family: var(--e-f-titulos); letter-spacing: var(--e-tracking); font-variant-numeric: tabular-nums; }
:root[data-estilo] .paso-numero { background: var(--e-marca-suave); color: var(--e-enlace); font-family: var(--e-f-titulos); }
:root[data-estilo] .seccion-cta { background: var(--e-marca); color: var(--e-marca-texto); border-radius: var(--e-radio-g); padding: clamp(36px, 6vw, 72px); text-align: left; box-shadow: var(--e-sombra-g); }
:root[data-estilo] .seccion-cta h2, :root[data-estilo] .seccion-cta p { color: var(--e-marca-texto); }
:root[data-estilo] .seccion-cta .btn-acento { background: var(--e-marca-texto); color: var(--e-marca); }
:root[data-estilo] .faq details { background: var(--e-superficie); border: 1px solid var(--e-borde); border-radius: var(--e-radio); margin-bottom: 10px; padding: 0 20px; }
:root[data-estilo] .faq summary { padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
:root[data-estilo] .faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--e-texto-2); transition: transform var(--e-dur) var(--e-curva); }
:root[data-estilo] .faq details[open] summary::after { transform: rotate(45deg); }
:root[data-estilo] .faq details p { color: var(--e-texto-2); padding-bottom: 18px; margin: 0; }
:root[data-estilo] .franja-confianza { padding: 28px 0; border-block: 1px solid var(--e-borde); background: none; }
:root[data-estilo] .estadistica-numero { font-family: var(--e-f-titulos); letter-spacing: var(--e-tracking); color: var(--e-texto); font-variant-numeric: tabular-nums; }
:root[data-estilo] .estadistica-etiqueta { color: var(--e-texto-2); }

/* ---------- 6 · Formularios ---------- */
:root[data-estilo] .campo input, :root[data-estilo] .campo select, :root[data-estilo] .campo textarea, :root[data-estilo] .boletin-form input[type=email] {
  background: var(--e-superficie); color: var(--e-texto); border: 1px solid var(--e-borde); border-radius: var(--e-radio); padding: 13px 14px; font: inherit;
  transition: border-color var(--e-dur) var(--e-curva), box-shadow var(--e-dur) var(--e-curva);
}
:root[data-estilo] .campo input:focus, :root[data-estilo] .campo select:focus, :root[data-estilo] .campo textarea:focus, :root[data-estilo] .boletin-form input:focus { outline: none; border-color: var(--e-marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-marca) 22%, transparent); }
:root[data-estilo] .formulario-pasos { background: var(--e-superficie); border: 1px solid var(--e-borde); border-radius: var(--e-radio-g); padding: clamp(20px, 4vw, 40px); box-shadow: var(--e-sombra); backdrop-filter: blur(var(--e-desenfoque)); }
:root[data-estilo] .fp-riel { background: var(--e-superficie-2); }
:root[data-estilo] .fp-riel i { background: var(--e-marca); }

/* ---------- 7 · Secciones nuevas ---------- */
/* Mosaico: piezas de distinto tamaño. */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.pieza { position: relative; padding: 24px; border-radius: var(--e-radio-g, 22px); background: var(--e-superficie, #fff); border: 1px solid var(--e-borde, #eee); box-shadow: var(--e-sombra); display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  backdrop-filter: blur(var(--e-desenfoque, 0)); -webkit-backdrop-filter: blur(var(--e-desenfoque, 0)); }
.pieza h3 { margin: 0; }
.pieza p { margin: 0; color: var(--e-texto-2); }
.pieza-ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--e-marca-suave); color: var(--e-enlace); margin-bottom: auto; }
.pieza-grande { grid-column: span 2; grid-row: span 2; background: var(--e-marca); color: var(--e-marca-texto); border-color: transparent; }
.pieza-grande h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.05; color: inherit; max-width: 16ch; }
:root[data-estilo] .pieza-grande h3 { color: var(--e-marca-texto); } /* sobre la marca, el texto de la marca (le gana al color de títulos del estilo) */
.pieza-grande p { color: inherit; opacity: .82; max-width: 36ch; }
.pieza-grande .pieza-ico { background: rgba(255,255,255,.16); color: inherit; }
.pieza-ancho { grid-column: span 2; }
@media (max-width: 820px) { .mosaico { grid-template-columns: 1fr 1fr; } .pieza-grande { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 480px) { .mosaico { grid-template-columns: 1fr; } .pieza-grande, .pieza-ancho { grid-column: span 1; } }

/* Destacados. */
.destacados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.destacado { border-radius: var(--e-radio-g); background: var(--e-superficie); border: 1px solid var(--e-borde); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--e-sombra); transition: transform var(--e-dur) var(--e-curva), box-shadow var(--e-dur) var(--e-curva); }
.destacado:hover { transform: translateY(calc(-3px * var(--e-mov, 1))); box-shadow: var(--e-sombra-g); }
.destacado img, .destacado-sin-foto { width: 100%; aspect-ratio: 1; object-fit: cover; }
.destacado-sin-foto { display: grid; place-items: center; background: linear-gradient(160deg, var(--e-marca-suave), var(--e-superficie-2)); }
.destacado-sin-foto span { font: 700 2.4rem/1 var(--e-f-titulos); letter-spacing: -0.05em; color: var(--e-enlace); opacity: .55; }
.destacado-cuerpo { padding: 16px 16px 18px; display: grid; gap: 6px; }
.destacado-cuerpo h3 { margin: 0; font-size: 1rem; }
.destacado-precio { margin: 0 0 6px; font-variant-numeric: tabular-nums; color: var(--e-texto-2); }
.destacado .btn { justify-self: start; }

/* Píldoras con indicador que se desliza (carta, trabajos). */
.pildoras { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--e-superficie-2, #f1f1f1); margin-bottom: 22px; max-width: 100%; }
.pildora { position: relative; z-index: 1; border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 600 .9rem/1 var(--e-f-texto); color: var(--e-texto-2); cursor: pointer; min-height: 40px; transition: color var(--e-dur) var(--e-curva); }
.pildora.activa { color: var(--e-texto); }
.pildora-indicador { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--e-superficie, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px rgba(0,0,0,.2); transition: left .36s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.65,0,.35,1); }

/* Carta. */
.carta-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 40px; }
.plato { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px dashed var(--e-borde); }
.plato h3 { margin: 0 0 4px; font-size: 1.05rem; }
.plato p { margin: 0; color: var(--e-texto-2); font-size: .94rem; }
.plato-precio { font: var(--e-peso-titulo) 1.05rem/1 var(--e-f-titulos); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) { .carta-lista { grid-template-columns: 1fr; } }

/* Trabajos. */
.galeria-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trabajo { margin: 0; position: relative; border-radius: var(--e-radio-g); overflow: hidden; background: var(--e-superficie); border: 1px solid var(--e-borde); min-height: 260px; display: flex; }
.trabajo > a { display: flex; flex: 1; color: inherit; }
.trabajo-ancho { grid-column: span 2; }
.trabajo img, .trabajo-color { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--e-dur) * 2) var(--e-curva); }
.trabajo:hover img, .trabajo:hover .trabajo-color { transform: scale(calc(1 + .03 * var(--e-mov, 1))); }
.trabajo-color { display: grid; place-items: center; }
.trabajo-color span { font: 700 clamp(3rem, 8vw, 6rem)/1 var(--e-f-titulos); letter-spacing: -0.06em; opacity: .28; color: #fff; }
.tono-marca { background: radial-gradient(140% 120% at 10% 0%, color-mix(in srgb, var(--e-marca) 65%, #fff), var(--e-marca) 60%, color-mix(in srgb, var(--e-marca) 60%, #000)); }
.tono-acento { background: radial-gradient(140% 120% at 90% 0%, color-mix(in srgb, var(--e-acento) 60%, #fff), var(--e-acento) 55%, color-mix(in srgb, var(--e-acento) 55%, #000)); }
.trabajo figcaption { position: relative; margin-top: auto; width: 100%; padding: 70px 22px 20px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)); }
.trabajo figcaption h3 { color: #fff; margin: 4px 0; }
.trabajo figcaption p { color: rgba(255,255,255,.85); margin: 0; font-size: .92rem; }
.trabajo-cat { font-size: .78rem; font-weight: 600; opacity: .9; }
@media (max-width: 820px) { .galeria-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .galeria-rejilla { grid-template-columns: 1fr; } .trabajo-ancho { grid-column: span 1; } }

/* Logos. */
.seccion-logos { padding: 40px 0 !important; }
.logos-titulo { color: var(--e-texto-2); font-size: .95rem; margin: 0 0 18px; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; }
.logos img { height: 34px; width: auto; filter: grayscale(1); opacity: .7; }
.logos span { font: 700 1.2rem/1 var(--e-f-titulos); letter-spacing: -0.03em; color: var(--e-texto-2); opacity: .8; }

/* Equipo. */
.equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.persona { padding: 22px; border-radius: var(--e-radio-g); background: var(--e-superficie); border: 1px solid var(--e-borde); box-shadow: var(--e-sombra); }
.persona img, .persona-monograma { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.persona-monograma { display: grid; place-items: center; font: 700 1.4rem/1 var(--e-f-titulos); background: var(--e-marca-suave); color: var(--e-enlace); }
.persona h3 { margin: 0; }
.persona-cargo { margin: 2px 0 8px; color: var(--e-enlace); font-weight: 600; font-size: .9rem; }
.persona-bio { margin: 0; color: var(--e-texto-2); font-size: .94rem; }

/* Historia. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hito { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--e-borde); }
.hito-anio { font: var(--e-peso-titulo) clamp(1.6rem, 3vw, 2.4rem)/1 var(--e-f-titulos); letter-spacing: var(--e-tracking); color: var(--e-enlace); font-variant-numeric: tabular-nums; }
.hito h3 { margin: 0 0 4px; }
.hito p { margin: 0; color: var(--e-texto-2); }
@media (max-width: 520px) { .hito { grid-template-columns: 1fr; gap: 8px; } }

/* Video liviano. */
.video-portada { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; border-radius: var(--e-radio-g); overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--e-marca) 55%, var(--e-fondo)), var(--e-superficie-2)); color: #fff; box-shadow: var(--e-sombra-g); }
.video-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; box-shadow: 0 10px 40px rgba(0,0,0,.3); transition: transform var(--e-dur) var(--e-curva); }
.video-portada:hover .video-play { transform: scale(1.06); }
.video-titulo { position: absolute; left: 22px; bottom: 18px; font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.video-vacio { cursor: default; }
.video iframe, .video video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--e-radio-g); display: block; }

/* Dónde estamos. */
.sedes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sede { display: flex; gap: 14px; padding: 22px; border-radius: var(--e-radio-g); background: var(--e-superficie); border: 1px solid var(--e-borde); box-shadow: var(--e-sombra); }
.sede-ico { color: var(--e-enlace); }
.sede h3 { margin: 0 0 4px; }
.sede p { margin: 0 0 6px; color: var(--e-texto-2); }
.sede-dato { display: flex; gap: 8px; align-items: center; font-size: .92rem; }

/* Contacto directo. */
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.canal { display: grid; gap: 4px; padding: 22px; min-height: 120px; border-radius: var(--e-radio-g); background: var(--e-superficie); border: 1px solid var(--e-borde); color: var(--e-texto); box-shadow: var(--e-sombra); transition: transform var(--e-dur) var(--e-curva), box-shadow var(--e-dur) var(--e-curva); }
.canal:hover { transform: translateY(calc(-3px * var(--e-mov, 1))); box-shadow: var(--e-sombra-g); color: var(--e-texto); }
.canal .ico { color: var(--e-enlace); margin-bottom: 8px; }
.canal b { font-family: var(--e-f-titulos); font-size: 1.1rem; }
.canal span { color: var(--e-texto-2); font-size: .92rem; overflow-wrap: anywhere; }
.canal-wa { background: #0E7A3E; border-color: transparent; color: #fff; }
.canal-wa .ico, .canal-wa span, .canal-wa b, .canal-wa:hover { color: #fff; }
:root[data-estilo] .canal.canal-wa { background: #0E7A3E; } /* verde de WhatsApp oscurecido: el blanco se lee con 5,5:1 en todos los estilos */

/* Boletín. */
.boletin { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--e-radio-g); background: var(--e-superficie); border: 1px solid var(--e-borde); box-shadow: var(--e-sombra); }
.boletin h2 { margin-bottom: .3em; }
.boletin p { color: var(--e-texto-2); margin: 0; }
.boletin-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.boletin-acepto { grid-column: 1 / -1; font-size: .86rem; color: var(--e-texto-2); display: flex; gap: 8px; align-items: flex-start; }
.boletin-acepto input { margin-top: 3px; }
.boletin-estado { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
@media (max-width: 760px) { .boletin { grid-template-columns: 1fr; } .boletin-form { grid-template-columns: 1fr; } }

/* ============================================================================
 * 8 · Lo propio de cada estilo
 * ========================================================================== */
/* Nítido: aire, hairlines y profundidad sutil. */
:root[data-estilo="nitido"] .seccion-hero h1 { font-weight: 650; }

/* Cristal: luces de color en movimiento detrás de vidrio esmerilado. */
:root[data-estilo="cristal"] body::before { content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(38vmax 38vmax at 18% 22%, color-mix(in srgb, var(--e-luz-1) 60%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 82% 18%, color-mix(in srgb, var(--e-luz-2) 45%, transparent), transparent 70%),
    radial-gradient(34vmax 34vmax at 70% 88%, color-mix(in srgb, var(--e-luz-3) 45%, transparent), transparent 70%);
  filter: blur(30px); animation: luces calc(22s / max(var(--e-mov), .5)) ease-in-out infinite alternate; }
@keyframes luces { 50% { transform: translate(3vmax, -2vmax) rotate(8deg) scale(1.05); } 100% { transform: translate(-2vmax, 2vmax) rotate(-6deg); } }
:root[data-estilo="cristal"] .tarjeta, :root[data-estilo="cristal"] .pieza, :root[data-estilo="cristal"] .destacado, :root[data-estilo="cristal"] .persona, :root[data-estilo="cristal"] .sede, :root[data-estilo="cristal"] .canal,
:root[data-estilo="cristal"] .boletin, :root[data-estilo="cristal"] .vitrina-pieza, :root[data-estilo="cristal"] .formulario-pasos, :root[data-estilo="cristal"] .faq details {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--e-sombra); backdrop-filter: blur(var(--e-desenfoque)) saturate(1.4); -webkit-backdrop-filter: blur(var(--e-desenfoque)) saturate(1.4); }
:root[data-estilo="cristal"] .btn-primario { background: linear-gradient(110deg, var(--e-marca), var(--e-acento) 60%, var(--e-luz-3)); background-size: 200% 100%; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); transition: background-position .6s var(--e-curva), transform var(--e-dur) var(--e-curva); }
:root[data-estilo="cristal"] .btn-primario:hover { background-position: 100% 0; box-shadow: 0 10px 40px -10px var(--e-acento); }
:root[data-estilo="cristal"] .campo input:focus, :root[data-estilo="cristal"] .boletin-form input:focus { border-color: var(--e-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-acento) 30%, transparent), 0 0 24px -4px var(--e-acento); }
:root[data-estilo="cristal"] .pieza-grande { background: linear-gradient(140deg, color-mix(in srgb, var(--e-marca) 70%, transparent), color-mix(in srgb, var(--e-luz-3) 45%, transparent)); color: #fff; }
:root[data-estilo="cristal"] .menu-pildora { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
:root[data-estilo="cristal"] .seccion-cta { background: linear-gradient(130deg, color-mix(in srgb, var(--e-marca) 80%, #000), color-mix(in srgb, var(--e-luz-3) 55%, #000)); color: #fff; }
:root[data-estilo="cristal"] .seccion-cta h2, :root[data-estilo="cristal"] .seccion-cta p { color: #fff; }

/* Relieve: superficies en relieve y campos hundidos, como el material de la página. */
:root[data-estilo="relieve"] .tarjeta, :root[data-estilo="relieve"] .pieza, :root[data-estilo="relieve"] .destacado, :root[data-estilo="relieve"] .persona, :root[data-estilo="relieve"] .sede, :root[data-estilo="relieve"] .canal,
:root[data-estilo="relieve"] .boletin, :root[data-estilo="relieve"] .vitrina-pieza, :root[data-estilo="relieve"] .formulario-pasos, :root[data-estilo="relieve"] .faq details, :root[data-estilo="relieve"] .tarjeta-plan, :root[data-estilo="relieve"] .testimonio, :root[data-estilo="relieve"] .trabajo {
  border-color: transparent; box-shadow: var(--e-sombra); }
:root[data-estilo="relieve"] .campo input, :root[data-estilo="relieve"] .campo select, :root[data-estilo="relieve"] .campo textarea, :root[data-estilo="relieve"] .boletin-form input[type=email] { border-color: transparent; background: var(--e-fondo); box-shadow: var(--e-hundida); }
:root[data-estilo="relieve"] .campo input:focus, :root[data-estilo="relieve"] .boletin-form input:focus { box-shadow: var(--e-hundida), 0 0 0 3px color-mix(in srgb, var(--e-marca) 28%, transparent); }
:root[data-estilo="relieve"] .btn-secundario, :root[data-estilo="relieve"] .btn-primario { box-shadow: 6px 6px 14px #C3CBD8, -6px -6px 14px #FFFFFF; }
:root[data-estilo="relieve"] .btn-secundario { background: var(--e-fondo); border-color: transparent; color: var(--e-enlace); }
:root[data-estilo="relieve"] .btn:active { box-shadow: var(--e-hundida); transform: none; }
:root[data-estilo="relieve"] .pildoras, :root[data-estilo="relieve"] .menu-principal { background: var(--e-fondo); box-shadow: var(--e-hundida); }
:root[data-estilo="relieve"] .pildora-indicador, :root[data-estilo="relieve"] .menu-pildora { background: var(--e-fondo); box-shadow: 4px 4px 9px #C3CBD8, -4px -4px 9px #FFFFFF; }
:root[data-estilo="relieve"] .cabecera { background: color-mix(in srgb, var(--e-fondo) 88%, transparent); border-bottom-color: transparent; box-shadow: 0 8px 20px -14px #B8C1CF; }
:root[data-estilo="relieve"] .pieza-ico, :root[data-estilo="relieve"] .persona-monograma { background: var(--e-fondo); box-shadow: var(--e-hundida); }
:root[data-estilo="relieve"] .pieza-grande { background: var(--e-fondo); color: var(--e-texto); box-shadow: var(--e-sombra-g); }
:root[data-estilo="relieve"] .pieza-grande p { color: var(--e-texto-2); opacity: 1; }
:root[data-estilo="relieve"] .pieza-grande .pieza-ico { color: var(--e-enlace); }
:root[data-estilo="relieve"] .seccion-cta { background: var(--e-fondo); color: var(--e-texto); box-shadow: var(--e-sombra-g); }
:root[data-estilo="relieve"] .seccion-cta h2, :root[data-estilo="relieve"] .seccion-cta p { color: var(--e-texto); }
:root[data-estilo="relieve"] .seccion-cta .btn-acento { background: var(--e-marca); color: var(--e-marca-texto); }

/* Noche: fotografía de fondo con velo cálido; superficies de vidrio oscuro. */
:root[data-estilo="noche"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,16,21,.55), rgba(13,16,21,.92) 55%), var(--e-foto, radial-gradient(120% 80% at 70% 0%, #2B2F3A, #0D1015 70%)) center / cover no-repeat; }
:root[data-estilo="noche"] .tarjeta, :root[data-estilo="noche"] .pieza, :root[data-estilo="noche"] .destacado, :root[data-estilo="noche"] .persona, :root[data-estilo="noche"] .sede, :root[data-estilo="noche"] .canal,
:root[data-estilo="noche"] .boletin, :root[data-estilo="noche"] .vitrina-pieza, :root[data-estilo="noche"] .formulario-pasos, :root[data-estilo="noche"] .faq details {
  backdrop-filter: blur(var(--e-desenfoque)) saturate(1.2); -webkit-backdrop-filter: blur(var(--e-desenfoque)) saturate(1.2); }
:root[data-estilo="noche"] .menu-pildora { background: var(--e-marca); box-shadow: 0 6px 20px -8px var(--e-marca); }
:root[data-estilo="noche"] .menu-principal > li > a.activo { color: var(--e-marca-texto); }
:root[data-estilo="noche"] .pieza-grande { background: linear-gradient(150deg, color-mix(in srgb, var(--e-marca) 85%, #000), color-mix(in srgb, var(--e-marca) 45%, #000)); }

/* Estilos oscuros: el pie, el carrito y los menús desplegables también. */
:root[data-estilo="cristal"] .panel-carrito, :root[data-estilo="noche"] .panel-carrito,
:root[data-estilo="cristal"] .lista-idiomas, :root[data-estilo="noche"] .lista-idiomas { background: #12161F; color: var(--e-texto); border-color: var(--e-borde); }
@media (max-width: 1120px) {
  :root[data-estilo="cristal"] .menu-principal, :root[data-estilo="noche"] .menu-principal { background: #10141C; }
  :root[data-estilo="cristal"] .menu-principal a, :root[data-estilo="noche"] .menu-principal a { color: var(--e-texto); }
  :root[data-estilo] .menu-principal { background: var(--e-fondo); border-bottom-color: var(--e-borde); }
  :root[data-estilo] .menu-principal a { color: var(--e-texto); }
}
/* El pie: claro y sereno en los estilos claros (como un índice al final), oscuro en los oscuros.
   Todo su texto usa los tonos del estilo, que ya vienen con contraste AA sobre su fondo. */
:root[data-estilo] .pie { background: var(--e-superficie-2); border-top: 1px solid var(--e-borde); color: var(--e-texto-2); --color-texto-suave: var(--e-texto-2); }
:root[data-estilo="cristal"] .pie { background: rgba(0,0,0,.25); }
:root[data-estilo="noche"] .pie { background: rgba(0,0,0,.35); }
:root[data-estilo] .pie h5, :root[data-estilo] .pie-marca { color: var(--e-texto); font-family: var(--e-f-titulos); }
:root[data-estilo] .pie a, :root[data-estilo] .pie-descripcion, :root[data-estilo] .pie-linea-inferior a, :root[data-estilo] .pie-linea-inferior small { color: var(--e-texto-2); }
:root[data-estilo] .pie a:hover { color: var(--e-texto); }
:root[data-estilo] .pie-linea-contacto i { color: var(--e-enlace); }
:root[data-estilo] .pie-linea-inferior { border-top-color: var(--e-borde); color: var(--e-texto-2); }
:root[data-estilo] .pie-mapa { border-color: var(--e-borde); }

/* Movimiento: «quieto» y quien prefiere menos movimiento no ven animaciones. */
:root[data-movimiento="quieto"] *, :root[data-movimiento="quieto"] *::before, :root[data-movimiento="quieto"] *::after { animation: none !important; transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-estilo] *, :root[data-estilo] *::before, :root[data-estilo] *::after { animation: none !important; transition-duration: 0s !important; }
}

/* CTA de la cabecera (contorno discreto): en cada estilo usa el tono de enlace, que ya trae contraste AA
   sobre el fondo del estilo; al pasar el puntero se rellena con la marca. Por id, como en estilo.css. */
:root[data-estilo] #cta-cabecera { border-color: var(--e-enlace); color: var(--e-enlace); border-radius: var(--e-radio-boton, 999px); }
:root[data-estilo] #cta-cabecera:hover { background: var(--e-marca); border-color: var(--e-marca); color: var(--e-marca-texto); }

/* Texto con el color de la marca: en cada estilo va el tono de enlace (con contraste AA sobre el fondo
   del estilo), así en los estilos oscuros la marca nunca queda ilegible. Bordes y rellenos siguen con la marca. */
:root[data-estilo] .menu-principal .submenu a:hover, :root[data-estilo] .migas-pan a:hover,
:root[data-estilo] .btn-idioma:hover, :root[data-estilo] .btn-idioma[aria-expanded="true"], :root[data-estilo] .lista-idiomas button[aria-checked="true"],
:root[data-estilo] .hero-insignia, :root[data-estilo] .hero-bullets li::before, :root[data-estilo] .tarjeta ul li::before,
:root[data-estilo] .paso-numero, :root[data-estilo] .selector-intencion-opcion.activa, :root[data-estilo] .tarjeta-plan-caracteristicas li::before,
:root[data-estilo] .tarjeta-plan-detalle:hover, :root[data-estilo] .categoria-planes-icono, :root[data-estilo] .fila-carrito-precio, :root[data-estilo] .fp-precio { color: var(--e-enlace); }
:root[data-estilo] .hero-insignia { background: var(--e-marca-suave); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Bandas oscuras (indicadores y carrito): en el estilo usan «tinta», un fondo profundo que es
   oscuro en todos los estilos (el color secundario del sitio pasa a ser el texto, que en los oscuros es claro). */
:root[data-estilo] { --e-tinta: var(--e-texto); --e-tinta-texto: var(--e-fondo); }
:root[data-estilo="cristal"], :root[data-estilo="noche"] { --e-tinta: #161B26; --e-tinta-texto: var(--e-texto); }
:root[data-estilo] .barra-indicadores, :root[data-estilo] .barra-carrito { background: var(--e-tinta); color: var(--e-tinta-texto); border-bottom-color: var(--e-borde); }