/* =========================================================================
   Phoenicia Business Center — estilos base
   Sistema visual heredado del sitio WordPress, con los colores de texto
   ajustados para cumplir WCAG 2.2 AA.
   ========================================================================= */

:root{
  /* --- Paleta --- */
  --navy: #09172e;          /* azul de marca (barra superior, hero, banners) */
  --navy-pie: #080c1f;      /* fondo del pie */
  --navy-bloque: #090b1e;   /* bloque superior del pie */
  --navy-heading: var(--navy-heading-base);
  --navy-blue: var(--navy-heading-base);   /* alias: lo usa contactenos.css */
  --gold: #b8967e;          /* decorativo: degradados, bordes, acentos */
  --gold-hero: #c8a24b;     /* dorado del hero: el valor exacto de .phxs-hero */
  --gold-texto: var(--gold-texto-base);   /* texto y botones sobre fondo claro (5.25:1) */
  --gold-claro: #c8a98d;    /* texto sobre fondo navy (8.07:1) */
  --blush: #bda094;
  --taupe: var(--taupe-base);
  --charcoal: var(--charcoal-base);
  --white: #FFFFFF;
  --bg-soft: rgba(var(--taupe-rgb),0.06);
  --border-soft: rgba(var(--taupe-rgb),0.25);
  --error: #a4262c;

  /* --- Los cuatro colores de TEXTO, en su version de origen --- */
  /*
     ⚠ EXISTEN POR LO MISMO QUE --fondo-*, Y TAMPOCO SE PUEDE PRESCINDIR DE
     ELLOS. Una seccion clara forzada (section.fondo.texto-oscuro) tiene que
     REPONER estos cuatro para deshacer el bloque que los aclara cuando se usan
     los dos a la vez, y alli no puede escribir «--charcoal: var(--charcoal)»
     porque seria circular. Hasta el 16/09/2026 los repetia a pelo, y esa copia
     es justo la que se quedaria vieja el dia que la paleta se edite desde el
     panel: el sitio cambiaria de color menos esas secciones, sin ningun error.

     Con un token de origen la paleta se escribe UNA vez y los dos sitios la
     leen. Y funciona porque un var() dentro de :root se resuelve ALLI, donde
     la paleta todavia es la paleta: lo que heredan las secciones es ya el
     color, no la variable.
  */
  --navy-heading-base: #1e3051;
  --gold-texto-base: #8a6449;
  --taupe-base: #79645c;
  --charcoal-base: #2d2e30;

  /* --- El texto sobre fondo oscuro --- */
  /*
     La seccion oscura no aclara el texto a blanco: conserva la jerarquia
     —cuerpo, secundario— con dos claros distintos. Estaban escritos dentro de
     aquel bloque, y son tokens desde el 17/09/2026 por la misma razon que todo
     lo demas: su contraste depende de --navy, que SI se puede editar, asi que
     tienen que poder editarse con el.
     Medidos sobre el navy de hoy: 15,09:1 y 11,04:1. Los dos pasan AAA.
  */
  --texto-sobre-oscuro: #e8ecf2;
  --texto-sobre-oscuro-suave: #c3ccd9;

  /* --- Las dos familias --- */
  /*
     ⚠ SE ESCRIBEN AQUI Y EN NINGUN OTRO SITIO, por la misma razon que los
     colores: el dia que la tipografia se elija desde el panel, cada
     «font-family: 'Cormorant Garamond'…» que quedara suelto en una regla se
     quedaria con la fuente vieja. El sitio cambiaria de letra A MEDIAS y sin
     ningun error, que es la forma mas cara de equivocarse.

     Eran QUINCE declaraciones repartidas en seis archivos —dos en el cuerpo y
     los titulos, cuatro mas en base.css y nueve en las hojas de pagina— con
     tres respaldos distintos para la misma fuente. Ahora hay uno solo, que es
     ademas lo correcto: el respaldo tiene que ser el mismo dondequiera que
     falle la descarga.

     La pareja la elige Ajustes -> Tema de una lista cerrada. No es un selector
     libre de Google Fonts a proposito: cambiar de familia cambia la METRICA
     —altura de la x, ancho medio, interlineado natural— y descuadra alturas y
     saltos que estan medidos. Cuatro parejas probadas valen mas que
     mil sin probar.
  */
  --fuente-titulos: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* La altura de la x de cada una de las dos, medida en el navegador.
     ⚠ ESTO ES LO QUE HACE QUE LAS CUATRO PAREJAS QUEPAN EN LA MISMA
     MAQUETACION, y no una tabla de factores por pareja.

     Dos fuentes al mismo tamano en pixeles NO se ven del mismo tamano: lo que
     se lee es la altura de la x, y la Cormorant la tiene en 0,386 de su em
     mientras la Playfair la tiene en 0,516. Al mismo font-size, la Playfair se
     ve un TREINTA POR CIENTO mas grande, y los titulares de la portada se
     desbordan. Se vio en vivo el 17/09 al probar la pareja.

     font-size-adjust le dice al navegador «quiero la x a esta altura», y el
     navegador ajusta el tamano real de CADA familia para conseguirlo. Asi el
     numero no depende de la pareja: una quinta pareja anadida manana encaja
     sola, sin medir nada y sin tocar esto.

     Los dos numeros son los de la pareja de origen —Cormorant y Poppins—
     medidos hasta que el ajuste no mueve NI UN PIXEL en ellas: son un
     0,000 % de desvio, no un redondeo afortunado. Cambiarlos reescala el sitio
     entero.

     ⚠ NO SON TOKENS DEL PANEL A PROPOSITO. No son una preferencia sino una
     medida de una fuente concreta; un campo para esto solo serviria para
     descuadrar el sitio. */
  --aspecto-titulos: 0.386;
  --aspecto-cuerpo: 0.548;

  /* --- Los mismos colores, en canales, para cuando llevan transparencia --- */
  /*
     rgba() no acepta un color, acepta tres numeros. Sin esto, cada velo y cada
     sombra de la paleta tiene que repetir el color a pelo —y quedarse vieja—.
     Con la lista de canales, rgba(var(--navy-rgb),.18) es el mismo navy de
     arriba con el alfa que haga falta.

     ⚠ TIENEN QUE DECIR LO MISMO que el color de al lado. Son dos escrituras
     del mismo valor y lo que se escribe dos veces se separa; hay una prueba
     que las compara.
  */
  --navy-rgb: 9,23,46;
  --gold-rgb: 184,150,126;
  --taupe-rgb: 121,100,92;

  /* --- Fondos de seccion del constructor --- */
  /*
     ⚠ SON TOKENS APARTE Y NO SE PUEDE PRESCINDIR DE ELLOS.
     La seccion con fondo oscuro REDEFINE --navy-heading, --charcoal, --taupe y
     --bg-soft sobre si misma, que es lo que aclara su texto. Si el fondo se
     pintara con esas mismas variables, el navegador las resolveria ya
     cambiadas —la regla del fondo y la del texto caen sobre EL MISMO
     elemento— y la seccion saldria blanca con letra blanca. Paso el 16/09/2026
     con «Azul profundo» y con «Carbón»; «Navy» se salvo de casualidad, porque
     --navy no esta en esa lista.
     Aqui se resuelven en :root, donde la paleta todavia es la paleta, y lo que
     heredan las secciones es ya el color. No hay valores duplicados. */
  --fondo-claro: var(--white);
  --fondo-suave: var(--bg-soft);
  --fondo-navy: var(--navy);
  --fondo-navy-alto: var(--navy-heading);
  --fondo-carbon: var(--charcoal);

  /* --- Medidas --- */
  --ancho-contenedor: 1180px;
  --radio: 6px;

  /* Las dos medidas de la cabecera que se editan desde el panel. */
  --alto-logo: 56px;
  --alto-barra: 100px;

  /* Y las dos que se derivan de ellas. NO SE EDITAN: ver el bloque de abajo. */
  --alto-barra-superior: 41px;
  --alto-barra-real: max(var(--alto-barra), calc(var(--alto-logo) + 24px));
  --foco: 3px solid var(--gold-texto);

  color-scheme: light;
}

/*
   EL ALTO DE LA CABECERA SE DECLARA AQUI, EN EL BODY, Y NO EN :root.

   Es la trampa de var() otra vez, por la puerta de al lado: una var() se
   resuelve SOBRE EL ELEMENTO DONDE ESTA ESCRITA, con el valor que las demas
   tengan EN ESE elemento. Si este calc() viviera en :root, se resolveria con
   los 41 px de la barra superior de :root, y body.sin-barra-superior —que la
   pone a cero— llegaria tarde: el hero seguiria reservando 41 px de hueco que
   ya no existen, y el titular se despegaria de la cabecera sin dar ningun
   error. Escrito en el body, el calc() ve el 0 de la propia clase cuando la
   lleva y el 41 heredado de :root cuando no.

   El alto REAL de la barra principal no es --alto-barra a secas: el interior
   usa min-height, asi que un logo mas alto que la barra la estira. El max() de
   arriba es lo unico que impide que el numero que reserva el hero y el alto
   que ocupa la cabecera se separen, y separarse aqui significa el titular
   debajo de la cabecera.
*/
body{ --alto-cabecera: calc(var(--alto-barra-real) + var(--alto-barra-superior) + 1px); }

*{ margin:0; padding:0; box-sizing:border-box; }

/* scroll-padding: con la cabecera fija, un ancla (#faq, el salto al
   contenido) aterrizaria debajo de la barra. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  font-family:var(--fuente-cuerpo); font-size-adjust: var(--aspecto-cuerpo);
  color: var(--charcoal);
  background: var(--white);
  line-height:1.7;
  overflow-x:hidden;
}

h1, h2, h3{
  font-family:var(--fuente-titulos); font-size-adjust: var(--aspecto-titulos);
  color: var(--navy-heading);
  line-height:1.2;
  font-weight:600;
  text-wrap:balance;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; }
ul, ol{ list-style:none; }

/* Foco visible en todo elemento interactivo (WCAG 2.4.7 / 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: var(--foco);
  outline-offset:2px;
  border-radius:3px;
}

.container{ max-width: var(--ancho-contenedor); margin:0 auto; padding:0 32px; }
.center{ text-align:center; }

/* --------------------------------------------------------------------- */
/* Utilidades de accesibilidad                                            */
/* --------------------------------------------------------------------- */
.visualmente-oculto{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.salto-contenido{
  position:absolute; left:16px; top:-64px; z-index:200;
  background: var(--navy); color: var(--white);
  padding:12px 20px; border-radius:0 0 var(--radio) var(--radio);
  font-size:0.9rem; font-weight:600;
  transition: top .18s ease;
}
.salto-contenido:focus{ top:0; }

main:focus{ outline:none; }

/* --------------------------------------------------------------------- */
/* TAG EYEBROW                                                            */
/* --------------------------------------------------------------------- */
.tag-eyebrow{ display:inline-flex; align-items:center; gap:14px; margin-bottom:20px; }
.tag-eyebrow .cap{ width:30px; height:12px; background: linear-gradient(120deg, var(--blush), var(--gold)); }
.tag-eyebrow .cap.left{ border-radius: 10px 0 10px 0; }
.tag-eyebrow .cap.right{ border-radius: 0 10px 0 10px; }
.tag-eyebrow .label{
  font-size:0.8rem; letter-spacing:2px; text-transform:uppercase;
  color: var(--taupe); font-weight:500; white-space:nowrap;
}
.center .tag-eyebrow{ justify-content:center; }

@media (max-width:760px){
  /* en pantallas angostas la etiqueta debe poder partirse: con nowrap
     se salia del contenedor y quedaba cortada por el overflow del body */
  .tag-eyebrow{ flex-wrap:wrap; gap:10px; }
  .tag-eyebrow .label{ white-space:normal; font-size:0.72rem; letter-spacing:1.5px; }
}

/* --------------------------------------------------------------------- */
/* BOTONES                                                                */
/* --------------------------------------------------------------------- */
.btn-split{
  display:inline-flex; align-items:stretch; align-self:flex-start; height:60px;
  width:auto; flex:0 0 auto;
  border-radius:30px; overflow:hidden; border:0; cursor:pointer;
  background:transparent; padding:0;
  font-family:inherit;
  transition: transform .25s ease;
}
.btn-split:hover{ transform: translateY(-2px); }
.btn-split .icon-box{
  background: #0d172e; color: var(--white); width:60px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:300;
}
.btn-split .label-box{
  /* El tema usa #b7967d con texto blanco: 2.75:1, no cumple AA. Se conserva
     el fondo de marca y el texto pasa al azul, 6.56:1. */
  background: var(--gold); color: var(--navy); padding:0 34px;
  font-size:0.82rem; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600; display:flex; align-items:center; white-space:nowrap;
}
.btn-split:focus-visible{ outline: var(--foco); outline-offset:3px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--gold-texto); font-weight:600; font-size:0.9rem;
  border-bottom:1px solid transparent;
}
.link-arrow:hover{ border-bottom-color: var(--gold-texto); }

/* --------------------------------------------------------------------- */
/* IMAGE PLACEHOLDER                                                      */
/* --------------------------------------------------------------------- */
.img-placeholder{
  border:2px dashed var(--gold);
  background: rgba(183,150,125,0.07);
  border-radius: var(--radio);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color: var(--gold-texto); font-size:0.85rem; font-weight:500; gap:8px;
  min-height:240px;
}
.img-placeholder span.icon{ font-size:clamp(1.35rem, 3.8vw, 1.6rem); }
.img-placeholder small{ color: var(--taupe); font-size:0.7rem; font-weight:400; }

/* ===================================================================== */
/* INTRO (encabezado de seccion, compartido por varias paginas)           */
/* ===================================================================== */
.intro{ padding:64px 0 50px; background: var(--white); text-align:center; }
.intro :is(h1, h2){ font-size:clamp(1.61rem, 6.1vw, 2.6rem); margin-bottom:18px; }
.intro p{ font-size:1rem; color: var(--charcoal); max-width:680px; margin:0 auto; }
.intro-acciones{ margin-top:28px; display:flex; justify-content:center; }

@media (max-width:700px){
  .intro{ padding:44px 0 36px; }
  .intro :is(h1, h2){ font-size:clamp(1.35rem, 4.7vw, 2rem); }
}

/* ===================================================================== */
/* CABECERA                                                               */
/* ===================================================================== */
/* La cabecera flota sobre el hero y sobre el banner de seccion, como
   .site-header.header-absolute en el tema: fondo transparente, logo blanco y
   dos hairlines de rgba(255,255,255,.2). En las paginas sin portada (404, 500)
   la plantilla le pone .cabecera--solida y vuelve a ocupar su sitio. */
.cabecera{
  position:absolute; top:0; left:0; right:0; z-index:50;
  color: var(--white);
}
/* Seguro de contraste para los enlaces del menu: el velo del hero se abre del
   todo a partir del 72 % y el selector de idioma puede caer sobre la zona
   clara del cielo. Es un degradado muy leve; el grueso de la sombra del filo
   superior ya lo pone la segunda capa del velo. */
.cabecera::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,10,20,0.30), rgba(0,10,20,0));
}
.cabecera--fija::before,
.cabecera--solida::before{ display:none; }

/* El foco por omision es #8a6449, pensado para fondo claro. Sobre la cabecera
   flotante no se distinguiria, asi que ahi se aclara (8.11:1 sobre el azul). */
.cabecera:not(.cabecera--fija):not(.cabecera--solida) :where(a, button):focus-visible{
  outline-color: var(--gold-claro);
}

/* Con la barra superior apagada (Ajustes -> Cabecera) la cabecera se queda en
   la barra principal mas el hairline. Se pone a cero LA BARRA, no el alto
   total: el alto sale del calc() del body y asi sigue una sola cuenta. La
   variable se redefine en el body y no en .cabecera porque el hero y los
   banners son hermanos de la cabecera: desde .cabecera no la heredarian. */
body.sin-barra-superior{ --alto-barra-superior: 0px; }

.cabecera-barra-superior{
  background: rgba(0,10,20,0.6); color: var(--white);
  font-size:0.82rem;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.cabecera-barra-superior__interior{
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center;
  justify-content:space-between; min-height:42px; padding-block:6px;
}
.cabecera-dato{ display:inline-flex; gap:10px; align-items:center; color: var(--white); }
.cabecera-dato:hover{ color: var(--gold-claro); }
.cabecera-dato__icono{ width:16px; height:16px; flex-shrink:0; color: var(--gold-claro); }

/* Linea vertical que separa el correo del telefono, como en el sitio
   WordPress. Al envolverse en pantallas angostas deja de tener sentido. */
.cabecera-dato--separado{ padding-left:28px; border-left:1px solid rgba(255,255,255,0.2); }

@media (max-width:760px){
  .cabecera-dato--separado{ padding-left:0; border-left:0; }
}

.cabecera-principal{
  background: transparent;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.cabecera-principal__interior{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height: var(--alto-barra-real);
}
.cabecera-logo{ display:block; flex-shrink:0; }
.cabecera-logo img{ width:auto; height: var(--alto-logo); display:block; }
.cabecera-logo img.cabecera-logo__oscuro{ display:none; }

.cabecera-alternar{
  display:none; width:48px; height:48px; border:1px solid rgba(255,255,255,0.35);
  background: transparent; border-radius: var(--radio); cursor:pointer;
  align-items:center; justify-content:center;
}
.cabecera-alternar__barras,
.cabecera-alternar__barras::before,
.cabecera-alternar__barras::after{
  display:block; width:22px; height:2px; background: currentColor;
  border-radius:2px; transition: transform .2s ease, opacity .2s ease;
}
.cabecera-alternar__barras{ position:relative; }
.cabecera-alternar__barras::before,
.cabecera-alternar__barras::after{ content:''; position:absolute; left:0; }
.cabecera-alternar__barras::before{ top:-7px; }
.cabecera-alternar__barras::after{ top:7px; }
.cabecera-alternar[aria-expanded="true"] .cabecera-alternar__barras{ background:transparent; }
.cabecera-alternar[aria-expanded="true"] .cabecera-alternar__barras::before{ top:0; transform: rotate(45deg); }
.cabecera-alternar[aria-expanded="true"] .cabecera-alternar__barras::after{ top:0; transform: rotate(-45deg); }

.navegacion-lista{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.navegacion-enlace{
  display:block; padding:10px 14px;
  font-size:0.88rem; font-weight:500; color: var(--white);
  border-bottom:2px solid transparent;
  transition: color .2s ease;
}
.navegacion-enlace:hover{ color: var(--gold); }
.navegacion-enlace--activo{
  color: var(--gold); border-bottom-color: var(--gold);
}


@media (max-width:980px){
  .cabecera-alternar{ display:flex; }
  .navegacion{
    display:none; position:absolute; left:0; right:0; top:100%;
    background: var(--white); border-bottom:1px solid var(--border-soft);
    box-shadow:0 12px 24px rgba(13,23,46,0.08);
    padding:12px 0 20px;
  }
  .navegacion[data-abierto="true"]{ display:block; }
  .navegacion-lista{ flex-direction:column; align-items:stretch; gap:0; padding:0 32px; }
  /* El panel desplegable es blanco tambien cuando la cabecera flota, asi que
     dentro de el los enlaces recuperan el color oscuro. */
  .navegacion-enlace{
    padding:14px 4px; border-bottom:1px solid var(--border-soft);
    color: var(--navy-heading);
  }
  .navegacion-enlace:hover,
  .navegacion-enlace--activo{ color: var(--gold-texto); }
  .navegacion-enlace--activo{ border-bottom-color: var(--gold-texto); }
}

@media (max-width:760px){
  /* La barra superior parte en dos lineas: la cabecera crece. Se sube LA
     BARRA, no el alto total, para que la cuenta del body siga valiendo — y
     para que apagarla siga dandole cero tambien aqui. */
  :root{ --alto-barra-superior: 75px; }
}

/* ===================================================================== */
/* HERO DE LA PORTADA                                                     */
/* ===================================================================== */
/* La escena del barco es una imagen fija (public/img/hero/escena.jpg), no
   el canvas animado del tema hijo: aquel llevaba el TBT a mas de 4 s. Las
   capas sueltas quedaron en www/SAMPLE/hero por si se retoma. */
.hero-escena{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(500px, 68vh, 640px);
  padding: calc(var(--alto-cabecera) + 8px) 0 72px;
  /* El fondo del hero en el tema es #0b1018, no el azul de marca. Solo se ve
     mientras el poster no ha pintado. */
  background: #0b1018; color: var(--white);
}

/* --- Escena animada -------------------------------------------------------
   El poster es el LCP y se pinta siempre. El canvas se funde por encima solo
   cuando el controlador (public/js/escena-hero.js) confirma que la escena
   dibujo su primer fotograma; si no arranca —reduccion de movimiento, ahorro
   de datos, 2G, equipo lento o falta de JavaScript— se queda el poster y no
   hay ningun estado roto. Las clases phxs-* son las que espera ese JS. */
.phxs-hero{ --phxs-focus: 62% center; }
.phxs-hero__stage{ position:absolute; inset:0; z-index:0; }
.phxs-hero__poster,
.phxs-hero__canvas{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
  object-fit:cover; object-position: var(--phxs-focus);
}
.phxs-hero__canvas{ opacity:0; transition: opacity .9s ease; }
.phxs-hero.is-live .phxs-hero__canvas{ opacity:1; }
.phxs-hero.is-live .phxs-hero__poster{ opacity:0; transition: opacity .9s ease; }

/* Boton de pausa: oculto hasta que el JS anade .has-motion, para que no quede
   un control muerto cuando la escena no llega a arrancar. */
.phxs-hero__toggle{
  position:absolute; z-index:3;
  right:clamp(12px, 2vw, 22px); bottom:clamp(12px, 2vw, 22px);
  display:none; width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  border:1px solid rgba(226,236,250,.34); border-radius:50%;
  background: rgba(8,14,26,.5); color:#dce6f6; cursor:pointer;
  backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease;
}
.phxs-hero.has-motion .phxs-hero__toggle{ display:flex; }
.phxs-hero__toggle:hover{ background: rgba(12,20,36,.78); border-color: rgba(226,236,250,.62); }
.phxs-hero__toggle:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }
.phxs-hero__toggle svg{ width:15px; height:15px; fill:currentColor; pointer-events:none; }
.phxs-hero__toggle .phxs-icon-play{ display:none; }
.phxs-hero.is-paused .phxs-hero__toggle .phxs-icon-play{ display:block; }
.phxs-hero.is-paused .phxs-hero__toggle .phxs-icon-pause{ display:none; }

/* Region para el lector de pantalla: anuncia pausa y reanudacion. */
.phxs-hero__sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  .phxs-hero__canvas{ display:none; }
}

.hero-escena__velo{
  position:absolute; inset:0; z-index:1;
  /* Los valores de .phxs-hero__veil del tema, verificados contra los pixeles
     reales de la escena: el peor contraste es el eyebrow con 6.21:1 y el
     titular con 10.31:1. La primera capa oscurece la banda del texto y se
     abre del todo al 72 %, para no apagar ni el mar ni el barco; la segunda
     sombrea el filo superior, donde apoya la cabecera. */
  background:
    linear-gradient(90deg, rgba(0,10,20,.8) 0%, rgba(0,10,20,.6) 38%,
                    rgba(6,12,22,0) 72%, rgba(6,12,22,0) 100%),
    linear-gradient(184deg, rgba(4,8,16,.34) 0%, rgba(4,8,16,0) 30%,
                    rgba(4,8,16,0) 62%, rgba(4,8,16,0) 100%);
}
.hero-escena__interior{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; }
.hero-escena__eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:700; color: var(--gold-hero);
}
.hero-escena__eyebrow::before{
  content:''; display:block; width:34px; height:2px; background: var(--gold-hero);
}
.hero-escena__titulo{
  color: var(--white); max-width:min(100%, 21ch); font-weight:800;
  font-size:clamp(1.85rem, 4.4vw, 2.8rem); line-height:1.1; margin-bottom:20px;
}
.hero-escena__texto{
  max-width:52ch; margin-bottom:32px;
  color: rgba(255,255,255,0.92); font-size:1rem; line-height:1.5;
}
.hero-escena__cta{
  display:inline-block; padding:15px 34px; border-radius:4px;
  background: rgba(0,10,20,0.45);
  border:0.8px solid var(--gold-hero); color: var(--gold-hero);
  font-size:1rem; font-weight:700;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.hero-escena__cta:hover{ transform: translateY(-2px); background: var(--gold-hero); color:#0b1018; }

/* Entrada escalonada, la misma de .phxs-hero: sube 24 px y aparece.
   La regla global de prefers-reduced-motion recorta la duracion a 0.001 ms
   y, como la animacion es "forwards", el texto queda directamente visible. */
@keyframes heroEntra{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }
.hero-escena__eyebrow,
.hero-escena__titulo,
.hero-escena__texto,
.hero-escena__cta{
  opacity:0; animation: heroEntra .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-escena__eyebrow{ animation-delay:.15s; }
.hero-escena__titulo{ animation-delay:.30s; }
.hero-escena__texto{ animation-delay:.45s; }
.hero-escena__cta{ animation-delay:.60s; }

@media (max-width:700px){
  .hero-escena{ min-height:0; padding: calc(var(--alto-cabecera) + 20px) 0 60px; }
  .phxs-hero{ --phxs-focus: 58% center; }
  .hero-escena__titulo{ max-width:none; }
}

/* ===================================================================== */
/* BANNER DE LAS PAGINAS SECUNDARIAS                                      */
/* ===================================================================== */
/* Imagen por convencion: public/img/paginas/{clave}. Sin archivo queda el
   azul de la marca, nunca una imagen rota (App\Support\Imagenes). */
.banner{
  position:relative; isolation:isolate; overflow:hidden;
  /* Alto: en WordPress .page-title-wrap lleva 223 px arriba y 95 abajo, pero
     alli la cabecera flota encima. Aqui la cabecera ocupa su sitio, asi que el
     relleno propio es menor y el bloque total queda parecido. */
  padding: calc(var(--alto-cabecera) + 58px) 0 96px; text-align:center;
  background: var(--navy); color: var(--white);
}
.banner__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* Que parte de la foto se conserva al recortar. La franja es apaisada de
   verdad y las fotos que vienen de WordPress son casi cuadradas —1200x799—,
   asi que se recorta arriba y abajo siempre. El centro no es la respuesta
   correcta en todas: con un sujeto pequeno se lo come justo. */
.banner--arriba .banner__img{ object-position: top; }
.banner--abajo .banner__img{ object-position: bottom; }
.banner--izquierda .banner__img{ object-position: left; }
.banner--derecha .banner__img{ object-position: right; }
.banner__velo{
  position:absolute; inset:0; z-index:-1;
  /* Mismo tono que el overlay del tema, rgba(18,14,53,·), con la opacidad
     subida para que las migas cumplan AA sobre cualquier foto. */
  background: linear-gradient(180deg, rgba(18,14,53,0.84), rgba(18,14,53,0.80));
}
.banner__interior{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.banner__titulo{
  color: var(--white); margin:0; font-weight:600;
  font-size:clamp(1.9rem, 5.6vw, 3.5rem); line-height:1.2;
}

@media (max-width:700px){
  .banner{ padding: calc(var(--alto-cabecera) + 24px) 0 52px; }
}

/* --------------------------------------------------------------------- */
/* Cabecera fija al desplazar                                             */
/* --------------------------------------------------------------------- */
/* Reproduce .sticky-head.header-sticky del tema: al pasar la cabecera, la
   barra de navegacion vuelve fija en blanco, con el logo de color, los
   enlaces oscuros, 80 px de alto y la sombra; entra con slide-down en 0.35 s.
   La barra superior no acompana, se queda arriba. */
@keyframes bajaCabecera{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }

.cabecera--fija{
  position:fixed; top:0; color: var(--navy-heading);
  animation: bajaCabecera .35s ease-out;
}
.cabecera--fija .cabecera-barra-superior{ display:none; }
.cabecera--fija .cabecera-principal{
  background: var(--white);
  border-bottom-color: transparent;
  box-shadow: 0 0 20px -1px rgba(0,0,0,0.1);
}
.cabecera--fija .cabecera-principal__interior{ min-height:80px; }
.cabecera--fija .cabecera-logo img{ height:46px; }
.cabecera--fija .cabecera-logo img.cabecera-logo__claro{ display:none; }
.cabecera--fija .cabecera-logo img.cabecera-logo__oscuro{ display:block; }
.cabecera--fija .navegacion-enlace{ color: var(--navy-heading); }
.cabecera--fija .navegacion-enlace:hover,
.cabecera--fija .navegacion-enlace--activo{ color: var(--gold-texto); }
.cabecera--fija .navegacion-enlace--activo{ border-bottom-color: var(--gold-texto); }
.cabecera--fija .cabecera-alternar{ border-color: var(--border-soft); }

/* --------------------------------------------------------------------- */
/* Cabecera solida (paginas sin hero ni banner: 404, 500)                 */
/* --------------------------------------------------------------------- */
.cabecera--solida{ position:relative; }
.cabecera--solida .cabecera-barra-superior{ background: var(--navy); }
.cabecera--solida .cabecera-principal{
  background: var(--white); border-bottom-color: var(--border-soft);
}
.cabecera--solida .cabecera-logo img.cabecera-logo__claro{ display:none; }
.cabecera--solida .cabecera-logo img.cabecera-logo__oscuro{ display:block; }
.cabecera--solida .navegacion-enlace{ color: var(--navy-heading); }
.cabecera--solida .navegacion-enlace:hover,
.cabecera--solida .navegacion-enlace--activo{ color: var(--gold-texto); }
.cabecera--solida .navegacion-enlace--activo{ border-bottom-color: var(--gold-texto); }
.cabecera--solida .cabecera-alternar{ border-color: var(--border-soft); color: var(--navy-heading); }

/* Sin JavaScript la cabecera nunca se fija: no hay estado roto, solo se
   queda flotando sobre la portada, que es el estado de reposo. */

/* ===================================================================== */
/* MIGAS                                                                  */
/* ===================================================================== */
.migas{ font-size:0.86rem; }
.migas-lista{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 10px; color: rgba(255,255,255,0.92);
}
.migas-item{ display:inline-flex; align-items:center; gap:10px; }
.migas-item + .migas-item::before{
  content:''; display:block; width:9px; height:9px;
  background: var(--gold); border-radius:3px 0 3px 0;
}
.migas-item a{ color: var(--white); }
.migas-item a:hover{ color: var(--gold-claro); text-decoration:underline; }
.migas-item [aria-current]{ color: var(--gold-claro); font-weight:500; }

/* ===================================================================== */
/* FORMULARIO DE CONTACTO                                                 */
/* ===================================================================== */
.formulario{ padding:70px 0 90px; background: var(--bg-soft); }
.formulario h2{ font-size:clamp(1.35rem, 4.9vw, 2.1rem); margin-bottom:12px; }
.formulario-intro{ max-width:620px; margin-bottom:32px; }

.formulario-campos{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 24px;
  max-width:820px;
}
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{ font-size:0.85rem; font-weight:600; color: var(--navy-heading); }
.campo-requerido{ color: var(--error); }
.campo input[type="text"],
.campo input[type="email"],
.campo textarea{
  font-family:inherit; font-size:0.95rem; color: var(--charcoal);
  background: var(--white);
  border:1px solid var(--border-soft); border-radius:var(--radio);
  padding:13px 15px; width:100%;
}
.campo input:hover, .campo textarea:hover{ border-color: var(--taupe); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"]{ border-color: var(--error); }
.campo textarea{ resize:vertical; min-height:150px; }
.campo-error{ font-size:0.82rem; color: var(--error); font-weight:500; }

.campo--casilla{ flex-direction:row; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.campo--casilla input{ width:20px; height:20px; margin-top:4px; flex-shrink:0; accent-color: var(--navy-heading); }
.campo--casilla label{ font-weight:400; font-size:0.88rem; max-width:640px; }
.campo--casilla .campo-error{ flex-basis:100%; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso{
  border-radius: var(--radio); padding:16px 20px; margin-bottom:26px;
  font-size:0.92rem; max-width:820px;
}
.aviso--exito{ background:#e8f2ec; border-left:4px solid #1f7a4d; color:#14532d; }
.aviso--error{ background:#fbeaea; border-left:4px solid var(--error); color:#6d1a1e; }
.aviso ul{ list-style:disc; padding-left:22px; margin-top:8px; }

@media (max-width:760px){
  .formulario-campos{ grid-template-columns:1fr; }
}

/* ===================================================================== */
/* PIE                                                                    */
/* ===================================================================== */
/* Etiqueta de seccion sobre fondo oscuro */
.tag-eyebrow--claro .label{ color: var(--gold-claro); }

/* Bloque superior del pie: equivale a .insta-footer-wrap en WordPress */
.pie-destacado{ background: var(--navy-bloque); color: rgba(255,255,255,0.86); }
.pie-destacado__interior{
  display:grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,0.85fr);
  gap:40px 56px; align-items:center;
  padding:72px 32px 56px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.pie-declaracion{
  font-family:var(--fuente-titulos); font-size-adjust: var(--aspecto-titulos);
  font-size:clamp(1.35rem, 3.1vw, 2.05rem); line-height:1.32;
  color: var(--white); text-wrap:balance;
}
.pie-destacado__acciones{
  display:flex; flex-direction:column; gap:18px; align-items:stretch;
}

/* Pastilla de llamada: el degradado y el radio de .contact-widget del tema.
   El original arranca en dorado opaco y el texto blanco sobre el caeria a
   4.18:1; con la parada del 26% el degradado se apaga antes de llegar al
   texto y queda en 5.6:1, sin que cambie el aspecto. */
.pie-llamada{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:24px 19px; border-radius:50px 0;
  color: var(--white); text-align:center;
  transition: transform .25s ease;
}
.pie-llamada::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background: linear-gradient(to right,
    /* ⚠ LOS DOS rgba NO SON --gold, Y NO ES UNA ERRATA QUE HAYA QUE «ARREGLAR»:
       son 184,151,128 y el dorado es 184,150,126. Vienen asi del diseno
       original. Cambiarlos a var(--gold-rgb) cambiaria el degradado, asi que se
       quedan escritos; el primer tramo si es el dorado y ese si sale de la
       variable. */
    var(--gold) 0%, rgba(184,151,128,0.62) 26%, rgba(184,151,128,0.06) 100%);
}
.pie-llamada:hover{ transform: translateY(-2px); color: var(--white); }
.pie-llamada__numero{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1.05rem; font-weight:600;
}
.pie-llamada__numero svg{ width:18px; height:18px; }
.pie-llamada__etiqueta{
  font-size:0.74rem; letter-spacing:2px; text-transform:uppercase; font-weight:600;
}
.pie-destacado .btn-split{ align-self:stretch; }
.pie-destacado .btn-split .label-box{ flex:1; justify-content:center; }
.pie-whatsapp__icono{ display:flex; }
.pie-whatsapp__icono svg{ width:24px; height:24px; }

@media (max-width:860px){
  .pie-destacado__interior{ grid-template-columns:1fr; padding:56px 32px 44px; }
  .pie-destacado__acciones{ align-items:flex-start; }
  .pie-llamada{ align-self:flex-start; }
}
@media (max-width:620px){
  .pie-destacado__interior{ padding:44px 24px 36px; }
  .pie-destacado__acciones{ align-self:stretch; }
  .pie-llamada{ align-self:stretch; }
  /* "Escríbanos por WhatsApp" con nowrap y 34px de relleno no cabe en 375px */
  .pie-destacado .btn-split{ width:100%; }
  .pie-destacado .btn-split .label-box{
    padding:0 16px; letter-spacing:1px; white-space:normal; text-align:center; line-height:1.25;
  }
}

.pie{ background: var(--navy-pie); color: rgba(255,255,255,0.86); font-size:0.9rem; }
.pie-columnas{
  display:grid; grid-template-columns: 1fr 1fr 1.15fr; gap:44px 40px;
  padding:64px 32px 54px;
}
/* Titulo de columna: serif de 22 px en caja normal y una linea al costado,
   igual que .widget-title en el tema. */
.pie-titulo{
  display:flex; align-items:center; gap:16px;
  font-family:var(--fuente-titulos); font-size-adjust: var(--aspecto-titulos);
  font-size:1.375rem; font-weight:400; letter-spacing:normal; text-transform:none;
  color: var(--white); margin-bottom:25px;
}
.pie-titulo::after{
  content:''; flex:0 0 52px; height:1px;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb),0));
}
.pie-logo{ display:inline-block; margin-top:28px; }
.pie-logo img{ width:min(250px, 100%); height:auto; display:block; }
.pie-texto{ max-width:340px; margin-bottom:20px; }
.pie-lista li + li{ margin-top:10px; }
.pie-lista a{
  display:inline-flex; align-items:baseline; gap:12px;
}
/* Galon dorado delante de cada enlace, como el ::before de bootstrap-icons
   que usa el tema. Va en el fondo, no en el contenido, para que no lo lea
   el lector de pantalla. */
.pie-lista a::before{
  content:''; flex:0 0 9px; width:9px; height:11px; align-self:center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8967e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E") center/9px 11px no-repeat;
}
.pie-lista a:hover{ color: var(--gold-claro); text-decoration:underline; }

.pie-datos li + li{ margin-top:14px; }
.pie-dato{ display:flex; align-items:flex-start; gap:12px; }
.pie-dato__icono{ width:18px; height:18px; flex-shrink:0; margin-top:3px; color: var(--gold); }
.pie-datos__etiqueta{
  display:block; font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--gold-claro); margin-bottom:2px;
}
.pie-datos a:hover{ color: var(--gold-claro); text-decoration:underline; }

.pie-inferior{ border-top:1px solid rgba(255,255,255,0.14); }
.pie-inferior__interior{
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between;
  padding:20px 32px; font-size:0.82rem;
}
.pie-arriba{ color: var(--gold-claro); }
.pie-arriba:hover{ text-decoration:underline; }

@media (max-width:980px){
  .pie-columnas{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
  .pie-columnas{ grid-template-columns:1fr; padding:48px 24px 40px; }
  .container{ padding:0 24px; }
}

/* ===================================================================== */
/* CONSTRUCTOR: REJILLA Y COMPONENTES                                     */
/*                                                                       */
/* Solo se aplica a lo que pinta el constructor visual. El contenido      */
/* importado de WordPress no pasa por aqui: sus secciones siguen saliendo */
/* con su propio marcado y su propio CSS, sin un div de mas (ver          */
/* App\Support\Contenido\Renderer, «via transparente»).                   */
/*                                                                       */
/* Doce columnas. Los tamanos son los que ya usa el resto de la hoja:     */
/* tableta hasta 980px y movil hasta 620px. Un ancho que no se declara    */
/* hereda del tamano mayor; la excepcion es el movil, donde una columna   */
/* que no es de ancho completo se apila salvo que se diga otra cosa.      */
/* ===================================================================== */
.fila{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:32px 28px; align-items:start;
}

/* TODAS LAS REGLAS DE ANCHO VAN CON EL MISMO SELECTOR, Y NO ES CAPRICHO.

   Hasta el 12/09/2026 el respaldo era «.fila > .col» y los anchos eran
   «.col-6». Dos clases contra una: el respaldo GANABA siempre, y todas las
   columnas salian a doce sobre doce por mucho que se eligiera otra cosa en el
   panel. Pasaba igual en tableta y en movil, y tambien en el sitio publicado:
   una media query no anade especificidad.

   Con la misma forma en todas, quien manda es el orden: primero el respaldo,
   despues escritorio, despues tableta, despues movil. Que es justo la cascada
   que el constructor promete. */
.fila > .col{ grid-column: span 12; min-width:0; }

.fila > .col-1{ grid-column: span 1; }
.fila > .col-2{ grid-column: span 2; }
.fila > .col-3{ grid-column: span 3; }
.fila > .col-4{ grid-column: span 4; }
.fila > .col-5{ grid-column: span 5; }
.fila > .col-6{ grid-column: span 6; }
.fila > .col-7{ grid-column: span 7; }
.fila > .col-8{ grid-column: span 8; }
.fila > .col-9{ grid-column: span 9; }
.fila > .col-10{ grid-column: span 10; }
.fila > .col-11{ grid-column: span 11; }
.fila > .col-12{ grid-column: span 12; }

@media (max-width:980px){
  .fila > .col-t-1{ grid-column: span 1; }
  .fila > .col-t-2{ grid-column: span 2; }
  .fila > .col-t-3{ grid-column: span 3; }
  .fila > .col-t-4{ grid-column: span 4; }
  .fila > .col-t-5{ grid-column: span 5; }
  .fila > .col-t-6{ grid-column: span 6; }
  .fila > .col-t-7{ grid-column: span 7; }
  .fila > .col-t-8{ grid-column: span 8; }
  .fila > .col-t-9{ grid-column: span 9; }
  .fila > .col-t-10{ grid-column: span 10; }
  .fila > .col-t-11{ grid-column: span 11; }
  .fila > .col-t-12{ grid-column: span 12; }
}

@media (max-width:620px){
  .fila{ gap:24px 20px; }
  .fila > .col-m-1{ grid-column: span 1; }
  .fila > .col-m-2{ grid-column: span 2; }
  .fila > .col-m-3{ grid-column: span 3; }
  .fila > .col-m-4{ grid-column: span 4; }
  .fila > .col-m-5{ grid-column: span 5; }
  .fila > .col-m-6{ grid-column: span 6; }
  .fila > .col-m-7{ grid-column: span 7; }
  .fila > .col-m-8{ grid-column: span 8; }
  .fila > .col-m-9{ grid-column: span 9; }
  .fila > .col-m-10{ grid-column: span 10; }
  .fila > .col-m-11{ grid-column: span 11; }
  .fila > .col-m-12{ grid-column: span 12; }
}

/* Ocultar por tamano. Se oculta de verdad —display:none— y no solo a la
   vista: un elemento invisible que sigue siendo enfocable es una trampa para
   quien navega con el teclado.

   Tres rangos que no se solapan, y cada uno solo sabe APAGAR. La version
   anterior encadenaba «apaga aqui, enciende en el siguiente» con display:block,
   y eso le imponia el bloque a cualquier cosa que no lo fuera: una columna de
   la rejilla, un <span>, un boton en linea. Encender no es asunto de esta
   regla; lo natural del elemento ya lo decide su propio CSS. */
@media (min-width:981px){
  .oculto-escritorio{ display:none; }
}
@media (max-width:980px) and (min-width:621px){
  .oculto-tableta{ display:none; }
}
@media (max-width:620px){
  .oculto-movil{ display:none; }
}

/* Alineaciones del constructor. */
.texto-izquierda{ text-align:left; }
.texto-centro{ text-align:center; }
.texto-derecha{ text-align:right; }

/* --------------------------------------------------------------------- */
/* Botones del constructor                                               */
/*                                                                       */
/* El tema trae .btn-split y .link-arrow, que son piezas del diseno       */
/* importado y no se tocan. Estos son los del constructor, con los mismos */
/* colores y el mismo foco. Los tres contrastes estan medidos sobre       */
/* blanco: navy 15.4:1, --gold-texto 5.25:1.                             */
/* --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:30px; border:2px solid transparent;
  font-size:0.82rem; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600; text-align:center; cursor:pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline: var(--foco); outline-offset:3px; }

.btn-primario{ background: var(--navy); color: var(--white); }
.btn-primario:hover{ background: var(--navy-heading); color: var(--white); }

.btn-secundario{ background: transparent; color: var(--gold-texto); border-color: var(--gold-texto); }
.btn-secundario:hover{ background: var(--gold-texto); color: var(--white); }

.btn-texto{
  padding:6px 0; border-radius:0; color: var(--gold-texto);
  border-bottom:1px solid transparent; text-transform:none; letter-spacing:0;
  font-size:0.9rem;
}
.btn-texto:hover{ border-bottom-color: var(--gold-texto); transform:none; }

/* Un enlace sin destino no es un enlace: se ve como texto y no reacciona. */
.btn:not([href]){ cursor:default; opacity:.65; }
.btn:not([href]):hover{ transform:none; }

/* --------------------------------------------------------------------- */
/* Imagen, separador y espaciador                                        */
/* --------------------------------------------------------------------- */
.imagen{ margin:0; }
.imagen img{ display:block; width:100%; height:auto; border-radius: var(--radio); }
.imagen figcaption{
  margin-top:10px; font-size:0.82rem; color: var(--taupe); text-align:center;
}

.separador{ border:0; border-top:1px solid var(--border-soft); margin:32px 0; }
.separador-punteado{ border-top-style:dotted; }
.separador-espacio{ border-top-color:transparent; }

/* --------------------------------------------------------------------- */
/* Espaciador: la altura va en una clase, nunca en un style                */
/*                                                                        */
/* La vista pintaba style="height:Npx". Se midio sirviendo la politica     */
/* real del sitio publico a una pagina de prueba: style-src no lleva       */
/* 'unsafe-inline', asi que el navegador descarta ese atributo y todos los */
/* espaciadores salian de altura cero. No se habia notado porque ninguna   */
/* pagina usa todavia el componente.                                      */
/*                                                                        */
/* La altura se redondea al multiplo de 8 mas cercano y se pinta como      */
/* clase. Ocho pixeles arriba o abajo en un hueco no los ve nadie; abrir   */
/* la CSP del sitio entero por un hueco si se nota.                       */
/* --------------------------------------------------------------------- */
.espaciador{ width:100%; }
.espaciador--8{height:8px} .espaciador--16{height:16px} .espaciador--24{height:24px} .espaciador--32{height:32px} .espaciador--40{height:40px}
.espaciador--48{height:48px} .espaciador--56{height:56px} .espaciador--64{height:64px} .espaciador--72{height:72px} .espaciador--80{height:80px}
.espaciador--88{height:88px} .espaciador--96{height:96px} .espaciador--104{height:104px} .espaciador--112{height:112px} .espaciador--120{height:120px}
.espaciador--128{height:128px} .espaciador--136{height:136px} .espaciador--144{height:144px} .espaciador--152{height:152px} .espaciador--160{height:160px}
.espaciador--168{height:168px} .espaciador--176{height:176px} .espaciador--184{height:184px} .espaciador--192{height:192px} .espaciador--200{height:200px}
.espaciador--208{height:208px} .espaciador--216{height:216px} .espaciador--224{height:224px} .espaciador--232{height:232px} .espaciador--240{height:240px}
.espaciador--248{height:248px} .espaciador--256{height:256px} .espaciador--264{height:264px} .espaciador--272{height:272px} .espaciador--280{height:280px}
.espaciador--288{height:288px} .espaciador--296{height:296px} .espaciador--304{height:304px} .espaciador--312{height:312px} .espaciador--320{height:320px}
.espaciador--328{height:328px} .espaciador--336{height:336px} .espaciador--344{height:344px} .espaciador--352{height:352px} .espaciador--360{height:360px}
.espaciador--368{height:368px} .espaciador--376{height:376px} .espaciador--384{height:384px} .espaciador--392{height:392px} .espaciador--400{height:400px}

/* ===================================================================== */
/* CONSTRUCTOR: COMPONENTES DE CONTENIDO                                  */
/*                                                                       */
/* Los siete tipos de la fase 6. Todos viven dentro de la rejilla del     */
/* constructor, asi que ninguno pone su propio contenedor: el ancho lo    */
/* decide la columna en la que esten.                                     */
/*                                                                       */
/* Las rejillas usan auto-fit con un minimo: asi «tres columnas» no son   */
/* tres columnas de 90 px en una tableta. El numero que se elige en el    */
/* panel es el maximo, no una obligacion.                                 */
/* ===================================================================== */
.bloque__titulo {
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  margin-bottom: 24px;
  text-align: center;
}

.cols-1 { --columnas: 1; --min: 100%; }
.cols-2 { --columnas: 2; --min: 260px; }
.cols-3 { --columnas: 3; --min: 230px; }
.cols-4 { --columnas: 4; --min: 200px; }

/* --------------------------------------------------------------------- */
/* Cita                                                                  */
/* --------------------------------------------------------------------- */
.cita {
  margin: 0;
  padding: 28px 0 28px 28px;
  border-left: 3px solid var(--gold);
  max-width: 44rem;
}

.cita.texto-centro { border-left: 0; padding-left: 0; margin-inline: auto; }

.cita blockquote { margin: 0; }

.cita blockquote p {
  font-family: var(--fuente-titulos); font-size-adjust: var(--aspecto-titulos);
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--navy-heading);
}

.cita figcaption { margin-top: 14px; font-size: 0.88rem; }
.cita__autor { font-weight: 600; color: var(--charcoal); }
.cita__cargo { display: block; color: var(--taupe); font-size: 0.82rem; }

/* --------------------------------------------------------------------- */
/* Llamada a la accion                                                   */
/* --------------------------------------------------------------------- */
.cta {
  padding: clamp(32px, 6vw, 56px);
  border-radius: var(--radio);
  text-align: center;
}

.cta--izquierda { text-align: left; }
.cta--claro { background: var(--bg-soft); }

/* Sobre el navy, el texto y el dorado claro cumplen AA: blanco 15,4:1 y
   --gold-claro 8,07:1. El boton primario se invierte, porque un navy sobre
   navy no se ve. */
.cta--oscuro { background: var(--navy); color: var(--white); }
.cta--oscuro :is(h2, h3, h4) { color: var(--white); }
.cta--oscuro p { color: rgba(255, 255, 255, 0.88); }
.cta--oscuro .tag-eyebrow .label { color: var(--gold-claro); }
.cta--oscuro .btn-primario { background: var(--white); color: var(--navy); }
.cta--oscuro .btn-primario:hover { background: var(--gold-claro); color: var(--navy); }
.cta--oscuro .btn-secundario { color: var(--gold-claro); border-color: var(--gold-claro); }
.cta--oscuro .btn-secundario:hover { background: var(--gold-claro); color: var(--navy); }
.cta--oscuro .btn:focus-visible { outline-color: var(--white); }

.cta :is(h2, h3, h4) { font-size: clamp(1.4rem, 4vw, 2.2rem); margin-bottom: 14px; }
.cta p { max-width: 46rem; margin-inline: auto; }
.cta--izquierda p { margin-inline: 0; }

.cta__acciones {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.cta--izquierda .cta__acciones { justify-content: flex-start; }

/* --------------------------------------------------------------------- */
/* Caracteristicas                                                       */
/* --------------------------------------------------------------------- */
.caracteristicas,
.testimonios,
.equipo,
.galeria,
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 230px), 100%), 1fr));
  gap: 28px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.caracteristica { padding: 4px 0; }

.caracteristica__cifra {
  display: block;
  font-family: var(--fuente-titulos); font-size-adjust: var(--aspecto-titulos);
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  color: var(--gold-texto);
  margin-bottom: 6px;
}

.caracteristica__titulo { font-size: 1.05rem; margin-bottom: 6px; }
.caracteristica p { color: var(--charcoal); font-size: 0.94rem; }

/* --------------------------------------------------------------------- */
/* Testimonios                                                           */
/* --------------------------------------------------------------------- */
.testimonio {
  margin: 0;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonio blockquote { margin: 0; flex: 1; }
.testimonio blockquote p { font-size: 0.98rem; line-height: 1.65; }

.testimonio__firma { display: flex; align-items: center; gap: 12px; }

.testimonio__foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.testimonio__autor { font-weight: 600; font-size: 0.9rem; }
.testimonio__cargo { display: block; color: var(--taupe); font-size: 0.8rem; }

/* --- Modulo de testimonios: rejilla y deslizador (16/09/2026) ---------- */
/*
   Los dos bloques nuevos leen de la tabla «testimonios» y comparten tarjeta
   con el componente de siempre, asi que todo lo de arriba les sirve tal cual.
   Lo que sigue es lo que anaden.

   ⚠ NADA DE ESTO PUEDE IR EN UN style DEL ELEMENTO. La CSP del sitio publico
   lleva style-src 'self' sin 'unsafe-inline' y el navegador lo descarta en
   silencio: se veria bien en el panel —otra politica— y no en la pagina. Por
   eso «cuantas tarjetas a la vista» es una clase (.ver-1/2/3) y no un ancho
   calculado en linea.
*/

/* En la rejilla del modulo el hijo directo es el <li> y la tarjeta va dentro.
   Sin esto, dos tarjetas de la misma fila no igualan altura. */
.testimonios > li { display: flex; }
.testimonios > li > .testimonio { flex: 1; }

/*
   ⚠ «COLUMNAS: 3» TIENE QUE SER TRES COLUMNAS.
   La rejilla compartida de arriba reparte con auto-fit y el numero solo fija
   un ancho MINIMO: en una pantalla ancha, un bloque de tres salia en cuatro
   columnas. Para las cifras y el equipo eso esta bien —ahi el numero es una
   sugerencia— pero en el bloque del modulo el campo se llama «Columnas» y
   tiene que cumplir lo que dice. Va en una clase propia para no cambiar ni una
   de las paginas que ya usan .testimonios.
   --columnas lo pone .cols-N, que ya existia.
*/
.testimonios--modulo { grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); }

@media (max-width: 980px) {
  .testimonios--modulo.cols-3,
  .testimonios--modulo.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .testimonios--modulo { grid-template-columns: 1fr; }
}

/* La calificacion. Los simbolos son decorativos (aria-hidden en la vista): lo
   que se lee es la frase de .visualmente-oculto que va al lado. */
.testimonio__nota { margin: 0; }

.testimonio__nota-simbolos {
  color: var(--gold-texto);
  letter-spacing: 2px;
  font-size: 1rem;
  line-height: 1;
}

/* --- El deslizador ---------------------------------------------------- */
/*
   La tira funciona sin JavaScript: es una lista con scroll horizontal y
   scroll-snap. Las flechas, los puntos y la pausa los anade el guion, y por eso
   no hay ninguna regla que dependa de que existan.
*/
.testimonios-deslizador { position: relative; }

.testimonios-deslizador__pista {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  /* El relleno no es decoracion: sin el, el anillo de foco y la sombra de la
     primera tarjeta se recortan contra el borde de la zona con scroll. */
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  /* ⚠ NI scroll-behavior:smooth AQUI NI behavior:'smooth' EN EL GUION.
     Medido el 16/09/2026 en el navegador: con el desplazamiento suave
     desactivado —navegadores empotrados, --disable-smooth-scrolling, alguna
     politica de empresa— CUALQUIER desplazamiento suave por guion se queda en
     nada, y lo que le queda a la persona son dos flechas que parecen funcionar
     y no mueven la tira. No da error en ningun sitio.
     El guion asigna scrollLeft a pelo, que funciona siempre, y el salto cae
     exacto porque el destino ES un punto de anclaje. El dedo y el trackpad
     siguen desplazando como siempre, con su inercia y su anclaje. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.testimonios-deslizador__pista::-webkit-scrollbar { height: 6px; }

.testimonios-deslizador__pista::-webkit-scrollbar-thumb {
  background: var(--border-soft);
  border-radius: 3px;
}

.testimonios-deslizador__hueco {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  scroll-snap-align: start;
}

.testimonios-deslizador__hueco > .testimonio { flex: 1; }

/* El descuento es el hueco entre tarjetas: con dos a la vista se ve un hueco,
   con tres se ven dos. */
.testimonios-deslizador.ver-2 .testimonios-deslizador__hueco { width: calc((100% - 24px) / 2); }
.testimonios-deslizador.ver-3 .testimonios-deslizador__hueco { width: calc((100% - 48px) / 3); }

.testimonios-deslizador__mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.testimonios-deslizador__flecha,
.testimonios-deslizador__pausa {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-heading);
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.testimonios-deslizador__pausa { font-size: 0.7rem; letter-spacing: 1px; }

.testimonios-deslizador__flecha:hover:not(:disabled),
.testimonios-deslizador__pausa:hover {
  background: var(--bg-soft);
  border-color: var(--gold-texto);
  color: var(--gold-texto);
}

.testimonios-deslizador__flecha:disabled { opacity: 0.35; cursor: default; }

.testimonios-deslizador__puntos { display: flex; align-items: center; gap: 4px; }

/*
   El punto que se ve mide 9 px, pero el boton mide 24: es el minimo de area
   tactil de WCAG 2.5.8. Un punto de 9 px como area de pulsacion es
   inalcanzable con el dedo, y ademas falla la norma.
*/
.testimonios-deslizador__punto {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.testimonios-deslizador__punto::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-soft);
  transition: background .2s ease, transform .2s ease;
}

.testimonios-deslizador__punto.es-activo::before {
  background: var(--gold-texto);
  transform: scale(1.35);
}

/* Una tira dentro de una seccion oscura: el fondo de los mandos y el de la
   tarjeta salen de las variables que la seccion redefine, asi que no hay nada
   que forzar aqui salvo el borde, que sobre navy se pierde. */
.fondo.texto-claro .testimonios-deslizador__flecha,
.fondo.texto-claro .testimonios-deslizador__pausa { border-color: var(--border-soft); }

@media (prefers-reduced-motion: reduce) {
  /* La pista no aparece aqui a proposito: no lleva scroll-behavior que apagar.
     Una regla que no cambia nada es el fallo mas caro de encontrar. Lo que si
     desaparece con esta preferencia es el avance automatico, y eso lo decide el
     guion. */
  .testimonios-deslizador__punto::before,
  .testimonios-deslizador__flecha,
  .testimonios-deslizador__pausa { transition: none; }
}

/* En tableta caben dos como mucho; en movil, una. Los cortes son los mismos
   que usa el resto de la hoja y los que mide el lienzo del constructor. */
@media (max-width: 980px) {
  .testimonios-deslizador.ver-3 .testimonios-deslizador__hueco { width: calc((100% - 24px) / 2); }
}

@media (max-width: 620px) {
  .testimonios-deslizador.ver-2 .testimonios-deslizador__hueco,
  .testimonios-deslizador.ver-3 .testimonios-deslizador__hueco { width: 100%; }

  .testimonios-deslizador__pista { gap: 16px; }
}

/* --------------------------------------------------------------------- */
/* Equipo                                                                */
/* --------------------------------------------------------------------- */
.persona__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio);
  margin-bottom: 14px;
}

.persona__nombre { font-size: 1.05rem; margin-bottom: 2px; }
.persona__nombre a { color: inherit; border-bottom: 1px solid transparent; }
.persona__nombre a:hover { border-bottom-color: var(--gold-texto); }

.persona__cargo {
  color: var(--gold-texto);
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.persona__texto { font-size: 0.92rem; color: var(--charcoal); }

/* --------------------------------------------------------------------- */
/* Galeria y logotipos                                                   */
/* --------------------------------------------------------------------- */
.galeria__pieza figure { margin: 0; }

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  display: block;
}

.galeria figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--taupe);
}

.galeria__ampliar { display: block; }
.galeria__ampliar:focus-visible { outline: var(--foco); outline-offset: 3px; }

.logos {
  --min: 140px;
  align-items: center;
  gap: 24px 32px;
}

/* El filtro apaga logotipos de colores muy distintos para que la tira no
   parezca un semaforo; al pasar por encima vuelven a su color. Quien tenga
   el movimiento reducido no pierde nada: no es una animacion, es un color. */
.logo img {
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter .25s ease, opacity .25s ease;
}

.logo img:hover,
.logo a:focus-visible img { filter: none; opacity: 1; }
.logo a:focus-visible { outline: var(--foco); outline-offset: 4px; }

@media (max-width: 620px) {
  .caracteristicas,
  .testimonios,
  .equipo,
  .galeria { gap: 22px 18px; }

  .cita { padding-left: 18px; }
}

/* --------------------------------------------------------------------- */
/* Video del constructor                                                  */
/*                                                                        */
/* La proporcion va en una CLASE, no en un style del elemento. La primera  */
/* version lo ponia en linea y estaba mal: el navegador descarta ese       */
/* atributo porque style-src del sitio publico no lleva 'unsafe-inline'.   */
/* Sin proporcion no hay hueco reservado, que es justo el salto de         */
/* maquetacion (CLS) que el componente venia a evitar.                    */
/* --------------------------------------------------------------------- */
.video{ margin:0; }
.video__marco{
  position:relative; width:100%; overflow:hidden;
  border-radius: var(--radio); background: var(--navy);
}
.video__marco--16-9{ aspect-ratio: 16 / 9; }
.video__marco--4-3{ aspect-ratio: 4 / 3; }
.video__marco--1-1{ aspect-ratio: 1 / 1; }

/* Un video vertical a todo el ancho seria una columna de tres pantallas. */
.video__marco--9-16{ aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.video__marco video{
  display:block; width:100%; height:100%; object-fit:contain; background:#000;
}
.video figcaption{
  margin-top:10px; font-size:0.85rem; color: var(--taupe); line-height:1.5;
}

/* ===================================================================== */
/* DOCUMENTOS LEGALES                                                     */
/*                                                                       */
/* La politica de privacidad usa la seccion .intro, que esta pensada para */
/* un parrafo corto de entrada: centrada y con los parrafos a 680 px      */
/* centrados tambien. Un documento de dos mil palabras con ese tratamiento */
/* es ilegible —el ojo pierde el comienzo de cada linea— asi que aqui se  */
/* deshace: alineado a la izquierda, una sola columna de medida comoda y  */
/* jerarquia visible entre los apartados.                                 */
/* --------------------------------------------------------------------- */
.documento-legal{ text-align:left; padding-bottom:64px; }
.documento-legal .container{ max-width:760px; }

.documento-legal p,
.documento-legal ul{
  max-width:none; margin:0 0 16px; text-align:left; line-height:1.7;
}

.documento-legal :is(h2, h3){
  text-align:left; margin:36px 0 12px; font-size:clamp(1.15rem, 3.2vw, 1.5rem);
}
.documento-legal h3{ font-size:clamp(1rem, 2.6vw, 1.15rem); margin-top:26px; }

.documento-legal ul{ padding-left:22px; }
.documento-legal li{ margin-bottom:8px; }

.documento-legal__fecha{
  color: var(--taupe); font-size:0.88rem; margin-bottom:28px;
}

/* El enlace legal del pie. Va en la misma fila que el aviso de derechos y
   el «volver arriba», que ya es flex con space-between. */
.pie-legal{ margin:0; }
.pie-legal a{ color: var(--gold-claro); }
.pie-legal a:hover{ text-decoration:underline; }

/* ===================================================================== */
/* FONDO DE SECCION Y ESPACIO INTERIOR                                    */
/*                                                                       */
/* TODO ESTO SON CLASES Y NINGUNA ES style="". La CSP del sitio publico   */
/* lleva style-src 'self' SIN 'unsafe-inline': un atributo de estilo lo   */
/* descarta el navegador sin decir nada, y se ve bien en el panel —que    */
/* lleva otra politica— y no se ve en el sitio. Le paso al espaciador,    */
/* que pintaba style="height:Npx" y salia de altura cero en todas partes. */
/* Por eso el color, el encaje, la posicion, el velo y el aire se eligen  */
/* de una lista cerrada: lo unico que no cabe en una clase es la ruta de  */
/* una imagen, y esa se pinta como <img>, no como background-image.       */
/* ===================================================================== */

/* --------------------------------------------------------------------- */
/* Las dos capas del fondo                                               */
/*                                                                       */
/* z-index NEGATIVO, y es la pieza clave: un hijo con z-index negativo se */
/* pinta ENCIMA del fondo de su padre y DEBAJO de todo su contenido, sin  */
/* que el contenido tenga que enterarse. La alternativa —envolver el      */
/* interior en un div para subirlo de capa— habria cambiado el HTML de    */
/* las secciones importadas, que es justo lo que el renderer no hace.     */
/*                                                                       */
/* isolation:isolate cierra el ambito: sin ella, un -1 puede colarse por  */
/* detras de un antepasado con fondo y desaparecer de la vista.           */
/* --------------------------------------------------------------------- */
section.fondo{ position:relative; isolation:isolate; }

.fondo-capa{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:center;
}
/* «Cubrir» es lo que ya hace .fondo-capa; la regla se escribe igual, y no es
   redundancia: el renderer emite la clase siempre que hay imagen, y una clase
   que se emite sin regla detras es exactamente el descuido que esto persigue.
   Escrita, ademas, se puede cambiar sin tocar el respaldo. */
.fondo-encaje-cubrir .fondo-capa{ object-fit:cover; }
.fondo-encaje-contener .fondo-capa{ object-fit:contain; }

.fondo-pos-centro    .fondo-capa{ object-position:center; }
.fondo-pos-arriba    .fondo-capa{ object-position:top; }
.fondo-pos-abajo     .fondo-capa{ object-position:bottom; }
.fondo-pos-izquierda .fondo-capa{ object-position:left; }
.fondo-pos-derecha   .fondo-capa{ object-position:right; }

/* El velo va sobre la foto y solo sobre la foto: sobre un color plano no
   aclara nada que no se consiga eligiendo otro color. Sin el, un texto
   sobre una foto clara deja de cumplir contraste, asi que no es adorno. */
.fondo-velo{ position:absolute; inset:0; z-index:-1; display:block; }
.velo-oscuro{ background:#000; }
.velo-claro{ background: var(--white); }
.velo-navy{ background: var(--navy, #09172e); }

.velo-10{ opacity:.1; }
.velo-20{ opacity:.2; }
.velo-30{ opacity:.3; }
.velo-40{ opacity:.4; }
.velo-50{ opacity:.5; }
.velo-60{ opacity:.6; }
.velo-70{ opacity:.7; }
.velo-80{ opacity:.8; }

/* --------------------------------------------------------------------- */
/* Espacio interior de la seccion                                        */
/*                                                                       */
/* Cuatro pasos. Un lado sin clase se queda con lo que diga su diseno,    */
/* que es lo que mantiene intactas las secciones importadas.              */
/* --------------------------------------------------------------------- */
section.aire.aire-arriba-0{ padding-top:0; }
section.aire.aire-arriba-1{ padding-top:24px; }
section.aire.aire-arriba-2{ padding-top:56px; }
section.aire.aire-arriba-3{ padding-top:96px; }

section.aire.aire-abajo-0{ padding-bottom:0; }
section.aire.aire-abajo-1{ padding-bottom:24px; }
section.aire.aire-abajo-2{ padding-bottom:56px; }
section.aire.aire-abajo-3{ padding-bottom:96px; }

@media (max-width:620px){
  section.aire.aire-arriba-3{ padding-top:64px; }
  section.aire.aire-abajo-3{ padding-bottom:64px; }
}

/* --------------------------------------------------------------------- */
/* POR QUE ESTAS REGLAS SE ESCRIBEN «section.fondo.fondo-x» Y NO «.fondo-x» */
/*                                                                       */
/* Porque perdian. Cada hoja de pagina —public/css/paginas/*.css— le pone */
/* su propio background y su propio padding a la clase de diseno de cada  */
/* seccion (.hero, .quienes, .experiencia...) y se carga DESPUES de esta. */
/* Con la misma especificidad gana la ultima: elegir «Navy» en el panel   */
/* dejaba la seccion exactamente igual de blanca. No fallaba, no avisaba. */
/*                                                                       */
/* section.fondo.fondo-navy son dos clases y un elemento (0,2,1), asi que */
/* gana a cualquier regla de una o dos clases venga de donde venga. Por   */
/* eso el renderer emite SIEMPRE la clase marcadora —«fondo» junto al     */
/* color, «aire» junto al paso— y por eso la seccion gana su <section>    */
/* cuando lleva fondo: sin etiqueta este selector no engancha.            */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* Los fondos de seccion de este sitio                                   */
/*                                                                       */
/* Las claves son EXACTAMENTE las de config/page-builder.php -> 'fondos': */
/* el renderer emite «fondo-<clave>» y aqui se decide que significa. Una  */
/* clave sin regla no da error: da una seccion que no cambia de color.    */
/* Hay una prueba que compara las dos listas justo por eso.               */
/*                                                                       */
/* Son colores que ya estaban en la paleta. El desplegable de una seccion */
/* no es el sitio para inventar colores: un color nuevo se decide una vez */
/* y se mide una vez, aqui arriba, en :root.                              */
/* --------------------------------------------------------------------- */
/* Con los tokens --fondo-*, NO con la paleta: ver el aviso de :root. */
section.fondo.fondo-claro{ background-color: var(--fondo-claro); }
section.fondo.fondo-suave{ background-color: var(--fondo-suave); }
section.fondo.fondo-navy{ background-color: var(--fondo-navy); }
section.fondo.fondo-navy-alto{ background-color: var(--fondo-navy-alto); }
section.fondo.fondo-carbon{ background-color: var(--fondo-carbon); }

/* --------------------------------------------------------------------- */
/* EL TEXTO SOBRE UN FONDO OSCURO                                        */
/*                                                                       */
/* ⚠ NO SE FUERZA CADA COLOR: SE REDEFINEN LAS VARIABLES.                */
/*                                                                       */
/* Poner `color: var(--white)` en la seccion no basta y se vio en         */
/* pantalla el 16/09: el titulo se aclaraba —hereda— y el parrafo no,     */
/* porque las hojas de pagina lo pintan expresamente                      */
/* (.hero p{color:var(--charcoal)}, .ventaja-item p{color:var(--taupe)},  */
/* .cta p, .faq-answer li, .solucion-item p...). Un color heredado pierde */
/* SIEMPRE contra una regla que nombre al elemento, por poca              */
/* especificidad que tenga: no es una pelea de selectores, es que la      */
/* herencia solo llega donde nadie ha dicho nada.                        */
/*                                                                       */
/* Pero TODAS esas reglas pintan con var(). Redefiniendo las variables    */
/* aqui, cada una sigue ganando su pelea y lo que resuelve es claro. Y se */
/* conserva la jerarquia del diseno —cuerpo, secundario, acento— en vez   */
/* de aplanarlo todo a blanco, que es lo que haria un color:inherit a     */
/* martillazos.                                                          */
/*                                                                       */
/* Contrastes medidos sobre --navy (#09172e): --texto-sobre-oscuro 15,09:1,     */
/* --texto-sobre-oscuro-suave 11,04:1, --gold-claro 8,11:1. Los tres pasan AAA. */
/* Los tres son tokens editables, y la pantalla del tema vuelve a medirlos */
/* cada vez que se guarda: si el navy cambia, estos numeros cambian.      */
/* --------------------------------------------------------------------- */
section.fondo.fondo-navy,
section.fondo.fondo-navy-alto,
section.fondo.fondo-carbon,
section.fondo.texto-claro{
  color: var(--white);
  --charcoal: var(--texto-sobre-oscuro);
  --taupe: var(--texto-sobre-oscuro-suave);
  --navy-heading: var(--white);
  --gold-texto: var(--gold-claro);
  --border-soft: rgba(255,255,255,0.22);
  --bg-soft: rgba(255,255,255,0.06);
  --foco: 3px solid var(--gold-claro);
}

/* Y los titulos, ademas, a «inherit»: h1/h2/h3 salen de --navy-heading, que
   aqui ya es blanco, pero un h4 pintado con un color literal en cualquier
   hoja se quedaria oscuro. Esto lo cubre sin depender de las variables. */
section.fondo.fondo-navy :is(h1, h2, h3, h4, h5, h6),
section.fondo.fondo-navy-alto :is(h1, h2, h3, h4, h5, h6),
section.fondo.fondo-carbon :is(h1, h2, h3, h4, h5, h6),
section.fondo.texto-claro :is(h1, h2, h3, h4, h5, h6){ color: inherit; }

/* El boton secundario invierte al pasar: dorado claro de fondo pide texto
   navy, no blanco. Su color y su borde ya salen de --gold-texto, que arriba
   se redefinio. */
section.fondo.fondo-navy .btn-secundario:hover,
section.fondo.fondo-navy-alto .btn-secundario:hover,
section.fondo.fondo-carbon .btn-secundario:hover,
section.fondo.texto-claro .btn-secundario:hover{ background: var(--gold-claro); color: var(--navy); }

/* --------------------------------------------------------------------- */
/* Y LA VUELTA: texto oscuro a la fuerza                                 */
/*                                                                       */
/* Hace falta cuando el automatico no acierta, y no acierta en dos casos  */
/* reales: una foto de fondo clara sin velo —el fondo es una imagen, no   */
/* un color, y la hoja no puede saber como es— y una seccion cuyas        */
/* tarjetas interiores son blancas, donde aclarar el texto lo deja blanco */
/* sobre blanco.                                                         */
/*                                                                       */
/* Repone los valores de origen en vez de heredarlos porque tiene que     */
/* deshacer el bloque de arriba cuando se usan los dos a la vez. Va       */
/* DESPUES: misma especificidad, gana el ultimo.                         */
/*                                                                       */
/* ⚠ REPONE LOS TOKENS --*-base DE :root, NO LOS COLORES A PELO. Hasta el */
/* 16/09/2026 eran cuatro hexadecimales copiados, y esa copia es la que   */
/* se quedaria vieja el dia que la paleta se edite desde el panel: el     */
/* sitio cambiaria de color menos estas secciones, y sin ningun error.    */
/* Escribir «--charcoal: var(--charcoal)» seria circular; de ahi los      */
/* tokens de origen.                                                     */
/* --------------------------------------------------------------------- */
section.fondo.texto-oscuro{
  color: var(--charcoal);
  --charcoal: var(--charcoal-base);
  --taupe: var(--taupe-base);
  --navy-heading: var(--navy-heading-base);
  --gold-texto: var(--gold-texto-base);
  --border-soft: rgba(var(--taupe-rgb),0.25);
  --bg-soft: rgba(var(--taupe-rgb),0.06);
  --foco: 3px solid var(--gold-texto);
}
section.fondo.texto-oscuro :is(h1, h2, h3){ color: var(--navy-heading); }

/* --------------------------------------------------------------------- */
/* UN CONTENEDOR QUE LLEVA UNA .fila DENTRO YA NO ES EL DEL TEMA          */
/*                                                                       */
/* El tema convierte el contenedor de algunas secciones en una rejilla    */
/* suya, hecha a la medida del marcado original:                          */
/*                                                                       */
/*     .hero .container{ display:grid; grid-template-columns:1.2fr 0.8fr }*/
/*                                                                       */
/* Cuando esa seccion se reparte en columnas desde el constructor, dentro */
/* del contenedor ya no hay dos hijos sino UNO —la .fila—, que cae en la  */
/* primera pista y se queda en poco mas de la mitad del ancho. Lo vio     */
/* Winston el 16/09: «el container en ancho contenedor es de 50%».        */
/*                                                                       */
/* Asi que se devuelve el contenedor a flujo normal en cuanto lleva una   */
/* .fila: ahi la maquetacion la decide la rejilla del constructor, y la   */
/* del tema sobra. La segunda regla es el respaldo para un navegador sin  */
/* :has() —la fila ocupa todas las pistas en vez de una—.                 */
/*                                                                       */
/* ⚠ LA CLASE VA REPETIDA A PROPOSITO. «.container.container:has(>.fila)» */
/* suma 0,3,0 y le gana a «.hero .container» (0,2,0), que vive en la hoja */
/* de la pagina y se carga DESPUES de esta. Escrito con una sola clase    */
/* empata, pierde por orden, y la regla no haria absolutamente nada.      */
/* --------------------------------------------------------------------- */
.container.container:has(> .fila){ display: block; }
.container.container > .fila{ grid-column: 1 / -1; }

/* --------------------------------------------------------------------- */
/* UN CONTENEDOR DEL TEMA QUE SE QUEDO SIN SU PAREJA                      */
/*                                                                       */
/* El tema convierte ocho contenedores en rejilla de DOS pistas —.hero,   */
/* .porque, .contacto-cta, .inversion, .quienes, .experiencia y los dos   */
/* .cta—, hechas a la medida del marcado original: texto a un lado,       */
/* imagen al otro.                                                       */
/*                                                                       */
/* Cuando esa seccion se recompone desde el constructor y queda con UNA   */
/* sola pieza dentro, el hijo que queda cae en la primera pista y se      */
/* planta en el 60 % del ancho. Y si la seccion tiene una sola columna a  */
/* 12/12, el renderer la pinta por la via transparente —sin .fila y sin   */
/* .col—, asi que ninguna de las reglas de columna la alcanza. Es lo que  */
/* vio Winston: puso la columna a 12/12 y el texto siguio a la mitad.     */
/*                                                                       */
/* Un contenedor con un solo hijo ya no es la rejilla de dos columnas que */
/* el tema tenia en la cabeza. Se le devuelve el flujo normal, y el tope  */
/* de medida de su texto —pensado para media pagina— tampoco manda.       */
/*                                                                       */
/* MEDIDO SOBRE LAS SIETE PAGINAS PUBLICADAS antes de escribirlo: de 60   */
/* contenedores, 20 tienen un solo hijo, y de esos solo CINCO no llevan   */
/* .fila dentro. De los cinco, el unico que ademas es rejilla del tema es */
/* el .quienes recompuesto. Es decir: esta regla cambia exactamente un    */
/* elemento del sitio, que es el que estaba mal.                          */
/*                                                                       */
/* ⚠ La clase repetida, como siempre aqui: 0,3,1 para ganarle a           */
/* «.quienes .container» (0,2,0) de la hoja de la pagina, que se carga    */
/* despues. Y el tope de medida se suelta con 0,2,2, que respeta a        */
/* proposito las reglas mas concretas del tema —«.contacto > .container > */
/* div:first-child > p» es 0,2,3 y sigue mandando—: esas no son un tope   */
/* heredado, son parte de su maquetacion.                                 */
/* --------------------------------------------------------------------- */
section > .container.container:not(:has(> * + *)){ display: block; }

section > .container.container:not(:has(> * + *)) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote){
  max-width: none;
}

/* --------------------------------------------------------------------- */
/* UN .container DENTRO DE UNA COLUMNA NO MANDA: MANDA EL col-#           */
/*                                                                       */
/* El contenido importado trae su propio contenedor, y al repartir esa    */
/* seccion en columnas ese contenedor queda DENTRO de una .col. Ahi ya no */
/* pinta nada y ademas estorba de tres formas a la vez:                   */
/*                                                                       */
/*   · su max-width es el del sitio entero (1180) dentro de una columna   */
/*     que mide 544, asi que no limita nada pero tampoco deja crecer;     */
/*   · sus 32 px de relleno a cada lado se suman a los de fuera y dejan   */
/*     el contenido en 480 de los 544 que le tocan;                       */
/*   · y la regla del tema —.hero .container— es un DESCENDIENTE, asi que */
/*     coincide tambien con este de dentro y lo convierte en una rejilla  */
/*     de 1.2fr 0.8fr cuyo unico hijo se queda en la primera pista.       */
/*                                                                       */
/* El ancho de una columna lo decide su col-#, y lo que va dentro ocupa   */
/* el 100 %. Eso es lo que dice esta regla.                               */
/*                                                                       */
/* ⚠ La clase repetida, otra vez, es lo que la hace ganar: «.col          */
/* .container.container» suma 0,3,0 y le gana a «.hero .container»        */
/* (0,2,0) de la hoja de la pagina, que se carga despues.                 */
/* --------------------------------------------------------------------- */
.col .container.container{
  display: block;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------- */
/* DENTRO DE UNA COLUMNA, EL TEXTO SE PARTE                               */
/*                                                                       */
/* El tema escribe cosas como                                            */
/*                                                                       */
/*     .porque h2{ white-space:nowrap }                                  */
/*                                                                       */
/* porque en el ancho completo ese titulo cabia en una linea, y solo lo   */
/* deshace por debajo de 860 px. Metido en una columna de 544 en          */
/* escritorio, el titulo no puede partirse y se sale por la derecha —se   */
/* mide en el inspector: h2 de 544 px de caja y el texto asomando fuera—. */
/*                                                                       */
/* Una columna del constructor no es el ancho que el tema tenia en la     */
/* cabeza, asi que dentro de ella el texto vuelve a partirse siempre.     */
/* overflow-wrap va con ello para el caso raro de una palabra sola mas    */
/* ancha que la columna, que si no se sale igual.                         */
/*                                                                       */
/* Solo elementos de texto: un nowrap sobre una etiqueta, un boton o una  */
/* celda puede ser deliberado, y ahi no se toca.                          */
/*                                                                       */
/* ⚠ La especificidad, otra vez: «.fila > .col :is(h2)» suma 0,2,1 y le   */
/* gana a «.porque h2» (0,1,1) de la hoja de la pagina.                   */
/* --------------------------------------------------------------------- */
.fila > .col :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd, dt){
  white-space: normal;
  overflow-wrap: break-word;
}

/* Y el ancho maximo del tema tampoco manda dentro de una columna.

   El tema limita la medida de sus parrafos —.experiencia p{max-width:560px},
   .quienes p{540px}, .hero p{520px}— porque en su maquetacion original esos
   textos vivian en media pagina. Metido el mismo bloque en una columna de
   12/12, ese tope se queda: el parrafo ocupa 560 de 1116 px y parece que el
   bloque «heredo» el ancho del sitio del que salio. Es lo que se vio al
   duplicar un bloque de 6/12 y ponerlo a 12/12.

   El ancho de una columna lo decide su col-#, y lo que va dentro lo llena.
   Misma regla que ya se aplico al contenedor y al nowrap.

   ⚠ NI img NI figure EN ESTA LISTA. El max-width:100% de una imagen es lo
   que impide que se salga de su caja, y .imagen-original depende del suyo:
   soltarlos aqui romperia las dos cosas para arreglar una tercera. */
.fila > .col :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote){
  max-width: none;
}

/* Y la etiqueta del rotulo, que es un <span> y no entra en la lista de
   arriba.

   NO SE METE EN LA REGLA GENERAL, Y ES A PROPOSITO: un nowrap sobre un span
   puede ser deliberado —un boton, una cifra, una fecha que no debe partirse—,
   asi que la regla generica se queda en los elementos de texto y las
   excepciones se nombran una a una.

   .tag-eyebrow .label lleva nowrap del tema, que solo lo deshace por debajo de
   cierto ancho de PANTALLA. Una columna del constructor es espacio estrecho a
   cualquier ancho de pantalla, asi que ahi el rotulo se sale por la derecha:
   medido, 846 px de caja y el texto siguiendo de largo. Los dos adornos de los
   extremos se quedan donde estan; lo unico que cambia es que el texto de en
   medio puede ocupar dos lineas.

   ⚠ ESTA REGLA NO ESTA EN LA HOJA DEL PAQUETE Y NO PUEDE ESTARLO:
   .tag-eyebrow es una clase de ESTE tema. El paquete no la conoce y no tiene
   por que. Cuando el tema de otro sitio tenga su propio rotulo con nowrap, se
   anadira igual, en su hoja. */
.fila > .col .tag-eyebrow .label{ white-space: normal; }

/* --------------------------------------------------------------------- */
/* «De borde a borde»: deshacer el contenedor que trae el contenido       */
/*                                                                       */
/* El ajuste no puede quitar un <div class="container"> que ya venia      */
/* escrito —eso seria reescribir marcado ajeno, y este constructor no lo  */
/* hace—, asi que lo neutraliza desde aqui.                              */
/*                                                                       */
/* SE QUITA EL ANCHO MAXIMO Y SE CONSERVA EL RELLENO, a proposito. «De    */
/* borde a borde» quiere decir que el contenido llena la pantalla, no que */
/* el texto toque el cristal: sin esos 32 px la primera letra de cada     */
/* linea queda pegada al borde en cuanto la ventana se estrecha.          */
/*                                                                       */
/* Solo el hijo directo: un .container anidado dentro de un componente es */
/* cosa suya y no de este ajuste.                                        */
/* --------------------------------------------------------------------- */
section.ancho-total > .container{ max-width: none; }

/* ===================================================================== */
/* TAMANO Y FORMA DE UNA IMAGEN                                           */
/*                                                                       */
/* Tambien clases, y por lo mismo que el fondo: lo natural al escribir    */
/* «que esta imagen mida la mitad» es un atributo de estilo en linea, y   */
/* ese atributo no llega al sitio.                                        */
/* ===================================================================== */

/* --------------------------------------------------------------------- */
/* Margen exterior de la seccion                                         */
/*                                                                       */
/* El relleno de arriba separa el contenido del borde de SU PROPIO fondo; */
/* el margen separa esta seccion de la siguiente. Son dos cosas y hacen   */
/* falta las dos: sin margen, dos secciones con fondo de color se tocan y */
/* parecen una sola franja.                                              */
/*                                                                       */
/* Mismos cuatro pasos que el relleno, para que las dos escalas hablen el */
/* mismo idioma. Los margenes contiguos se funden —queda el mayor, no la  */
/* suma—, que es como funciona cualquier pagina y conviene recordarlo al  */
/* mirar un hueco que no cuadra.                                         */
/* --------------------------------------------------------------------- */
section.margen.margen-arriba-0{ margin-top:0; }
section.margen.margen-arriba-1{ margin-top:24px; }
section.margen.margen-arriba-2{ margin-top:56px; }
section.margen.margen-arriba-3{ margin-top:96px; }

section.margen.margen-abajo-0{ margin-bottom:0; }
section.margen.margen-abajo-1{ margin-bottom:24px; }
section.margen.margen-abajo-2{ margin-bottom:56px; }
section.margen.margen-abajo-3{ margin-bottom:96px; }

@media (max-width:620px){
  section.margen.margen-arriba-3{ margin-top:64px; }
  section.margen.margen-abajo-3{ margin-bottom:64px; }
}

/* --------------------------------------------------------------------- */
/* Imagen: ancho, alineacion y proporcion                                */
/*                                                                       */
/* Sin clase, la imagen sigue saliendo como salia —llenando su columna—,  */
/* y por eso las paginas que ya existen no cambian ni un pixel.           */
/*                                                                       */
/* En movil, lo que no llena la columna pasa a llenarla. Es la misma      */
/* regla que ya siguen las columnas de la rejilla: un cuarto de columna   */
/* en un telefono son noventa pixeles, que no es una imagen, es un icono. */
/* Quien la quiera pequena de verdad ahi lo dice con una clase propia.    */
/* --------------------------------------------------------------------- */
.imagen-25{ width:25%; }
.imagen-50{ width:50%; }
.imagen-75{ width:75%; }
.imagen-100{ width:100%; }

/* «El del archivo»: ni se agranda ni se sale de la columna. */
.imagen-original{ width:max-content; max-width:100%; }
.imagen-original img{ width:auto; max-width:100%; }

@media (max-width:620px){
  .imagen-25, .imagen-50, .imagen-75{ width:100%; }
}

.imagen-al-izquierda{ margin-inline:0 auto; }
.imagen-al-centro{ margin-inline:auto; }
.imagen-al-derecha{ margin-inline:auto 0; }

/* La proporcion recorta por el centro. Es lo que alinea varias imagenes
   puestas en fila, que de otro modo bailan segun lo que midiera cada foto. */
.imagen-prop-1-1 img{ aspect-ratio:1/1; object-fit:cover; }
.imagen-prop-4-3 img{ aspect-ratio:4/3; object-fit:cover; }
.imagen-prop-16-9 img{ aspect-ratio:16/9; object-fit:cover; }
.imagen-prop-3-4 img{ aspect-ratio:3/4; object-fit:cover; }

/* --------------------------------------------------------------------- */
/* Imagen: formas                                                        */
/*                                                                       */
/* Casi todas son border-radius y no clip-path A PROPOSITO: el recorte de */
/* clip-path se lleva por delante cualquier sombra o borde —el marco cae  */
/* fuera del recorte y desaparece—, mientras que el redondeo los respeta. */
/* Solo el hexagono y el rombo no se pueden dibujar con radios, y son las */
/* dos unicas formas que no admiten marco.                                */
/* --------------------------------------------------------------------- */
.mascara-suave img{ border-radius:8px; }
.mascara-redonda img{ border-radius:18px; }
.mascara-muy-redonda img{ border-radius:36px; }
.mascara-pildora img{ border-radius:999px; }
.mascara-arco img{ border-radius:999px 999px 14px 14px; }
.mascara-blob img{ border-radius:62% 38% 46% 54% / 60% 54% 46% 40%; }

/* El circulo impone la proporcion: un circulo sobre una foto apaisada es
   una elipse, y nadie que elija «circulo» quiere una elipse. */
.mascara-circulo img{ border-radius:50%; aspect-ratio:1/1; object-fit:cover; }

.mascara-hexagono img{
  border-radius:0;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.mascara-rombo img{
  border-radius:0;
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* --------------------------------------------------------------------- */
/* Imagen: marcos                                                        */
/* --------------------------------------------------------------------- */
.marco-linea img{ border:1px solid var(--border-soft, rgba(121,100,92,.25)); }

.marco-borde img{
  border:8px solid var(--white, #fff);
  box-shadow:0 0 0 1px var(--border-soft, rgba(121,100,92,.25));
}

.marco-sombra img{ box-shadow:0 18px 40px rgba(var(--navy-rgb),.18); }

/* El marco desplazado se dibuja detras y asomando por una esquina. Lleva
   su propio isolate para que su -1 no se vaya detras del fondo de la
   seccion cuando la imagen esta dentro de una que tiene fondo. */
.marco-desplazado{ position:relative; isolation:isolate; }
.marco-desplazado::before{
  content:""; position:absolute; z-index:-1;
  inset:16px -16px -16px 16px;
  border:2px solid var(--gold, #b8967e);
}
@media (max-width:620px){
  .marco-desplazado::before{ inset:10px -10px -10px 10px; }
}