/* ==========================================================================
   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 ------------------------------------------------------ */
/*
 * Permanente en toda la página: sticky, no relative. Se queda pegada arriba
 * al hacer scroll, en el home y en cualquier página interna.
 *
 * El margen negativo es el truco para conservar, sin anidar la barra dentro
 * de .hero, el efecto de que flote transparente sobre la foto del home: el
 * margen tira del elemento siguiente (.hero) hacia arriba exactamente la
 * altura de la barra, así que el hero empieza justo debajo de donde la
 * barra ya está posicionada, en vez de después de ella. En las páginas
 * internas (.barra--solida, con fondo sólido) ese truco no hace falta —ahí
 * la barra no flota sobre nada— y se anula más abajo.
 */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;height:56px;margin-bottom:-56px;
  padding-left:var(--borde-m);padding-right:var(--borde-m)}
.barra--solida{margin-bottom:0}
.barra__logo{height:30px;width:auto;display:block}
.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}

/*
 * Menú móvil. .barra__nav es el mismo bloque que en escritorio se convierte
 * en la fila horizontal de enlaces (ver el media query más abajo); en móvil
 * empieza oculto y este bloque lo convierte en un panel desplegable, sin
 * duplicar ni un enlace.
 *
 * position:fixed y no absolute: con absolute, el panel hereda como alto el
 * de .barra —56px— y un contenido más alto que eso se saldría por debajo sin
 * poder hacer scroll. Fixed más top calculado con el propio alto de la barra
 * cubre el resto de la pantalla y sí se puede scrollear si hiciera falta.
 */
.barra__nav{display:none}
.barra--menu-abierto .barra__nav{
  display:flex;flex-direction:column;gap:2px;
  position:fixed;top:56px;left:0;right:0;bottom:0;
  background:var(--carbon);padding:10px var(--borde-m) 28px;
  overflow-y:auto;
  animation:kk-menu-entra .22s ease-out;
}
.barra__nav a{display:block;padding:14px 2px;font-size:17px;color:#E9E4DA;
  border-bottom:1px solid rgba(233,228,218,.12)}
.barra__nav-wa{display:flex;align-items:center;gap:8px;
  margin-top:14px;color:var(--oxido-claro);border-bottom:0}

@keyframes kk-menu-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.barra--menu-abierto .barra__nav{animation:none}}

.barra__menu{background:none;border:0;padding:8px;cursor:pointer;line-height:0}
.barra__menu-cerrar{display:none}
.barra--menu-abierto .barra__menu-abrir{display:none}
.barra--menu-abierto .barra__menu-cerrar{display:block}

/* --- 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)}
/* Un <button> no hereda la tipografía por defecto; un <a> sí. Al pasar el
   botón de enviar de uno a otro en agencias.php, hacía falta este reset o
   el texto se veía en la fuente del sistema en vez de en la del sitio. */
.formulario button{width:100%;font-family:inherit}

/* El señuelo anti-spam de inc/formularios.php: fuera de la pantalla, no con
   display:none. Un bot que respeta display:none salta el campo igual que un
   humano; uno que rellena a ciegas cae en los dos casos, pero solo el
   primero sigue delatándose con esta técnica. */
.kk-trampa{position:absolute;left:-9999px;top:-9999px}

/* Confirmación de envío, arriba del formulario. Mismo lenguaje visual que
   .hueco —caja con eyebrow— pero en verde/óxido según si salió bien, no en
   el naranja de "esto es una nota interna". */
.aviso-envio{border-radius:var(--radio-alto);padding:14px 18px;margin-bottom:18px;
  font-size:14px;line-height:1.5}
.aviso-envio--ok{background:rgba(70,82,57,.12);border:1px solid var(--musgo);color:var(--musgo)}
.aviso-envio--error{background:rgba(168,70,15,.1);border:1px solid var(--oxido);color:var(--oxido)}
/* Dentro de .formulario (fondo oscuro con foto) el texto claro se pierde
   contra un fondo también claro; se invierte el tratamiento ahí. */
.formulario .aviso-envio{background:rgba(19,22,26,.55);backdrop-filter:blur(2px)}
.formulario .aviso-envio--ok{border-color:#8FAE7A;color:#CFE2C0}
.formulario .aviso-envio--error{border-color:var(--oxido-claro);color:#F3C7A8}

.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}

/* El campo en sí: sin borde propio ni fondo, para que se vea como si el
   texto flotara dentro de la píldora de .campo. Ya no va con el prefijo
   .formulario--contacto: los dos formularios del sitio usan la misma
   píldora, así que la regla es la misma para los dos. */
.campo input,
.campo textarea,
.campo select{
  width:100%;border:0;background:transparent;font-family:inherit;font-size:15px;
  color:var(--tinta);padding:2px 0;resize:vertical}
.campo input:focus,
.campo textarea:focus,
.campo select:focus{outline:0}
/* El foco se marca en la píldora entera, no en el campo desnudo: el campo
   no tiene borde propio, así que sin esto el foco sería invisible. */
.campo:focus-within{border-color:var(--oxido);box-shadow:0 0 0 2px rgba(168,70,15,.16)}
/* Cuando hay un textarea de verdad ya ocupa el alto que antes insinuaba el
   relleno extra de abajo. */
.campo--alto:has(textarea){padding-bottom:12px}

.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opciones{display:flex;flex-wrap:wrap;gap:9px}
/* .opcion es ahora un <label> que envuelve un radio oculto: sigue
   pareciendo la misma píldora, pero es seleccionable de verdad. El radio no
   lleva display:none —eso lo saca de la navegación por teclado— sino que se
   reduce a 1px y se hace transparente, que es la técnica que conserva el
   foco y el lector de pantalla. */
.opcion{position:relative;display:inline-flex;font-size:13px;border:1px solid var(--linea);
  border-radius:999px;padding:10px 16px;color:var(--tinta-2);
  background:rgba(250,248,243,.7);cursor:pointer}
.opcion:has(.opcion__radio:checked){border-color:var(--oxido);background:var(--oxido);color:#F7F3EA}
.opcion__radio{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.opcion__radio:focus-visible ~ span{outline:2px solid var(--oxido);outline-offset:3px}
/* Compatibilidad hacia atrás: si en algún lugar del sitio queda la clase
   vieja escrita a mano (sin JS de por medio), se sigue viendo activa. */
.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}
/* Desde el panel del FAQ (28-sep-2026) la respuesta puede traer más de un
   párrafo de verdad —wpautop la envuelve en <p>, no en texto suelto—. Sin
   este reset, el margen por defecto del navegador entre párrafos no
   coincide con la escala tipográfica del resto del sitio. */
.pregunta__r p{margin:0 0 10px}
.pregunta__r p:last-child{margin-bottom:0}

/* ==========================================================================
   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)}

/* El resto de la apariencia del campo y del botón —input transparente,
   foco en la píldora, ancho completo— ya es genérico, ver sección
   FORMULARIOS más arriba. Aquí solo queda lo propio de esta instancia: su
   foto de fondo. */
.formulario--contacto{--foto:url(../img/flota-campamento.jpg)}

/* ==========================================================================
   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)}
/* Nota de «redacción de trabajo» en Aviso legal y Privacidad. Discreta, no
   una alarma: es un estado del proyecto, no un error del sitio. */
.legal__aviso{font-size:13px;color:var(--seca);background:var(--hueso);
  border:1px solid var(--linea);border-radius:var(--radio-alto,10px);
  padding:12px 16px;margin:-10px 0 28px;font-style:italic}
.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}
  /* De vuelta a fila horizontal: se deshacen aquí los estilos de panel
     móvil (padding, subrayado, posición fija) en vez de dejar que compitan
     por especificidad con la regla de abajo. */
  .barra__nav{display:flex;position:static;align-items:center;gap:30px;
    background:none;padding:0;overflow:visible;animation:none;
    font-size:13px;font-weight:600;letter-spacing:.04em}
  .barra__nav a{color:#E9E4DA;padding:0;border-bottom:0}
  .barra__nav a:hover{color:var(--oxido-claro)}
  .barra__nav a.barra__nav-wa{display:none}
  .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}
}