/* ==========================================================================
   Karakoles 4x4 — hoja de estilos del preview
   Mobile-first. Un solo punto de quiebre en 1024px.
   Este CSS es la base del tema de WordPress: los nombres de clase siguen
   la estructura de bloques del home.
   ========================================================================== */

:root{
  /* Paleta mineral */
  --hueso:#E7E2D7;
  --papel:#F2EFE7;
  --piedra:#DDD7C9;
  --carbon:#13161A;
  --carbon-2:#1B1F25;
  --tinta:#1B1E22;
  --tinta-2:#43474B;
  --seca:#6E6A61;
  --oxido:#A8460F;
  --oxido-claro:#D2662A;
  --musgo:#465239;
  --linea:#C3BCAB;
  --linea-osc:#2E343D;

  --borde:56px;          /* margen lateral en escritorio */
  --borde-m:20px;        /* margen lateral en móvil */

  /* Medida de lectura de las crónicas. 38rem con Newsreader a 19-20px da
     unos 62 caracteres por línea, que es la franja donde el ojo no se
     pierde al volver al margen. --salida es cuánto se sale una foto de esa
     columna a cada lado: cero en móvil, donde no hay sitio. */
  --medida:38rem;
  --medida-ancha:54rem;
  --salida:0px;

  /* Familias. El titular es serif de display; la interfaz y los datos siguen
     en Archivo, y el cuerpo editorial en Newsreader. */
  /* Grano. El cliente no queria color plano: esto es textura, no color — el
     color lo siguen poniendo los tokens de arriba. Son dos mosaicos de 320 px
     con transparencia, uno de motas oscuras para las superficies claras y uno
     de motas claras para las oscuras. Al ser transparentes no hacen falta
     modos de fusion: el mismo archivo funciona sobre cualquier fondo.
     Salen de las texturas que mando el cliente, pasadas por un filtro de
     paso alto —sin las manchas grandes la baldosa no se reconoce al
     repetirse— y desaturadas a la paleta mineral. */
  --grano-oscuro:url(../img/grano-oscuro.webp);
  --grano-claro:url(../img/grano-claro.webp);

  /* Radios. El sistema nacio con radio cero en todo; se abrio primero para
     los botones y ahora para los formularios. Fuera de ahi sigue en cero:
     secciones, tarjetas, fotos y fichas no se redondean. */
  --radio-caja:24px;     /* la tarjeta del formulario */
  --radio-campo:999px;   /* los campos de una linea: pildora */
  --radio-alto:20px;     /* el area de mensaje, que no puede ser pildora */

  /* Velo sobre la foto del formulario. Cuanto mas alto, menos se reconoce la
     foto. A 0.90 se adivinan las formas y no compite con el texto. */
  --velo-form:rgba(231,226,215,.90);

  --titular:"DM Serif Text",Georgia,"Times New Roman",serif;
  --interfaz:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --editorial:"Newsreader",Georgia,serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--hueso) var(--grano-oscuro);
  color:var(--tinta);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Titulares en DM Serif Text.
   Tres ajustes que el cambio de familia obliga:
   · peso 400 — es el unico que tiene; pedirle 700 fabrica una falsa negrita
     que en una serif de contraste alto se ve emborronada.
   · interletraje −0,01em en vez de −0,02em: el −2% estaba medido sobre una
     grotesca, y en una serif con serifas aprieta de mas.
   · interlinea 1,14 en vez de 1,08: esta serif tiene ascendentes y
     descendentes mas largas y a 1,08 se tocan. */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--titular);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.14;
  text-wrap:balance;
}
/* ── Titulares que no son h1-h4 ─────────────────────────────────────────────
   Nombres de seccion, titulos de tarjeta y frases de display: hacen de
   titular aunque el marcado sea un span, asi que llevan la misma familia.
   Quedan fuera a proposito:
   · los numerales grandes (.paso__n, .capacidad__n, .cifra dt), que son dato
     y no titulo, y que ademas usan el eje de anchura de Archivo;
   · la cita destacada del blog, que es sans sobre cuerpo serif justamente
     para contrastar — si tambien fuera serif, se perderia esa diferencia. */
.tesela__nombre,
.clientes__fondo,
.pieza__titulo,
.destacada__titulo,
.contraste__negacion,
.proxima__titulo,
.clase__placa-modelo{
  font-family:var(--titular);
  font-weight:400;
  letter-spacing:-0.01em;
}

p{margin:0}
img{max-width:100%}
a{color:var(--oxido);text-decoration:none}
a:hover{color:#7E340B}
a:focus-visible,button:focus-visible{outline:2px solid var(--oxido);outline-offset:3px}

.eyebrow{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-stretch:108%;color:var(--seca);
}
.serif{font-family:"Newsreader",Georgia,serif;font-weight:300}

.envoltura{padding-left:var(--borde-m);padding-right:var(--borde-m)}

/* --- Acciones ------------------------------------------------------------ */
.btn{
  display:flex;align-items:center;justify-content:center;
  background:var(--oxido);color:#F7F3EA;
  min-height:52px;padding:0 30px;
  font-size:15px;font-weight:600;letter-spacing:.02em;font-stretch:105%;
  border:0;border-radius:999px;cursor:pointer;text-align:center;
}
.btn:hover{background:#8E3A0C;color:#F7F3EA}
.btn--fantasma{background:transparent;border:1px solid rgba(233,228,218,.45);color:#E9E4DA}
.btn--fantasma:hover{background:rgba(233,228,218,.1);color:#E9E4DA}
.btn--carbon{background:var(--carbon);color:var(--papel);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.btn--carbon:hover{background:#000;color:var(--papel)}

.lnk{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:.04em;
  border-bottom:1px solid currentColor;padding-bottom:3px;
}

/* --- Zoom lento al pasar por encima -------------------------------------- */
.zoom{overflow:hidden;display:block;position:relative}
.zoom img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.07)}
.scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,26,0) 38%,rgba(19,22,26,.84) 100%)}

@media (prefers-reduced-motion:reduce){
  .zoom img{transition:none}
  .zoom:hover img{transform:none}
}
/* En táctil no hay hover: se desactiva para que no quede un estado pegado. */
@media (hover:none){
  .zoom:hover img{transform:none}
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{position:relative;background:var(--carbon);color:#E9E4DA;overflow:hidden;
  min-height:640px;min-height:88svh;display:flex;flex-direction:column}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.74}
.hero__video{position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:.74}
.hero__escudo{position:absolute;inset:0}          /* bloquea toda interacción con el video */
.hero__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,26,.86) 0%,rgba(19,22,26,.12) 32%,rgba(19,22,26,.92) 100%)}

/* Con movimiento reducido o sin JS, manda el póster. */
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}

/* --- Barra superior ------------------------------------------------------ */
.barra{position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;height:56px;
  padding-left:var(--borde-m);padding-right:var(--borde-m)}
.barra__logo{height:30px;width:auto;display:block}
.barra__nav{display:none}
.barra__util{display:flex;align-items:center;gap:16px}
.idiomas{display:flex;gap:9px;font-size:11px;letter-spacing:.12em;color:rgba(233,228,218,.55)}
.idiomas .activo{color:#E9E4DA;border-bottom:1px solid var(--oxido-claro);padding-bottom:2px}
.barra__wa{display:none}
.barra__menu{background:none;border:0;padding:8px;cursor:pointer;line-height:0}

/* --- Manifiesto ---------------------------------------------------------- */
.hero__cuerpo{position:relative;z-index:3;flex-grow:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--borde-m) 26px;max-width:1000px}
.hero__eyebrow{color:rgba(233,228,218,.7);margin-bottom:16px}
.hero h1{font-size:clamp(38px,10vw,48px);color:var(--papel);margin-bottom:18px}
.hero__bajada{font-size:18px;line-height:1.45;color:rgba(233,228,218,.9);margin-bottom:26px}
.hero__acciones{display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.hero__ancla{display:flex;align-items:center;justify-content:center;gap:8px;
  color:rgba(233,228,218,.55);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* ==========================================================================
   2 · COLLAGE DE SECCIONES
   Seis teselas, el nombre de la sección sobre la foto. Es navegación, no
   contenido: por eso no lleva descripción ni CTA.
   ========================================================================== */
.collage{padding:44px var(--borde-m) 52px;background:var(--hueso) var(--grano-oscuro)}
.collage__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.tesela{position:relative;display:block;overflow:hidden;height:210px}
.tesela img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.tesela:hover img{transform:scale(1.07)}
.tesela__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,26,.10) 0%,rgba(19,22,26,.55) 100%)}
.tesela__nombre{position:absolute;left:16px;right:16px;bottom:14px;
  font-size:clamp(21px,5.6vw,27px);line-height:1.06;color:#F7F3EA;
  text-shadow:0 1px 18px rgba(19,22,26,.5)}

@media (prefers-reduced-motion:reduce){
  .tesela img{transition:none}
  .tesela:hover img{transform:none}
}
@media (hover:none){ .tesela:hover img{transform:none} }

/* ==========================================================================
   4 · CÓMO FUNCIONA
   Tres fotos, una por paso. El número y el título quedan siempre visibles
   sobre la imagen; el párrafo va oculto y aparece con un fundido de opacidad
   al pasar el cursor —o siempre visible en táctil, que no tiene hover.
   ========================================================================== */
.pasos{padding:52px var(--borde-m) 56px;background:var(--papel) var(--grano-oscuro)}
.pasos h2{font-size:clamp(30px,7vw,36px);margin:6px 0 28px}
.pasos__grid{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}

.paso{position:relative;overflow:hidden;border-radius:var(--radio-caja);
  min-height:360px}
.paso__foto{position:absolute;inset:0}
.paso__foto img{width:100%;height:100%}
.paso__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,26,0) 42%,rgba(19,22,26,.85) 100%);
  transition:background 350ms ease}
.paso__texto{position:absolute;left:20px;right:20px;bottom:20px;color:#F7F3EA}
.paso__n{display:block;font-size:26px;font-weight:700;font-stretch:115%;
  letter-spacing:-0.03em;color:var(--oxido-claro);line-height:1;margin-bottom:6px}
.paso__texto h4{font-size:21px;text-shadow:0 1px 18px rgba(19,22,26,.5)}
.paso__desc{font-size:14.5px;line-height:1.5;color:rgba(247,243,234,.92);
  margin-top:10px;max-width:46ch;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity 350ms ease,max-height 350ms ease}

.paso:hover .paso__velo,.paso:focus-within .paso__velo{
  background:linear-gradient(180deg,rgba(19,22,26,.32) 0%,rgba(19,22,26,.92) 100%)}
.paso:hover .paso__desc,.paso:focus-within .paso__desc{opacity:1;max-height:220px}

@media (hover:none){
  .paso__velo{background:linear-gradient(180deg,rgba(19,22,26,.28) 0%,rgba(19,22,26,.9) 100%)}
  .paso__desc{opacity:1;max-height:220px}
}
@media (prefers-reduced-motion:reduce){
  .paso__velo,.paso__desc{transition:none}
}

/* ==========================================================================
   3 · RESEÑAS DE GOOGLE
   Titular gigante de fondo y las citas escalonadas encima. La atribución
   (autor, la G, la calificación) no es decorativa: los términos de Google
   la exigen para mostrar sus reseñas.
   ========================================================================== */
.clientes{position:relative;overflow:hidden;background:var(--papel) var(--grano-oscuro);
  padding:56px var(--borde-m) 60px;border-top:1px solid var(--linea)}
.clientes__fondo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-size:clamp(54px,15vw,168px);letter-spacing:-0.015em;line-height:1;text-transform:uppercase;
  color:#D2CABA;text-align:center;pointer-events:none;user-select:none;
  white-space:pre-line}
.clientes__citas{position:relative;display:flex;flex-direction:column;gap:30px}
.cita{margin:0;max-width:30ch}
.cita--der{align-self:flex-end;text-align:right}
.cita--izq{align-self:flex-start}
.cita__texto{font-size:clamp(19px,4.4vw,26px);font-weight:500;font-stretch:94%;
  letter-spacing:-0.02em;line-height:1.22;color:var(--tinta)}
.cita__autor{display:flex;align-items:center;gap:8px;margin-top:9px;
  font-size:12.5px;color:var(--seca)}
.cita--der .cita__autor{justify-content:flex-end}
.clientes__pie{position:relative;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--linea)}

/* ==========================================================================
   6 · AGENCIAS
   ========================================================================== */
.agencias{padding:52px var(--borde-m) 56px;background:var(--papel) var(--grano-oscuro);
  border-top:1px solid var(--linea)}
/* Una sola columna en las dos variantes: el home ya no lleva el bloque de
   texto que compartía la pantalla con el formulario (título, intro, tres
   ventajas) — esa historia la cuenta /agencias/, no el home. */
.agencias__grid{display:grid;grid-template-columns:1fr;gap:20px}
.agencias--solo{border-top:0}
.agencias--solo .agencias__grid{max-width:600px;margin:0 auto}
.agencias__intro{font-size:16px;color:var(--tinta-2);margin-bottom:24px}
.ventaja{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.ventaja svg{margin-top:4px;flex-shrink:0}
.ventaja p{font-size:15px;color:var(--tinta-2)}

/* --- Formularios --------------------------------------------------------
   Tarjeta sobre una foto oscura y visible —no velada—, con el titular en
   grande encima, igual que una tesela pero con campos de verdad debajo. La
   foto se define por instancia con --foto, asi que cada formulario puede
   llevar la suya sin tocar el marcado. El degradado va oscuro abajo (donde
   caen titular y campos) y casi transparente arriba, para que la foto se
   note en vez de quedar lavada.

   Los campos llevan relleno propio en vez de apoyarse en la foto. Asi el
   texto siempre cae sobre una superficie controlada y el contraste no
   depende de que zona de la imagen toque debajo. */
.formulario{
  --foto:url(../img/agencias/agencia-1.jpg);
  position:relative;
  padding:28px 22px 26px;
  border-radius:var(--radio-caja);
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(19,22,26,0) 0%,rgba(19,22,26,0) 55%,rgba(19,22,26,.4) 78%,rgba(19,22,26,.68) 100%),
    var(--foto) center 22%/cover no-repeat;
}
.formulario__cabeza{margin-bottom:22px}
.formulario__cabeza h2{font-size:clamp(26px,7vw,32px);color:#F7F3EA;
  text-shadow:0 1px 20px rgba(19,22,26,.55)}
.campos{display:flex;flex-direction:column;gap:16px}

/* Texto suelto directo sobre la foto (la etiqueta "¿Cómo viajas?", el aviso
   de KK_PREVIEW): necesita su propio contraste claro, porque ya no hay un
   velo casi opaco debajo que lo resuelva por todos. Los campos y las
   opciones no entran aquí —llevan su propio fondo claro. */
.formulario .eyebrow{color:rgba(247,243,234,.75)}
.formulario .hueco{background:rgba(19,22,26,.55);border-color:rgba(247,243,234,.35)}
.formulario .hueco .eyebrow{color:var(--oxido-claro)}
.formulario .hueco p{color:rgba(247,243,234,.85)}

.campo{
  background:rgba(250,248,243,.78);
  border:1px solid var(--linea);
  border-radius:var(--radio-campo);
  padding:12px 18px;
}
.campo span{display:block;font-size:14px;color:var(--seca)}
.campo--alto{border-radius:var(--radio-alto);padding-bottom:34px}

.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opciones{display:flex;flex-wrap:wrap;gap:9px}
.opcion{font-size:13px;border:1px solid var(--linea);border-radius:999px;
  padding:10px 16px;color:var(--tinta-2);background:rgba(250,248,243,.7)}
.opcion--activa{border-color:var(--oxido);background:var(--oxido);color:#F7F3EA}

/* ==========================================================================
   7 · FIELD NOTES
   ========================================================================== */
.notas{padding:52px var(--borde-m) 56px;background:var(--carbon) var(--grano-claro);color:#E9E4DA}
.notas .eyebrow{color:rgba(233,228,218,.6);margin-bottom:14px}
.notas h2{font-size:clamp(30px,7vw,36px);color:var(--papel);margin-bottom:12px}
.notas__bajada{font-size:16px;line-height:1.45;color:rgba(233,228,218,.78);margin-bottom:28px}

.mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.pieza{display:block}
.pieza--mayor{grid-column:span 2;height:300px}
.pieza--media{height:200px}
.pieza--archivo{grid-column:span 2;height:130px}
.pieza__texto{position:absolute;left:15px;right:15px;bottom:15px}
.pieza--mayor .pieza__texto{left:20px;right:20px;bottom:20px}
.pieza__cat{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--oxido-claro);margin-bottom:6px}
.pieza--mayor .pieza__cat{font-size:9.5px;margin-bottom:8px}
.pieza__titulo{display:block;font-size:16px;letter-spacing:-0.02em;
  line-height:1.16;color:var(--papel)}
.pieza--mayor .pieza__titulo{font-size:24px;line-height:1.14}
.pieza__capa{position:absolute;inset:0;background:rgba(19,22,26,.64)}
.pieza__centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;padding:0 16px}
.pieza__centro strong{font-size:19px;font-weight:700;font-stretch:104%;
  letter-spacing:-0.02em;color:var(--papel)}
.pieza__centro span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,228,218,.75);border-bottom:1px solid rgba(233,228,218,.5);padding-bottom:3px}

/* ==========================================================================
   8 · GUIDED EDITIONS
   ========================================================================== */
.ediciones{padding:0 var(--borde-m) 52px;background:var(--carbon) var(--grano-claro);color:#E9E4DA}
.ediciones hr{height:1px;background:var(--linea-osc);border:0;margin-bottom:42px}
.ediciones .eyebrow{color:rgba(233,228,218,.6);margin-bottom:14px}
.ediciones h2{font-size:clamp(30px,7vw,36px);color:var(--papel);margin-bottom:20px}
.ediciones__cuerpo p{margin-bottom:18px}
.ediciones__serif{font-size:18px;line-height:1.5;color:rgba(233,228,218,.86)}
.ediciones__detalle{font-size:15px;color:rgba(233,228,218,.66)}
.vacio{border:1px solid var(--linea-osc);padding:22px 24px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.vacio p{font-size:14px;color:rgba(233,228,218,.72);margin:0}

/* ==========================================================================
   9 · CIERRE
   ========================================================================== */
.cierre{padding:56px var(--borde-m) 60px;background:var(--carbon-2) var(--grano-claro);
  color:#E9E4DA;text-align:center}
.cierre h2{font-size:clamp(34px,8.5vw,42px);line-height:1.2;font-weight:300;
  letter-spacing:-0.015em;color:var(--papel);margin-bottom:22px}
.cierre p{font-size:15.5px;color:rgba(233,228,218,.74);margin-bottom:30px}
.cierre__acciones{display:flex;flex-direction:column;gap:11px}

/* ==========================================================================
   10 · PIE
   ========================================================================== */
.pie{padding:44px var(--borde-m) 32px;background:var(--carbon) var(--grano-claro);color:rgba(233,228,218,.7)}
.pie__logo{height:44px;width:auto;display:block;margin-bottom:20px}
.pie__manifiesto{font-size:17px;line-height:1.5;color:rgba(233,228,218,.88);margin-bottom:30px}
.pie__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  padding-bottom:28px;border-bottom:1px solid var(--linea-osc)}
.pie__col{display:flex;flex-direction:column;gap:9px}
.pie__col .eyebrow{color:rgba(233,228,218,.5);margin-bottom:4px}
.pie__col a,.pie__col span{font-size:14px;color:rgba(233,228,218,.7)}
.pie__col a:hover{color:#E9E4DA}
.pie__base{display:flex;align-items:center;justify-content:space-between;
  padding-top:20px;gap:16px;flex-wrap:wrap}
.pie__firma{font-size:10.5px;letter-spacing:.1em;color:rgba(233,228,218,.45)}

/* ==========================================================================
   ESCRITORIO — 1024px en adelante
   ========================================================================== */
/* ==========================================================================
   10 · ENTRADA DE FIELD NOTES
   Base clara, a diferencia del bloque de Field Notes del home. Allí manda la
   foto; aquí manda el texto y el fondo tiene que dejarlo leer.
   ========================================================================== */

/* La barra sin hero detrás necesita su propio fondo. */
.barra--solida{background:var(--carbon)}
.idiomas a{color:inherit}
.idiomas a:hover{color:#E9E4DA}

.nota{background:var(--hueso) var(--grano-oscuro)}

/* Eje único: cabecera, cuerpo, ficha y pie comparten el mismo centro y el
   mismo ancho. Solo las fotos se salen — y hacia los dos lados por igual,
   para que la salida se lea como decisión y no como desalineación. */
.columna{
  width:100%;margin-left:auto;margin-right:auto;
  max-width:calc(var(--medida) + var(--borde-m)*2);
  padding-left:var(--borde-m);padding-right:var(--borde-m);
}

/* --- Cabecera ------------------------------------------------------------ */
.nota__cabeza{padding-top:32px;padding-bottom:28px}
.miga{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-stretch:108%;margin-bottom:20px}
.miga a{color:var(--seca)}
.miga a:hover{color:var(--oxido)}
.nota__cat{color:var(--oxido);margin-bottom:13px}
.nota__titulo{font-size:clamp(30px,7.4vw,40px);margin-bottom:16px}
.nota__bajada{font-size:19px;line-height:1.5;color:var(--tinta-2);margin-bottom:24px}
.nota__meta{display:flex;flex-wrap:wrap;gap:5px 20px;
  padding-top:15px;border-top:1px solid var(--linea);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;font-stretch:104%;color:var(--seca)}

/* --- Portada ------------------------------------------------------------- */
.nota__portada{margin:0}
.nota__portada img{display:block;width:100%;
  height:clamp(240px,64vw,560px);object-fit:cover}

/* El pie de foto se ancla a la columna de lectura, no al ancho de la imagen:
   una linea de 13px extendida sobre 1400px no se lee, se escanea. */
.nota figcaption{padding-top:12px;font-size:12.5px;line-height:1.45;color:var(--seca)}
.nota figcaption::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--oxido);vertical-align:middle;margin-right:9px}

/* --- Cuerpo -------------------------------------------------------------- */
.nota__cuerpo{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--borde-m),1fr)
    [ancho-start] var(--salida)
    [texto-start] min(100% - var(--borde-m)*2, var(--medida)) [texto-end]
    var(--salida) [ancho-end]
    minmax(var(--borde-m),1fr) [full-end];
  padding-top:36px;
}
.nota__cuerpo > *{grid-column:texto;margin:0 0 24px}
.nota__cuerpo > .alignwide{grid-column:ancho}
.nota__cuerpo > .alignfull{grid-column:full}

.nota__cuerpo p,
.nota__cuerpo li{font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:19px;line-height:1.72;color:var(--tinta)}

/* Entradilla: el primer parrafo entra un punto mas grande. Sirve de rampa —
   la cronica arranca en escena y conviene que la primera frase pese. */
.nota__cuerpo > p:first-of-type{font-size:22px;line-height:1.58}

.nota__cuerpo h2{font-size:clamp(23px,5.4vw,27px);margin:42px 0 15px}
.nota__cuerpo h3{font-size:20px;margin:32px 0 11px}

.nota__cuerpo a{color:var(--oxido);border-bottom:1px solid rgba(168,70,15,.35)}
.nota__cuerpo a:hover{border-bottom-color:currentColor}

.nota__cuerpo ul,.nota__cuerpo ol{list-style:none;padding-left:0}
.nota__cuerpo li{position:relative;padding-left:24px;margin-bottom:8px}
.nota__cuerpo ul li::before{content:"";position:absolute;left:0;top:.78em;
  width:8px;height:1px;background:var(--oxido)}
.nota__cuerpo ol{counter-reset:kk}
.nota__cuerpo ol li{counter-increment:kk}
.nota__cuerpo ol li::before{content:counter(kk);position:absolute;left:0;top:.28em;
  font-family:"Archivo",system-ui,sans-serif;font-size:12px;font-weight:700;
  font-stretch:104%;color:var(--oxido)}

/* Cita destacada: sans sobre un cuerpo serif, con la regla de oxido arriba.
   El contraste de familia hace el trabajo, asi no hacen falta comillas
   decorativas ni recuadros. */
.nota__cuerpo blockquote{margin:42px 0;padding-top:20px;
  border-top:2px solid var(--oxido)}
.nota__cuerpo blockquote p{font-family:"Archivo",system-ui,sans-serif;
  font-weight:500;font-stretch:96%;font-size:clamp(22px,5.4vw,26px);
  line-height:1.25;letter-spacing:-0.02em;color:var(--carbon);margin-bottom:0}

/* Recorte fijo para las fotos del cuerpo. El banco de imagenes es casi todo
   vertical de telefono: sin esto, una foto a ancho completo se come dos
   pantallas y parte la lectura en dos. */
.nota__cuerpo figure{margin:0 0 12px}
.nota__cuerpo figure img{display:block;width:100%;object-fit:cover}
.nota__cuerpo > .alignwide{margin-top:40px}
.nota__cuerpo > .alignwide img{aspect-ratio:3/2}
.nota__cuerpo > .alignfull{margin-top:46px}
.nota__cuerpo > .alignfull img{aspect-ratio:16/9}
.nota__cuerpo > .alignfull figcaption{
  max-width:calc(var(--medida) + var(--borde-m)*2);
  margin-left:auto;margin-right:auto;
  padding-left:var(--borde-m);padding-right:var(--borde-m)}

/* --- Del cuaderno -------------------------------------------------------- */
.cuaderno{padding-top:24px;padding-bottom:28px}
.cuaderno .eyebrow{color:var(--oxido);margin-bottom:14px}
.cuaderno__lista{margin:0;border-top:1px solid var(--linea)}
.cuaderno__fila{padding:13px 0;border-bottom:1px solid var(--linea)}
.cuaderno__fila dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-stretch:108%;color:var(--seca);margin-bottom:3px}
.cuaderno__fila dd{margin:0;font-size:16px;line-height:1.4;color:var(--tinta)}

/* --- Compartir ----------------------------------------------------------- */
.compartir{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding-top:26px;padding-bottom:44px;border-top:1px solid var(--linea)}
.cuaderno + .compartir{border-top:0;padding-top:14px}
.compartir .eyebrow{color:var(--seca)}
.compartir__enlaces{display:flex;flex-wrap:wrap;gap:16px}
.compartir__enlaces a{font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--tinta-2);border-bottom:1px solid var(--linea);padding-bottom:2px}
.compartir__enlaces a:hover{color:var(--oxido);border-bottom-color:var(--oxido)}

/* --- Invitacion ---------------------------------------------------------- */
.invitacion{background:var(--papel) var(--grano-oscuro);border-top:1px solid var(--linea);
  padding:42px 0 46px}
.invitacion .eyebrow{color:var(--oxido);margin-bottom:13px}
.invitacion__texto{font-size:21px;line-height:1.45;color:var(--tinta);
  margin-bottom:12px}
.invitacion__dato{font-size:14px;color:var(--seca);margin-bottom:26px}
.invitacion__dato strong{font-weight:600;color:var(--tinta-2)}
.invitacion__acciones{display:flex;flex-direction:column;gap:16px;
  align-items:flex-start}
.invitacion__acciones .btn{width:100%}
.invitacion__acciones .lnk{color:var(--tinta-2);border-bottom-color:var(--linea)}
.invitacion__acciones .lnk:hover{color:var(--oxido);border-bottom-color:var(--oxido)}

/* --- Sigue leyendo ------------------------------------------------------- */
.siguientes{background:var(--carbon) var(--grano-claro);color:#E9E4DA;
  padding:44px var(--borde-m) 50px}
.siguientes__cabeza{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;margin-bottom:20px}
.siguientes .eyebrow{color:rgba(233,228,218,.6)}
.siguientes__cabeza .lnk{color:#E9E4DA;font-size:12px;white-space:nowrap}
.siguientes__cabeza .lnk:hover{color:var(--oxido-claro)}
.siguientes__grid{display:grid;grid-template-columns:1fr;gap:0}
.siguientes .pieza--media{height:230px}


/* ==========================================================================
   11 · CABECERA DE PÁGINA INTERNA
   Dos variantes. Oscura para Flota, donde el vehículo es objeto de culto y el
   metal se ve mejor sobre carbón; clara para Self-drive, que es una página de
   dudas y condiciones y necesita leerse.
   ========================================================================== */
.pcabeza{padding:36px var(--borde-m) 34px}
.pcabeza--osc{background:var(--carbon) var(--grano-claro);color:#E9E4DA}
.pcabeza--osc .eyebrow{color:rgba(233,228,218,.6)}
.pcabeza--claro{background:var(--hueso) var(--grano-oscuro)}
.pcabeza .eyebrow{margin-bottom:14px}
.pcabeza h1{font-size:clamp(34px,8.6vw,44px);margin-bottom:16px}
.pcabeza--osc h1{color:var(--papel)}
.pcabeza__bajada{font-size:19px;line-height:1.45;max-width:34ch}
.pcabeza--osc .pcabeza__bajada{color:rgba(233,228,218,.82)}
.pcabeza--claro .pcabeza__bajada{color:var(--tinta-2)}

/* Portada a sangre de página interna. */
.pportada{margin:0}
.pportada img{display:block;width:100%;height:clamp(240px,64vw,560px);object-fit:cover}

/* La escasez dicha en números: un titular se lee como publicidad, una cifra no. */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:30px 0 0;border-top:1px solid var(--linea-osc)}
.cifra{padding:18px 12px 0;border-right:1px solid var(--linea-osc)}
.cifra:first-child{padding-left:0}
.cifra:last-child{border-right:0;padding-right:0}
.cifra dt{font-size:34px;font-weight:700;font-stretch:112%;letter-spacing:-0.03em;
  line-height:1;color:var(--oxido-claro)}
.cifra dd{margin:7px 0 0;font-size:11px;line-height:1.3;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(233,228,218,.6)}

/* ==========================================================================
   12 · FLOTA
   ========================================================================== */
.clase{background:var(--carbon) var(--grano-claro);color:#E9E4DA}
.clase__media{position:relative;overflow:hidden}
.clase__media img{display:block;width:100%;height:clamp(260px,68vw,420px);object-fit:cover}

/* Recorte sobre fondo, centrado y con aire. No se estira: el archivo de
   origen ronda los 450 px de ancho y agrandarlo lo deja blando. Un objeto
   pequeño y nítido en un campo grande se lee mejor que uno grande y sucio. */
.clase__media--recorte{display:flex;align-items:center;justify-content:center;
  background:var(--carbon-2) var(--grano-claro);padding:36px 24px}
.clase__media--recorte img{width:auto;height:auto;max-width:min(100%,420px);
  max-height:clamp(220px,58vw,360px);object-fit:contain}

/* Sin foto de esa clase en el banco. Una placa tipográfica se lee como
   decisión; la foto del otro modelo se lee como error, que es lo que era. */
.clase__placa{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;
  height:clamp(260px,68vw,420px);padding:24px;
  background:var(--carbon-2);border-bottom:1px solid var(--linea-osc)}
.clase__placa-modelo{font-size:clamp(26px,7vw,34px);letter-spacing:-0.02em;color:rgba(233,228,218,.28)}
.clase__placa-nota{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--oxido-claro)}

.clase__texto{padding:32px var(--borde-m) 40px}
.clase__cap{color:var(--oxido-claro);margin-bottom:12px}
.clase__frase{font-size:clamp(28px,7.4vw,36px);color:var(--papel);margin-bottom:14px}
.clase__entrada{font-size:18px;line-height:1.45;color:rgba(233,228,218,.82);
  margin-bottom:26px}
.clase__modelo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding-top:20px;border-top:1px solid var(--linea-osc);margin-bottom:12px}
.clase__modelo strong{font-size:15px;font-weight:700;letter-spacing:.02em;
  color:#E9E4DA}
.clase__modelo span{font-size:13px;color:rgba(233,228,218,.55)}
.clase__cuerpo{font-size:15.5px;line-height:1.6;color:rgba(233,228,218,.72);
  margin-bottom:26px}

.ficha{margin:0;border-top:1px solid var(--linea-osc)}
.ficha__fila{display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--linea-osc)}
.ficha__fila dt{font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;font-stretch:106%;color:rgba(233,228,218,.5)}
.ficha__fila dd{margin:0;font-size:14.5px;text-align:right;color:#E9E4DA}

/* --- Equipamiento de base ------------------------------------------------ */
.estandar{background:var(--papel) var(--grano-oscuro);padding:46px var(--borde-m) 44px}
.estandar .eyebrow{color:var(--oxido);margin-bottom:12px}
.estandar h2{font-size:clamp(28px,7vw,34px);margin-bottom:12px}
.estandar__bajada{font-size:16px;color:var(--tinta-2);max-width:46ch;
  margin-bottom:28px}
.estandar__lista{list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linea)}
.estandar__lista li{display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--linea);
  font-size:16px;font-weight:500}
.estandar__lista svg{color:var(--musgo);flex-shrink:0}
.estandar__opcional{font-size:14.5px;color:var(--seca)}
.estandar__opcional strong{color:var(--tinta-2);font-weight:600}

/* --- Nota sobre la unidad asignada --------------------------------------- */
.unidad{background:var(--hueso) var(--grano-oscuro);padding:40px var(--borde-m) 44px}
.unidad__caja{border-left:2px solid var(--oxido);padding-left:20px;
  max-width:60ch;margin:0 auto}
.unidad__caja .eyebrow{color:var(--oxido);margin-bottom:11px}
.unidad__caja p{font-size:18px;line-height:1.5;color:var(--tinta-2)}

/* ==========================================================================
   13 · SELF-DRIVE
   ========================================================================== */

/* Definir por oposición: la objeción real no es «qué incluye» sino
   «¿esto es un tour?», y se responde antes que nada. */
.contraste{background:var(--hueso) var(--grano-oscuro);padding:44px var(--borde-m) 46px}
.contraste__negacion{font-size:clamp(32px,9vw,44px);letter-spacing:-0.02em;line-height:1.05;
  color:var(--oxido);margin-bottom:22px}
.contraste__cuerpo p{font-size:18px;line-height:1.55;color:var(--tinta);
  margin-bottom:16px}
.contraste__cuerpo p:last-child{margin-bottom:0}

/* --- Capacidades --------------------------------------------------------- */
.capacidades{background:var(--papel) var(--grano-oscuro);padding:46px var(--borde-m) 48px}
.capacidades .eyebrow{color:var(--oxido);margin-bottom:12px}
.capacidades h2{font-size:clamp(27px,6.6vw,33px);margin-bottom:12px;max-width:20ch}
.capacidades__bajada{font-size:16px;color:var(--tinta-2);max-width:52ch;
  margin-bottom:28px}
.capacidades__grid{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--linea)}
.capacidad{padding:24px 0 26px;border-bottom:1px solid var(--linea)}
.capacidad__n{font-size:52px;font-weight:700;font-stretch:114%;
  letter-spacing:-0.04em;line-height:.9;color:var(--linea);margin-bottom:14px}
.capacidad__cap{color:var(--seca);margin-bottom:8px}
.capacidad h3{font-size:22px;margin-bottom:6px}
.capacidad__frase{font-size:16px;color:var(--tinta-2);margin-bottom:16px}

/* Hueco de lo que todavía no existe. Marcado y visible solo en revisión: así
   se ve dónde va a caer antes de que exista, y no se descubre al final. */
.hueco{border:1px dashed var(--linea);border-radius:var(--radio-alto);
  padding:22px;margin-top:28px;background:rgba(168,70,15,.04)}
.hueco .eyebrow{color:var(--oxido);margin-bottom:8px}
.hueco p{font-size:14.5px;color:var(--seca)}
.hueco--media{margin-top:0;min-height:220px;display:flex;
  flex-direction:column;justify-content:center}

/* --- Lo que te llevas ---------------------------------------------------- */
.llevas{background:var(--hueso) var(--grano-oscuro);padding:46px var(--borde-m) 46px}
.llevas .eyebrow{color:var(--oxido);margin-bottom:12px}
.llevas h2{font-size:clamp(28px,7vw,34px);margin-bottom:28px}
.llevas__grid{display:grid;grid-template-columns:1fr;gap:0}
.lista{padding:22px 0 6px;border-top:1px solid var(--linea)}
.lista__titulo{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-stretch:108%;color:var(--tinta);margin-bottom:14px}
.lista ul{list-style:none;margin:0 0 12px;padding:0}
.lista li{position:relative;padding-left:20px;margin-bottom:8px;
  font-size:16px;color:var(--tinta-2)}
.lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--oxido)}
.lista__nota{font-size:13.5px;line-height:1.5;color:var(--seca);
  padding-bottom:14px}
.lista__nota strong{color:var(--tinta-2);font-weight:600}

/* Flatlay del equipo: cada pieza con su recorte. Lo pedía el lineamiento
   —al estilo de Titus Adventure Co.— y no había imágenes hasta el PDF de
   dotación. Una pieza sin foto no rompe la grilla: se queda con su nombre. */
.equipo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);margin-bottom:38px}
.equipo__pieza{margin:0;background:var(--hueso);padding:20px 14px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.equipo__pieza img{display:block;width:auto;height:96px;object-fit:contain}
.equipo__pieza figcaption{font-size:13px;line-height:1.35;color:var(--tinta-2);
  margin-top:auto}
.equipo__pieza--sin-foto{justify-content:center}
.equipo__pieza--sin-foto figcaption{margin-top:0;color:var(--seca)}

/* El tercer bloque es responsabilidad del viajero, no nuestra: se marca
   distinto para que no se lea como parte de lo que entregamos. */
.lista--tuya li::before{background:var(--seca)}
.lista--tuya .lista__titulo{color:var(--seca)}

/* --- Servicios ----------------------------------------------------------- */
.servicios{background:var(--papel) var(--grano-oscuro);padding:46px var(--borde-m) 48px}
.servicios .eyebrow{color:var(--oxido);margin-bottom:12px}
.servicios h2{font-size:clamp(27px,6.6vw,33px);margin-bottom:18px;max-width:18ch}
.servicios__texto p{font-size:16px;line-height:1.6;color:var(--tinta-2);
  margin-bottom:16px;max-width:56ch}
.servicios__media{margin-top:26px}

/* --- Video ---------------------------------------------------------------
   Fachada: hasta el clic esto es una foto de este mismo dominio, no un iframe
   de YouTube. El porque esta en parts/video.php. El boton ocupa el hueco
   entero y guarda la proporcion 16:9 para que al cambiarlo por el iframe no
   salte el layout.

   Radio cero, como el resto de las fotos del sitio; lo unico redondo aqui es
   el circulo de play, que es un boton. */
.video{margin:0}
.video__disparo,
.video__marco{display:block;width:100%;aspect-ratio:16/9;border:0}
.video__disparo{position:relative;padding:0;background:var(--carbon);
  cursor:pointer;overflow:hidden}
.video__disparo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .4s}
.video__disparo:hover img{transform:scale(1.04);opacity:.86}

.video__play{position:absolute;inset:0;margin:auto;width:66px;height:66px;
  border-radius:999px;background:var(--oxido);color:#F7F3EA;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s}
.video__play svg{margin-left:3px}  /* el triangulo pesa a la izquierda */
.video__disparo:hover .video__play{background:var(--oxido-claro);transform:scale(1.07)}
.video__disparo:focus-visible{outline:2px solid var(--oxido);outline-offset:3px}

/* El texto del boton es para lectores de pantalla: en pantalla ya lo dice el
   triangulo, y ponerlo encima de la foto taparia el encuadre. */
.video__etiqueta{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.video__pie{font-family:var(--interfaz);font-size:13px;color:var(--seca);
  margin-top:10px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .video__disparo img,.video__play{transition:none}
  .video__disparo:hover img{transform:none}
  .video__disparo:hover .video__play{transform:none}
}

/* --- Antes de reservar --------------------------------------------------- */
.condiciones{background:var(--hueso) var(--grano-oscuro);padding:46px var(--borde-m) 50px}
.condiciones .eyebrow{color:var(--oxido);margin-bottom:12px}
.condiciones h2{font-size:clamp(27px,6.6vw,33px);margin-bottom:26px}
.condiciones__lista{margin:0 0 24px;border-top:1px solid var(--linea)}
.condiciones__fila{padding:15px 0;border-bottom:1px solid var(--linea)}
.condiciones__fila dt{font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;font-stretch:108%;
  color:var(--seca);margin-bottom:5px}
.condiciones__fila dd{margin:0;font-size:16px;line-height:1.5;color:var(--tinta)}
.condiciones__pie .lnk{color:var(--tinta-2);border-bottom-color:var(--linea)}
.condiciones__pie .lnk:hover{color:var(--oxido);border-bottom-color:var(--oxido)}

/* ==========================================================================
   14 · ÍNDICE DE FIELD NOTES
   ========================================================================== */
.filtro{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--borde-m) 28px}
.filtro__item{font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:8px 14px;border:1px solid var(--linea);color:var(--tinta-2)}
.filtro__item--activo{background:var(--carbon);border-color:var(--carbon);color:var(--papel)}

.indice{padding:0 var(--borde-m) 8px;display:grid;grid-template-columns:1fr;gap:0}

.destacada{position:relative;display:block;height:56vw;min-height:280px;
  margin-bottom:2px;background:var(--carbon)}
.destacada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destacada__texto{position:absolute;left:18px;right:18px;bottom:18px;
  display:flex;flex-direction:column;gap:9px}
.destacada .pieza__cat{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:rgba(233,228,218,.75)}
.destacada__titulo{font-size:clamp(24px,7vw,30px);line-height:1.14;color:#F7F3EA}
.destacada__extracto{font-size:15px;line-height:1.4;color:rgba(233,228,218,.82);
  max-width:52ch}
.destacada__meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,228,218,.55)}

.tarjeta{display:block;margin-bottom:2px}
.tarjeta__media{height:52vw;min-height:210px;overflow:hidden;background:var(--piedra)}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.tarjeta:hover .tarjeta__media img{transform:scale(1.05)}
.tarjeta__texto{background:var(--papel);padding:18px 4px 26px}
.tarjeta__cat{color:var(--oxido);margin-bottom:9px}
.tarjeta__titulo{font-size:21px;margin-bottom:8px}
.tarjeta__extracto{font-size:15.5px;line-height:1.45;color:var(--tinta-2);
  margin-bottom:10px}
.tarjeta__meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--seca)}

.paginacion{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:8px var(--borde-m) 52px}
.paginacion a,.paginacion span{font-size:13px;font-weight:600;padding:9px 13px;
  border:1px solid var(--linea);color:var(--tinta-2)}
.paginacion span[aria-current]{background:var(--carbon);border-color:var(--carbon);color:var(--papel)}
.paginacion a:hover{border-color:var(--oxido);color:var(--oxido)}

.vacio-seccion{padding:60px 0 80px;text-align:center}
.vacio-seccion .eyebrow{color:var(--oxido);margin-bottom:12px}
.vacio-seccion p.serif{font-size:19px;color:var(--tinta-2)}

/* ==========================================================================
   15 · PARA AGENCIAS
   ========================================================================== */
.ventajas-b2b{background:var(--papel) var(--grano-oscuro);padding:44px var(--borde-m) 46px}
.ventajas-b2b__cabeza .eyebrow{color:var(--oxido);margin-bottom:12px}
.ventajas-b2b__cabeza h2{font-size:clamp(26px,6.6vw,32px);max-width:20ch;margin-bottom:26px}
.ventajas-b2b__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.ventajas-b2b__lista li{display:flex;align-items:flex-start;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--linea)}
.ventajas-b2b__lista svg{flex-shrink:0;margin-top:2px;color:var(--musgo)}
.ventajas-b2b__lista span{font-size:15.5px;line-height:1.45;color:var(--tinta-2)}
/* CTA de cierre del bloque, en el home y en la página dedicada. */
.agencias__cta{font-size:16px;line-height:1.5;color:var(--tinta);
  margin-top:22px;padding-top:20px;border-top:1px solid var(--linea)}
.agencias__lnk{margin-top:16px;color:var(--oxido);border-bottom-color:var(--oxido)}

/* --- Fotos de flota completa (B2B) --------------------------------------- */
.flota-grupo{background:var(--papel) var(--grano-oscuro);padding:0 var(--borde-m) 46px}
.flota-grupo__cabeza .eyebrow{color:var(--oxido);margin-bottom:12px}
.flota-grupo__cabeza h2{font-size:clamp(24px,6.2vw,28px);margin-bottom:22px;max-width:20ch}
.flota-grupo__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.flota-grupo__foto{aspect-ratio:4/3;overflow:hidden;background:var(--piedra)}
.flota-grupo__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Con 5 fotos, la primera ocupa las dos columnas para que la grilla no
   termine con un hueco impar. */
.flota-grupo__grid--5 .flota-grupo__foto:first-child{grid-column:1 / -1;aspect-ratio:16/9}

.operacion{background:var(--hueso) var(--grano-oscuro);padding:46px var(--borde-m) 40px}
.operacion__cabeza .eyebrow{color:var(--oxido);margin-bottom:12px}
.operacion__cabeza h2{font-size:clamp(24px,6.2vw,30px);max-width:20ch;margin-bottom:6px}

/* ==========================================================================
   16 · GUIDED EDITIONS (página)
   ========================================================================== */
.guided-intro{background:var(--hueso) var(--grano-oscuro);padding:40px var(--borde-m) 8px}
.guided-intro__cuerpo p{font-size:18px;line-height:1.55;color:var(--tinta);
  margin-bottom:18px}

.ediciones-lista{background:var(--hueso) var(--grano-oscuro);padding:24px var(--borde-m) 56px}
.vacio-edicion{padding:36px 26px;border:1px solid var(--linea);text-align:center}
.vacio-edicion .eyebrow{color:var(--seca);margin-bottom:10px}
.vacio-edicion__texto{font-size:19px;color:var(--tinta);margin-bottom:16px}
.vacio-edicion__cta{color:var(--oxido);border-bottom-color:var(--oxido)}
.ediciones-lista__grid{display:grid;grid-template-columns:1fr;gap:16px}
.ficha-edicion{border:1px solid var(--linea);padding:22px}
.ficha-edicion .eyebrow{color:var(--oxido);margin-bottom:10px}
.ficha-edicion h3{font-size:20px;margin-bottom:8px}
.ficha-edicion p{font-size:14.5px;color:var(--tinta-2)}

/* ==========================================================================
   17 · FAQ
   ========================================================================== */
.faq{padding:8px var(--borde-m) 8px}
.faq__seccion{padding:32px 0;border-top:1px solid var(--linea);scroll-margin-top:80px}
.faq__seccion:first-child{border-top:0}
.faq__titulo{font-size:clamp(22px,5.6vw,26px);font-stretch:106%;margin-bottom:16px}
.faq__lista{display:flex;flex-direction:column}

.pregunta{border-top:1px solid var(--linea);padding:16px 0}
.faq__lista .pregunta:last-child{border-bottom:1px solid var(--linea)}
.pregunta__p{list-style:none;display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;cursor:pointer;font-size:16px;
  font-weight:600;letter-spacing:-0.005em;line-height:1.35;color:var(--tinta)}
.pregunta__p::-webkit-details-marker{display:none}
.pregunta__icono{flex-shrink:0;width:18px;height:18px;position:relative;margin-top:2px}
.pregunta__icono::before,.pregunta__icono::after{content:"";position:absolute;
  background:var(--oxido);top:50%;left:50%;transform:translate(-50%,-50%)}
.pregunta__icono::before{width:12px;height:1.6px}
.pregunta__icono::after{width:1.6px;height:12px;transition:transform 200ms ease}
.pregunta[open] .pregunta__icono::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.pregunta__r{font-size:15.5px;line-height:1.6;color:var(--tinta-2);
  margin:14px 0 0;max-width:70ch}

/* ==========================================================================
   18 · CONTACTO
   ========================================================================== */
.contacto{background:var(--hueso) var(--grano-oscuro) var(--grano-oscuro);padding:40px var(--borde-m) 60px;
  display:grid;grid-template-columns:1fr;gap:40px}
.contacto__intro{font-size:19px;line-height:1.5;color:var(--tinta);margin-bottom:26px}

.canal{display:flex;align-items:center;gap:14px;padding:16px 0;
  border-top:1px solid var(--linea);color:var(--tinta)}
.contacto__col .canal:last-of-type{border-bottom:1px solid var(--linea)}
.canal strong{display:block;font-size:15px;font-weight:600}
.canal span span{font-size:13.5px;color:var(--seca)}

.estaciones{margin-top:30px;display:flex;flex-direction:column;gap:22px}
.estacion .eyebrow{color:var(--oxido);margin-bottom:8px}
.estacion p{font-size:14.5px;line-height:1.5;color:var(--tinta-2)}

.formulario--contacto{--foto:url(../img/flota-campamento.jpg)}
.formulario--contacto .campo input,
.formulario--contacto .campo textarea{
  width:100%;border:0;background:transparent;font-family:inherit;font-size:15px;
  color:var(--tinta);padding:2px 0;resize:vertical}
.formulario--contacto .campo input:focus,
.formulario--contacto .campo textarea:focus{outline:0}
/* El foco se marca en la pildora entera, no en el input desnudo: el input no
   tiene borde propio, asi que sin esto el foco seria invisible. */
.formulario--contacto .campo:focus-within{
  border-color:var(--oxido);box-shadow:0 0 0 2px rgba(168,70,15,.16)}
/* En la maqueta el relleno de abajo insinua el area de mensaje; aqui hay un
   textarea de verdad que ya ocupa ese alto, asi que sobra. */
.formulario--contacto .campo--alto{padding-bottom:12px}
.formulario--contacto button{border:0;width:100%;font-family:inherit}

/* ==========================================================================
   19 · LEGAL
   ========================================================================== */
.legal{padding:36px 0 70px}
.legal__intro{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--seca);margin-bottom:30px;padding-bottom:20px;
  border-bottom:1px solid var(--linea)}
.legal h2{font-size:16.5px;margin:26px 0 9px}
.legal p{font-size:15px;line-height:1.65;color:var(--tinta-2)}

.legal-pendiente{padding:50px 0 80px;text-align:center}
.legal-pendiente .eyebrow{color:var(--oxido);margin-bottom:14px}
.legal-pendiente__texto{font-size:19px;color:var(--tinta);margin-bottom:16px}
.legal-pendiente__nota{font-size:13.5px;color:var(--seca)}

/* ==========================================================================
   20 · GUIDED EDITIONS
   Estructura del referente aprobado (divinglife.co) en la paleta de
   Karakoles: hero oscuro con el titulo sobre la foto, intro centrada y una
   grilla de posters verticales, uno por salida.
   ========================================================================== */
.ghero{position:relative;background:var(--carbon);color:#E9E4DA;
  min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.ghero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72}
/* El velo carga más abajo de lo que parece necesario: el texto se apoya en el
   tercio inferior y ahí es donde suele caer la parte clara de la foto — el
   agua, el cielo. Con un degradado suave el eyebrow se perdía. */
.ghero__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,26,.55) 0%,rgba(19,22,26,.18) 28%,
    rgba(19,22,26,.72) 62%,rgba(19,22,26,.95) 100%)}
/* Sin foto de la ruta: el mismo carbon apagado que usa la placa de Flota,
   para que se lea como decision y no como imagen que no cargo. */
.ghero__placa{position:absolute;inset:0;background:var(--carbon-2)}
.ghero__cuerpo{position:relative;z-index:2;padding:0 var(--borde-m) 34px;width:100%}
.ghero .eyebrow{color:rgba(233,228,218,.72);margin-bottom:14px}
.ghero h1{font-size:clamp(34px,9vw,46px);color:var(--papel);
  margin-bottom:14px}
.ghero__bajada{font-size:18px;line-height:1.45;color:rgba(233,228,218,.88);
  max-width:38ch}

.gintro{background:var(--carbon) var(--grano-claro);color:#E9E4DA;padding:40px var(--borde-m) 44px}
.gintro__cuerpo p{font-size:18px;line-height:1.55;color:rgba(233,228,218,.84);
  margin-bottom:18px}
.gintro__cuerpo p:last-child{margin-bottom:0}

/* --- Grilla de salidas --------------------------------------------------- */
.gsalidas{background:var(--carbon) var(--grano-claro);color:#E9E4DA;padding:8px var(--borde-m) 56px}
.gsalidas__cabeza{margin-bottom:26px}
.gsalidas .eyebrow{color:var(--oxido-claro);margin-bottom:12px}
.gsalidas h2{font-size:clamp(26px,6.6vw,32px);color:var(--papel)}

.gsalidas__grid{display:grid;grid-template-columns:1fr;gap:28px}
.gtarjeta{display:block;color:inherit}
.gtarjeta__media{position:relative;overflow:hidden;aspect-ratio:2/3;
  background:var(--carbon-2)}
.gtarjeta__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.gtarjeta:hover .gtarjeta__media img{transform:scale(1.04)}
/* La salida agotada se apaga en vez de taparse: el afiche ya trae su sello. */
.gtarjeta--agotada .gtarjeta__media img{opacity:.42;filter:saturate(.45)}

.gtarjeta__pie{padding-top:16px}
.gtarjeta__titulo{font-size:21px;color:var(--papel);
  margin-bottom:5px}
.gtarjeta__sub{font-size:14.5px;color:rgba(233,228,218,.62);margin-bottom:10px}
.gtarjeta__fecha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  font-stretch:104%;color:var(--oxido-claro)}
.gtarjeta__estado{padding:4px 9px;background:rgba(233,228,218,.12);
  color:rgba(233,228,218,.72);letter-spacing:.14em}
.gtarjeta--agotada .gtarjeta__fecha{color:rgba(233,228,218,.5)}

/* ==========================================================================
   21 · EDICION (pagina interna)
   ========================================================================== */
.edicion{background:var(--hueso) var(--grano-oscuro) var(--grano-oscuro)}

/* Franja de datos: lo primero que busca quien ya decidio ir. */
.franja{background:var(--carbon-2) var(--grano-claro);color:#E9E4DA;padding:26px var(--borde-m) 30px}
.franja__datos{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.franja__dato{padding:13px 0;border-bottom:1px solid var(--linea-osc)}
.franja__dato:first-child{padding-top:0}
.franja__dato dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-stretch:106%;color:rgba(233,228,218,.5);margin-bottom:5px}
.franja__dato dd{margin:0;font-size:16px;line-height:1.35;color:#E9E4DA}
.franja__accion{padding-top:22px}
.franja__accion .btn{width:100%}

.edicion__cuerpo{padding:40px var(--borde-m) 8px}
.edicion__texto p{font-size:18px;line-height:1.6;color:var(--tinta);
  margin-bottom:18px;max-width:62ch}
.edicion__lista-titulo{font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;font-stretch:108%;color:var(--oxido);
  margin:26px 0 14px}
.edicion__lista{list-style:none;margin:0;padding:0;max-width:62ch}
.edicion__lista li{position:relative;padding-left:22px;margin-bottom:9px;
  font-size:16.5px;line-height:1.5;color:var(--tinta-2)}
.edicion__lista li::before{content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--oxido)}

/* --- Salidas dentro de la edicion ---------------------------------------- */
.salidas{background:var(--hueso);padding:40px var(--borde-m) 46px}
.salidas .eyebrow{color:var(--oxido);margin-bottom:12px}
.salidas h2{font-size:clamp(24px,6.2vw,30px);margin-bottom:24px}
.salidas__grid{display:grid;grid-template-columns:1fr;gap:26px}
.salida__media{aspect-ratio:2/3;overflow:hidden;background:var(--piedra)}
.salida__media img{width:100%;height:100%;object-fit:cover;display:block}
.salida--agotada .salida__media img{opacity:.45;filter:saturate(.4)}
.salida__pie{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px;padding-top:14px}
.salida__fecha{font-size:15.5px;font-weight:600;color:var(--tinta)}
.salida__estado{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--seca)}
.salida--agotada .salida__fecha{color:var(--seca)}

/* --- Incluye / No incluye ------------------------------------------------ */
.incluye{background:var(--papel) var(--grano-oscuro);padding:44px var(--borde-m) 46px}
.incluye__grid{display:grid;grid-template-columns:1fr;gap:0}

/* Hueco de datos que el documento no trae. */
.hueco--pendientes{margin:0 var(--borde-m) 44px}

/* --- Proximas salidas, en el bloque del home ----------------------------- */
.proximas{margin-top:22px;border-top:1px solid var(--linea-osc)}
.proxima{display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  align-items:baseline;padding:15px 0;border-bottom:1px solid var(--linea-osc);
  color:#E9E4DA}
.proxima__fecha{grid-column:1;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--oxido-claro)}
.proxima__titulo{grid-column:1;font-size:18px;color:var(--papel)}
.proxima__estado{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:rgba(233,228,218,.6);white-space:nowrap}
.proxima:hover .proxima__estado{color:var(--oxido-claro)}
.proxima--agotada .proxima__fecha,
.proxima--agotada .proxima__titulo{color:rgba(233,228,218,.42)}
.ediciones__btn{margin-top:26px;width:100%}

@media (min-width:1024px){
  body{font-size:17px}
  .envoltura{padding-left:var(--borde);padding-right:var(--borde)}

  /* Hero */
  .hero{min-height:780px;height:88vh}
  .barra{height:56px;padding-left:var(--borde);padding-right:var(--borde);
    border-bottom:1px solid rgba(233,228,218,.14)}
  .barra__logo{height:34px}
  .barra__nav{display:flex;align-items:center;gap:30px;
    font-size:13px;font-weight:600;letter-spacing:.04em}
  .barra__nav a{color:#E9E4DA}
  .barra__nav a:hover{color:var(--oxido-claro)}
  .barra__util{gap:20px}
  .barra__wa{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
    color:#E9E4DA;border:1px solid rgba(233,228,218,.35);padding:7px 13px}
  .barra__wa:hover{color:#E9E4DA;border-color:#E9E4DA}
  .barra__menu{display:none}

  .hero__cuerpo{padding:0 var(--borde) 76px}
  .hero__eyebrow{font-size:11px;margin-bottom:26px}
  .hero h1{font-size:clamp(56px,5.7vw,82px);max-width:15ch;margin-bottom:28px}
  .hero__bajada{font-size:23px;max-width:54ch;margin-bottom:40px}
  .hero__acciones{flex-direction:row;align-items:center;gap:28px;margin-bottom:0}
  .hero__acciones .btn{display:inline-flex;min-height:0;padding:15px 30px;font-size:14px}
  .hero__acciones .btn--fantasma{background:none;border:0;padding:0;
    border-bottom:1px solid #E9E4DA;color:#E9E4DA;font-size:14px;min-height:0}
  .hero__acciones .btn--fantasma:hover{background:none}
  .hero__ancla{display:none}

  /* Collage de secciones */
  .collage{padding:64px var(--borde) 76px}
  /* Seis filas de 80px: las teselas se pegan sin separación y el escalonado
     sale de que las costuras de cada columna caen a distinta altura. */
  .collage__grid{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(6,80px);gap:0}
  .tesela{height:100%}
  .t-selfdrive{grid-column:1;grid-row:1 / span 3}
  .t-flota    {grid-column:1;grid-row:4 / span 3}
  .t-guided   {grid-column:2;grid-row:1 / span 6}
  .t-notas    {grid-column:3;grid-row:1 / span 4}
  .t-agencias {grid-column:3;grid-row:5 / span 2}
  .t-faq      {grid-column:4;grid-row:1 / span 6}
  .tesela__nombre{left:22px;right:22px;bottom:18px;font-size:34px}
  .tesela--alta .tesela__nombre{font-size:38px}


  /* Pasos */
  .pasos{padding:92px var(--borde) 104px}
  .pasos h2{font-size:clamp(52px,5.6vw,68px);margin:10px 0 48px;max-width:26ch}
  .pasos__grid{flex-direction:row;gap:24px;margin-bottom:40px}
  .paso{flex:1;min-height:520px}
  .paso__texto{left:26px;right:26px;bottom:26px}
  .paso__n{font-size:32px;margin-bottom:8px}
  .paso__texto h4{font-size:24px}
  .paso__desc{font-size:15px}
  .pasos .btn{display:inline-flex;align-self:flex-start;min-height:0;padding:15px 30px;font-size:14px}

  /* Testimonios */
  .clientes{padding:104px var(--borde) 92px}
  .clientes__citas{gap:52px}
  .cita{max-width:34ch}
  .cita__texto{font-size:30px}
  .clientes__pie{margin-top:64px}

  /* Agencias */
  .agencias{padding:92px var(--borde) 100px}
  .agencias--solo .agencias__grid{grid-template-columns:1fr}
  .agencias__intro{font-size:17px;max-width:52ch;margin-bottom:30px}
  .ventaja p{font-size:16px}
  .formulario{padding:56px}
  .formulario__cabeza{margin-bottom:34px}
  .formulario__cabeza h2{font-size:clamp(40px,5.4vw,64px)}
  .campo{padding:14px 22px}
  .formulario .btn{display:inline-flex;align-self:flex-start;min-height:0;
    padding:15px 30px;font-size:14px;margin-top:6px}

  /* Field Notes */
  .notas{padding:96px var(--borde) 100px}
  .notas__cabeza{margin-bottom:48px}
  .notas h2{font-size:clamp(52px,5.6vw,68px);margin-bottom:20px}
  .notas__bajada{font-size:20px;max-width:48ch;margin-bottom:0}
  .mosaico{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:290px 270px;gap:0;
    grid-template-areas:"mayor mayor uno dos" "mayor mayor archivo archivo"}
  .pieza--mayor{grid-area:mayor;height:100%}
  .pieza--uno{grid-area:uno;height:100%}
  .pieza--dos{grid-area:dos;height:100%}
  .pieza--archivo{grid-area:archivo;height:100%}
  .pieza--mayor .pieza__texto{left:30px;right:30px;bottom:28px}
  .pieza--mayor .pieza__cat{font-size:10.5px;margin-bottom:10px}
  .pieza--mayor .pieza__titulo{font-size:32px;max-width:18ch}
  .pieza--media .pieza__texto{left:22px;right:22px;bottom:22px}
  .pieza--media .pieza__cat{font-size:10px;margin-bottom:8px}
  .pieza--media .pieza__titulo{font-size:20px}
  .pieza__centro strong{font-size:24px}
  .pieza__centro span{font-size:12px}

  /* Ediciones */
  .ediciones{padding:0 var(--borde) 96px}
  .ediciones hr{margin-bottom:62px}
  .ediciones__cabeza{margin-bottom:40px}
  .ediciones h2{font-size:clamp(48px,5.6vw,68px);max-width:none}
  .ediciones__cuerpo{max-width:64ch}
  .ediciones__serif{font-size:20px;margin-bottom:20px}
  .ediciones__detalle{font-size:16px;margin-bottom:32px}
  .vacio{flex-direction:row;align-items:center;justify-content:space-between;
    gap:30px;padding:26px 30px}
  .vacio p{font-size:15px}
  .vacio .lnk{white-space:nowrap}

  /* Cierre */
  .cierre{padding:104px var(--borde) 108px}
  .cierre h2{font-size:clamp(56px,6.4vw,76px);max-width:22ch;margin:0 auto 38px}
  .cierre p{font-size:17px;max-width:58ch;margin:0 auto 42px}
  .cierre__acciones{flex-direction:row;gap:22px;justify-content:center}
  .cierre__acciones .btn{display:inline-flex;min-height:0;padding:15px 30px;font-size:14px}
  .cierre__acciones .btn--fantasma{background:none;border:0;padding:0;
    border-bottom:1px solid #E9E4DA;color:#E9E4DA;align-self:center}

  /* Pie */
  .pie{padding:78px var(--borde) 46px}
  .pie__cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;padding-bottom:54px}
  .pie__marca{grid-column:auto}
  .pie__logo{height:52px;margin-bottom:26px}
  .pie__manifiesto{font-size:19px;max-width:32ch;margin-bottom:0}
  .pie__col a,.pie__col span{font-size:15px}
  .pie__base{padding-top:26px}
  .pie__firma{font-size:12px}
}

/* Aviso del preview, sólo para la revisión interna */
.aviso{background:var(--carbon-2);color:rgba(233,228,218,.82);
  padding:11px var(--borde-m);font-size:12.5px;line-height:1.5;
  border-bottom:1px solid var(--linea-osc);display:flex;gap:10px;
  align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.aviso strong{color:var(--oxido-claro)}
.aviso a{color:#E9E4DA;border-bottom:1px solid rgba(233,228,218,.4)}
@media (min-width:1024px){.aviso{padding-left:var(--borde);padding-right:var(--borde)}}

/* Bloque de reseñas cuando lo pinta un plugin: solo el encuadre, el plugin
   trae sus propios estilos. */
.clientes--plugin{padding:56px var(--borde-m) 60px;background:var(--papel);
  border-top:1px solid var(--linea)}
@media (min-width:1024px){
  .clientes--plugin{padding:88px var(--borde) 88px}

  /* --- 10 · ENTRADA DE FIELD NOTES --- */
  .nota__cabeza{padding-top:56px;padding-bottom:38px}
  .nota__titulo{font-size:clamp(40px,4.4vw,54px);margin-bottom:20px}
  .nota__bajada{font-size:22px;margin-bottom:30px}
  .nota__meta{font-size:11px;gap:6px 26px;padding-top:18px}

  .nota__portada img{height:clamp(420px,46vw,660px)}
  .nota figcaption{font-size:13px;padding-top:14px}

  /* A partir de aqui las fotos si tienen sitio para salirse de la columna. */
  .nota__cuerpo{--salida:calc((var(--medida-ancha) - var(--medida)) / 2);
    padding-top:52px}
  .nota__cuerpo > *{margin-bottom:28px}
  .nota__cuerpo p,.nota__cuerpo li{font-size:20px;line-height:1.75}
  .nota__cuerpo > p:first-of-type{font-size:24px;line-height:1.55}
  .nota__cuerpo h2{margin:60px 0 18px}
  .nota__cuerpo h3{margin:44px 0 13px}
  .nota__cuerpo blockquote{margin:58px 0;padding-top:24px}
  .nota__cuerpo > .alignwide{margin-top:56px}
  .nota__cuerpo > .alignfull{margin-top:64px}

  .cuaderno{padding-top:36px;padding-bottom:36px}
  .cuaderno__fila{display:grid;grid-template-columns:150px 1fr;
    align-items:baseline;gap:20px;padding:15px 0}
  .cuaderno__fila dt{margin-bottom:0}
  .cuaderno__fila dd{font-size:17px}

  .compartir{padding-bottom:60px}

  .invitacion{padding:66px 0 72px}
  .invitacion__texto{font-size:24px}
  .invitacion__acciones{flex-direction:row;align-items:center;gap:28px}
  .invitacion__acciones .btn{display:inline-flex;width:auto;min-height:0;
    padding:15px 30px;font-size:14px}

  .siguientes{padding:76px var(--borde) 84px}
  .siguientes__cabeza{margin-bottom:26px}
  .siguientes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .siguientes .pieza--media{height:360px}
  .siguientes .pieza--media .pieza__texto{left:26px;right:26px;bottom:24px}
  .siguientes .pieza--media .pieza__titulo{font-size:23px;line-height:1.14}

  /* --- 11 · CABECERA DE PÁGINA INTERNA --- */
  .pcabeza{padding:72px var(--borde) 0}
  .pcabeza--claro{padding-bottom:46px}
  .pcabeza__cuerpo{max-width:1100px}
  .pcabeza h1{font-size:clamp(48px,5.4vw,68px);max-width:15ch;margin-bottom:22px}
  .pcabeza__bajada{font-size:23px;max-width:44ch}
  .pportada img{height:clamp(420px,46vw,620px)}

  .cifras{margin-top:56px}
  .cifra{padding:22px 22px 26px}
  .cifra:first-child{padding-left:0}
  .cifra dt{font-size:48px}
  .cifra dd{font-size:12px;margin-top:9px}

  /* --- 12 · FLOTA --- */
  /* Foto a sangre por un lado, texto por el otro, y se alternan. Sin margen
     entre las dos: la misma regla de cero espacios del collage del home. */
  .clase{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .clase__media img,.clase__placa{height:100%;min-height:600px}
  .clase__media--recorte{padding:64px}
  .clase__media--recorte img{height:auto;min-height:0;max-width:min(100%,480px);
    max-height:none}
  .clase--invertida .clase__media{grid-column:2;grid-row:1}
  .clase--invertida .clase__texto{grid-column:1;grid-row:1}
  .clase__texto{display:flex;flex-direction:column;justify-content:center;
    padding:72px 64px}
  .clase__frase{font-size:clamp(34px,3.4vw,42px);margin-bottom:16px}
  .clase__entrada{font-size:20px;max-width:34ch;margin-bottom:32px}
  .clase__cuerpo{font-size:16px;max-width:52ch}

  .estandar{padding:84px var(--borde) 80px}
  .estandar__lista{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:56px}
  .estandar__lista li{font-size:17px;padding:16px 0}
  .estandar__bajada{font-size:17px;margin-bottom:34px}

  .unidad{padding:0 var(--borde) 80px}
  .unidad__caja{padding-left:26px;margin:0}
  .unidad__caja p{font-size:20px}

  /* --- 13 · SELF-DRIVE --- */
  .contraste{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;
    padding:88px var(--borde) 88px;align-items:start}
  .contraste__negacion{font-size:clamp(44px,4.6vw,60px);margin-bottom:0;
    max-width:8ch}
  .contraste__cuerpo p{font-size:20px;line-height:1.6;margin-bottom:22px}

  .capacidades{padding:84px var(--borde) 88px}
  .capacidades h2{font-size:42px;}
  .capacidades__bajada{font-size:17px;margin-bottom:40px}
  .capacidades__grid{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:64px}
  .capacidad{padding:30px 0 34px}
  .capacidad__n{font-size:76px}
  .capacidad h3{font-size:26px}
  .hueco{padding:30px 32px;margin-top:40px}

  .llevas{padding:84px var(--borde) 88px}
  .llevas h2{font-size:42px;margin-bottom:44px}
  .llevas__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px}
  .llevas__grid--dos{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:80px;max-width:820px}

  .equipo{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:56px}
  .equipo__pieza{padding:28px 18px 22px;gap:16px}
  .equipo__pieza img{height:120px}
  .equipo__pieza figcaption{font-size:14px}
  .lista{padding-top:26px}
  .lista li{font-size:17px}

  .servicios{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;
    padding:84px var(--borde) 88px;align-items:center}
  .servicios h2{font-size:42px;}
  .servicios__texto p{font-size:17px}
  .servicios__media{margin-top:0}

  .condiciones{padding:84px var(--borde) 92px}
  .condiciones h2{font-size:42px;margin-bottom:38px}
  .condiciones__fila{display:grid;grid-template-columns:190px 1fr;
    align-items:baseline;gap:28px;padding:17px 0}
  .condiciones__fila dt{margin-bottom:0}
  .condiciones__fila dd{font-size:17px;max-width:62ch}

  /* --- 14 · ÍNDICE DE FIELD NOTES --- */
  .filtro{padding:0 var(--borde) 40px;gap:10px}
  .indice{padding:0 var(--borde) 8px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
  .destacada{grid-column:1 / -1;height:52vw;max-height:560px;min-height:400px}
  .destacada__texto{left:44px;right:44px;bottom:38px;gap:12px;max-width:64ch}
  .destacada__titulo{font-size:clamp(34px,3.6vw,46px)}
  .destacada__extracto{font-size:17px}
  .tarjeta__media{height:340px}
  .tarjeta__texto{padding:22px 6px 8px}
  .tarjeta__titulo{font-size:23px}

  /* --- 15 · PARA AGENCIAS --- */
  .ventajas-b2b{padding:84px var(--borde) 88px;display:grid;
    grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
  .ventajas-b2b__cabeza h2{font-size:36px;margin-bottom:0}
  .ventajas-b2b__lista li{padding:20px 0}
  .ventajas-b2b__lista span{font-size:17px}
  .agencias__cta{font-size:17px}

  .flota-grupo{padding:0 var(--borde) 88px}
  .flota-grupo__cabeza{text-align:center;max-width:640px;margin:0 auto 40px}
  .flota-grupo__cabeza h2{font-size:32px;margin:0 auto}
  /* Las columnas siguen al número de fotos: con dos, una grilla de cuatro
     las dejaba encogidas en media pantalla y con un hueco al lado. */
  .flota-grupo__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flota-grupo__grid--1{grid-template-columns:1fr}
  .flota-grupo__grid--1 .flota-grupo__foto{aspect-ratio:21/9}
  .flota-grupo__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flota-grupo__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flota-grupo__grid--3 .flota-grupo__foto,
  .flota-grupo__grid--2 .flota-grupo__foto{aspect-ratio:3/2}
  .flota-grupo__grid--5 .flota-grupo__foto:first-child{grid-column:1 / span 2;
    grid-row:1 / span 2;aspect-ratio:4/3}

  .operacion{padding:88px var(--borde) 92px}
  .operacion__cabeza{text-align:center;max-width:640px;margin:0 auto 46px}
  .operacion__cabeza h2{font-size:36px;margin:0 auto}
  .operacion__pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:44px}
  .operacion__pasos .paso{flex-direction:column;gap:14px;padding:0;border:0}
  .operacion__pasos .paso__n{font-size:34px}

  /* --- 16 · GUIDED EDITIONS --- */
  .guided-intro{padding:76px var(--borde) 20px}
  .guided-intro__cuerpo{max-width:60ch;margin:0 auto}
  .guided-intro__cuerpo p{font-size:20px}
  .ediciones-lista{padding:30px var(--borde) 92px}
  .vacio-edicion{max-width:640px;margin:0 auto;padding:56px}
  .ediciones-lista__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

  /* --- 17 · FAQ --- */
  .faq{padding:8px var(--borde) 20px;max-width:900px;margin:0 auto}
  .faq__seccion{padding:44px 0}
  .faq__titulo{font-size:30px}
  .pregunta__p{font-size:17px}
  .pregunta__r{font-size:16px}

  /* --- 18 · CONTACTO --- */
  .contacto{padding:76px var(--borde) 96px;
    grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .contacto__intro{font-size:21px}
  .estaciones{flex-direction:row;gap:40px}
  .formulario--contacto{padding:40px}

  /* --- 19 · LEGAL --- */
  .legal{padding:52px 0 96px}
  .legal h2{font-size:18px;margin:34px 0 10px}
  .legal p{font-size:15.5px}
  .legal-pendiente{padding:80px 0 110px}

  /* --- 20 · GUIDED EDITIONS --- */
  .ghero{min-height:min(72vh,620px)}
  .ghero__cuerpo{padding:0 var(--borde) 58px;max-width:1100px}
  .ghero h1{font-size:clamp(52px,6vw,78px);max-width:14ch;
    margin-bottom:18px}
  .ghero__bajada{font-size:22px;max-width:44ch}

  .gintro{padding:76px var(--borde) 72px}
  .gintro__cuerpo{max-width:60ch;margin:0 auto;text-align:center}
  .gintro__cuerpo p{font-size:20px;line-height:1.6}

  .gsalidas{padding:8px var(--borde) 96px}
  .gsalidas__cabeza{text-align:center;margin-bottom:44px}
  .gsalidas h2{font-size:38px;}
  .gsalidas__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
  .gtarjeta__pie{padding-top:20px}
  .gtarjeta__titulo{font-size:23px}

  /* --- 21 · EDICION --- */
  /* La franja se lee de un vistazo: los datos en fila, separados por filetes
     verticales, y el boton al final de la misma linea. */
  .franja{display:grid;grid-template-columns:1fr auto;gap:48px;
    align-items:center;padding:34px var(--borde) 36px}
  .franja__datos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:0 1px;background:var(--linea-osc)}
  .franja__dato{padding:4px 26px;border-bottom:0;background:var(--carbon-2)}
  .franja__dato:first-child{padding-top:4px;padding-left:0}
  .franja__accion{padding-top:0}
  .franja__accion .btn{display:inline-flex;width:auto;min-height:0;
    padding:15px 30px;font-size:14px;white-space:nowrap}

  .edicion__cuerpo{padding:76px var(--borde) 16px}
  .edicion__texto{max-width:64ch;margin:0 auto}
  .edicion__texto p{font-size:20px;line-height:1.65}
  .edicion__lista li{font-size:17.5px}

  .salidas{padding:60px var(--borde) 88px}
  .salidas__cabeza{text-align:center;margin-bottom:40px}
  .salidas h2{font-size:34px}
  .salidas__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;
    max-width:900px;margin:0 auto}

  .incluye{padding:84px var(--borde) 88px}
  .incluye__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px;
    max-width:1000px;margin:0 auto}

  .hueco--pendientes{margin:0 var(--borde) 80px}

  /* --- Proximas salidas en el home --- */
  .proximas{margin-top:30px}
  .proxima{padding:18px 0}
  .proxima__titulo{font-size:21px}
  .ediciones__btn{display:inline-flex;width:auto;min-height:0;margin-top:32px;
    padding:15px 30px;font-size:14px}
}