@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ARPP AIR — hoja de estilo única.

   La página es de un estudio de cinematografía: la primera muestra del producto
   es la propia web. Por eso todo aquí está construido alrededor de la imagen —
   negro de sala, letterbox, grano de película, el diafragma de la marca como
   recurso gráfico recurrente— y no alrededor del texto.

   Paleta y tipografía salen del kit de marca que entregó el cliente
   (_marca/arpp-air-logo/LEEME.md). El verde no se toca, no lleva degradados y
   no se estira: son sus reglas y son buenas.

   Orden: tokens · base · utilidades · barra · hero · secciones · pie · media.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */

:root {
  /* Marca — literales del kit. */
  --verde:       #1E9A64;
  --verde-alto:  #2FBE7E;   /* solo para foco y texto pequeño sobre negro */
  --negro:       #0B0B0B;
  --plata:       #E4E4E4;
  --gris:        #8A8A8A;   /* 5,70:1 sobre negro — pasa AA en texto pequeño */
  --gris-tenue:  #6E6E75;   /* 3,89:1 — solo para texto grande o de apoyo */

  /* Grises de trabajo, derivados del negro de marca. */
  --carbon:      #121214;
  --carbon-alto: #1A1A1D;
  --linea:       #26262A;
  --linea-alta:  #34343A;

  /* Tipografía. */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida: un solo valor sirve de 360 px a 1600 px. */
  --t-h1:   clamp(2.6rem, 7.2vw, 6.4rem);
  --t-h2:   clamp(1.9rem, 4.2vw, 3.5rem);
  --t-h3:   clamp(1.15rem, 1.9vw, 1.5rem);
  --t-body: clamp(1rem, 1.05vw, 1.125rem);

  /* Ritmo vertical. */
  --aire:   clamp(4.5rem, 9vw, 9rem);
  --ancho:  1280px;
  --borde:  4px;

  /* Transición común. Un solo valor mantiene la página coherente. */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ─────────────────────────── 2. BASE ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* La barra fija taparía el título de la sección a la que se salta. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--plata);
  font-family: var(--texto);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--verde-alto);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--verde); color: #fff; }

/* Quien pide menos movimiento recibe la página entera, quieta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ───────────────────────── 3. UTILIDADES ───────────────────────── */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--verde); color: var(--negro); padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* Antetítulo: versalita ancha. Es el gesto tipográfico del logo, repetido. */
.eyebrow {
  font-family: var(--display);
  font-size: clamp(.7rem, .85vw, .78rem);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow--verde { color: var(--verde-alto); }

/* Punto rojo de grabación: parpadea como el visor de una cámara. */
.eyebrow--rec { color: var(--plata); }
.rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3B30; flex: none;
  box-shadow: 0 0 10px rgba(255, 59, 48, .9);
  animation: latido 2s var(--ease) infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Grano de película. Un SVG de ruido, sin peticiones extra ni imágenes. */
.grano {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Cabecera de sección, compartida por media página. */
.seccion__cab {
  max-width: 62ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: 0 clamp(1.25rem, 5vw, 2rem);
  text-align: center;
}
.seccion__cab .eyebrow { justify-content: center; }
.seccion__h2 { font-size: var(--t-h2); margin-bottom: .7rem; }
.seccion__sub { color: var(--gris); font-size: 1.02rem; margin: 0; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display);
  font-size: .95rem; font-weight: 600; letter-spacing: .06em;
  padding: 1.05rem 2rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
  text-align: center;
}
.btn--verde {
  /* Texto NEGRO sobre el verde, no blanco: blanco da 3,58:1 y no pasa AA, y el
     verde de marca no se puede retocar (lo prohíbe el kit). Negro da 5,49:1 y
     además unifica con la pestaña activa, que ya era negro sobre verde. */
  background: var(--verde); color: var(--negro);
  box-shadow: 0 10px 34px -14px rgba(30, 154, 100, .9);
}
.btn--verde:hover { background: var(--verde-alto); transform: translateY(-2px); }
.btn--linea {
  background: transparent; color: var(--plata);
  border-color: rgba(228, 228, 228, .3);
  backdrop-filter: blur(6px);
}
.btn--linea:hover { border-color: var(--plata); transform: translateY(-2px); }
.btn--ancho { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Enlace con flecha que avanza al pasar por encima. */
.enlace-flecha {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  letter-spacing: .04em; color: var(--verde-alto);
  display: inline-flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid rgba(47, 190, 126, .35);
  padding-bottom: .25rem;
  transition: border-color .25s var(--ease);
}
.enlace-flecha span { transition: transform .25s var(--ease); }
.enlace-flecha:hover { border-color: var(--verde-alto); }
.enlace-flecha:hover span { transform: translateX(5px); }

/* Aparición escalonada. app.js pone --retardo y marca data-visible. */
[data-anima] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease) var(--retardo, 0ms),
              transform .7s var(--ease) var(--retardo, 0ms);
}
[data-anima][data-visible] > * { opacity: 1; transform: none; }
/* Sin JavaScript nunca llega data-visible: el contenido se ve igual. */
html:not(.js) [data-anima] > * { opacity: 1; transform: none; }

/* ───────────────────────── 4. BARRA ───────────────────────── */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 3.5vw, 2.2rem);
  background: rgba(11, 11, 11, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(38, 38, 42, .8);
}

.bar__brand { display: flex; align-items: center; gap: .7rem; flex: none; min-width: 0; }
.bar__nombre { display: grid; line-height: 1; }
.bar__n1, .bar__n2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.92rem, 3.4vw, 1.06rem); letter-spacing: .16em;
}
.bar__n1 { color: var(--plata); }
.bar__n2 { color: var(--verde); }
/* STUDIO cierra el lockup en plata y un punto más ligero: la marca es
   ARPP AIR STUDIO, pero el acento verde se queda en AIR, que es donde lo pone
   el logotipo del kit. */
.bar__n4 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(.82rem, 3vw, .95rem); letter-spacing: .16em;
  color: var(--plata);
}
/* El wordmark del logo es ARPP + AIR en la misma línea. */
.bar__nombre { grid-template-columns: auto auto auto; align-items: baseline; column-gap: .3em; }
/* La bajada solo cabe cuando hay sitio: por debajo de 420 px compite con el
   botón de la derecha y lo empuja fuera de la pantalla. */
.bar__n3 {
  grid-column: 1 / -1;
  display: none;
  font-family: var(--display); font-size: .58rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); margin-top: .3rem;
  white-space: nowrap;
}
@media (min-width: 420px) { .bar__n3 { display: block; } }

.bar__nav { display: none; margin-left: auto; gap: 2rem; }
.bar__nav a {
  font-family: var(--display); font-size: .88rem; font-weight: 500;
  letter-spacing: .07em; color: var(--gris);
  position: relative; padding: .62rem 0;
  transition: color .25s var(--ease);
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; bottom: .34rem;
  width: 100%; height: 1px; background: var(--verde);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.bar__nav a:hover { color: var(--plata); }
.bar__nav a:hover::after { transform: scaleX(1); }

.bar__end { display: flex; align-items: center; gap: .9rem; margin-left: auto; flex: none; }
.bar__tel {
  display: none; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 500; color: var(--plata);
}
.bar__tel:hover { color: var(--verde-alto); }
.bar__cta {
  font-family: var(--display); font-size: clamp(.76rem, 3vw, .84rem); font-weight: 600;
  letter-spacing: .07em;
  padding: .68rem clamp(.8rem, 3.4vw, 1.25rem);
  background: var(--verde); color: var(--negro); border-radius: 2px;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.bar__cta:hover { background: var(--verde-alto); transform: translateY(-1px); }

/* ───────────────────────── 5. HERO ─────────────────────────
   A pantalla completa. La foto va al fondo, el velo la oscurece lo justo
   para que el texto tenga contraste real (no «casi»), y por encima van las
   barras de letterbox, el grano y la marca de agua del diafragma. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* El padding superior deja pasar la barra fija; el inferior, la tira de
     timecode y el letterbox. */
  padding: 6.5rem clamp(1.25rem, 5vw, 4.5rem) 5rem;
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo picture, .hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
/* Entrada lenta: la imagen se acerca mientras se lee el titular. */
.hero__img { animation: acercar 18s var(--ease) forwards; }
@keyframes acercar { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Dos capas: una vertical, que asienta el texto sobre el negro de la página, y
   una lateral, que abre hueco al bloque de texto sin apagar la foto entera.
   La lateral se queda corta a propósito —termina en el 62 %— para que el sujeto
   del plano, que está a la derecha, siga siendo el sujeto. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  /* Móvil: el texto ocupa TODO el ancho, así que la capa lateral no sirve de
     nada y el contraste tiene que salir del velo vertical. Se cierra más. */
  background:
    linear-gradient(to top, rgba(11,11,11,.97) 2%, rgba(11,11,11,.72) 42%, rgba(11,11,11,.42) 78%);
}
@media (min-width: 940px) {
  /* Escritorio: el texto vive en la mitad izquierda. La capa lateral abre ese
     hueco y se apaga en el 62 % para no tapar al sujeto, que está a la derecha. */
  .hero__velo {
    background:
      linear-gradient(to top, rgba(11,11,11,.97) 2%, rgba(11,11,11,.5) 34%, rgba(11,11,11,.16) 66%),
      linear-gradient(to right, rgba(11,11,11,.88) 0%, rgba(11,11,11,.42) 38%, rgba(11,11,11,0) 62%);
  }
}

.hero__barra {
  position: absolute; left: 0; right: 0; z-index: 4;
  height: clamp(22px, 3.4vh, 46px);
  background: var(--negro);
}
.hero__barra--sup { top: 0; }
.hero__barra--inf { bottom: 0; }

/* Marca de agua: el diafragma girando muy despacio, casi disuelto.
   En móvil NO se pinta. Ahí el texto ocupa todo el ancho y el emblema se le
   cruza por detrás: deja de leerse como filigrana y pasa a leerse como suciedad. */
.hero__marca { display: none; }
@media (min-width: 940px) {
  .hero__marca {
    display: block;
    position: absolute; z-index: 2;
    right: -16%; top: 50%;
    transform: translateY(-50%);
    opacity: .06;
    animation: girar 90s linear infinite;
    pointer-events: none;
  }
}
@keyframes girar { to { transform: translateY(-50%) rotate(360deg); } }

.hero__caja { position: relative; z-index: 5; max-width: 40rem; }

.hero__h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: -.03em;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
}

/* El claim de lanzamiento, tratado como rótulo de película. */
.hero__claim {
  font-family: var(--display);
  font-size: clamp(.72rem, 1.15vw, .88rem);
  font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--verde-alto);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem;
}
.hero__claim::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--verde), transparent);
}

.hero__entrada {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: rgba(228, 228, 228, .9);
  margin-bottom: 2.2rem;
  max-width: 34rem;
}

/* En móvil los dos botones ocupan el mismo ancho: dos anchos distintos leen
   como un error de maquetación, no como una jerarquía. */
.hero__acciones { display: grid; gap: .75rem; margin-bottom: 1.6rem; }
@media (min-width: 480px) {
  .hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }
}

.hero__nota { font-size: .9rem; color: var(--gris); margin: 0; max-width: 30rem; }

/* Tira de datos técnicos, pegada a la barra inferior del letterbox. */
.hero__tira {
  position: absolute; z-index: 5;
  left: clamp(1.25rem, 5vw, 4.5rem); right: clamp(1.25rem, 5vw, 4.5rem);
  bottom: calc(clamp(22px, 3.4vh, 46px) + 1.1rem);
  display: none; align-items: center; gap: 1rem;
  font-family: var(--display);
  font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(228, 228, 228, .5);
}
.hero__tira-sep { flex: 1; height: 1px; background: rgba(228, 228, 228, .16); }
.hero__tira-tc { color: var(--verde-alto); font-variant-numeric: tabular-nums; }

/* ───────────────────────── 6. CIFRAS ───────────────────────── */

.cifras {
  border-block: 1px solid var(--linea);
  background: var(--carbon);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2rem) 2rem;
}
.cifras__lista {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
.cifras__item {
  display: grid; gap: .35rem; text-align: center;
  position: relative;
}
.cifras__n {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--verde-alto);
  font-variant-numeric: tabular-nums;
}
.cifras__t {
  font-size: .82rem; color: var(--gris); line-height: 1.4;
  max-width: 18ch; margin-inline: auto;
}
.cifras__pie {
  max-width: var(--ancho); margin: 2.2rem auto 0;
  text-align: center; font-size: .8rem; color: var(--gris);
}
.cifras__pie a { color: var(--gris); border-bottom: 1px solid var(--linea-alta); }
.cifras__pie a:hover { color: var(--verde-alto); }

/* ───────────────────────── 7. MARCAS ─────────────────────────
   Cinta infinita. Dos listas idénticas desplazándose el 50 % del total:
   cuando la primera sale, la segunda está exactamente donde estaba ella. */

.marcas { padding: clamp(2.5rem, 4vw, 3.5rem) 0; overflow: hidden; }
.marcas__h {
  text-align: center;
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gris);
  margin-bottom: 1.8rem;
}
.marcas__pista {
  display: flex; width: max-content;
  animation: desfilar 42s linear infinite;
  /* Se difuminan los dos bordes para que no aparezcan ni desaparezcan de golpe. */
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marcas:hover .marcas__pista { animation-play-state: paused; }
.marcas__fila { display: flex; align-items: center; }
.marcas__fila li {
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 500; letter-spacing: .04em;
  /* A 21,6 px y peso 500 esto NO es «texto grande» para WCAG, así que necesita
     4,5:1: el gris tenue se queda en 3,89. Y da igual el matiz — son nombres de
     clientes, que se lean es justo lo que se quiere. */
  color: var(--gris);
  padding: 0 clamp(1.6rem, 3.5vw, 3rem);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.marcas__fila li:hover { color: var(--plata); }
@keyframes desfilar { to { transform: translateX(-50%); } }

/* ───────────────────────── 8. TRABAJO ─────────────────────────
   Pestañas sin JavaScript: radios ocultos + `:checked ~ .panel--x`. */

.trabajo { padding: var(--aire) 0; }

.pestanas { max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem); }

/* Los radios existen y son accesibles con teclado, pero no se ven. */
.pestanas__radio {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* En móvil los cinco sectores se envuelven en tres filas desiguales y el bloque
   pierde la lectura. En una sola tira deslizable se leen como lo que son: una
   fila de opciones. A partir de 700 px caben y se centran. */
.pestanas__botones {
  --lateral: clamp(1.25rem, 5vw, 2rem);
  display: flex; gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  margin-inline: calc(var(--lateral) * -1);
  padding-inline: var(--lateral);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pestanas__botones::-webkit-scrollbar { display: none; }
.pestanas__btn { scroll-snap-align: center; }
@media (min-width: 700px) {
  .pestanas__botones {
    flex-wrap: wrap; justify-content: center;
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
}
.pestanas__btn {
  font-family: var(--display); font-size: .86rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris);
  padding: .7rem 1.35rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease);
}
.pestanas__btn:hover { color: var(--plata); border-color: var(--linea-alta); }

/* Los paneles se apilan; solo se pinta el del radio marcado. */
.panel { display: none; }
.panel__texto { max-width: 46ch; margin-bottom: 2.2rem; }
.panel__h3 { font-size: var(--t-h3); margin-bottom: .7rem; }
.panel__p { color: var(--gris); margin-bottom: 1.3rem; }

/* En móvil, carrusel horizontal con anclaje.
   Apiladas serían tres fotos de 4:5 a ancho completo: metro y medio de scroll
   para ver un solo sector, y el visitante se cansa antes de llegar al suyo.
   Deslizando, las tres caben en un gesto. Los `-lateral` sacan el carrusel del
   padding de la sección para que sangre de borde a borde. */
.panel__fotos {
  --lateral: clamp(1.25rem, 5vw, 2rem);
  display: grid; gap: .75rem;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--lateral) * -1);
  padding-inline: var(--lateral);
  scroll-padding-inline: var(--lateral);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.panel__fotos::-webkit-scrollbar { display: none; }
.panel__fotos > * { scroll-snap-align: start; }

/* Marco de foto: recorte 4:5, zoom lento al pasar y escuadra de encuadre. */
.marco {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 2px; background: var(--carbon);
  aspect-ratio: 4 / 5;
}
.marco picture, .marco__img { width: 100%; height: 100%; object-fit: cover; }
.marco__img { transition: transform .9s var(--ease); }
.marco:hover .marco__img { transform: scale(1.06); }
/* Escuadra verde en la esquina: la marca de encuadre de un visor. */
.marco__esq {
  position: absolute; left: 14px; bottom: 14px;
  width: 26px; height: 26px;
  border-left: 2px solid var(--verde-alto);
  border-bottom: 2px solid var(--verde-alto);
  opacity: 0; transform: translate(-6px, 6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.marco:hover .marco__esq { opacity: 1; transform: none; }

/* El enlace de cada vertical con su panel. Un bloque por sector: es
   repetitivo a propósito, porque CSS no tiene forma de generarlo. */
#v-nautico:checked ~ .pestanas__botones label[for="v-nautico"],
#v-motor:checked   ~ .pestanas__botones label[for="v-motor"],
#v-lugares:checked ~ .pestanas__botones label[for="v-lugares"],
#v-deporte:checked ~ .pestanas__botones label[for="v-deporte"],
#v-natura:checked  ~ .pestanas__botones label[for="v-natura"] {
  color: var(--negro); background: var(--verde); border-color: var(--verde);
}
#v-nautico:checked ~ .panel--nautico,
#v-motor:checked   ~ .panel--motor,
#v-lugares:checked ~ .panel--lugares,
#v-deporte:checked ~ .panel--deporte,
#v-natura:checked  ~ .panel--natura {
  display: block;
  animation: entrar .55s var(--ease);
}
/* El foco de teclado tiene que verse en la etiqueta, no en un radio invisible. */
#v-nautico:focus-visible ~ .pestanas__botones label[for="v-nautico"],
#v-motor:focus-visible   ~ .pestanas__botones label[for="v-motor"],
#v-lugares:focus-visible ~ .pestanas__botones label[for="v-lugares"],
#v-deporte:focus-visible ~ .pestanas__botones label[for="v-deporte"],
#v-natura:focus-visible  ~ .pestanas__botones label[for="v-natura"] {
  outline: 2px solid var(--verde-alto); outline-offset: 3px;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ───────────────────────── 9. FPV ─────────────────────────
   Fondo con un halo verde muy tenue: es la única sección que se sale del
   negro plano, y marca que aquí está el argumento diferencial. */

.fpv {
  padding: var(--aire) clamp(1.25rem, 5vw, 2rem);
  background:
    radial-gradient(ellipse 90% 60% at 78% 45%, rgba(30, 154, 100, .13), transparent 62%),
    var(--carbon);
  border-block: 1px solid var(--linea);
}
.fpv__caja {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
}
.fpv__h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; }
.fpv__cita {
  margin: 0 0 1.5rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--verde);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 300; font-style: italic; line-height: 1.45;
  color: var(--plata);
}
.fpv__p { color: var(--gris); margin-bottom: 2rem; }

.fpv__puntos { display: grid; gap: 1.1rem; margin-bottom: 2.2rem; }
.fpv__puntos li {
  display: grid; gap: .2rem;
  padding-left: 1.5rem; position: relative;
}
/* El diafragma reducido a su forma mínima: un hexágono. */
.fpv__puntos li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; background: var(--verde);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.fpv__punto-t {
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  letter-spacing: .02em; color: var(--plata);
}
.fpv__punto-d { font-size: .9rem; color: var(--gris); line-height: 1.5; }

/* Las tomas esféricas son redondas: se enseñan redondas. */
.fpv__fotos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 2vw, 1.4rem);
  align-content: start;
}
.orbe {
  margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--linea-alta);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.orbe:nth-child(2) { transform: translateY(clamp(1rem, 3vw, 2.4rem)); }
.orbe:hover { border-color: var(--verde); transform: translateY(-6px); }
.orbe:nth-child(2):hover { transform: translateY(calc(clamp(1rem, 3vw, 2.4rem) - 6px)); }
.orbe picture, .orbe img { width: 100%; height: 100%; object-fit: cover; }

/* ───────────────────────── 10. SERVICIOS ───────────────────────── */

.servicios { padding: var(--aire) clamp(1.25rem, 5vw, 2rem); }
.servicios__lista {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
/* Rejilla a hueso: la línea de 1px del fondo hace de separador. */
.serv {
  background: var(--negro);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  position: relative;
  counter-increment: serv;
  transition: background-color .4s var(--ease);
}
.serv:hover { background: var(--carbon); }
.serv__num::before {
  content: "0" counter(serv);
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; color: var(--verde);
}
.serv__h3 { font-size: var(--t-h3); margin: .9rem 0 .7rem; }
.serv__p { color: var(--gris); font-size: .95rem; margin-bottom: 1.2rem; }
.serv__items { display: flex; flex-wrap: wrap; gap: .45rem; }
.serv__items li {
  font-size: .78rem; letter-spacing: .03em;
  color: var(--gris);
  padding: .3rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.servicios__lista { counter-reset: serv; }

/* ───────────────────────── 11. FRANJA ─────────────────────────
   Corte visual a pantalla completa. Efecto parallax con background-attachment,
   que en móvil se desactiva porque iOS no lo soporta y da saltos. */

.franja {
  position: relative;
  min-height: clamp(340px, 62vh, 620px);
  display: grid; place-items: center;
  overflow: hidden;
}
.franja picture, .franja__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.franja__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,11,.75), rgba(11,11,11,.5), rgba(11,11,11,.88));
}
.franja__frase {
  position: relative; z-index: 2; margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 300; line-height: 1.1; letter-spacing: -.02em;
  color: var(--plata);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
}
.franja__frase em { font-style: normal; font-weight: 600; color: var(--verde-alto); }

/* ───────────────────────── 12. PROCESO ───────────────────────── */

.proceso { padding: var(--aire) clamp(1.25rem, 5vw, 2rem); }
.proceso__lista {
  max-width: 60rem; margin: 0 auto;
  display: grid; gap: 0;
}
.paso {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--linea);
  position: relative;
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__n {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 300; line-height: 1;
  color: var(--gris-tenue);
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--ease);
}
.paso:hover .paso__n { color: var(--verde); }
.paso__h3 { font-size: var(--t-h3); margin-bottom: .45rem; }
.paso__p { color: var(--gris); font-size: .95rem; margin: 0; }
.proceso__plazo {
  max-width: 60rem; margin: 1.8rem auto 0;
  font-size: .9rem; color: var(--gris); text-align: center;
}
.proceso__plazo strong { color: var(--plata); }

/* ───────────────────────── 13. EQUIPO ───────────────────────── */

.equipo {
  padding: var(--aire) clamp(1.25rem, 5vw, 2rem);
  background: var(--carbon);
  border-block: 1px solid var(--linea);
}
.equipo__caja {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
.equipo__h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.equipo__lista { display: grid; gap: 1px; background: var(--linea); }
.equipo__item {
  background: var(--carbon);
  padding: 1.1rem 0 1.1rem 1.2rem;
  display: grid; gap: .15rem;
  border-left: 2px solid transparent;
  transition: border-color .3s var(--ease), padding-left .3s var(--ease);
}
.equipo__item:hover { border-left-color: var(--verde); padding-left: 1.5rem; }
.equipo__t {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .04em; color: var(--plata);
}
.equipo__d { font-size: .88rem; color: var(--gris); }

/* ───────────────────────── 14. PAQUETES ───────────────────────── */

.paquetes { padding: var(--aire) clamp(1.25rem, 5vw, 2rem); }
/* `stretch` y no `start`: las tres tarjetas tienen listas de distinta longitud,
   así que con `start` cada una acaba a una altura y los tres botones «Pedir
   este» quedan a tres alturas distintas. Estiradas, `.paq__items { flex: 1 }`
   empuja el botón al fondo y los tres se alinean. */
.paquetes__lista {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 1.2rem;
  align-items: stretch;
}
.paq {
  position: relative;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: clamp(1.8rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.paq:hover { border-color: var(--linea-alta); transform: translateY(-4px); }
.paq--destacado {
  border-color: var(--verde);
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(30, 154, 100, .14), transparent 60%),
    var(--carbon);
}
.paq__cinta {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--verde); color: var(--negro);
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .34rem .9rem; border-radius: 999px;
  white-space: nowrap;
}
.paq__h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.paq__lema { color: var(--verde-alto); font-size: .88rem; margin-bottom: 1.3rem; }
.paq__precio { margin: 0 0 1.1rem; display: flex; align-items: baseline; gap: .45rem; }
.paq__desde { font-size: .8rem; color: var(--gris); }
.paq__cifra {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--plata);
}
/* Sin precio: la frase ocupa el hueco de la cifra pero no la finge. */
.paq__cifra--sin {
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: .02em; color: var(--gris);
}
.paq__para {
  font-size: .9rem; color: var(--gris);
  padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.paq__items { display: grid; gap: .6rem; margin-bottom: 1.8rem; flex: 1; }
.paq__items li {
  font-size: .92rem; color: rgba(228, 228, 228, .82);
  padding-left: 1.5rem; position: relative;
}
.paq__items li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; background: var(--verde);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ───────────────────────── 15. CONFIANZA ───────────────────────── */

.confianza {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 2rem);
  border-block: 1px solid var(--linea);
  background: var(--carbon);
}
.confianza__lista {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 1.5rem;
}
.confianza__lista li {
  display: grid; gap: .2rem;
  padding-left: 1.4rem; border-left: 2px solid var(--verde);
}
.confianza__lista strong {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .02em;
}
.confianza__lista span { font-size: .88rem; color: var(--gris); }

/* ───────────────────────── 16. NOSOTROS ───────────────────────── */

.nosotros { padding: var(--aire) clamp(1.25rem, 5vw, 2rem); }
.nosotros__caja {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.nosotros__foto {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  background: var(--carbon);
}
.nosotros__foto picture, .nosotros__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
/* Escuadra de encuadre, esta fija: es un retrato, no una tarjeta. */
.nosotros__esq {
  position: absolute; right: 18px; top: 18px;
  width: 34px; height: 34px;
  border-right: 2px solid var(--verde);
  border-top: 2px solid var(--verde);
}
.nosotros__h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.nosotros__cita {
  margin: 0 0 1.5rem; padding-left: 1.2rem;
  border-left: 2px solid var(--verde);
  font-family: var(--display); font-size: 1.15rem; font-weight: 300;
  font-style: italic; color: var(--plata);
}
.nosotros__p { color: var(--gris); }
.nosotros__firma {
  margin: 1.8rem 0 0;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--verde-alto);
}

/* ───────────────────────── 17. FAQ ───────────────────────── */

.faq { padding: var(--aire) clamp(1.25rem, 5vw, 2rem); }
.faq__lista { max-width: 52rem; margin: 0 auto; }
.faq__item { border-top: 1px solid var(--linea); }
.faq__item:last-child { border-bottom: 1px solid var(--linea); }
.faq__p {
  cursor: pointer; list-style: none;
  padding: 1.3rem 2.6rem 1.3rem 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--plata);
  position: relative;
  transition: color .25s var(--ease);
}
.faq__p::-webkit-details-marker { display: none; }
.faq__p:hover { color: var(--verde-alto); }
/* Cruz que gira a «menos» al abrir. Dos barras, sin fuentes de iconos. */
.faq__p::before, .faq__p::after {
  content: ""; position: absolute; right: 2px; top: 50%;
  background: var(--verde); transition: transform .3s var(--ease);
}
.faq__p::before { width: 14px; height: 2px; transform: translateY(-50%); }
.faq__p::after  { width: 2px; height: 14px; right: 8px; transform: translateY(-50%); }
.faq__item[open] .faq__p::after { transform: translateY(-50%) rotate(90deg); }
.faq__r { padding: 0 2.6rem 1.4rem 0; }
.faq__r p { color: var(--gris); font-size: .96rem; margin: 0; max-width: 60ch; }

/* ───────────────────────── 18. PROPUESTA ───────────────────────── */

.propuesta {
  position: relative;
  padding: var(--aire) clamp(1.25rem, 5vw, 2rem);
  overflow: hidden;
}
.propuesta__fondo { position: absolute; inset: 0; z-index: 0; }
.propuesta__fondo picture, .propuesta__img {
  width: 100%; height: 100%; object-fit: cover;
}
.propuesta__velo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(11,11,11,.93), rgba(11,11,11,.88));
  backdrop-filter: blur(3px);
}
.propuesta__caja {
  position: relative; z-index: 2;
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: clamp(2.2rem, 5vw, 4rem);
  align-items: start;
}
.propuesta__h2 { font-size: var(--t-h2); margin-bottom: 1rem; }
.propuesta__p { color: var(--gris); margin-bottom: 1.6rem; max-width: 42ch; }
.propuesta__ventajas { display: grid; gap: .7rem; }
.propuesta__ventajas li {
  font-size: .94rem; padding-left: 1.6rem; position: relative;
  color: rgba(228, 228, 228, .85);
}
.propuesta__ventajas li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 10px; background: var(--verde);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- Formulario --- */
.form {
  background: rgba(18, 18, 20, .9);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  display: grid; gap: 1.1rem;
}
.form__trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__campo { display: grid; gap: .45rem; }
.form__campo label {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.form input, .form select {
  font-family: var(--texto); font-size: 1rem;
  color: var(--plata);
  background: var(--negro);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: .92rem 1rem;
  width: 100%;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
  /* 16 px reales: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: max(1rem, 16px);
}
.form input::placeholder { color: #55555A; }
.form input:focus, .form select:focus {
  border-color: var(--verde); background: var(--carbon); outline: none;
}
.form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gris) 50%),
    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: right 1.1rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form select:invalid { color: #55555A; }
.form option { background: var(--negro); color: var(--plata); }
.form__nota { font-size: .8rem; color: #6A6A6E; margin: 0; text-align: center; }

/* ───────────────────────── 19. PIE ───────────────────────── */

.pie {
  border-top: 1px solid var(--linea);
  background: var(--carbon);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2rem) 0;
}
.pie__caja {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
}
.pie__marca { display: grid; gap: .8rem; justify-items: start; }
.pie__nombre {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .14em; margin: 0;
}
.pie__nombre em { font-style: normal; color: var(--verde); }
.pie__lema { color: var(--gris); font-size: .9rem; margin: 0; max-width: 34ch; }
.pie__claim {
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--verde-alto);
  margin: 0;
}
.pie__lic { font-size: .82rem; color: var(--gris); margin: 0; }

.pie__cols { display: grid; gap: 2.2rem; }
.pie__h {
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 1rem;
}
.pie__link {
  display: block; font-size: .94rem; color: var(--gris);
  padding: .3rem 0;
  transition: color .25s var(--ease);
}
.pie__link:hover { color: var(--verde-alto); }
.pie__txt { font-size: .88rem; color: var(--gris); line-height: 1.75; margin: 0; }
.pie__txt--dir { margin-top: .8rem; color: #6A6A6E; }

.pie__legal {
  max-width: var(--ancho); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  border-top: 1px solid var(--linea);
  padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem; color: var(--gris);
}
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--gris); }
.pie__legal a:hover { color: var(--plata); }

/* --- Botón flotante de WhatsApp --- */
.flotante {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 34px -10px rgba(37, 211, 102, .75);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.flotante:hover { transform: scale(1.07); }
/* app.js lo aparta cuando ya hay un CTA en pantalla. */
.flotante[data-oculto] { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ───────────────────────── 20. PÁGINAS SUELTAS ─────────────────────────
   /gracias y /privacidad. Comparten barra y pie con la portada. */

.hoja {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 10rem) clamp(1.25rem, 5vw, 2rem) var(--aire);
}
.hoja h1 { font-size: var(--t-h2); margin-bottom: 1.2rem; }
.hoja h2 {
  font-size: 1.2rem; margin: 2.5rem 0 .8rem;
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.hoja p, .hoja li { color: var(--gris); font-size: .96rem; }
.hoja ul { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.hoja li { padding-left: 1.4rem; position: relative; }
.hoja li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; background: var(--verde);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hoja a { color: var(--verde-alto); border-bottom: 1px solid rgba(47,190,126,.35); }
.hoja strong { color: var(--plata); }

/* La página de gracias es una sola pantalla, centrada. */
.gracias {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 7rem clamp(1.25rem, 5vw, 2rem) 4rem;
}
.gracias__caja { max-width: 40rem; display: grid; gap: 1.2rem; justify-items: center; }
.gracias__emblema { margin-bottom: .5rem; }
.gracias__h1 { font-size: var(--t-h2); }
.gracias__p { color: var(--gris); margin: 0; }
.gracias__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1rem; }

/* ───────────────────────── 21. RESPONSIVE ─────────────────────────
   Móvil primero: todo lo de arriba es la versión estrecha. Aquí solo se
   ensancha. Los cortes están donde el contenido lo pide, no en anchos
   redondos de catálogo. */

@media (min-width: 560px) {
  .cifras__lista { grid-template-columns: repeat(4, 1fr); }
  .cifras__item + .cifras__item::before {
    content: ""; position: absolute; left: 0; top: 12%;
    width: 1px; height: 76%; background: var(--linea);
  }
  /* A partir de aquí caben las tres a la vez: se deshace el carrusel. */
  .panel__fotos {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    overflow: visible;
    margin-inline: 0; padding-inline: 0;
  }
  .hero__tira { display: flex; }
}

@media (min-width: 760px) {
  .servicios__lista { grid-template-columns: repeat(2, 1fr); }
  .pie__cols { grid-template-columns: repeat(3, 1fr); }
  .confianza__lista { grid-template-columns: repeat(3, 1fr); }
  .equipo__lista { grid-template-columns: repeat(2, 1fr); }
  /* La rejilla a hueso necesita el separador también en vertical. */
  .equipo__item { padding-inline: 1.2rem; }
}

/* Los paquetes piden más ancho que el resto de rejillas: a 768 px las tres
   columnas parten cada viñeta en dos líneas y la tarjeta se lee a trompicones.
   Hasta los 900 px van apiladas y se leen como una comparativa. */
@media (min-width: 900px) {
  .paquetes__lista { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 940px) {
  .bar__nav { display: flex; }
  .bar__tel { display: flex; }

  .hero { padding-inline: clamp(2rem, 7vw, 6rem); }
  .hero__caja { max-width: 44rem; }

  .fpv__caja { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .equipo__caja { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .equipo__lista { grid-template-columns: 1fr; }
  .nosotros__caja { grid-template-columns: .85fr 1.15fr; }
  .propuesta__caja { grid-template-columns: 1fr 1fr; align-items: center; }
  .pie__caja { grid-template-columns: .9fr 2.1fr; }

  /* El panel abierto pone el texto a la izquierda y las fotos a la derecha. */
  .panel { grid-template-columns: minmax(16rem, .8fr) 2.2fr; gap: 3rem; align-items: center; }
  #v-nautico:checked ~ .panel--nautico,
  #v-motor:checked   ~ .panel--motor,
  #v-lugares:checked ~ .panel--lugares,
  #v-deporte:checked ~ .panel--deporte,
  #v-natura:checked  ~ .panel--natura { display: grid; }
  .panel__texto { margin-bottom: 0; }
  .panel__fotos { grid-template-columns: repeat(3, 1fr); }
  /* Escalonado: las tres fotos a distinta altura, como fotogramas sueltos. */
  .marco--1 { transform: translateY(clamp(1rem, 2.6vw, 2.2rem)); }
  .marco--2 { transform: translateY(clamp(-1rem, -2.2vw, -.5rem)); }
}

@media (min-width: 1180px) {
  .servicios__lista { grid-template-columns: repeat(4, 1fr); }
  .pie__cols { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* Pantallas muy anchas: no dejar que el hero se estire sin fondo. */
@media (min-width: 1700px) {
  .hero__caja { max-width: 48rem; }
}