@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   Albujon Energy — hoja de estilo única
   Sin dependencias. Sin preprocesador. Sin estilos en línea (CSP estricta).
   Orden: tokens · base · utilidades · movimiento · nav · portada ·
          secciones · banda · formulario · pie · legales · 404 · anchos
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ FUENTES ═══ generado por scripts/fetch-fonts.js — no editar a mano */
/* === INICIO FUENTES === */
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-serif-latin-ext-italic-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-serif-latin-italic-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-serif-latin-ext-normal-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-serif-latin-normal-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-sans-latin-ext-italic-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/source-sans-latin-italic-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/source-sans-latin-ext-normal-400-600.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/source-sans-latin-normal-400-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === FIN FUENTES === */

/* ═══ RESPALDOS CON MÉTRICAS AJUSTADAS ═════════════════════════════
   Mientras la tipografía definitiva se descarga, el navegador pinta con la de
   respaldo. Si ocupan distinto, al llegar la buena el texto se recoloca: eso
   es el salto de maquetación (CLS), y en esta portada valía 0,145.

   La solución NO es quitar `font-display:swap` —dejaría el titular invisible
   hasta que llegara la fuente—, sino corregir el ancho del respaldo para que
   ocupe lo mismo. Los factores están MEDIDOS, no estimados:
   `node scripts/calcular-respaldos.js` compara el ancho de cuatro frases en
   español e inglés en cada par. Si algún día se cambia de tipografía, hay que
   volver a ejecutarlo.
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Serif respaldo';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:106.0%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Sans respaldo';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:92.6%;
  line-gap-override:0%;
}

/* ═══ 1 · TOKENS ══════════════════════════════════════════════════════
   Todo color se declara en :root y se REDEFINE para oscuro. Nunca se
   declara un color únicamente dentro de un @media.
   Los tokens decorativos (--linea) están separados de los funcionales
   (--campo): subir el contraste de un borde de formulario no debe
   oscurecer todos los filetes de la página.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* fondos */
  --papel:#FBFAF7;
  --arena:#F2F0E8;
  /* textos */
  --tinta:#101915;
  --tinta-media:#4A574F;
  --tinta-suave:#59665E;
  /* marca */
  --pino:#0F3D22;
  --pino-2:#17552F;
  --hoja:#2E8B2A;
  --sol:#F5B811;
  --sol-vivo:#FFC734;
  --sol-tinta:#7A5600;
  /* banda en negativo: idéntica en ambos temas */
  --hondo:#0F3D22;
  --sobre-hondo:#F6F8F4;
  --sobre-hondo-media:#BBCBBF;
  /* botón primario */
  --btn-fondo:#0F3D22;
  --btn-texto:#FBFAF7;
  /* filetes y bordes */
  --linea:rgba(16,25,21,.12);
  --linea-fuerte:rgba(16,25,21,.26);
  --campo:rgba(16,25,21,.50);
  --campo-fondo:#FFFFFF;
  --trama:rgba(16,25,21,.05);
  /* estados */
  --error:#A3372A;
  --acierto:#1F6E2B;
  /* movimiento y medidas */
  /* Escala tipográfica: tres tamaños para todo el texto que no es titular.
     Antes cada elemento llevaba su propio clamp y había once tamaños de
     etiqueta distintos; eso es lo que hacía que el conjunto no cuadrara. */
  --t-etiqueta:clamp(.66rem,.82vw,.72rem);   /* versalitas de rótulo */
  --t-menudo:.8rem;                          /* pies de foto y notas */
  --t-cuerpo:clamp(.95rem,1.05vw,1.02rem);   /* texto corrido */
  --sp-etiqueta:.16em;                       /* entreletra de versalita */
  --curva:cubic-bezier(.19,1,.22,1);
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --shell:78rem;
  color-scheme:light;
}

/* Oscuro automático. El :not([data-theme="light"]) deja que un
   conmutador manual gane siempre sobre la preferencia del sistema. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#0C110F;
    --arena:#131A16;
    --tinta:#E9EEEA;
    --tinta-media:#A8B4AC;
    --tinta-suave:#9AA79E;
    --pino:#8ED49D;
    --pino-2:#A7E0B4;
    --hoja:#5CBF58;
    --sol:#F5B811;
    --sol-vivo:#FFC734;
    --sol-tinta:#F0BC3A;
    --hondo:#08150D;
    --sobre-hondo:#F6F8F4;
    --sobre-hondo-media:#BBCBBF;
    --btn-fondo:#F5B811;
    --btn-texto:#0C110F;
    --linea:rgba(233,238,234,.14);
    --linea-fuerte:rgba(233,238,234,.30);
    --campo:rgba(233,238,234,.52);
    --campo-fondo:#0F1713;
    --trama:rgba(233,238,234,.055);
    --error:#F2907C;
    --acierto:#7BD07F;
    color-scheme:dark;
  }
}

/* Conmutador manual a oscuro: mismos valores, mayor especificidad. */
:root[data-theme="dark"]{
  --papel:#0C110F;
  --arena:#131A16;
  --tinta:#E9EEEA;
  --tinta-media:#A8B4AC;
  --tinta-suave:#9AA79E;
  --pino:#8ED49D;
  --pino-2:#A7E0B4;
  --hoja:#5CBF58;
  --sol:#F5B811;
  --sol-vivo:#FFC734;
  --sol-tinta:#F0BC3A;
  --hondo:#08150D;
  --sobre-hondo:#F6F8F4;
  --sobre-hondo-media:#BBCBBF;
  --btn-fondo:#F5B811;
  --btn-texto:#0C110F;
  --linea:rgba(233,238,234,.14);
  --linea-fuerte:rgba(233,238,234,.30);
  --campo:rgba(233,238,234,.52);
  --campo-fondo:#0F1713;
  --trama:rgba(233,238,234,.055);
  --error:#F2907C;
  --acierto:#7BD07F;
  color-scheme:dark;
}

/* ═══ 2 · BASE ══════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:'Source Sans 3','Sans respaldo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Palabras compuestas largas (alemán) no deben desbordar en 320px */
  overflow-wrap:break-word;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--sol);color:#0F3D22}

/* Safari 15.0–15.3 no soporta :focus-visible y descarta TODA la regla si
   aparece en un selector agrupado. Este patrón en dos reglas es seguro. */
:focus{outline:2px solid var(--sol);outline-offset:3px;border-radius:1px}
:focus:not(:focus-visible){outline:none}

/* ═══ 3 · UTILIDADES ════════════════════════════════════════════════ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.ser{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;letter-spacing:-.012em}
.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}
.saltar{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--pino);color:var(--papel);padding:.85rem 1.35rem;font-size:.85rem;font-weight:600;text-decoration:none}
.saltar:focus{left:.5rem;top:.5rem}

/* ═══ 4 · MOVIMIENTO ════════════════════════════════════════════════
   REGLA CRÍTICA: el HTML marca con [data-rv], que no tiene efecto visual.
   Es el JS quien añade la clase .rv para ocultar, y solo a lo que aún no
   se ve. Sin JS, o si el observador falla, TODO queda visible.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .rv{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .85s var(--curva),transform .85s var(--curva);
  }
  .rv.en{opacity:1;transform:none}
  /* cortina sobre las imágenes */
  .rv .medio{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--curva)}
  .rv.en .medio{clip-path:inset(0)}
  /* escalonado entre hermanos, sin estilos en línea */
  .rv.d1{transition-delay:.07s}
  .rv.d2{transition-delay:.14s}
  .rv.d3{transition-delay:.21s}
  .rv.d1 .medio,.rv.d2 .medio,.rv.d3 .medio{transition-delay:inherit}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .medio{clip-path:none}
  .linea-progresiva::before{transform:scaleY(1)}
}

/* Parallax ligado al scroll, sin una sola línea de JS.
   Donde no haya soporte simplemente no hay parallax: coste y riesgo cero. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .deriva img{
      animation:deriva linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes deriva{
      from{transform:scale(1.07) translateY(-1.2%)}
      to{transform:scale(1.07) translateY(1.2%)}
    }
  }
}

/* ═══ 5 · NAVEGACIÓN ════════════════════════════════════════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:600;
  padding-block:clamp(.85rem,1.6vw,1.35rem);
  transition:background .45s var(--curva),box-shadow .45s,padding .45s var(--curva);
}
.nav.solida{
  background:var(--papel);
  box-shadow:0 1px 0 var(--linea);
  padding-block:.65rem;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav.solida{
    background:color-mix(in srgb,var(--papel) 92%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
  }
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;position:relative}

.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0;min-width:0}
.marca svg{width:clamp(30px,3.2vw,36px);height:auto;flex-shrink:0}
.marca-t{line-height:1.05;min-width:0}
.marca-t b{
  display:block;font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.6vw,1.15rem);letter-spacing:-.01em;
  color:#FFFFFF;transition:color .45s;
}
.marca-t s{
  display:block;text-decoration:none;font-size:.56rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sol);
}
.nav.solida .marca-t b{color:var(--pino)}

.enlaces{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2.1rem);list-style:none;margin:0}
.enlaces a{
  font-size:.85rem;font-weight:500;text-decoration:none;white-space:nowrap;
  color:rgba(255,255,255,.84);transition:color .3s;position:relative;
}
.enlaces a[aria-current="page"]{color:#FFFFFF}
.enlaces a:not(.cta)::after{
  content:'';position:absolute;left:0;bottom:-5px;height:1.5px;width:0;
  background:var(--sol);transition:width .3s var(--curva);
}
.enlaces a[aria-current="page"]:not(.cta)::after{width:100%}
.nav.solida .enlaces a:not(.cta){color:var(--tinta-media)}
.nav.solida .enlaces a:not(.cta)[aria-current="page"]{color:var(--pino)}
@media (hover:hover){
  .enlaces a:hover{color:#FFFFFF}
  .enlaces a:not(.cta):hover::after{width:100%}
  .nav.solida .enlaces a:not(.cta):hover{color:var(--pino)}
}

.cta{
  font-weight:600!important;color:#0F3D22!important;background:var(--sol);
  padding:.58rem 1.25rem;border-radius:2px;
  transition:background .3s,transform .3s var(--curva);
}
@media (hover:hover){.cta:hover{background:var(--sol-vivo);transform:translateY(-1px)}}

/* Selector de idioma: un <details>, funciona sin JS */
.idioma{position:relative;flex-shrink:0}
.idioma>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.32rem;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;padding:.42rem .6rem;
  color:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.3);
  border-radius:2px;transition:color .3s,border-color .3s;
}
.idioma>summary::-webkit-details-marker{display:none}
.idioma>summary::after{
  content:'';width:.42em;height:.42em;flex-shrink:0;margin-left:.1rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.idioma[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.nav.solida .idioma>summary{color:var(--tinta-media);border-color:var(--linea-fuerte)}
@media (hover:hover){
  .idioma>summary:hover{color:#FFFFFF;border-color:rgba(255,255,255,.62)}
  .nav.solida .idioma>summary:hover{color:var(--pino);border-color:var(--pino)}
}
.idioma ul{
  position:absolute;top:calc(100% + .45rem);right:0;z-index:20;
  list-style:none;min-width:9.5rem;padding:.3rem 0;
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:2px;
  box-shadow:0 14px 34px rgba(16,25,21,.16);
}
.idioma ul a{
  display:block;padding:.5rem .95rem;font-size:.84rem;font-weight:500;
  color:var(--tinta-media)!important;text-decoration:none;white-space:nowrap;
}
.idioma ul a[aria-current="true"]{color:var(--pino)!important;font-weight:600}
.idioma ul a::after{display:none!important}
@media (hover:hover){.idioma ul a:hover{background:var(--arena);color:var(--pino)!important}}

/* Botón hamburguesa: 44×44 de área táctil (WCAG 2.2) */
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;flex-shrink:0}
.burger i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#FFFFFF;transition:transform .35s var(--curva),opacity .2s,top .35s var(--curva),background .45s}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:26px}
.nav.solida .burger i{background:var(--pino)}
.burger[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ═══ 6 · PORTADA ═══════════════════════════════════════════════════ */
.portada{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
/* El <picture> se posiciona él mismo: es un elemento en línea y, si se deja
   en el flujo con la imagen absoluta dentro, deja una caja de texto vacía que
   descuadra la altura de la portada. */
.portada .fondo{position:absolute;inset:0;z-index:-2;display:block}
.portada .fondo img{width:100%;height:100%;object-fit:cover}
.portada::after{
  content:'';position:absolute;inset:0;z-index:-1;
  /* Los porcentajes no son estéticos, son de legibilidad: se abre la foto en
     el tercio superior (donde no hay texto) y se cierra a partir del 55%, que
     es donde caen el titular, la entradilla y los botones. */
  background:linear-gradient(178deg,
    rgba(7,26,14,.72) 0%,
    rgba(7,26,14,.38) 24%,
    rgba(7,26,14,.78) 58%,
    rgba(7,26,14,.95) 100%);
}
/* Trama de rejilla sobre la portada: es CSS, pesa cero y no retrasa nada */
.portada::before{
  content:'';position:absolute;inset:0 0 auto;height:min(720px,88%);z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 88%);
}
.portada-cuerpo{padding-block:clamp(6rem,14vh,9rem) clamp(2rem,4vh,3rem)}

.tag{display:inline-flex;align-items:center;gap:.55rem;color:#FFFFFF;font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;margin-bottom:clamp(1rem,2.4vh,1.7rem)}
.tag::before{content:'';width:clamp(20px,4vw,34px);height:1.5px;background:var(--sol);flex-shrink:0}

/* Los anchos máximos van en `em`, NUNCA en `ch`.
   `ch` mide el ancho del glifo «0» de la tipografía que esté disponible en
   ese momento. Mientras se descarga la definitiva manda el respaldo, con un
   «0» distinto: el contenedor mide otra cosa, el texto parte por otro sitio
   y, al llegar la buena, el titular pasaba de 3 a 4 líneas y empujaba media
   portada. `em` depende solo del tamaño de letra, así que el contenedor mide
   lo mismo con cualquiera de las dos. Factores medidos con scripts/medir-ch.js. */
h1{
  font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,6vw,4.4rem);line-height:1.08;letter-spacing:-.016em;
  color:#FFFFFF;max-width:9em;text-wrap:balance;
}
/* «19 años» es una unidad: si el salto de línea la parte, el titular se
   lee como si faltara algo. */
h1 i{font-style:italic;color:var(--sol);white-space:nowrap}
.portada .entrada{margin-top:clamp(1rem,2.5vh,1.6rem);max-width:22.9em;font-size:clamp(.95rem,1.15vw,1.12rem);font-weight:400;line-height:1.72;color:rgba(255,255,255,.85)}
.portada-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.6rem,3.4vh,2.4rem)}

.b{display:inline-block;font-family:inherit;font-size:.87rem;font-weight:600;padding:.88rem 1.85rem;border-radius:2px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;text-align:center;transition:background .3s,border-color .3s,color .3s,transform .3s var(--curva)}
.b-sol{background:var(--sol);color:#0F3D22;border-color:var(--sol)}
.b-fantasma{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.48)}
.b-pino{background:var(--btn-fondo);color:var(--btn-texto);border-color:var(--btn-fondo)}
@media (hover:hover){
  .b-sol:hover{background:var(--sol-vivo);border-color:var(--sol-vivo);transform:translateY(-1px)}
  .b-fantasma:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12)}
  .b-pino:hover{background:var(--pino-2);border-color:var(--pino-2);transform:translateY(-1px)}
}

/* Franja de datos al pie de la portada */
.franja{border-top:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.franja-in{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,5vw,4.2rem);padding-block:clamp(1.1rem,2.4vh,1.7rem)}
.dato b{display:block;font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:clamp(1.25rem,2.6vw,1.9rem);color:#FFFFFF;line-height:1.15}
.dato span{display:block;font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ═══ 6b · JUSTIFICADO ══════════════════════════════════════════════
   Solo en columnas anchas. En una columna estrecha el justificado abre
   calles blancas verticales que se leen peor que la bandera; por eso
   quedan fuera los pies de foto, los rótulos, las fichas de contacto y
   los textos de las cifras, todos por debajo de 40 caracteres por línea.

   La partición silábica depende del atributo lang de la página: sin él,
   `hyphens:auto` no hace absolutamente nada. Cada página lo declara.

   AVISO para quien revise capturas: Chrome en Windows descarga los
   diccionarios de guionado bajo demanda. En un Chrome recién instalado, o
   sin ventana, el texto justificado sale con huecos grandes que el
   visitante real no verá.
   ══════════════════════════════════════════════════════════════════ */
.entrada,
.svc-lista p,
.porque-lista p,
.texto p,
.texto li{
  /* El guionado se deja puesto en todos los anchos: también suaviza el borde
     derecho de un texto en bandera. */
  -webkit-hyphens:auto;
  hyphens:auto;
  hyphenate-limit-chars:7 3 3;
}

/* Justificado SOLO a partir de 640 px.
   Motivo medido, no estético: `scripts/probar-guionado.js` confirma que un
   Chrome de Windows puede no tener instalado el diccionario de partición
   silábica. Sin él, una columna de móvil (unos 45 caracteres por línea) se
   llena de calles blancas verticales. A partir de 640 px la columna pasa de
   65 caracteres y el justificado aguanta aunque no haya diccionario.
   En el móvil, la bandera es lo normal y se lee mejor. */
@media (min-width:640px){
  .entrada,
  .svc-lista p,
  .porque-lista p,
  .texto p,
  .texto li{
    text-align:justify;
    text-justify:inter-word;
  }
}

/* ═══ 7 · SECCIONES ═════════════════════════════════════════════════ */
section{scroll-margin-top:5rem}
.pad{padding-block:clamp(3.75rem,9vw,7.5rem)}
.rotulo{display:flex;align-items:center;gap:.7rem;font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:var(--sol-tinta);margin-bottom:1rem}
.rotulo::before{content:'';width:24px;height:1.5px;background:var(--sol);flex-shrink:0}
h2{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:clamp(1.55rem,3.6vw,2.5rem);line-height:1.16;letter-spacing:-.012em;color:var(--pino);max-width:10.6em;text-wrap:balance}
h2.ancho{max-width:13.8em}
.entrada{color:var(--tinta-media);font-weight:400;font-size:var(--t-cuerpo);max-width:26.8em}
.entrada+.entrada{margin-top:1rem}
.sep{margin-top:1.15rem}
figure{margin:0;position:relative}
figcaption{margin-top:.6rem;font-size:var(--t-menudo);color:var(--tinta-suave);display:flex;align-items:center;gap:.45rem}
figcaption::before{content:'';width:12px;height:1px;background:currentColor;flex-shrink:0}
/* Contenedor de imagen: aspect-ratio aquí y object-fit dentro, para que la
   página no descuadre si el CSS llega tarde o la imagen es de otro tamaño */
.medio{overflow:hidden;border-radius:2px;background:var(--arena)}
/* picture es inline por defecto: sin esto, el height:100% de la imagen no
   tiene contra qué resolverse y la foto se sale del hueco */
.medio picture{display:block;width:100%;height:100%}
.medio img{width:100%;height:100%;object-fit:cover}

/* 7.1 Quiénes somos */
.sobre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.sobre-img .medio{aspect-ratio:4/5}
/* El sello se ancla al marco de la foto, no a la <figure>: anclado a la
   figura, su borde inferior cae POR DEBAJO del pie de foto y el círculo se
   monta encima del texto. */
.marco{position:relative}
/* Dentro del recuadro de la foto, no colgando por fuera: sobresaliendo se
   monta sobre el pie de foto y, en 320 px, se sale del margen lateral. */
.sello{
  position:absolute;left:clamp(.7rem,2vw,1.15rem);bottom:clamp(.7rem,2vw,1.15rem);
  width:clamp(80px,11vw,124px);aspect-ratio:1;border-radius:50%;
  background:var(--sol);display:grid;place-content:center;text-align:center;
  box-shadow:0 12px 34px rgba(15,61,34,.24);
}
.sello b{display:block;font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:clamp(1.1rem,2vw,1.6rem);color:#0F3D22;line-height:1}
.sello span{display:block;font-size:clamp(.42rem,.62vw,.53rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#0F3D22;opacity:.78}
.cita{margin-top:clamp(1.6rem,3.4vw,2.4rem);padding-left:clamp(1rem,2vw,1.5rem);border-left:2px solid var(--sol)}
.cita p{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-style:italic;font-size:clamp(1rem,1.6vw,1.28rem);line-height:1.5;color:var(--pino)}

/* 7.2 Qué hacemos */
.seccion-arena{background:var(--arena);border-block:1px solid var(--linea)}
.svc-cab{max-width:46rem;margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.svc-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.svc-fija{position:sticky;top:6rem}
.svc-fija .medio{aspect-ratio:3/4}
.svc-lista{list-style:none;counter-reset:s;position:relative}
/* Línea que se dibuja a lo largo de los cuatro pasos.
   Por defecto está ENTERA: solo se recoge cuando el JS marca el elemento con
   .rv. Si el script no corre, la línea se ve completa en vez de faltar. */
.svc-lista.linea-progresiva::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1.5px;
  background:var(--sol);transform:scaleY(1);transform-origin:top;
  transition:transform 1.4s var(--curva);
}
@media (prefers-reduced-motion: no-preference){
  .svc-lista.linea-progresiva.rv::before{transform:scaleY(0)}
  .svc-lista.linea-progresiva.rv.en::before{transform:scaleY(1)}
}
.svc-lista li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.9rem,2.4vw,1.9rem);padding:clamp(1.3rem,2.6vw,1.9rem) 0 clamp(1.3rem,2.6vw,1.9rem) clamp(1rem,2vw,1.6rem);border-top:1px solid var(--linea)}
.svc-lista li:last-child{border-bottom:1px solid var(--linea)}
.svc-lista li::before{content:counter(s,decimal-leading-zero);font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-size:clamp(.88rem,1.2vw,1rem);color:var(--sol-tinta);padding-top:.22em}
.svc-lista h3{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:600;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--pino);margin-bottom:.35rem;letter-spacing:-.01em}
.svc-lista p{font-size:var(--t-cuerpo);color:var(--tinta-media);font-weight:400;line-height:1.75;max-width:27.8em}

/* 7.3 Por qué nosotros — banda en negativo */
.seccion-honda{background:var(--hondo);color:var(--sobre-hondo);position:relative;isolation:isolate}
.seccion-honda .rotulo{color:var(--sol)}
.seccion-honda h2{color:var(--sobre-hondo)}
.seccion-honda figcaption{color:var(--sobre-hondo-media)}
.porque{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.porque-lista{list-style:none;margin-top:clamp(1.6rem,3.4vw,2.6rem);display:grid;gap:clamp(1.1rem,2.4vw,1.7rem)}
.porque-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.9rem,2vw,1.4rem);padding-top:clamp(1.1rem,2.4vw,1.7rem);border-top:1px solid rgba(245,184,17,.32)}
.porque-lista li>svg{width:20px;height:20px;margin-top:.28em;flex-shrink:0;color:var(--sol)}
.porque-lista h3{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:600;font-size:clamp(1rem,1.5vw,1.16rem);color:var(--sobre-hondo);margin-bottom:.3rem}
.porque-lista p{font-size:var(--t-cuerpo);color:var(--sobre-hondo-media);font-weight:400;line-height:1.75}
.porque-img .medio{aspect-ratio:1}

/* 7.4 Cifras: banda estrecha con contador */
.cifras{background:var(--hondo);border-top:1px solid rgba(245,184,17,.24);color:var(--sobre-hondo);padding-block:clamp(2.4rem,5.5vw,4rem)}
.cifras-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:clamp(1.6rem,4vw,3.4rem)}
.cifra b{display:block;font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1;color:var(--sol);letter-spacing:-.02em}
.cifra b i{font-style:normal;font-size:.5em;margin-left:.15em;letter-spacing:0}
/* Hijo directo, no descendiente: el número vive dentro de un <span> propio
   (lo necesita el contador) y con `.cifra span` heredaba el tamaño diminuto
   de la etiqueta en vez del de la cifra. */
.cifra > span{display:block;margin-top:.55rem;font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:var(--sobre-hondo-media)}
.cifra p{margin-top:.55rem;font-size:.85rem;font-weight:400;line-height:1.7;color:var(--sobre-hondo-media);max-width:14.9em}

/* ═══ 8 · CONTACTO Y FORMULARIO ═════════════════════════════════════ */
.contacto{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.2rem,5vw,5rem);align-items:start}
.datos{margin-top:clamp(1.6rem,3.4vw,2.4rem);display:grid;gap:1.3rem}
.datos dt{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:var(--sol-tinta);margin-bottom:.28rem}
.datos dd{font-size:var(--t-cuerpo);color:var(--tinta-media);font-weight:400;line-height:1.7}
.datos a{color:var(--pino);text-decoration:none;border-bottom:1px solid var(--linea-fuerte);transition:border-color .3s;overflow-wrap:anywhere}
@media (hover:hover){.datos a:hover{border-color:var(--pino)}}

form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(1rem,2vw,1.35rem)}
.f-ancho{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:.42rem;min-width:0}
label{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:var(--tinta-media)}
label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--tinta-suave)}
input[type=text],input[type=email],textarea{
  font-family:inherit;font-size:.95rem;color:var(--tinta);width:100%;
  background:var(--campo-fondo);border:1px solid var(--campo);border-radius:2px;
  padding:.8rem .9rem;transition:border-color .3s,box-shadow .3s;
}
input[type=text]:focus,input[type=email]:focus,textarea:focus{outline:none;border-color:var(--hoja);box-shadow:0 0 0 3px rgba(46,139,42,.18)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(163,55,42,.14)}
textarea{resize:vertical;min-height:8.5rem}
.acepta{display:flex;gap:.7rem;align-items:flex-start}
.acepta input{width:18px;height:18px;accent-color:var(--hoja);margin-top:.18em;flex-shrink:0;cursor:pointer}
.acepta label{font-size:.79rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta-media);line-height:1.65;cursor:pointer}
.acepta label a{color:var(--pino);text-decoration:underline}
.nota-lopd{grid-column:1/-1;font-size:var(--t-menudo);line-height:1.7;color:var(--tinta-suave);font-weight:400;border-left:2px solid var(--linea-fuerte);padding-left:.9rem}
.nota-lopd a{color:var(--pino)}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.enviar{width:100%}
.enviar:disabled{opacity:.55;cursor:wait}
.aviso{margin-top:.9rem;font-size:.88rem;display:none;line-height:1.6}
.aviso.ok{display:block;color:var(--acierto)}
.aviso.mal{display:block;color:var(--error)}
form[aria-busy="true"]{cursor:progress}

/* ═══ 9 · PIE ═══════════════════════════════════════════════════════ */
footer{background:var(--arena);border-top:1px solid var(--linea);padding-block:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3vw,2rem)}
.pie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:clamp(1.5rem,4vw,3rem)}
.pie-marca{display:flex;align-items:center;gap:.6rem;margin-bottom:.65rem}
.pie-marca svg{width:28px;height:auto;flex-shrink:0}
.pie-marca b{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:1rem;color:var(--pino)}
footer p,footer address{font-size:var(--t-menudo);color:var(--tinta-media);font-weight:400;line-height:1.85;font-style:normal}
footer h2{font-size:var(--t-etiqueta);font-family:inherit;font-weight:600;letter-spacing:var(--sp-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.55rem;max-width:none}
.pie-nav{list-style:none;display:grid;gap:.35rem}
.pie-nav a{font-size:var(--t-menudo);color:var(--tinta-media);text-decoration:none;font-weight:400}
@media (hover:hover){.pie-nav a:hover,footer address a:hover{color:var(--pino);text-decoration:underline}}
footer address a{color:var(--pino);text-decoration:none;overflow-wrap:anywhere}
.pie-bajo{margin-top:clamp(1.6rem,3.4vw,2.4rem);padding-top:1.2rem;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.2rem;font-size:.73rem;color:var(--tinta-suave);font-weight:400}
/* Micro-animación del logotipo al llegar al pie */
@media (prefers-reduced-motion: no-preference){
  .pie-marca.en svg{animation:girasol 1.2s var(--curva) both}
  @keyframes girasol{from{opacity:0;transform:rotate(-14deg) scale(.86)}to{opacity:1;transform:none}}
}

/* ═══ 10 · PÁGINAS LEGALES ══════════════════════════════════════════ */
.cabecera-legal{padding-block:clamp(7rem,14vh,10rem) clamp(1.6rem,4vw,2.6rem);border-bottom:1px solid var(--linea);background:var(--arena)}
.cabecera-legal h1{color:var(--pino);font-size:clamp(1.7rem,4vw,2.6rem)}
.cabecera-legal h1{max-width:44rem;margin-inline:auto}
.cabecera-legal .fecha{max-width:44rem;margin-inline:auto;margin-top:.9rem;font-size:.76rem;color:var(--tinta-suave);letter-spacing:.06em}
.texto{padding-block:clamp(2.4rem,6vw,4.5rem)}
/* La columna de texto va centrada en la página, no pegada al margen
   izquierdo: es lo que se espera de un documento legal. El texto de
   dentro sigue justificado, no centrado línea a línea. */
.texto-in{max-width:44rem;margin-inline:auto}
.texto h2{font-size:clamp(1.15rem,2.4vw,1.55rem);margin-top:clamp(2rem,4vw,3rem);margin-bottom:.85rem;max-width:18em;color:var(--pino)}
.texto h2:first-child{margin-top:0}
.texto h3{font-family:'Source Serif 4','Serif respaldo',Georgia,serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.18rem);color:var(--pino);margin-top:1.5rem;margin-bottom:.45rem}
.texto p,.texto li{font-size:var(--t-cuerpo);font-weight:400;line-height:1.8;color:var(--tinta-media)}
.texto p+p{margin-top:.9rem}
.texto ul,.texto ol{margin:.85rem 0 .85rem 1.15rem;display:grid;gap:.45rem}
.texto li{padding-left:.2rem}
.texto a{color:var(--pino);text-decoration:underline;overflow-wrap:anywhere}
.texto strong{font-weight:600;color:var(--tinta)}
.tabla-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--linea)}
.texto table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.84rem}
.texto th,.texto td{text-align:left;vertical-align:top;padding:.7rem .85rem;border-bottom:1px solid var(--linea);font-weight:400;color:var(--tinta-media);hyphens:auto}
/* `anywhere` solo en las celdas de datos: ahí hay URLs y palabras compuestas
   alemanas que deben poder partirse por cualquier punto. Aplicado también a
   las cabeceras, el navegador las reduce a su anchura mínima y destroza las
   etiquetas cortas («RESPONS/ABLE», «FINALIDA/D»). */
.texto td{overflow-wrap:anywhere}
.texto th{
  font-family:inherit;font-weight:600;font-size:var(--t-etiqueta);letter-spacing:var(--sp-etiqueta);
  text-transform:uppercase;color:var(--tinta);background:var(--arena);
  overflow-wrap:normal;hyphens:none;min-width:7.5rem;
}
.texto tr:last-child td{border-bottom:0}
.resumen{border:1px solid var(--linea-fuerte);border-left:3px solid var(--sol);padding:clamp(1rem,2.5vw,1.6rem);margin-bottom:clamp(1.6rem,4vw,2.4rem);background:var(--arena)}
.resumen h2{margin-top:0}
.nota-traduccion{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--linea);font-size:.8rem;color:var(--tinta-suave);font-style:italic}

/* ═══ 11 · 404 ══════════════════════════════════════════════════════ */
.perdido{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(1.5rem,6vw,3rem);gap:.3rem}
.perdido svg{width:clamp(66px,12vw,92px);height:auto;margin-bottom:clamp(1.2rem,3vw,1.8rem)}
.perdido h1{color:var(--pino);font-size:clamp(1.6rem,5vw,2.4rem);max-width:10em}
.perdido p{color:var(--tinta-media);font-weight:400;max-width:17.9em;margin:.75rem 0 clamp(1.5rem,4vw,2.2rem);font-size:.96rem}
.perdido .b{min-width:12rem}
.marca-404{display:block}
.rotulo-404{justify-content:center;margin-bottom:.4rem}
.rotulo-404::before{display:none}
.idiomas-404{
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.2rem;
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;
  max-width:32rem;
}
.idiomas-404 a{font-size:var(--t-menudo);font-weight:400;color:var(--tinta-suave);text-decoration:none;padding:.3rem .1rem}
@media (hover:hover){.idiomas-404 a:hover{color:var(--pino);text-decoration:underline}}

/* ═══ 12 · ALTO CONTRASTE E IMPRESIÓN ═══════════════════════════════ */
@media (forced-colors: active){
  .portada::before,.portada::after{display:none}
  .rotulo::before,.tag::before,figcaption::before{forced-color-adjust:none;background:CanvasText}
  .b,.cta,.idioma>summary{border:1px solid ButtonText;forced-color-adjust:none}
  .sello{forced-color-adjust:none;border:1px solid CanvasText}
  .rv{opacity:1;transform:none}
}
@media print{
  .nav,.portada::before,.portada::after,.saltar,form,.idioma{display:none!important}
  body{background:#fff;color:#000}
  .portada{min-height:auto}
  .rv{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all}
}

/* ═══ 13 · ANCHOS ═══════════════════════════════════════════════════
   Verificado con Chrome real en 14 anchos, de 320 a 2560 px.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .svc-wrap{grid-template-columns:1fr}
  .svc-fija{position:static;max-width:26rem}
  .svc-fija .medio{aspect-ratio:16/10}
}
@media (max-width:900px){
  .sobre,.porque,.contacto{grid-template-columns:1fr}
  .sobre-img{order:-1;max-width:30rem}
  .sobre-img .medio{aspect-ratio:5/4}
  .porque-img{max-width:26rem}
  .porque-img .medio{aspect-ratio:16/11}
}
@media (max-width:820px){
  .burger{display:block}
  .enlaces{
    position:absolute;top:calc(100% + .65rem);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);border-block:1px solid var(--linea);
    padding:.25rem var(--gutter) 1.1rem;
    max-height:0;overflow:hidden;visibility:hidden;opacity:0;
    transition:max-height .4s var(--curva),opacity .3s,visibility .4s;
  }
  .enlaces.abierto{max-height:26rem;visibility:visible;opacity:1}
  .enlaces li{border-bottom:1px solid var(--linea)}
  .enlaces li:last-child{border:0;padding-top:.9rem}
  .enlaces a,.nav .enlaces a:not(.cta),.nav.solida .enlaces a:not(.cta){color:var(--pino);display:block;padding:.9rem 0;font-size:.96rem}
  .enlaces a:not(.cta)::after{display:none}
  .cta{text-align:center;padding:.85rem 1.3rem}
  h1{max-width:7.9em}
  .portada .entrada{max-width:19.9em}
  .b{flex:1 1 12rem}
}
@media (max-width:520px){
  .franja-in{gap:1.1rem 1.8rem}
  .portada-btns{flex-direction:column;align-items:stretch}
  .b{flex:none}
  .svc-lista li{grid-template-columns:1fr;gap:.3rem}
  .svc-lista li::before{padding-top:0}
  .porque-lista li{grid-template-columns:1fr;gap:.55rem}
  .sello{width:76px}
  .marca-t s{letter-spacing:.2em}
  .texto table{min-width:26rem}
}
@media (max-width:360px){
  .idioma>summary{padding:.4rem .45rem}
  .marca svg{width:28px}
  .franja-in{gap:.9rem 1.4rem}
}
@media (min-width:1600px){:root{--shell:84rem}}
@media (min-width:2000px){:root{--shell:92rem;--gutter:clamp(2rem,4vw,6rem)}}