/* ==========================================================================
   PELPAK · Estilos del sitio
   --------------------------------------------------------------------------
   REGLA DE COLOR (no romper)
   - Nada de fondos oscuros: la seriedad sale de la estructura y de la
     retícula, no del color. La franja ancha usa el azul pálido del catálogo
     2026 (#CCDDF1).
   - El azul tinta #12325E es tipografía y filetes. Nunca un relleno grande.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color, muestreado del catálogo 2026 */
  --tinta:      #12325E;   /* titulares y texto fuerte */
  --azul:       #006EB8;   /* azul de marca, tomado del logo vectorial */
  --azul-vivo:  #005A97;   /* estado hover */
  --banda:      #CCDDF1;   /* el azul de las cajas del catálogo */
  --nube:       #F1F6FC;   /* tinte de sección muy suave */
  --blanco:     #FFFFFF;
  --gris:       #5A6B80;   /* texto secundario */
  --linea:      #D8E3F0;   /* filetes */
  --linea-sutil:#EAF0F7;

  /* Tipografía */
  --display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --body:    "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.25rem, 4.6vw, 3.75rem);
  --t-h2:      clamp(1.625rem, 3vw, 2.5rem);
  --t-h3:      clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;

  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --max:       min(1920px, 93%);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  --r-card: 10px;
  --r-btn: 6px;
  --sombra: 0 1px 2px rgba(18, 50, 94, 0.05), 0 8px 24px rgba(18, 50, 94, 0.07);
  --sombra-alta: 0 2px 6px rgba(18, 50, 94, 0.08), 0 18px 48px rgba(18, 50, 94, 0.13);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* El encabezado es fijo: sin esto, todo enlace a un ancla deja el título
   escondido detrás de la barra. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 118px; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--azul); color: #fff; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
/* 93% del ancho disponible, con tope de 1920 px. En 1280 y 1920 ocupa el
   93%; en 2560 ocupa el 75%. Los bloques de texto se siguen limitando por
   su propio max-width en ch, así que ensanchar no alarga la lectura. */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
/* Sección blanca que sigue a otra blanca (el video después de las líneas):
   sin relleno arriba, el de la anterior ya hace el hueco. */
.section--sigue { padding-top: 0; }
.section--nube { background: var(--nube); }
/* Franja ancha con el azul del catálogo. Reservada a lo que tiene que pesar
   más que el resto de la página. */
.section--banda { background: var(--banda); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section__head--centro { margin-inline: auto; text-align: center; }
/* --gris sobre --banda da 3.94:1 y no pasa AA: en la franja la bajada va en tinta */
.section--banda .section__head p { color: var(--tinta); }
.section__head h1, .section__head h2 { font-size: var(--t-h2); margin-top: 0.75rem; }
.section__head p { margin-top: 1rem; color: var(--gris); }

.pill {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--azul);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
}

.pill--claro { background: var(--blanco); color: var(--azul); border: 1px solid var(--linea); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Cabecera
   -------------------------------------------------------------------------- */
.head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-sutil);
}

.head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 100px;
}

/* Para cambiar el tamaño del logo basta la altura: el ancho se ajusta solo. */
.head__logo img { height: 64px; width: auto; }

@media (max-width: 1100px) { .head__logo img { height: 54px; } }
@media (max-width: 640px)  { .head__logo img { height: 44px; } }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }

.nav__link {
  font-size: var(--t-small); font-weight: 500; color: var(--tinta);
  padding-block: 0.4rem; position: relative; white-space: nowrap;
}

.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--azul); transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.head__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--gris); border: 1px solid var(--linea);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.head__social:hover { color: var(--azul); border-color: var(--azul); }
.head__social svg { width: 17px; height: 17px; }

/* Selector de idioma. Va fuera del <nav> para que en móvil no quede
   escondido tras el botón de menú; el orden visual lo fija `order`. */
.idioma {
  order: 3;
  display: flex; align-items: center; gap: 1px;
  background: var(--linea-sutil); border-radius: var(--r-btn); padding: 2px;
}

/* Cada enlace lleva a la misma página en ese idioma; el actual va con
   aria-current. */
.idioma a {
  font-family: var(--body); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.06em; line-height: 1.5; text-decoration: none;
  background: transparent; color: var(--gris);
  padding: 0.32rem 0.5rem; border-radius: 4px;
}

.idioma a[aria-current="true"] { background: var(--blanco); color: var(--azul); box-shadow: var(--sombra); }
.idioma a:hover { color: var(--tinta); }

@media (max-width: 1180px) {
  .head__social { width: auto; height: auto; border: 0; border-radius: 0;
    justify-content: flex-start; gap: 0.6rem; padding-block: 0.85rem;
    border-bottom: 1px solid var(--linea-sutil); color: var(--tinta); }
  .head__social::after { content: "LinkedIn"; font-size: var(--t-small); font-weight: 500; }
}

.nav__toggle {
  display: none; background: none; border: 1px solid var(--linea);
  border-radius: var(--r-btn); padding: 0.5rem 0.75rem;
  font: 500 var(--t-small)/1 var(--body); color: var(--tinta); cursor: pointer;
}

/* El botón no se parte en líneas, así que el menú se pliega desde 1180 px:
   por debajo no cabe la cabecera en una fila. */
.nav .btn { white-space: nowrap; }

/* Orden visual: logo, menú, idioma, y en móvil el botón de menú al final.
   `margin-left: auto` mantiene el bloque de la derecha pegado al borde. */
.head__logo { order: 1; }
.nav { order: 2; margin-left: auto; }
.nav__toggle { order: 4; }

@media (max-width: 1180px) {
  .nav__toggle { display: block; }
  /* Con el nav plegado quedan logo, idioma y botón de menú en la barra. */
  .idioma { margin-left: auto; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: 0.5rem var(--gutter) 1.25rem; display: none;
    box-shadow: var(--sombra);
  }
  .nav.is-open { display: flex; }
  .nav__link { padding-block: 0.85rem; border-bottom: 1px solid var(--linea-sutil); }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--body); font-size: var(--t-small); font-weight: 600;
  padding: 0.82rem 1.4rem; border-radius: var(--r-btn);
  border: 1px solid var(--azul); background: var(--azul); color: var(--blanco);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--azul-vivo); border-color: var(--azul-vivo); }
.btn:active { transform: translateY(1px); }

.btn--ghost { background: var(--blanco); color: var(--azul); border-color: var(--linea); }
.btn--ghost:hover { background: var(--blanco); color: var(--azul-vivo); border-color: var(--azul); }

.btn__arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   6. Portada
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--nube); }

.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* Cuando el héroe trae dos encuadres, el <picture> tiene que llenar la caja
   igual que lo haría el <img> suelto. */
.hero__media picture { display: block; width: 100%; height: 100%; }

/* El héroe es mucho más apaisado que las fotos: en 1920 solo se ve el 48% del
   alto de la imagen, y en 2560 el 36%. Con el recorte centrado eso decapita a
   la persona. `--foco` es el punto de la foto que se conserva, en porcentaje
   desde arriba, y va en el marcado porque depende de cada imagen.
   `--foco-h` hace lo mismo en horizontal para cuando la ventana es más
   apaisada que la foto y el recorte cae por los lados. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco-h, center) var(--foco, 18%);
}

/* En móvil el héroe es más alto que ancho, así que `cover` recorta por los
   lados y no por arriba: `--foco` deja de mandar y la foto se queda mostrando
   la mitad vacía del centro. `--foco-x` trae al sujeto, y anclar arriba lo
   deja en el hueco que queda sobre el titular. */
@media (max-width: 860px) {
  .hero__media img { object-position: var(--foco-x, 85%) top; }
}

/* Velo blanco desde la izquierda: más lleno hasta donde termina la columna
   de texto, para que la bajada se lea, y abierto después para no tapar la
   foto. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.90) 24%,
    rgba(255,255,255,0.45) 46%,
    rgba(255,255,255,0.06) 66%);
}

@media (max-width: 860px) {
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.5) 0%,
      rgba(255,255,255,0.93) 42%,
      rgba(255,255,255,0.98) 100%);
  }
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
  min-height: clamp(440px, 58vw, 620px);
  display: flex; align-items: center;
}

.hero__panel { max-width: 44rem; }
.hero__title { font-size: var(--t-display); margin-top: 1.1rem; }
/* La bajada va en tinta, no en gris: sobre foto, el gris deja el 65% de su
   área por debajo de 4.5:1 y la tinta el 0.3%. Seminegrita y no negrita,
   que competiría con el titular. */
.hero__lede { margin-top: 1.35rem; max-width: 46ch; color: var(--tinta); font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.1875rem); }
.hero__actions { margin-top: 2rem; }

@media (max-width: 860px) {
  .hero__inner { padding-top: clamp(11rem, 34vw, 16rem); align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   7. Franja de cifras
   -------------------------------------------------------------------------- */
.cifras {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.cifra__valor {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* "+100" se lee "más de 100": el signo va en azul, como las unidades, y el
   lector de pantalla oye "Más de" (texto oculto en el marcado). */
.cifra__mas { color: var(--azul); margin-right: 0.04em; }

.cifra__valor .u { font-size: 0.42em; font-weight: 700; margin-left: 0.2em; color: var(--azul); }

.cifra__etiqueta {
  margin-top: 0.6rem; font-size: var(--t-small); color: var(--gris);
}

/* --------------------------------------------------------------------------
   8. Retícula de líneas
   -------------------------------------------------------------------------- */
.sectores { display: grid; gap: clamp(1rem, 1.6vw, 1.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sectores--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .sectores, .sectores--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sectores, .sectores--4 { grid-template-columns: minmax(0, 1fr); }
}

.sector {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color 0.24s var(--ease), box-shadow 0.24s var(--ease), transform 0.24s var(--ease);
}
.sector:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.sector__foto { aspect-ratio: 16 / 10; background: var(--nube); overflow: hidden; }
.sector__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.sector:hover .sector__foto img { transform: scale(1.04); }

.sector__cuerpo { padding: clamp(1.15rem, 2vw, 1.5rem); display: flex; flex-direction: column; flex-grow: 1; }
/* la píldora es hija de un contenedor en columna: sin esto se estira */
.sector__cuerpo .pill { align-self: flex-start; }
.sector__nombre { font-size: var(--t-h3); margin-top: 0.85rem; }
/* Sin píldora delante, el nombre arranca en el relleno de la tarjeta. */
.sector__nombre:first-child { margin-top: 0; }
.sector__desc { font-size: var(--t-small); color: var(--gris); margin-top: 0.55rem; flex-grow: 1; }

.sector__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.35rem; padding-top: 0.95rem; border-top: 1px solid var(--linea-sutil);
  font-size: var(--t-small); font-weight: 600; color: var(--azul);
}

/* --------------------------------------------------------------------------
   9. Visor del catálogo
   -------------------------------------------------------------------------- */
.catalogo__tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tab {
  font-family: var(--body); font-size: var(--t-small); font-weight: 600;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  cursor: pointer; transition: all 0.2s var(--ease);
}
.tab:hover { border-color: var(--azul); color: var(--azul); }
.tab[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.tab[disabled] { opacity: 0.45; cursor: not-allowed; }
.tab[disabled]:hover { border-color: var(--linea); color: var(--tinta); }

.visor {
  background: var(--banda);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.visor__escena {
  position: relative;
  perspective: 2400px;
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
}

.visor__hoja {
  position: relative;
  width: 100%; max-width: 900px;
  aspect-ratio: 1754 / 1241;
  transform-style: preserve-3d;
}

.visor__cara {
  position: absolute; inset: 0;
  border-radius: 4px; overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  backface-visibility: hidden;
}

.visor__cara img { width: 100%; height: 100%; object-fit: contain; background: var(--blanco); }

/* Solo gira la cara marcada, siempre sobre el lomo izquierdo */
.visor__cara--gira {
  transform-origin: left center;
  will-change: transform;
}

.visor__hoja.girando .visor__cara--gira {
  animation: pasar 0.64s var(--ease) forwards;
}
.visor__hoja.girando-atras .visor__cara--gira {
  animation: pasar-atras 0.64s var(--ease) forwards;
}

@keyframes pasar {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-168deg); }
}
@keyframes pasar-atras {
  from { transform: rotateY(-168deg); }
  to   { transform: rotateY(0deg); }
}

.visor__barra {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.25rem); flex-wrap: wrap;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.visor__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: all 0.2s var(--ease);
}
.visor__btn:hover:not([disabled]) { border-color: var(--azul); color: var(--azul); }
.visor__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
/* Mientras llega la página de destino (solo pasa con red lenta: las
   vecinas ya vienen precargadas) el giro espera y el cursor lo dice. */
.visor--cargando .visor__escena,
.visor--cargando .visor__btn:not([disabled]) { cursor: progress; }

.visor__cuenta {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--tinta);
  min-width: 8ch; text-align: center; font-variant-numeric: tabular-nums;
}

.visor__ancho { margin-left: auto; }
@media (max-width: 620px) { .visor__ancho { margin-left: 0; } }

.visor__vacio {
  background: var(--blanco); border: 1px dashed var(--azul);
  border-radius: var(--r-card); padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center; color: var(--gris); font-size: var(--t-small);
}
.visor__vacio a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.visor__vacio strong { display: block; font-family: var(--display); font-size: 1.125rem; color: var(--tinta); margin-bottom: 0.5rem; }

/* Pantalla completa. La hoja se mide por lo que sea más estrecho: el ancho
   de la pantalla o el alto que queda después del relleno y de la barra de
   flechas (40 px del botón más su margen), para que las flechas nunca queden
   fuera de la pantalla. */
.visor:fullscreen {
  --barra-alto: calc(40px + clamp(1rem, 2vw, 1.5rem));
  background: var(--banda); display: flex; flex-direction: column; justify-content: center;
  padding: 2vmin 3vmin;
}
.visor:fullscreen .visor__hoja {
  width: min(100%, calc((100vh - 4vmin - var(--barra-alto)) * 1754 / 1241));
  max-width: none;
}
.visor:fullscreen .visor__escena { min-height: 0; flex: 0 1 auto; }

/* --------------------------------------------------------------------------
   10. Tarjetas de referencia (las pinta sector.js)
   -------------------------------------------------------------------------- */

.results__grid { display: grid; gap: clamp(1rem, 1.2vw, 1.35rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); }

.ref {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.ref:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.ref__cuerpo { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
/* Sin enlace: no hay ficha por referencia. */
.ref--muda { cursor: default; }
.ref--muda:hover { transform: none; box-shadow: var(--sombra); }

.ref__sku { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--azul); }
.ref__name { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.22; margin-top: 0.45rem; }

.ref__specs { margin: 0.95rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.28rem 1rem; font-family: var(--mono); font-size: 0.75rem; }
.ref__specs dt { color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; }
.ref__specs dd { margin: 0; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }

.foto { display: flex; align-items: center; justify-content: center; background: var(--nube); overflow: hidden; }
.foto img { width: auto; max-width: 76%; max-height: 76%; object-fit: contain; }
.foto--card { height: 172px; border-bottom: 1px solid var(--linea-sutil); }

/* --------------------------------------------------------------------------
   11. Galería de planta
   -------------------------------------------------------------------------- */
/* Galería de planta en carrusel. Una foto a la vez, en su proporción
   original (3:2), con encaje por foto: el desplazamiento es el nativo del
   navegador, así que en móvil se desliza con el dedo sin JavaScript. Clic en
   el borde izquierdo o derecho de la foto pasa de foto; clic en el centro la
   abre en grande (la lupa, más abajo).

   La meta es que la sección entera (título, texto y foto) quepa en la
   pantalla. Apilado, en 1080p la foto quedaría de 330 px de alto, así que en
   pantalla ancha el texto va a la izquierda y la foto a la derecha, medida
   contra el alto de la ventana menos el encabezado fijo. */
.carrusel {
  --carrusel-hueco: clamp(0.6rem, 1.1vw, 0.9rem);
  --carrusel-alto: min(78svh, 1000px);
  position: relative;
  max-width: calc(var(--carrusel-alto) * 3 / 2);
}

@media (min-width: 1024px) and (min-aspect-ratio: 5 / 4) {
  .planta {
    /* 101 px del encabezado fijo y un respiro arriba y abajo. */
    --carrusel-alto: calc(100svh - 101px - 2 * clamp(1.25rem, 3svh, 2.5rem));
    display: grid; align-items: center;
    grid-template-columns: minmax(26rem, 1fr) minmax(0, calc(var(--carrusel-alto) * 3 / 2));
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
  .planta .section__head { margin-bottom: 0; }
  .planta .carrusel { max-width: none; }
}

.carrusel__pista {
  display: flex; gap: var(--carrusel-hueco);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  border-radius: var(--r-card);
}
/* La barra de desplazamiento se esconde solo cuando carrusel.js está vivo y
   hay bordes clicables: sin JavaScript sigue a la vista para quien usa ratón. */
.carrusel--listo .carrusel__pista { scrollbar-width: none; }
.carrusel--listo .carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus { outline: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--azul); outline-offset: 9px; }

.carrusel__foto {
  flex: 0 0 100%;
  margin: 0; scroll-snap-align: start; scroll-snap-stop: always;
  border-radius: var(--r-card); overflow: hidden; background: var(--nube);
}

.carrusel__foto img {
  width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; display: block;
  transition: transform 0.5s var(--ease);
}
.carrusel--listo .carrusel__foto img { cursor: zoom-in; }
.carrusel__foto:hover img { transform: scale(1.02); }

/* Bordes clicables: una franja a cada lado de la foto, con su flecha, que
   aparece al pasar el ratón. En la primera y la última foto el borde que no
   lleva a ningún lado desaparece y el clic cae en la foto. */
.carrusel__lado {
  position: absolute; top: 0; bottom: 0; width: 22%;
  display: flex; align-items: center;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
  border: 0; background: none; cursor: pointer; color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
.carrusel__lado--prev { left: 0; justify-content: flex-start; border-radius: var(--r-card) 0 0 var(--r-card); }
.carrusel__lado--next { right: 0; justify-content: flex-end; border-radius: 0 var(--r-card) var(--r-card) 0; }
.carrusel__lado--prev:hover { background: linear-gradient(90deg, rgba(8, 22, 42, 0.28), transparent); }
.carrusel__lado--next:hover { background: linear-gradient(270deg, rgba(8, 22, 42, 0.28), transparent); }
.carrusel__lado span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--sombra-alta);
  font-size: 1.15rem; line-height: 1;
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.carrusel:hover .carrusel__lado span,
.carrusel__lado:focus-visible span { opacity: 1; transform: none; }
.carrusel__lado:hover span { background: var(--blanco); color: var(--azul); }
.carrusel__lado:focus-visible { outline: none; }
.carrusel__lado:focus-visible span { outline: 2px solid var(--azul); outline-offset: 2px; }
/* En pantallas táctiles no hay hover: las flechas se ven siempre, pequeñas. */
@media (hover: none) {
  .carrusel__lado span { opacity: 0.85; transform: none; width: 38px; height: 38px; font-size: 1rem; }
}
.carrusel__lado[disabled] { visibility: hidden; }
/* Sin JavaScript los bordes no hacen nada: no se muestran. */
.carrusel:not(.carrusel--listo) .carrusel__lado { display: none; }

/* Marco de avance: un contorno a unos píxeles de la foto que se va
   completando en el sentido de las agujas del reloj, una octava parte por
   foto. pathLength="100" deja medir el avance en porcentaje sin calcular el
   perímetro; el trazo va centrado en el borde del SVG, por eso overflow. */
.carrusel__marco {
  position: absolute; inset: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px); max-width: none;
  overflow: visible; pointer-events: none;
}
.carrusel__marco rect { fill: none; stroke-width: 2; rx: calc(var(--r-card) + 6px); }
.carrusel__marco-fondo { stroke: var(--linea); }
.carrusel__marco-avance {
  stroke: var(--azul); stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.45s var(--ease);
}
.carrusel:not(.carrusel--listo) .carrusel__marco { display: none; }

/* La cuenta ("3 / 8") solo la oye el lector de pantalla: a la vista la
   reemplaza el marco. */
.carrusel__cuenta {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
  .carrusel__foto img, .carrusel__marco-avance, .carrusel__lado span { transition: none; }
  .carrusel__foto:hover img { transform: none; }
}

/* Lupa: la foto de la galería en grande, sobre un velo oscuro. Es un
   <dialog> modal, así que Esc la cierra y el foco queda adentro. */
.lupa {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; color: var(--blanco);
}
.lupa::backdrop { background: rgba(8, 22, 42, 0.96); }
.lupa[open] { display: flex; align-items: center; justify-content: center; }

.lupa__foto {
  display: block;
  max-width: calc(100vw - 2 * clamp(4rem, 8vw, 7rem));
  max-height: calc(100dvh - 7rem);
  width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  background: var(--nube);
}
.lupa__foto.cargando { opacity: 0.6; }

.lupa .visor__btn {
  position: absolute; width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: var(--blanco);
  font-size: 1.15rem;
}
.lupa .visor__btn:hover:not([disabled]) { background: var(--blanco); border-color: var(--blanco); color: var(--azul); }
.lupa .visor__btn[disabled] { opacity: 0.25; }
.lupa__cerrar { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lupa__prev { left: clamp(0.75rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lupa__next { right: clamp(0.75rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lupa__cuenta {
  position: absolute; bottom: clamp(1rem, 3vh, 2rem); left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
}
/* En móvil las flechas bajan junto a la cuenta para no tapar la foto. */
@media (max-width: 640px) {
  .lupa__foto { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 9rem); }
  .lupa__prev, .lupa__next { top: auto; bottom: clamp(0.5rem, 2vh, 1.25rem); transform: none; }
  .lupa__prev { left: 1rem; }
  .lupa__next { right: 1rem; }
  .lupa__cuenta { bottom: calc(clamp(0.5rem, 2vh, 1.25rem) + 14px); }
}
html.lupa-abierta { overflow: hidden; }

/* Caja de los videos. */
.video { margin: 0; max-width: 68rem; }

.video video {
  width: 100%;
  /* El video lleva width y height en el marcado para que no salte la página
     mientras carga. Sin este height:auto esa altura gana y el 16:9 no entra. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
}

/* El video se ve entero, sin recortar: es una pieza montada en 16:9 y un
   object-fit: cover le comería los bordes si el encuadre no cuadra. */
.video video { object-fit: contain; background: var(--tinta); }

/* El video de sostenibilidad es la pieza principal de la portada: centrado,
   más ancho que las demás secciones y levantado del fondo con sombra. */
.video--principal { max-width: 84rem; margin-inline: auto; }
.video--principal video { box-shadow: var(--sombra-alta); }

/* Video corporativo. Misma composición que la galería de planta: en
   pantalla ancha, título y bajada a la izquierda y el video a la derecha,
   medido contra el alto de la ventana para que la sección entera quepa
   bajo el encabezado fijo. Apilado en móvil y tableta vertical. */
.video--empresa { max-width: none; }
.video--empresa video { box-shadow: var(--sombra-alta); }

@media (min-width: 1024px) and (min-aspect-ratio: 5 / 4) {
  .empresa {
    --video-alto: calc(100svh - 101px - 2 * clamp(1.25rem, 3svh, 2.5rem));
    display: grid; align-items: center;
    grid-template-columns: minmax(22rem, 1fr) minmax(0, calc(var(--video-alto) * 16 / 9));
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
  .empresa .section__head { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Código QR de visitas (portada)
   --------------------------------------------------------------------------
   Texto a la izquierda y el código en una tarjeta blanca contra el borde
   derecho, alineada con la galería de arriba y los botones de la banda de
   contacto de abajo; apilados en móvil. La tarjeta da el margen blanco que el
   lector necesita aunque el fondo de la sección sea de color.
   -------------------------------------------------------------------------- */
.qr { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.qr .section__head { margin-bottom: 0; }
.qr .acciones { margin-top: 1.75rem; }

.qr__codigo {
  display: block; justify-self: center;
  width: min(100%, 17rem);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-card);
  box-shadow: var(--sombra);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.qr__codigo:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); }
.qr__codigo img { width: 100%; height: auto; }

@media (min-width: 768px) {
  .qr { grid-template-columns: minmax(0, 62ch) auto; justify-content: space-between; }
  .qr__codigo { justify-self: end; width: clamp(14rem, 18vw, 19rem); }
}

/* --------------------------------------------------------------------------
   Documentos legales (Supersociedades y política de datos)
   --------------------------------------------------------------------------
   Una tarjeta por PDF, sin visor: quien entra busca un documento concreto,
   no está hojeando.
   -------------------------------------------------------------------------- */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 62rem; }

.doc__enlace {
  display: grid; gap: 0.3rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--linea); border-radius: var(--r-card);
  background: var(--blanco);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.doc__enlace:hover { border-color: var(--azul); box-shadow: var(--sombra); }

.doc__nombre { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--tinta); }
.doc__detalle { font-size: var(--t-small); color: var(--gris); }
.doc__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--azul); letter-spacing: 0.04em; }

/* Mapa de la planta, en contacto.
   El iframe de Google no carga sin red, así que la dirección vive en el pie
   de la figura: si el mapa falla, el dato sigue estando. */
.mapa {
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--nube);
}

.mapa__lienzo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--blanco);
  border-top: 1px solid var(--linea-sutil);
}

.mapa__pie .foot__addr { margin: 0; }

.sheet--contacto { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); }

/* En escritorio la columna del mapa termina a la altura del formulario: la
   figura se estira y el mapa ocupa lo que sobre. Con aspect-ratio fijo
   bajaría muy por debajo del botón de enviar. */
@media (min-width: 900px) {
  .sheet--contacto { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: stretch; }

  .contacto__lado { display: flex; flex-direction: column; }

  .contacto__lado .mapa {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
  }

  .contacto__lado .mapa__lienzo {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .mapa__lienzo { aspect-ratio: 1 / 1; }
  .mapa__pie .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   12. Banda de contacto
   -------------------------------------------------------------------------- */
.help { background: var(--banda); }
.help__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-block: clamp(2rem, 3.2vw, 2.75rem);
}
.help__text h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); max-width: 24ch; }
/* --gris sobre --banda da 3.94:1 y no pasa AA; --tinta da 9.24:1 */
.help__text p { margin-top: 0.6rem; color: var(--tinta); max-width: 52ch; font-size: var(--t-small); }

/* --------------------------------------------------------------------------
   13. Formulario
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.2rem; max-width: 720px; }
.form__row { display: grid; gap: 1.2rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: var(--t-body); color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-btn);
  padding: 0.78rem 0.9rem; width: 100%; transition: border-color 0.2s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gris); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--azul); }
.field textarea { resize: vertical; min-height: 130px; }
.field__hint { font-size: 0.8125rem; color: var(--gris); }
.field__hint a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

.routing {
  background: var(--nube); border: 1px solid var(--linea); border-radius: var(--r-card);
  padding: 1.1rem 1.25rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; color: var(--tinta);
}

/* --------------------------------------------------------------------------
   14. Pie
   -------------------------------------------------------------------------- */
.foot { background: var(--nube); border-top: 1px solid var(--linea); padding-block: clamp(2.75rem, 4vw, 3.75rem) 1.5rem; }
.foot__grid { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.foot__logo img { height: 34px; width: auto; margin-bottom: 0.9rem; }
/* h2 y no h3: contacto.html no tiene h2 en el cuerpo y un h3 saltaría de
   h1 a h3. */
.foot__col h2 { font-family: var(--body); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-bottom: 0.75rem; }
/* Las cuatro columnas del pie arrancan en la misma línea; la de enlaces no
   tiene título. El título de Contacto es un enlace y hereda el estilo. */
.foot__col h2 a { font-size: inherit; color: inherit; }

.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.foot__col a { font-size: var(--t-small); }
.foot__col a:hover { color: var(--azul); }
.foot__addr { font-size: var(--t-small); color: var(--gris); font-style: normal; line-height: 1.6; }

.foot__base {
  margin-top: clamp(1.75rem, 2.8vw, 2.25rem); padding-top: 1.1rem; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--gris);
}

/* Aviso de reorganización: obligatorio, pequeño, siempre presente */
.legal { font-family: var(--body); font-size: 0.75rem; line-height: 1.65; color: var(--gris); max-width: 68ch; }
.legal a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   15. Revelado
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}