/* ==========================================================================
   CID Transportación — sistema de diseño
   Derivado del Manual de Identidad Visual v1.0 · ProGraphics
   ========================================================================== */

:root {
  /* Color institucional */
  --marino:        #0B2946;
  --marino-900:    #081D32;
  --marino-700:    #123A61;
  --marino-500:    #1D5285;

  /* Acento general (turismo, escolar, empresarial, eventos) */
  --teal:          #0BA594;
  --teal-oscuro:   #08806F;
  --teal-claro:    #14C4AF;

  /* Acento EXCLUSIVO línea ejecutiva / producciones. No usar como acento general. */
  --cobre:         #BC7B3A;
  --cobre-claro:   #D9A063;

  /* Superficies */
  --grafito:       #16181F;
  --blanco:        #FFFFFF;
  --hueso:         #F6F8FA;
  --gris-100:      #EDF1F5;
  --gris-300:      #C9D2DB;
  --gris-500:      #7C8794;

  /* Texto */
  --txt:           #0C2A47;
  --txt-suave:     #55636F;
  --txt-inv:       #FFFFFF;
  --txt-inv-suave: #B4C2D0;

  /* Tipografía */
  --display: 'Poppins', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* Escala */
  --paso-1: .875rem;
  --paso0:  1rem;
  --paso1:  1.125rem;
  --paso2:  1.375rem;
  --paso3:  1.75rem;
  --paso4:  2.25rem;
  --paso5:  clamp(2.25rem, 5vw, 3.5rem);

  /* Layout */
  --ancho:   1200px;
  --angosto: 760px;
  --radio:   10px;
  --radio-lg: 16px;
  --sombra:  0 2px 8px rgba(12,42,71,.06), 0 12px 32px rgba(12,42,71,.08);
  --borde:   1px solid var(--gris-300);
  --trans:   .25s cubic-bezier(.4,0,.2,1);

  /* Chevron: el ángulo del isotipo, usado como motivo estructural */
  --chevron: 14px;
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Evita desfase horizontal en móvil provocado por honeypots (left:-9999px),
   overlays absolute o cualquier hijo que rebase el viewport. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: var(--body);
  font-size: var(--paso0);
  line-height: 1.65;
  color: var(--txt);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Tipografía ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--marino);
  text-wrap: balance;
}
h1 { font-size: var(--paso5); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: var(--paso2); }
h4 { font-size: var(--paso1); }
p  { text-wrap: pretty; }

.eyebrow {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-oscuro);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--teal);
  flex: none;
}
.eyebrow--inv { color: var(--teal-claro); }
.eyebrow--cobre { color: var(--cobre); }
.eyebrow--cobre::before { background: var(--cobre); }

.lead { font-size: var(--paso1); color: var(--txt-suave); max-width: 62ch; }
.lead--inv { color: var(--txt-inv-suave); }

/* ─── Layout ────────────────────────────────────────────────────────── */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--hueso { background: var(--hueso); }
.seccion--marino { background: var(--marino); color: var(--txt-inv); }
.seccion--marino h2, .seccion--marino h3 { color: var(--txt-inv); }

.cabecera-seccion { max-width: 720px; margin-bottom: 3rem; }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
.cabecera-seccion--centro .eyebrow { justify-content: center; }
.cabecera-seccion--centro .lead { margin-inline: auto; }

/* ─── Botones ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: .95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: var(--trans);
  text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primario { background: var(--teal); color: #fff; }
.btn--primario:hover { background: var(--teal-oscuro); transform: translateY(-2px); }

.btn--marino { background: var(--marino); color: #fff; }
.btn--marino:hover { background: var(--marino-700); transform: translateY(-2px); }

.btn--linea { border-color: var(--gris-300); color: var(--marino); background: transparent; }
.btn--linea:hover { border-color: var(--marino); background: var(--marino); color: #fff; }

.btn--linea-inv { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--linea-inv:hover { border-color: #fff; background: #fff; color: var(--marino); }

.btn--cobre { background: var(--cobre); color: var(--grafito); }
.btn--cobre:hover { background: var(--cobre-claro); transform: translateY(-2px); }

.btn--bloque { width: 100%; }

/* ─── Barra de navegación ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--marino);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-bottom: 3px solid #03A593;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
/* Compensa el espacio que antes ocupaba el nav en el flujo, ahora que es fixed */
body { padding-top: 74px; }
@media (max-width: 720px) {
  body { padding-top: 64px; }
  .nav__inner { min-height: 64px; }
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
.nav__logo img, .nav__logo svg { height: 42px; width: auto; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  padding: 0;
}
.nav__menu a {
  font-family: var(--display);
  font-weight: 500;
  font-size: .95rem;
  color: #fff;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: var(--trans);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] {
  color: var(--teal-claro);
  border-bottom-color: var(--teal);
}
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: var(--trans);
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--marino);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .5rem 1.25rem 1.5rem;
    display: none;
  }
  .nav__menu.abierto { display: flex; }
  .nav__menu li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__menu li:last-child { border: 0; padding-top: 1rem; }
  .nav__menu a { display: block; padding: .9rem 0; border: 0; }
  .nav__menu .btn { width: 100%; }
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(560px, 80vh, 740px);
  display: flex;
  align-items: center;
  padding-bottom: 5.5rem;
  background: var(--marino-900);
  overflow: hidden;
}
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 74px);
    padding-bottom: 0;
  }
  .hero > .contenedor {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .hero__contenido { padding-block: 2.25rem; }
}
.hero__media {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(8,29,50,.94) 0%, rgba(8,29,50,.78) 30%, rgba(8,29,50,.0) 50%),
    linear-gradient(to top, rgba(8,29,50,.65), transparent 55%);
}
.hero__velo_form {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(8,29,50,.94) 0%, rgba(8,29,50,.78) 10%, rgba(8,29,50,.0) 50%),
    linear-gradient(to top, rgba(8,29,50,.65), transparent 55%);
}
.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0;
  text-align: left;
  padding-block: 4rem;
  color: #fff;
}
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero h1 em {
  font-style: normal;
  color: var(--teal-claro);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

/* Franja de credenciales bajo el hero */
.franja {
  background: var(--marino);
  border-top: 3px solid var(--teal);
  color: var(--txt-inv-suave);
}
.franja__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
  padding-block: 1.75rem;
  list-style: none;
  margin: 0;
}
.franja__lista li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--paso-1);
}
.franja__lista strong {
  font-family: var(--display);
  color: #fff;
  font-size: var(--paso2);
  font-weight: 600;
  line-height: 1;
}

/* ─── Tarjetas de servicio ──────────────────────────────────────────── */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.servicio {
  position: relative;
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.9rem 1.6rem 1.7rem;
  overflow: hidden;
  transition: var(--trans);
}
.servicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.servicio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: transparent;
}
.servicio:hover::before { transform: scaleX(1); }
.servicio__icono {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: rgba(11,165,148,.1);
  color: var(--teal-oscuro);
  margin-bottom: 1.1rem;
}
.servicio__icono svg { width: 24px; height: 24px; }
.servicio h3 { margin-bottom: .5rem; }
.servicio p { color: var(--txt-suave); font-size: var(--paso-1); }

/* Variante línea ejecutiva — único lugar donde vive el cobre */
.servicio--ejecutiva {
  background: var(--grafito);
  border-color: var(--grafito);
}
.servicio--ejecutiva::before { background: var(--cobre); }
.servicio--ejecutiva h3 { color: #fff; }
.servicio--ejecutiva p { color: #A9AEB8; }
.servicio--ejecutiva .servicio__icono {
  background: rgba(188,123,58,.16);
  color: var(--cobre-claro);
}

/* ─── Valores ───────────────────────────────────────────────────────── */
.rejilla-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}
.valor {
  padding-left: 1.25rem;
  border-left: 2px solid var(--teal);
}
.valor h4 { color: #fff; margin-bottom: .4rem; }
.valor p { color: var(--txt-inv-suave); font-size: var(--paso-1); }

/* ─── Flota (resumen y catálogo) ────────────────────────────────────── */
.rejilla-flota {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.unidad {
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--trans);
}
.unidad:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.unidad__foto { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--gris-100); }
.unidad__cuerpo { padding: 1.4rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.unidad__etiqueta {
  align-self: flex-start;
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 4px;
  background: rgba(11,165,148,.12);
  color: var(--teal-oscuro);
}
.unidad__etiqueta--ejecutiva { background: rgba(188,123,58,.14); color: #8A5722; }
.unidad__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  list-style: none;
  padding: 0;
  font-size: var(--paso-1);
  color: var(--txt-suave);
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--gris-100);
}
.unidad__specs li { display: flex; align-items: center; gap: .4rem; }

/* Filtros del catálogo */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: var(--hueso);
  border-radius: var(--radio-lg);
  margin-bottom: 2rem;
}
.filtros select {
  padding: .6rem .9rem;
  border: var(--borde);
  border-radius: var(--radio);
  background: #fff;
  cursor: pointer;
}

/* ─── Testimonios ───────────────────────────────────────────────────── */
.rejilla-testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonio {
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.9rem 1.7rem;
  position: relative;
}
.testimonio::before {
  content: '';
  position: absolute;
  top: 1.9rem; left: 0;
  width: 3px; height: 32px;
  background: var(--teal);
}
.testimonio p { color: var(--txt-suave); margin-bottom: 1.2rem; }
.testimonio cite {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  color: var(--marino);
  display: block;
}
.testimonio span { font-size: var(--paso-1); color: var(--gris-500); }

/* ─── CTA de cierre ─────────────────────────────────────────────────── */
.cta-cierre {
  background: var(--marino);
  color: #fff;
  border-radius: var(--radio-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-cierre h2 { color: #fff; margin-bottom: 1rem; }
.cta-cierre .lead { margin-inline: auto; color: var(--txt-inv-suave); }
.cta-cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ─── Pie ───────────────────────────────────────────────────────────── */
.pie { background: var(--marino-900); color: var(--txt-inv-suave); padding-block: 3.5rem 2rem; }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 760px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie h4 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: var(--paso-1); }
.pie a:hover { color: var(--teal-claro); }
.pie__logo img, .pie__logo svg { height: 46px; width: auto; margin-bottom: 1.1rem; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}

/* ─── Botón flotante de WhatsApp ────────────────────────────────────── */
.wa-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  padding: 12px 20px 12px 14px;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  transition: transform .15s, box-shadow .15s;
}
.wa-flotante:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37,211,102,.55);
}
.wa-flotante svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 576px) {
  .wa-flotante span { display: none; }
  .wa-flotante { padding: 14px; border-radius: 50%; }
}

/* ─── Utilidades ────────────────────────────────────────────────────── */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.salto-contenido {
  position: absolute;
  left: -999px;
  background: var(--teal);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* Revelado al hacer scroll */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; } }

/* ==========================================================================
   Bloques premium — franja de confianza, servicios con foto, proceso
   ========================================================================== */

/* ─── Franja de stats sobre el hero (ancho completo, translúcida) ───── */
.hero-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: rgba(11, 50, 84, 0.72);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-stats .stat {
  position: relative;
  justify-content: center;
  padding-block: 1.35rem;
  color: var(--txt-inv-suave);
}
.hero-stats .stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 22%;
  height: 56%; width: 1px;
  background: rgba(255,255,255,.14);
}
@media (max-width: 760px) {
  .hero-stats {
    position: relative;
    z-index: 4;
    background: var(--marino);
    backdrop-filter: none;
  }
  .hero-stats__inner { grid-template-columns: repeat(4, 1fr); }
  .hero-stats .stat {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .2rem;
    padding: .8rem .2rem;
  }
  .hero-stats .stat__icono { display: none; }
  .hero-stats .stat__txt { align-items: center; }
  .hero-stats .stat strong { font-size: 1.35rem; }
  .hero-stats .stat__lbl { font-size: .64rem; line-height: 1.15; }
  .hero-stats .stat:not(:last-child)::after { display: block; }
}

/* ─── Franja de confianza (bajo el hero) ────────────────────────────── */
.confianza { background: var(--marino); color: var(--txt-inv-suave); }
.confianza__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  padding-block: 2.25rem;
}
.stat { display: flex; align-items: center; gap: .9rem; }
.stat__icono {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: rgba(11,165,148,.14);
  color: var(--teal-claro);
}
.stat__icono svg { width: 22px; height: 22px; }
.stat__txt { display: flex; flex-direction: column; }
.stat strong {
  font-family: var(--display);
  font-size: var(--paso3);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  display: block;
}
.stat span { font-size: var(--paso-1); }
.stat__lbl { font-size: var(--paso-1); }

/* Fila de clientes / placeholders neutros */
.clientes {
  padding-block: 3rem 2.5rem;
}
.clientes__titulo {
  text-align: center;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-inv-suave);
  margin-bottom: 1.4rem;
}
.clientes__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
}
.cliente {
  height: 64px;
  min-width: 150px;
  display: grid;
  place-items: center;
  /* padding-inline: 1.4rem; */ 
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: var(--radio);
  background: rgba(255,255,255,.03);
  text-align: center;
  overflow: hidden;
}
.cliente span {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  line-height: 1.25;
}
.cliente--real {
  border-style: solid;
  border-color: rgba(11,165,148,.45);
  background: rgba(11,165,148,.06);
}
.cliente--real span { color: #fff; }
.clientes__nota {
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  margin-top: 1.1rem;
}

/* ─── Servicios con foto ────────────────────────────────────────────── */
/* Sección de servicios: marino profundo para que las tarjetas (marino-700) resalten */
.seccion--servicios { background: var(--marino-900); }

/* Carrusel horizontal de servicios */
.carrusel { position: relative; }
.rejilla-servicios--foto {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 4px 1.5rem;            /* aire para el hover-lift y la sombra */
  scroll-padding-inline: 4px;
}
.rejilla-servicios--foto::-webkit-scrollbar { display: none; }
.rejilla-servicios--foto .tarjeta-serv {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .rejilla-servicios--foto .tarjeta-serv { flex-basis: 80%; }  /* deja asomar la siguiente */
}

/* Botones de navegación */
.carrusel__btn {
  display: grid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gris-300);
  background: #fff;
  color: var(--marino);
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(12,42,71,.14);
  transition: var(--trans);
}
.carrusel__btn:hover:not(:disabled) {
  background: var(--marino);
  color: #fff;
  border-color: var(--marino);
}
.carrusel__btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.carrusel__btn svg { width: 20px; height: 20px; }
.carrusel__btn--prev { left: -18px; }
.carrusel__btn--next { right: -18px; }

/* En móvil: flechas más chicas, semitransparentes y superpuestas al borde de la card */
@media (max-width: 767px) {
  .carrusel__btn {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
  }
  .carrusel__btn svg { width: 17px; height: 17px; }
  .carrusel__btn--prev { left: 2px; }
  .carrusel__btn--next { right: 2px; }
}
.tarjeta-serv {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--marino-700);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: var(--trans);
}
.tarjeta-serv:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(4,14,26,.45);
  border-color: rgba(11,165,148,.5);
}
.tarjeta-serv__foto {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
}
.tarjeta-serv__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.tarjeta-serv:hover .tarjeta-serv__foto img { transform: scale(1.05); }
.tarjeta-serv__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--marino-700) 2%, rgba(18,58,97,.15) 40%, transparent 70%);
}
/* Badge teal tipo squircle, asomando sobre el borde foto/cuerpo (sin recorte) */
.tarjeta-serv__cuerpo { position: relative; }
.tarjeta-serv__badge {
  position: absolute;
  left: 1.4rem;
  top: -24px;
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11,165,148,.35);
}
.tarjeta-serv__badge svg { width: 24px; height: 24px; }
.tarjeta-serv__cuerpo {
  padding: 2.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.tarjeta-serv__cuerpo h3 { color: #fff; margin-bottom: 0; }
.tarjeta-serv__cuerpo p { color: var(--txt-inv-suave); font-size: var(--paso-1); flex: 1; }
.tarjeta-serv__lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
  margin: .2rem 0 .4rem;
}
.tarjeta-serv__lista li {
  font-size: .68rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #C4CEDA;
}
.tarjeta-serv__cta {
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--teal-claro);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  transition: gap .2s ease;
}
.tarjeta-serv:hover .tarjeta-serv__cta { gap: .7rem; }

/* Variante ejecutiva — grafito + cobre, único lugar del cobre */
.tarjeta-serv--ejecutiva { background: var(--grafito); border-color: rgba(188,123,58,.28); }
.tarjeta-serv--ejecutiva:hover { border-color: rgba(188,123,58,.6); }
.tarjeta-serv--ejecutiva .tarjeta-serv__foto::after {
  background: linear-gradient(to top, var(--grafito) 2%, rgba(22,24,31,.2) 40%, transparent 70%);
}
.tarjeta-serv--ejecutiva .tarjeta-serv__badge {
  background: var(--cobre);
  color: var(--grafito);
  box-shadow: 0 6px 18px rgba(188,123,58,.4);
}
.tarjeta-serv--ejecutiva p { color: #9AA0AB; }
.tarjeta-serv--ejecutiva .tarjeta-serv__lista li {
  background: rgba(255,255,255,.06);
  color: #B7BCC5;
}
.tarjeta-serv--ejecutiva .tarjeta-serv__cta { color: var(--cobre-claro); }

/* ─── Proceso (secuencia numerada real) ─────────────────────────────── */
.proceso {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: paso;
}
@media (max-width: 860px) { .proceso { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
@media (max-width: 480px) { .proceso { grid-template-columns: 1fr; } }
.paso { position: relative; }
.paso__num {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11,165,148,.12);
  border: 1.5px solid var(--teal);
  color: var(--teal-oscuro);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--paso2);
  margin-bottom: 1.1rem;
}
.seccion--marino .paso__num {
  background: rgba(11,165,148,.16);
  color: var(--teal-claro);
}
/* Conector entre pasos en desktop */
.proceso .paso:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px; left: 66px; right: -1.5rem;
  height: 1.5px;
  background: repeating-linear-gradient(to right, var(--gris-300) 0 6px, transparent 6px 12px);
}
.seccion--marino .proceso .paso:not(:last-child)::after {
  background: repeating-linear-gradient(to right, rgba(255,255,255,.22) 0 6px, transparent 6px 12px);
}
@media (max-width: 860px) { .proceso .paso::after { display: none; } }
.paso h3 { font-size: var(--paso1); margin-bottom: .4rem; }
.paso p { font-size: var(--paso-1); color: var(--txt-suave); }
.seccion--marino .paso p { color: var(--txt-inv-suave); }

/* ─── Ventajas (por qué elegirnos, con más peso) ────────────────────── */
.rejilla-ventajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.ventaja {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.6rem 1.5rem;
  transition: var(--trans);
}
.ventaja:hover {
  border-color: rgba(11,165,148,.5);
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}
.ventaja__icono {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: rgba(11,165,148,.1);
  color: var(--teal-oscuro);
  margin-bottom: .35rem;
}
/* Variante ejecutiva: se aplica añadiendo .rejilla-ventajas--ejec al contenedor.
   Reserva el cobre para la línea ejecutiva (regla de marca CID). */
.rejilla-ventajas--ejec .ventaja:hover {
  border-color: rgba(188,123,58,.45);
}
.rejilla-ventajas--ejec .ventaja__icono {
  background: rgba(188,123,58,.12);
  color: var(--cobre);
}
.ventaja__icono svg { width: 26px; height: 26px; }
.ventaja h3 { font-size: var(--paso1); }
.ventaja p { font-size: var(--paso-1); color: var(--txt-suave); }

/* ==========================================================================
   Flota — estilo tarjetas oscuras con filtros (landing resumen)
   ========================================================================== */
.seccion--flota { background: var(--marino); }

.flota-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.flota-head .cabecera-seccion { margin-bottom: 0; }
@media (max-width: 700px) {
  .flota-head { flex-direction: column; align-items: flex-start; }
}

/* Chips de filtro */
.filtros-flota {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
}
.chip-filtro {
  font-family: var(--display);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: var(--txt-inv-suave);
  cursor: pointer;
  transition: var(--trans);
}
.chip-filtro:hover { border-color: var(--teal); color: #fff; }
.chip-filtro.is-activo {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Rejilla y tarjetas */
.rejilla-flota-nueva {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.flota-card {
  background: var(--marino-700);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--trans);
}
.flota-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11,165,148,.5);
  box-shadow: 0 16px 40px rgba(4,14,26,.45);
}
.flota-card__foto {
  aspect-ratio: 16/11;
  width: 100%;
  object-fit: cover;
  background: var(--marino-900);
}
.flota-card__cuerpo {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
}
.flota-card__cuerpo h3 { color: #fff; font-size: var(--paso1); }
.flota-specs {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  color: var(--txt-inv-suave);
  font-size: var(--paso-1);
}
.flota-specs li { display: flex; align-items: center; gap: .35rem; }
.flota-specs li svg { width: 16px; height: 16px; color: var(--teal-claro); flex: none; }
.flota-specs li:not(:last-child)::after {
  content: '';
  width: 1px; height: 13px;
  background: rgba(255,255,255,.16);
  margin-left: .55rem;
}
.flota-card .btn { margin-top: auto; width: 100%; }

/* Variante ejecutiva — grafito + cobre, para destacar la unidad premium */
.flota-card--ejecutiva { background: var(--grafito); border-color: rgba(188,123,58,.3); }
.flota-card--ejecutiva:hover { border-color: rgba(188,123,58,.6); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.flota-card--ejecutiva .flota-card__foto { background: var(--grafito); }
.flota-card--ejecutiva h3 { color: #fff; }
.flota-card--ejecutiva .flota-specs { color: #B7BCC5; }
.flota-card--ejecutiva .flota-specs li svg { color: var(--cobre-claro); }
.flota-card--ejecutiva .flota-specs li:not(:last-child)::after { background: rgba(188,123,58,.25); }
.flota-card--ejecutiva .btn--linea-inv {
  border-color: rgba(188,123,58,.5);
  color: var(--cobre-claro);
}
.flota-card--ejecutiva .btn--linea-inv:hover {
  background: var(--cobre);
  border-color: var(--cobre);
  color: var(--grafito);
}
.flota-tag-ejec {
  align-self: flex-start;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 5px;
  background: rgba(188,123,58,.16);
  color: var(--cobre-claro);
  border: 1px solid rgba(188,123,58,.4);
}

/* Tarjeta CTA "¿No encuentras la unidad?" */
.flota-cta {
  background: var(--marino-700);
  border: 1px dashed rgba(11,165,148,.4);
  border-radius: var(--radio-lg);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .7rem;
}
.flota-cta__icono {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal-claro);
  display: grid; place-items: center;
  margin-bottom: .3rem;
}
.flota-cta__icono svg { width: 28px; height: 28px; }
.flota-cta h3 { color: #fff; font-size: var(--paso1); }
.flota-cta p { color: var(--txt-inv-suave); font-size: var(--paso-1); }
.flota-cta .btn { margin-top: .4rem; }

/* ==========================================================================
   Testimonios — carrusel
   ========================================================================== */
.rejilla-testi {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 4px 1.5rem;
}
.rejilla-testi::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 370px;
  scroll-snap-align: start;
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 560px) { .testi-card { flex-basis: 80%; } }
.testi-estrellas { display: flex; gap: 3px; color: #F5A623; }
.testi-estrellas svg { width: 18px; height: 18px; }
.testi-card p { color: var(--txt-suave); flex: 1; }
.testi-autor { display: flex; align-items: center; gap: .85rem; }
.testi-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  flex: none;
}
.testi-autor cite {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  color: var(--marino);
  display: block;
}
.testi-autor span { font-size: var(--paso-1); color: var(--blanco); }
.testi-autor__info { display: flex; flex-direction: column; gap: .15rem; }
.testi-fb {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 500;
  color: #1877F2;
  transition: var(--trans);
}
.testi-fb svg { width: 15px; height: 15px; }
.testi-fb:hover { color: #0F5AC4; text-decoration: underline; }

/* ==========================================================================
   Cotiza — formulario de 2 pasos
   ========================================================================== */
.cotiza-seccion {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--marino-900);
  overflow: hidden;
}
.cotiza-seccion::before {
  content: '';
  position: absolute; inset: 0;
  background:
    
    url('../img/back/bg-cotiza.webp') center/cover;
  opacity: .9;
}
.cotiza-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 860px) { .cotiza-grid { grid-template-columns: 1fr; } }
.cotiza-intro h2 { color: #fff; }

.cotiza-form__barra { margin-bottom: 1.6rem; }
.cotiza-form__label {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal-claro);
  letter-spacing: .06em;
  display: block;
  margin-bottom: .6rem;
}
.cotiza-form__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.cotiza-form__fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width .35s ease;
}
.campo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) { .campo-grid { grid-template-columns: 1fr; } }
.campo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 500;
  color: var(--txt-inv-suave);
}
.campo__opt { color: var(--gris-500); font-weight: 400; }
.campo input,
.campo select {
  font-family: var(--body);
  font-size: .95rem;
  padding: .75rem .9rem;
  border-radius: var(--radio);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
  transition: var(--trans);
}
.campo input::placeholder { color: rgba(255,255,255,.45); }
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,.08);
}
.campo select option { color: #0C2A47; }
.campo input.invalido,
.campo select.invalido { border-color: #E5646E; }

.cotiza-acciones {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
}
.cotiza-acciones--dos {
  flex-direction: row;
  gap: .8rem;
}
.cotiza-acciones--dos .btn { flex: 1; }
.cotiza-wa {
  font-family: var(--display);
  font-weight: 500;
  font-size: .88rem;
  color: var(--teal-claro);
  text-align: center;
}
.cotiza-wa:hover { color: #fff; }

/* ==========================================================================
   Ficha de vehículo (unidad.php) + diagrama de asientos
   ========================================================================== */
.volver {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: .9rem;
  color: var(--teal-oscuro);
  margin-bottom: 2rem;
}
.volver:hover { text-decoration: underline; }
.seccion--marino .volver { color: var(--teal-claro); }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .ficha { grid-template-columns: 1fr; gap: 2rem; } }
/* Contenedor de la galería: min-width 0 evita que el carrusel de miniaturas
   (con overflow horizontal) empuje la columna hacia afuera del grid. */
.ficha__media { min-width: 0; }
.ficha__media img {
  width: 100%;
  border-radius: var(--radio-lg);
  border: var(--borde);
}
.ficha__info h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .6rem 0 1rem; }
.ficha__capacidad { display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0; }
.ficha__capacidad strong {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
  color: var(--teal-oscuro);
}
.seccion--marino .ficha__capacidad strong { color: var(--teal-claro); }
.ficha__capacidad span { font-size: .9rem; color: var(--txt-suave); }
.seccion--marino .ficha__capacidad span { color: var(--txt-inv-suave); }
.ficha__subtitulo {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-suave);
  margin: 1.6rem 0 .9rem;
}
.seccion--marino .ficha__subtitulo { color: var(--txt-inv-suave); }
.ficha__equip {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1rem;
}
@media (max-width: 480px) { .ficha__equip { grid-template-columns: 1fr; } }
.ficha__equip li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.ficha__equip svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.seccion--marino .ficha__equip svg { color: var(--cobre-claro); }

.diagrama {
  max-width: 340px;
  margin: 0 auto;
  /* filter: drop-shadow(0 12px 30px rgba(12,42,71,.12)); */
}
.diagrama svg { width: 100%; height: auto; }

/* ==========================================================================
   Ficha de vehículo — galería, specs con íconos, beneficios, form
   ========================================================================== */
.galeria__principal {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: var(--borde);
}
.galeria__principal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--marino);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  transition: var(--trans);
}
.galeria__flecha:hover { background: #fff; }
.galeria__flecha svg { width: 20px; height: 20px; }
.galeria__flecha--prev { left: 12px; }
.galeria__flecha--next { right: 12px; }

.ficha__categoria {
  font-family: var(--display);
  font-size: .82rem;
  color: var(--txt-suave);
  margin-bottom: .3rem;
}
.seccion--marino .ficha__categoria { color: var(--txt-inv-suave); }
.ficha__tagline {
  font-family: var(--display);
  font-weight: 600;
  color: var(--teal-oscuro);
  margin-bottom: 1rem;
}
.seccion--marino .ficha__tagline { color: var(--cobre-claro); }

/* Specs con íconos (rejilla 2x2) */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.6rem 0;
}
.spec-item { display: flex; align-items: center; gap: .7rem; }
.spec-item__ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: rgba(11,165,148,.1);
  color: var(--teal-oscuro);
  padding-top: .7rem;
}
.spec-item__ic svg { width: 22px; height: 22px; }
.spec-item strong { font-family: var(--display); font-weight: 600; font-size: .92rem; }
.seccion--marino .spec-item strong { color: #fff; }
.seccion--marino .spec-item__ic { background: rgba(188,123,58,.16); color: var(--cobre-claro); }

/* Beneficios */
.beneficios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2.5rem;
}
@media (max-width: 700px) { .beneficios { grid-template-columns: 1fr; } }
.beneficio { display: flex; gap: 1rem; }
.beneficio__ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11,165,148,.1);
  color: var(--teal-oscuro);
}
.beneficio__ic svg { width: 24px; height: 24px; }
.beneficio h4 { font-size: var(--paso1); margin-bottom: .25rem; }
.beneficio p { color: var(--txt-suave); font-size: var(--paso-1); }
.beneficio--ejec .beneficio__ic { background: rgba(188,123,58,.14); color: var(--cobre); }

/* Formulario de cotización de la unidad */
.cotiza-unidad { position: relative; z-index: 2; }
.cotiza-unidad__intro { max-width: 700px; margin-bottom: 2rem; }
.cotiza-unidad__intro h2 { color: #fff; }
.form-unidad {
  background: var(--marino-700);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radio-lg);
  padding: 1.9rem;
  box-shadow: 0 24px 60px rgba(4,14,26,.5);
}
.form-unidad__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 560px) { .form-unidad__grid { grid-template-columns: 1fr; } }
.campo--full { grid-column: 1 / -1; }
.campo textarea {
  font-family: var(--body);
  font-size: .95rem;
  padding: .75rem .9rem;
  border-radius: var(--radio);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
  resize: vertical;
  transition: var(--trans);
}
.campo textarea::placeholder { color: rgba(255,255,255,.45); }
.campo textarea:focus { outline: none; border-color: var(--teal); background: rgba(255,255,255,.08); }
.campo textarea.invalido { border-color: #E5646E; }

/* "Ideal para" — píldoras en la ficha */
.ficha-ideal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.3rem 0 .2rem;
}
.ficha-ideal__lbl {
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
  color: var(--txt-suave);
  margin-right: .2rem;
}
.seccion--marino .ficha-ideal__lbl { color: var(--txt-inv-suave); }
.ficha-ideal__pill {
  font-size: .8rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(11,165,148,.1);
  color: var(--teal-oscuro);
  border: 1px solid rgba(11,165,148,.25);
}
.seccion--marino .ficha-ideal__pill {
  background: rgba(188,123,58,.14);
  color: var(--cobre-claro);
  border-color: rgba(188,123,58,.35);
}

/* ==========================================================================
   Ficha de unidad — diseño completo (breadcrumb, CTA box, specs, FAQ, etc.)
   ========================================================================== */
.breadcrumb {
  font-size: .82rem;
  color: var(--txt-suave);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.breadcrumb a { color: var(--teal-oscuro); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--gris-300); }
.seccion--marino .breadcrumb { color: var(--txt-inv-suave); }
.seccion--marino .breadcrumb a { color: var(--teal-claro); }

/* Galería */
.galeria__principal { position: relative; }
.galeria__badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--teal); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  padding: .3rem .7rem; border-radius: 6px;
}
.galeria__zoom {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  background: rgba(12,42,71,.7); color: #fff;
  font-size: .72rem; padding: .3rem .6rem; border-radius: 5px;
  pointer-events: none;
}
[data-gal-main] { cursor: zoom-in; }

/* Specs con subtítulo (4 en fila) */
.specs-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  background: var(--hueso);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.1rem 1rem;
  gap: .6rem;
}
.seccion--marino .specs-grid--4 { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
/* @media (max-width: 560px) { .specs-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1rem .6rem; } } */
.specs-grid--4 .spec-item { flex-direction: column; text-align: center; gap: .4rem; }
.specs-grid--4 .spec-item span { display: flex; flex-direction: column; }
.specs-grid--4 .spec-item strong { font-size: 1rem; }
.specs-grid--4 .spec-item small { font-size: .72rem; color: var(--txt-suave); }
.seccion--marino .specs-grid--4 .spec-item small { color: var(--txt-inv-suave); }

/* Checklist */
.ficha-check {
  list-style: none; padding: 0; margin: 1.4rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem;
}
@media (max-width: 560px) { .ficha-check { grid-template-columns: 1fr; } }
.ficha-check li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.ficha-check svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.seccion--marino .ficha-check li { color: var(--txt-inv-suave); }
.seccion--marino .ficha-check svg { color: var(--cobre-claro); }

/* CTA box */
.ficha-cta {
  background: rgba(11,165,148,.07);
  border: 1px solid rgba(11,165,148,.25);
  border-radius: var(--radio-lg);
  padding: 1.4rem;
  margin-top: 1.6rem;
}
.seccion--marino .ficha-cta { background: rgba(188,123,58,.1); border-color: rgba(188,123,58,.3); }
.ficha-cta__head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.ficha-cta__ic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--teal); color: #fff;
}
.seccion--marino .ficha-cta__ic { background: var(--cobre); color: var(--grafito); }
.ficha-cta__ic svg { width: 22px; height: 22px; }
/* El SVG del reloj trae un color fijo que se pierde sobre el teal en unidades
   no ejecutivas. Forzamos el trazo a blanco (gana sobre el atributo del SVG). */
.ficha-cta__ic svg,
.ficha-cta__ic svg path,
.ficha-cta__ic svg circle,
.ficha-cta__ic svg polyline,
.ficha-cta__ic svg line { stroke: #fff; }
/* La línea ejecutiva conserva el ícono oscuro sobre el fondo cobre. */
.seccion--marino .ficha-cta__ic svg,
.seccion--marino .ficha-cta__ic svg path,
.seccion--marino .ficha-cta__ic svg circle,
.seccion--marino .ficha-cta__ic svg polyline,
.seccion--marino .ficha-cta__ic svg line { stroke: var(--grafito); }
.ficha-cta__head strong { font-family: var(--display); display: block; }
.ficha-cta__head span { font-size: .85rem; color: #0C2A47; }
.seccion--marino .ficha-cta__head strong { color: #fff; }
.seccion--marino .ficha-cta__head span { color: var(--blanco); }
.ficha-cta .btn { margin-bottom: .6rem; }
.ficha-cta__trust {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: center;
  font-size: .75rem; color: var(--txt-suave); margin-top: .8rem;
}
.seccion--marino .ficha-cta__trust { color: var(--txt-inv-suave); }

.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1EBE5A; transform: translateY(-2px); }

/* Grid de equipamiento */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 860px) { .equip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .equip-grid { grid-template-columns: 1fr; } }
.equip-card {
  background: #fff; border: var(--borde); border-radius: var(--radio-lg);
  padding: 1.5rem 1.25rem; text-align: center; transition: var(--trans);
}
.equip-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: rgba(11,165,148,.4); }
.equip-card__ic {
  width: 46px; height: 46px; margin: 0 auto .8rem; display: grid; place-items: center;
  border-radius: 12px; background: rgba(11,165,148,.1); color: var(--teal-oscuro);
}
.equip-card__ic svg { width: 24px; height: 24px; }
.equip-card h4 { font-size: 1rem; margin-bottom: .2rem; }
.equip-card p { font-size: .82rem; color: var(--txt-suave); }
.equip-card--ejec .equip-card__ic { background: rgba(188,123,58,.12); color: var(--cobre); }

/* Diagrama + especificaciones */
.diag-fila { display: grid; grid-template-columns: 1fr .5fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .diag-fila { grid-template-columns: 1fr; gap: 2rem; } }
.diag-fila .diagrama { max-height: 600px; }
.especificaciones {
  background: var(--hueso); border: var(--borde);
  border-radius: var(--radio-lg); padding: 1.75rem;
}
.especificaciones h3 { font-size: var(--paso1); margin-bottom: 1rem; }
.especificaciones dl { display: grid; gap: .8rem; margin: 0; }
.especificaciones dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--gris-100);
}
.especificaciones dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.especificaciones dt { color: var(--txt-suave); font-size: .9rem; }
.especificaciones dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: .9rem; text-align: right; }
.especificaciones__nota { font-size: .75rem; color: var(--gris-500); margin-top: 1.1rem; }

/* FAQ — acordeón con animación suave y una sola pregunta abierta a la vez */
.faq { display: grid; gap: .75rem; }
.faq details {
  background: #fff;
  border: var(--borde);
  border-radius: var(--radio);
  padding: 0 1.25rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details[open] {
  border-color: rgba(11,165,148,.35);
  box-shadow: 0 4px 18px rgba(12,42,71,.06);
}
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  padding: 1.1rem 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--teal-oscuro);
  font-weight: 400;
  flex: none;
  transition: transform .3s ease, color .25s ease;
}
.faq details[open] summary { color: var(--teal-oscuro); }
.faq details[open] summary::after { transform: rotate(45deg); }
/* Wrapper animable: la altura se anima con JS (max-height) */
.faq__cuerpo {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
}
.faq details[open] .faq__cuerpo { opacity: 1; }
.faq__cuerpo p {
  padding: 0 0 1.1rem;
  color: var(--txt-suave);
  font-size: .92rem;
  margin: 0;
}

/* Relacionadas */
.relacionadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 760px) { .relacionadas { grid-template-columns: 1fr; } }
.relacionada {
  display: flex; gap: 1rem; align-items: center;
  background: #fff; border: var(--borde); border-radius: var(--radio-lg);
  padding: 1rem; transition: var(--trans);
}
.relacionada:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: rgba(11,165,148,.4); }
.relacionada img { width: 92px; height: 70px; object-fit: cover; border-radius: 8px; flex: none; background: var(--gris-100); }
.relacionada h4 { font-size: .95rem; margin-bottom: .15rem; }
.relacionada span { display: block; font-size: .8rem; color: var(--txt-suave); }
.relacionada__link { color: var(--teal-oscuro) !important; font-weight: 600; margin-top: .3rem; }
.relacionada--ejec .relacionada__link { color: #8A5722 !important; }

/* Banner final */
.cta-banner { background: var(--marino); color: #fff; padding-block: clamp(2.5rem,5vw,3.5rem); }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-banner h2 { color: #fff; margin-bottom: .3rem; }
.cta-banner p { color: var(--txt-inv-suave); max-width: 46ch; }

/* Lightbox / fullscreen */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,16,28,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 4vw;
  animation: lb-in .2s ease;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 8px; object-fit: contain; }
.lightbox__cerrar {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: .85;
}
.lightbox__cerrar:hover { opacity: 1; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 0; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .2s;
}
.lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__nav--prev { left: 3vw; }
.lightbox__nav--next { right: 3vw; }
.lightbox__contador {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .85rem; opacity: .8;
}
@media (max-width: 560px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; }
}
/* ============================================================================
   CID Transportación — Parche CSS
   ProGraphics · COT-2026-001
   
   Pega este bloque al FINAL de tu assets/css/style.css
   
   Contiene:
   1) Override de fondo grafito para la ficha de la unidad ejecutiva
      (hereda todos los estilos de .seccion--marino, solo cambia el color).
   2) Ajustes para que el diagrama de asientos pueda ser una imagen JPG/PNG
      en lugar del SVG generativo, sin romper la caja actual.
============================================================================ */

/* ── 1. Override de fondo grafito para línea ejecutiva ─────────────────── */
.seccion--marino.seccion--marino--grafito {
  background: var(--grafito);
}

/* Bloque final "Cotiza tu…" en versión grafito para la ficha ejecutiva.
   Reemplaza el gradiente marino por uno basado en grafito, manteniendo la foto de fondo. */
.cotiza-seccion--grafito {
  background: var(--grafito);
}
.cotiza-seccion--grafito::before {
  background:
    url('../img/back/bg-cotiza.webp') center/cover;
  opacity: .92;
}

/* ── 2. Diagrama de asientos: soporte para imagen ─────────────────────── */
.diagrama img {
  display: block;
  width: 100%;
  height: auto;
  /* border-radius: 12px;
  background: #fff; */
  object-fit: contain;
}

/* En fondos claros el JPG suele traer su propio fondo blanco: le damos aire. */
.seccion .diagrama img {
  padding: .5rem;
  /* box-shadow: 0 1px 3px rgba(12,42,71,.06); */
  /* border: 1px solid var(--gris-cl, #C9D2DB); */
}







/* ── 3. Ajustes para fondo grafito (línea ejecutiva) ─────────────────── */

/* Título H1 de la ficha en blanco sobre grafito */
.seccion--marino--grafito h1,
.seccion--marino--grafito .ficha__info h1 {
  color: #fff;
}

/* Botón "Solicitar cotización" (btn--linea) sobre grafito:
   texto y borde blancos para que sea legible */
.seccion--marino--grafito .btn--linea {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  background: transparent;
}
.seccion--marino--grafito .btn--linea:hover {
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
}
/* ==========================================================================
   Formulario de unidad — versión 3 pasos (tema claro sobre fondo grafito)
   Se activa con .form-unidad--claro. El HTML usa las mismas clases .campo,
   .campo--full, .form-unidad__grid, etc.; solo cambian los tokens de color.
   ========================================================================== */
.form-unidad--claro {
  background: #fff;
  border: 1px solid var(--gris-100);
  border-radius: var(--radio-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 24px 60px rgba(4,14,26,.45);
  color: var(--txt);
}
/* Barra de progreso — indicador de paso en una sola línea */
.form-unidad__barra { margin-bottom: 1.6rem; }
.form-unidad__label {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--teal-oscuro);
  letter-spacing: .06em;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .55rem;
  white-space: nowrap;
}
.form-unidad__label small {
  margin-left: auto;             /* empuja el subtítulo a la derecha */
  font-weight: 500;
  color: var(--txt-suave);
  letter-spacing: .02em;
  text-transform: none;
  font-size: .78rem;
  white-space: normal;           /* el subtítulo sí puede envolver */
}
.form-unidad__track {
  height: 6px;
  border-radius: 999px;
  background: var(--gris-100);
  overflow: hidden;
}
.form-unidad__fill {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width .35s ease;
}
/* Campos en tema claro (redefinen los oscuros del .cotiza-seccion) */
.form-unidad--claro .campo {
  color: var(--txt);
  font-weight: 500;
}
/* Label del campo: el texto del nombre va envuelto en un <span> junto con
   el sufijo "(opcional)" dentro de un contenedor .campo__lbl, así ambos
   caen en la misma línea aunque .campo sea flex-column. */
.form-unidad--claro .campo__lbl {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-unidad--claro .campo__opt {
  color: var(--txt-suave);
  font-weight: 400;
  margin-left: .35rem;
}
.form-unidad--claro .campo input,
.form-unidad--claro .campo select,
.form-unidad--claro .campo textarea {
  background: var(--hueso);
  border: 1px solid var(--gris-100);
  color: var(--txt);
}
.form-unidad--claro .campo input::placeholder,
.form-unidad--claro .campo textarea::placeholder {
  color: var(--gris-500);
}
.form-unidad--claro .campo input:focus,
.form-unidad--claro .campo select:focus,
.form-unidad--claro .campo textarea:focus {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11,165,148,.15);
  outline: none;
}
.form-unidad--claro .campo select option { color: var(--txt); }
.form-unidad--claro .campo input.invalido,
.form-unidad--claro .campo select.invalido,
.form-unidad--claro .campo textarea.invalido {
  border-color: #E5646E;
  background: #FFF5F6;
}
/* Aviso / disclaimer bajo el último paso */
.form-unidad__aviso {
  font-size: .78rem;
  color: var(--txt-suave);
  margin: .85rem 0 0;
  line-height: 1.5;
}
.form-unidad__aviso a { color: var(--teal-oscuro); text-decoration: underline; }
/* Pasos: solo uno visible a la vez */
.form-unidad__paso[hidden] { display: none; }
.form-unidad__paso {
  animation: fu-fade .25s ease;
}
@keyframes fu-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Acciones (Atrás / Siguiente / Enviar) — el [hidden] debe ganar a .btn */
.form-unidad__acciones {
  margin-top: 1.4rem;
  display: flex;
  gap: .8rem;
}
.form-unidad__acciones .btn { flex: 1; }
.form-unidad__acciones [hidden] { display: none !important; }
.form-unidad__acciones .btn--fantasma {
  background: transparent;
  border: 1px solid var(--gris-300);
  color: var(--txt-suave);
}
.form-unidad__acciones .btn--fantasma:hover {
  background: var(--hueso);
  border-color: var(--marino);
  color: var(--marino);
  transform: none;
}
@media (max-width: 480px) {
  .form-unidad__acciones { flex-direction: column-reverse; }
  .form-unidad__acciones .btn { width: 100%; }
}

/* ==========================================================================
   Compartido landing + unidad: form claro sobre fondo marino/grafito
   ========================================================================== */


/* La barra "Paso X de Y" del landing (vieja) queda oculta si existe
   la nueva form-unidad__barra dentro, para no duplicar. */
.cotiza-form:has(.form-unidad__barra) > .cotiza-form__barra { display: none; }

/* Enlace "o escríbenos por WhatsApp" en tema claro */
.cotiza-form:has(.form-unidad--claro) .cotiza-wa,
.form-unidad--claro .cotiza-wa { color: var(--teal-oscuro); }
.cotiza-form:has(.form-unidad--claro) .cotiza-wa:hover,
.form-unidad--claro .cotiza-wa:hover { color: var(--marino); }

/* Botón --linea-inv usado en el paso 2 anterior: tema claro override. */
.form-unidad--claro .btn--linea-inv {
  color: var(--marino);
  border-color: var(--gris-300);
  background: transparent;
}
.form-unidad--claro .btn--linea-inv:hover {
  background: var(--hueso);
  border-color: var(--marino);
}

/* Sección de unidad: mismo grid 2-col que el landing. */
.cotiza-unidad.cotiza-grid {
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
}
@media (max-width: 860px) {
  .cotiza-unidad.cotiza-grid { grid-template-columns: 1fr; }
}
.cotiza-unidad__form .form-unidad--claro { margin: 0; }

/* ==========================================================================
   Testimonios: todas las tarjetas del carrusel a la misma altura, con la
   cita truncada a ~4 líneas cuando sobra. Mejora la percepción de rejilla.
   ========================================================================== */
.rejilla-testi { align-items: stretch; }
.testi-card {
  min-height: 300px;
  align-self: stretch;
}
.testi-card p {
  flex: 1;
  color: var(--txt-suave);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.55;
}
@media (max-width: 560px) {
  .testi-card {
    padding: 1.3rem 1.2rem;
    min-height: 260px;
  }
  .testi-card p {
    font-size: .92rem;
    -webkit-line-clamp: 5;   /* más líneas visibles en móvil, la card es más angosta */
  }
}

/* ==========================================================================
   Ventajas ("¿Por qué CID?" / "¿Por qué viajar con nosotros?") en móvil:
   layout con ícono a la izquierda y un bloque .ventaja__texto a la derecha
   que contiene título arriba + descripción abajo (columna).
   Requiere HTML: <div class="ventaja"><span class="ventaja__icono">...</span>
                    <div class="ventaja__texto"><h3>...</h3><p>...</p></div>
                  </div>
   ========================================================================== */
@media (max-width: 560px) {
  .rejilla-ventajas {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ventaja {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1.1rem;
  }
  .ventaja__icono {
    flex: none;
    margin-bottom: 0;
    width: 46px; height: 46px;
  }
  .ventaja__icono svg { width: 22px; height: 22px; }
  .ventaja__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .ventaja__texto h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
  .ventaja__texto p  { margin: 0; font-size: .88rem; line-height: 1.5; }
}

/* ==========================================================================
   Galería de la ficha: carrusel horizontal de miniaturas (soporta N fotos).
   min-width:0 en la cadena de contenedores es lo que hace que el scroll
   horizontal se active en lugar de expandir la columna del grid. Sin esto,
   el min-content del flex = suma de TODAS las miniaturas y la columna crece
   hasta desbordar (bug clásico de flex/grid + overflow horizontal).
   ========================================================================== */
.galeria { min-width: 0; }
.galeria__thumbs-wrap {
  position: relative;
  margin-top: .8rem;
  overflow: hidden;   /* impide que las flechas o el scroll se salgan del contenedor */
  min-width: 0;
  width: 100%;
}
.galeria__thumbs {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 4px;
  scroll-snap-type: x proximity;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

.galeria__thumbs.is-arrastrando {
  cursor: grabbing;
  scroll-behavior: auto;
}
.galeria__thumbs.is-arrastrando .galeria__thumb {
  pointer-events: none;   /* evita disparar click al soltar tras arrastrar */
}
.galeria__thumbs::-webkit-scrollbar { display: none; }
.galeria__thumb {
  flex: 0 0 96px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: border-color .2s ease, transform .2s ease;
  scroll-snap-align: start;
}


.galeria__thumb.is-activo { border-color: var(--teal); }
.galeria__thumb:hover { transform: translateY(-2px); }
.galeria__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;   /* el drag debe capturarse en el contenedor, no en <img> */
}

/* Botones de navegación del carrusel de miniaturas.
   Se muestran DENTRO del wrap (no sobresalen) y con degradado sutil detrás
   para que se lean encima de las miniaturas. Se ocultan (via [hidden] en JS)
   cuando no hay overflow. */
.galeria__thumbs-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gris-100);
  color: var(--marino);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: opacity .2s ease, transform .2s ease;
}
.galeria__thumbs-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.05); }
.galeria__thumbs-btn:disabled { opacity: 0; pointer-events: none; }
.galeria__thumbs-btn svg { width: 16px; height: 16px; }
.galeria__thumbs-btn--prev { left: 6px; }
.galeria__thumbs-btn--next { right: 6px; }
.galeria__thumbs-btn[hidden] { display: none; }

/* La imagen principal ahora es un enlace (para GLightbox) — heredar cursor */
.galeria__principal-link { display: block; cursor: zoom-in; }
.galeria__principal-link img { display: block; }

/* ==========================================================================
   Visor 360° (Pannellum) — se muestra debajo del diagrama de asientos.
   ========================================================================== */
.pano360-bloque {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--gris-100);
}
.pano360-bloque .cabecera-seccion { margin-bottom: 1.2rem; }
.pano360-bloque__hint {
  font-size: .88rem;
  color: var(--txt-suave);
  margin: .35rem 0 0;
}
.pano360 {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: #0b0d10;
  box-shadow: var(--sombra);
}
@media (max-width: 640px) {
  .pano360 { min-height: 260px; }
  .pano360-bloque { margin-top: 2rem; padding-top: 1.8rem; }
}
/* Overrides del skin de Pannellum para coherencia visual con la marca */
.pnlm-ui .pnlm-load-box p,
.pnlm-ui .pnlm-load-box { color: #fff; }
.pnlm-ui .pnlm-load-box .pnlm-lbar { background: rgba(255,255,255,.15); }
.pnlm-ui .pnlm-load-box .pnlm-lbar-fill { background: var(--teal); }

/* ═══════════════════════════════════════════════════════════════════
   Lightbox (GLightbox) — tira de miniaturas propia en pantalla completa
   GLightbox no incluye miniaturas; main.js inyecta .gl-tira al abrir.
   ─────────────────────────────────────────────────────────────────── */
.glightbox-container.cid-con-tira .gslider { height: calc(100% - 96px); }
.glightbox-container.cid-con-tira .gslide-image img { max-height: calc(100vh - 120px) !important; }

.gl-tira {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 999999;
  display: flex;
  gap: .5rem;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(1, 28, 63, .85), rgba(1, 28, 63, 0));
}
.gl-tira::-webkit-scrollbar { display: none; }

.gl-tira__thumb {
  flex: 0 0 88px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--trans), border-color var(--trans), transform var(--trans);
}
.gl-tira__thumb:hover { opacity: .9; transform: translateY(-2px); }
.gl-tira__thumb.is-activo { opacity: 1; border-color: var(--teal-claro); }
.gl-tira__thumb:focus-visible { outline: 2px solid var(--teal-claro); outline-offset: 2px; }
.gl-tira__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

@media (max-width: 560px) {
  .glightbox-container.cid-con-tira .gslider { height: calc(100% - 78px); }
  .gl-tira { gap: .4rem; padding-inline: .6rem; }
  .gl-tira__thumb { flex-basis: 64px; height: 46px; }
}