/* ============================================================
   PROLINE TAXI — main.css
   Dirección de arte: editorial de chófer de lujo. Negro/marrón/oro,
   Fraunces serif, cero radius, oro en líneas finas — no el patrón
   "SaaS azul con esquinas redondeadas" del kit genérico.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:         #0E0C09;  /* negro cálido — fondo base */
  --coffee:      #1C1510;  /* marrón oscuro — secciones alternas */
  --bark:        #33271A;  /* marrón medio — bordes, paneles */
  --gold:        #C6A15B;  /* oro viejo — acento principal */
  --gold-bright: #E3C77E;  /* oro claro — hover sobre fondo oscuro */
  --gold-dark:   #A9843F;  /* oro quemado — hover sobre botón sólido */
  --cream:       #F2EAD9;  /* marfil — texto sobre fondo oscuro */
  --cream-dim:   rgba(242,234,217,.62);
  --hair:        rgba(198,161,91,.22);
  --hair-strong: rgba(198,161,91,.45);
  --ink-05:      rgba(14,12,9,.05);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --wrap: 1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}
a:focus-visible,button:focus-visible{outline:1px solid var(--gold-bright);outline-offset:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ── utilidades tipográficas ── */
.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
}
.display{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 100,"SOFT" 0;
  font-weight:380;
  line-height:1.06;
  letter-spacing:-.01em;
}
.hairline-top{border-top:1px solid var(--hair)}
.hairline-bottom{border-bottom:1px solid var(--hair)}
.gold-gradient-text{
  background:linear-gradient(120deg, var(--gold), var(--gold-bright) 55%, #F4E4BC);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── reveal-on-scroll (activado desde footer.php) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important} }

/* ── BOTONES ── */
.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:15px 32px;
  border:1px solid var(--gold);
  transition:background .25s,color .25s,border-color .25s;
  cursor:pointer;
}
.btn:hover{background:transparent;color:var(--gold-bright);border-color:var(--gold-bright)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--hair-strong)}
.btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.btn-sm{
  background:var(--gold);color:var(--ink);border:none;font-family:var(--font-body);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:11px 22px;cursor:pointer;
  transition:background .2s;
}
.btn-sm:hover{background:var(--gold-dark)}
.btn-ghost-sm{
  background:transparent;border:1px solid rgba(242,234,217,.25);color:var(--cream-dim);
  font-family:var(--font-body);font-size:.78rem;font-weight:600;padding:11px 20px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.btn-ghost-sm:hover{border-color:var(--cream-dim);color:var(--cream)}

/* ── TOPBAR ── */
.topbar{font-size:.72rem;letter-spacing:.06em;color:var(--cream-dim);border-bottom:1px solid var(--hair);background:var(--coffee)}
.topbar-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;align-items:center;
  min-height:38px;gap:16px;flex-wrap:wrap;
}
.topbar-left{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.topbar-right{display:flex;gap:20px;align-items:center}
.tb-i{display:inline-flex;align-items:center;gap:6px}
.topbar-badge{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}
.topbar a{color:var(--gold);transition:color .2s}
.topbar a:hover{color:var(--gold-bright)}

/* ── HEADER / NAV ── */
/* ⚠️ backdrop-filter NO va en <header>: un elemento con backdrop-filter crea
   su propio contexto de apilamiento y atrapa a los hijos absolutos que se
   salen de su caja — era lo que dejaba el mega-menú por debajo del
   contenido. El blur va en un pseudo-elemento (mismo efecto, sin el daño). */
header{position:sticky;top:0;z-index:9999;border-bottom:1px solid var(--hair)}
header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(14,12,9,.94);backdrop-filter:blur(10px);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:40px;width:auto;display:block}
footer .logo img{height:34px}

header nav{display:flex;gap:32px;align-items:center;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
header nav a{color:var(--cream-dim);transition:color .2s;padding:6px 0}
header nav a:hover,header nav a.active{color:var(--gold-bright)}
.header-cta{background:var(--gold);color:var(--ink)!important;padding:12px 24px;font-weight:700}
.header-cta:hover{background:var(--gold-bright);color:var(--ink)!important}

.mobile-menu-btn{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:6px}

/* ── MENÚ MÓVIL: panel pantalla completa, todo visible, scroll ── */
.mobile-nav{
  display:none;position:fixed;inset:0;top:78px;z-index:9998;
  background:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-nav.open{display:block}
.mnav-scroll{padding:20px 28px 40px}
.mnav-top{display:flex;flex-direction:column;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:18px}
.mnav-top a{
  padding:13px 0;color:var(--cream-dim);font-size:.9rem;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:1px solid var(--hair);
}
.mnav-top a:last-child{border-bottom:0}
.mnav-top a.active{color:var(--gold-bright)}
.mnav-h{
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:22px 0 10px;
}
.mnav-grid ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0}
.mnav-grid li a{
  display:block;padding:11px 6px;color:var(--cream-dim);font-size:.84rem;
  border-bottom:1px solid var(--hair);
}
.mnav-grid li a:hover,.mnav-grid li a:active{color:var(--gold-bright);background:rgba(198,161,91,.06)}
.mnav-actions{margin-top:28px;display:flex;flex-direction:column;gap:10px}

@media (max-width:900px){
  header nav{display:none}
  .mobile-menu-btn{display:block}
}

/* ── FONDO DEL HERO: rutas + pois ──
   El pulso viaja en oro DISCRETO (sin glow) — el amarillo real del logo
   (#FCC91C) queda reservado en exclusiva al destello de los pois cuando
   el pulso pasa por ellos. Jerarquía: la luz viaja, el destino se
   enciende. Los delays vienen calculados por longitud de arco desde
   hero-art.php (generado). */
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* glow errante — el degradado que "rebota" por el hero (técnica FareBookings) */
@property --gx1 { syntax: '<percentage>'; inherits: true; initial-value: 14%; }
@property --gy1 { syntax: '<percentage>'; inherits: true; initial-value: 24%; }
.hero-glow{
  position:absolute;inset:-10%;
  background:radial-gradient(920px circle at var(--gx1) var(--gy1), rgba(198,161,91,.19), transparent 64%);
  animation:glow-wander 30s cubic-bezier(.36,.07,.64,.95) infinite;
}
@keyframes glow-wander{
  0%   { --gx1: 14%; --gy1: 24%; }
  16%  { --gx1: 58%; --gy1: 12%; }
  31%  { --gx1: 84%; --gy1: 44%; }
  44%  { --gx1: 50%; --gy1: 34%; }
  60%  { --gx1: 20%; --gy1: 70%; }
  76%  { --gx1: 66%; --gy1: 84%; }
  90%  { --gx1: 86%; --gy1: 56%; }
  100% { --gx1: 14%; --gy1: 24%; }
}

.hero-routes{position:absolute;inset:0;width:100%;height:100%}
.route-pulse{
  fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;opacity:.85;
  animation-name:route-flow;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes route-flow{to{stroke-dashoffset:0}}

/* poi + puntito: tenues por defecto, destello amarillo al paso del pulso */
.rnode{
  color:rgba(198,161,91,.38);
  animation-name:node-flash;animation-timing-function:linear;animation-iteration-count:infinite;
}
.ndot{fill:currentColor}
@keyframes node-flash{
  0%,100%{color:rgba(198,161,91,.38);filter:none}
  1.4%{color:#FCC91C;filter:drop-shadow(0 0 7px rgba(252,201,28,.85))}
  4.5%{color:rgba(198,161,91,.38);filter:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-glow{animation:none}
  .route-pulse{display:none}
  .rnode{animation:none}
}

/* ── ANIMACIÓN "ENTRA CONDUCIENDO" ──
   El stage entero se desliza desde fuera de pantalla (derecha) y frena;
   las ruedas (clones circulares superpuestos) giran EXACTAMENTE con el
   mismo easing y duración, y frenan con el coche. -830deg ≈ las vueltas
   reales para la distancia recorrida con este diámetro de rueda. */
.drive-in{
  opacity:0;transform:translateX(115%);
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.6s cubic-bezier(.16,1,.3,1);
}
.drive-in.in{opacity:1;transform:translateX(0)}
.drive-in .wheel-spin{transform:rotate(0deg)}
.drive-in.in .wheel-spin{animation:wheel-roll 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wheel-roll{to{transform:rotate(-830deg)}}
@media (prefers-reduced-motion:reduce){
  .drive-in{opacity:1;transform:none;transition:none}
  .drive-in.in .wheel-spin{animation:none}
}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;padding:100px 0 80px;z-index:1}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,4.2rem);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;margin:24px 0 28px}
.hero h1 em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.hero-lede{font-size:1rem;color:var(--cream-dim);max-width:46ch;margin-bottom:40px}
.hero-lede strong{color:var(--cream);font-weight:500}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-tel{font-family:var(--font-display);font-size:1.1rem;font-style:italic;color:var(--cream-dim);transition:color .2s}
.hero-tel:hover{color:var(--gold-bright)}

.photo-frame{position:relative}
.photo-frame::after{content:"";position:absolute;inset:0;transform:translate(14px,14px);border:1px solid var(--hair-strong);pointer-events:none;z-index:-1}
.duotone{position:relative;background:linear-gradient(160deg,#3a2c1c 0%,#14100b 70%);aspect-ratio:3/4;overflow:hidden}
.duotone img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.4) contrast(1.06) brightness(.82);opacity:.92;
  animation:kenburns 24s ease-in-out infinite alternate;transform-origin:52% 42%}
@keyframes kenburns{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.09) translate(-1.4%,-1%)}
}
@media (prefers-reduced-motion:reduce){ .duotone img{animation:none} }
.duotone::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,12,9,0) 55%,rgba(14,12,9,.55) 100%);pointer-events:none}
.duotone.img-missing img{display:none}
.photo-caption{position:absolute;left:18px;bottom:16px;z-index:2;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-dim)}

/* ── PANEL DEL WIDGET ETO ── */
.quote{background:var(--coffee);padding:100px 0}
.quote .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.quote h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:20px 0 22px}
.quote p{color:var(--cream-dim);max-width:42ch}
.quote-steps{margin-top:36px}
.qstep{display:flex;gap:20px;align-items:baseline;padding:15px 0;border-top:1px solid var(--hair)}
.qstep:last-child{border-bottom:1px solid var(--hair)}
.qstep i{font-style:normal;font-family:var(--font-display);font-size:1rem;color:var(--gold);min-width:28px}
.qstep span{font-size:.88rem;color:var(--cream-dim)}

.widget-shell{border:1px solid var(--hair-strong);position:relative;background:var(--ink);padding:6px}
.widget-shell::before{
  content:"LIVE BOOKING — app.prolinetaxi.com";position:absolute;top:-9px;left:24px;
  background:var(--coffee);padding:0 12px;font-size:.6rem;letter-spacing:.26em;color:var(--gold);
}
.widget-shell-inner{padding:38px 28px 22px}
/* Fondo del iframe TRANSPARENTE: si el documento interno del widget no
   pinta fondo propio, se ve nuestro panel oscuro detrás (lo que queremos).
   Si aún se ve blanco, lo pinta el body interno del widget de ETO y se
   cambia desde SU panel de configuración (donde se pusieron los beige/dorado). */
.widget-shell iframe{background:transparent}
.widget-note{padding:0 28px 22px;font-size:.72rem;color:rgba(242,234,217,.4);font-style:italic}

/* ── BANDA DE CÓDIGOS ── */
.codes{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;padding:18px 0}
.codes-track{display:flex;gap:64px;width:max-content;animation:slide 42s linear infinite}
.codes-track span{font-family:var(--font-display);font-variation-settings:"opsz" 40;font-size:1rem;letter-spacing:.3em;color:var(--cream-dim);white-space:nowrap}
.codes-track span b{color:var(--gold);font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .codes-track{animation:none} }

/* ── ROUTE BOARD (elemento firma) ── */
.board{padding:110px 0}
.board-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:50px;flex-wrap:wrap}
.board h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:20px;max-width:14ch}
.board-note{font-size:.8rem;color:var(--cream-dim);max-width:28ch;text-align:right;border-right:1px solid var(--hair-strong);padding-right:20px}
.route-card{
  display:grid;grid-template-columns:minmax(190px,3fr) 4fr 2fr 2fr auto;
  align-items:center;gap:24px;padding:24px 6px;border-top:1px solid var(--hair);
  transition:background .25s;
}
.route-card:last-of-type{border-bottom:1px solid var(--hair)}
.route-card:hover{background:var(--ink-05)}
.route-code{font-family:var(--font-display);font-variation-settings:"opsz" 90;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:.05em;white-space:nowrap}
.route-code b{color:var(--gold);font-weight:300;padding:0 7px}
.route-dest{font-size:.88rem;color:var(--cream-dim)}
.route-dest strong{display:block;color:var(--cream);font-weight:500;letter-spacing:.03em}
.route-meta{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.route-meta b{display:block;font-size:.98rem;letter-spacing:.01em;color:var(--cream);font-weight:500;text-transform:none;font-family:var(--font-display);font-style:italic}
.route-cta{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap;transition:color .2s}
.route-card:hover .route-cta{color:var(--gold-bright)}
.board-foot{margin-top:24px;font-size:.7rem;color:rgba(242,234,217,.38)}

/* ── SERVICIOS (sección crema) ── */
.services{background:var(--cream);color:var(--ink);padding:110px 0}
.services .eyebrow{color:#8a6b2f}
.services h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:20px 0 60px;color:var(--ink);max-width:20ch}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(14,12,9,.18)}
.trust-item{padding:40px 32px 46px;border-right:1px solid rgba(14,12,9,.14)}
.trust-item:first-child{padding-left:0}
.trust-item:last-child{border-right:0;padding-right:0}
.trust-item h3{font-family:var(--font-display);font-variation-settings:"opsz" 50;font-weight:450;font-size:1.4rem;margin-bottom:14px;color:var(--ink)}
.trust-item p{font-size:.9rem;color:rgba(14,12,9,.68)}
.trust-item a{display:inline-block;margin-top:20px;font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8a6b2f;border-bottom:1px solid rgba(138,107,47,.4);padding-bottom:4px;transition:color .2s,border-color .2s}
.trust-item a:hover{color:var(--ink);border-color:var(--ink)}

/* ── FLOTA ── */
.fleet{background:var(--coffee);padding:110px 0 90px;overflow:hidden}
.fleet-head{max-width:760px;margin:0 auto 60px;text-align:center;padding:0 28px}
.fleet h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:20px 0 12px}
.fleet-sub{
  font-family:var(--font-display);font-style:italic;font-weight:380;
  font-size:clamp(1.15rem,2.3vw,1.6rem);color:var(--gold-bright);
}
/* escenario del coche: tamaño natural (max 880px), centrado, NUNCA
   ampliado a todo el ancho. aspect-ratio = proporción real del PNG para
   que las ruedas/parche en % alineen pixel-perfect a cualquier tamaño. */
.car-stage{position:relative;max-width:880px;margin:0 auto;aspect-ratio:951/300;padding:0}
.car-body{width:100%;height:auto;display:block}
.wheel-spin{position:absolute;width:11.99%;top:60%;height:auto;will-change:transform}
.wheel-front{left:6.31%}
.wheel-rear{left:62.67%}
.door-patch{position:absolute;left:62.36%;top:59%;width:12.62%;height:auto}
.car-shadow{
  position:absolute;left:3%;right:5%;bottom:-3%;height:9%;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(6px);
}
.fleet-desc{max-width:640px;margin:56px auto 0;text-align:center;color:var(--cream-dim);padding:0 28px}
.spec-row{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.spec-row .spec{padding:24px 22px;border-right:1px solid var(--hair);text-align:center}
.spec-row .spec:last-child{border-right:0}
.spec-row .spec b{display:block;font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--cream);margin-bottom:5px;font-weight:400}
.spec-row .spec span{color:var(--cream-dim);font-size:.72rem;letter-spacing:.1em;text-transform:none}

/* ── RESEÑAS ── */
.reviews{padding:120px 0}
.reviews-head{text-align:center;margin-bottom:56px}
.reviews h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin-top:20px}

/* Carrusel infinito con fundido a ambos lados — misma técnica que .codes,
   aplicada a tarjetas con texto (se pausa al pasar el ratón para poder leer) */
.review-carousel{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.review-track{display:flex;width:max-content;animation:review-scroll 70s linear infinite}
.review-carousel:hover .review-track{animation-play-state:paused}
.review-card{
  width:min(78vw,400px);flex-shrink:0;padding:40px 36px;
  border-right:1px solid var(--hair);
}
.review-card q{
  display:block;font-family:var(--font-display);font-variation-settings:"opsz" 40,"SOFT" 60;
  font-style:italic;font-weight:350;font-size:1.08rem;line-height:1.55;color:var(--cream);
  quotes:"\201C" "\201D";min-height:6.2em;
}
@keyframes review-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .review-track{animation:none;overflow-x:auto} }
.review-by{margin-top:24px;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-dim)}
.review-by b{color:var(--gold);font-weight:600}
.stars{color:var(--gold);letter-spacing:.28em;font-size:.78rem;margin-bottom:16px}

/* ── CTA FINAL ── */
.cta-final{border-top:1px solid var(--hair);padding:120px 0;text-align:center}
.cta-final h2{font-size:clamp(2rem,4.2vw,3.4rem);max-width:22ch;margin:22px auto 18px}
.cta-final p{color:var(--cream-dim);margin-bottom:42px}
.cta-final .hero-actions{justify-content:center}

/* ── FOOTER ── */
footer{background:var(--coffee);border-top:1px solid var(--hair);padding:76px 0 34px;font-size:.85rem}
.footer-grid{max-width:var(--wrap);margin:0 auto;padding:0 28px 60px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:46px}
.footer-brand p{color:var(--cream-dim);font-weight:300;max-width:34ch;margin:16px 0 20px}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact a{display:flex;align-items:center;gap:8px;color:var(--cream-dim);font-size:.86rem;transition:color .2s}
.footer-contact a:hover{color:var(--gold-bright)}
.footer-review-link{color:var(--gold)!important;font-weight:600}
.footer-hours{
  display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--hair);font-size:.82rem;color:var(--cream-dim);
}
.footer-hours svg{color:var(--gold);flex-shrink:0}
.footer-col h4{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:20px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:11px}
.footer-col a{color:var(--cream-dim);transition:color .2s;font-weight:300;font-size:.88rem}
.footer-col a:hover{color:var(--gold-bright)}
.footer-bottom{
  max-width:var(--wrap);margin:0 auto;padding:26px 28px 0;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.72rem;color:rgba(242,234,217,.42);letter-spacing:.04em;
}
.footer-license{display:flex;align-items:center;gap:6px}

/* ── WHATSAPP FLOAT ── */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:998;display:flex;align-items:center;gap:10px;cursor:pointer}
.whatsapp-btn{width:56px;height:56px;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35);position:relative;z-index:1}
/* el pulso vive DENTRO del botón cuadrado (inset:0), así siempre coincide
   con su tamaño exacto sin importar cuánto mida la etiqueta de al lado */
.whatsapp-pulse{position:absolute;inset:0;background:#25D366;opacity:.5;animation:wa-pulse 2.2s ease-out infinite;z-index:-1}
.whatsapp-label{
  background:var(--ink);border:1px solid var(--hair-strong);color:var(--cream);
  font-size:.78rem;padding:9px 16px;white-space:nowrap;opacity:0;transform:translateX(6px);
  transition:opacity .2s,transform .2s;pointer-events:none;
}
.whatsapp-float:hover .whatsapp-label{opacity:1;transform:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

/* ── BACK TO TOP ── */
.back-to-top{
  display:none;position:fixed;bottom:100px;right:28px;z-index:997;width:44px;height:44px;
  background:var(--ink);border:1px solid var(--hair-strong);color:var(--gold);cursor:pointer;
  align-items:center;justify-content:center;transition:border-color .2s,color .2s;
}
.back-to-top.show{display:flex}
.back-to-top:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* ── COOKIE BANNER ── */
.cookie-banner{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--coffee);border-top:1px solid var(--hair-strong);
  padding:18px 24px;box-shadow:0 -8px 32px rgba(0,0,0,.35);
}
.cookie-banner.show{display:block}
.cookie-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-text{flex:1;min-width:280px;font-size:.84rem;color:var(--cream-dim);line-height:1.6}
.cookie-text strong{color:var(--cream)}
.cookie-text a{color:var(--gold);font-weight:600}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}

/* ── RESPONSIVE ── */
@media (max-width:960px){
  .hero .wrap,.quote .wrap{grid-template-columns:1fr;gap:44px}
  .spec-row{grid-template-columns:1fr 1fr}
  .spec-row .spec:nth-child(2){border-right:0}
  .spec-row .spec:nth-child(1),.spec-row .spec:nth-child(2){border-bottom:1px solid var(--hair)}
  .hero{padding:64px 0 56px}
  .svc-grid{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid rgba(14,12,9,.14);padding:32px 0}
  .trust-item:last-child{border-bottom:0}
  .rev-grid{grid-template-columns:1fr}
  .review-card{width:82vw;padding:32px 24px}
  .route-card{grid-template-columns:1fr auto;row-gap:8px;padding:20px 2px}
  .route-dest{grid-column:1/-1}
  .route-meta:nth-of-type(4){display:none}
  .board-note{text-align:left;border-right:0;border-left:1px solid var(--hair-strong);padding:0 0 0 18px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .whatsapp-label{display:none}
}

/* ── TRUST STRIP (book-now y páginas de checkout) ── */
.page-hero{padding:120px 0 60px;text-align:center}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);margin:20px 0 16px}
.page-hero p{color:var(--cream-dim);max-width:46ch;margin:0 auto}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:50px 0 70px}
.trust-strip-item{padding:22px 18px;text-align:center;border-right:1px solid var(--hair)}
.trust-strip-item:last-child{border-right:0}
.trust-strip-item b{display:block;font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--cream);margin-bottom:4px}
.trust-strip-item span{font-size:.72rem;color:var(--cream-dim);letter-spacing:.02em}
.help-block{text-align:center;margin-top:40px;padding-top:40px;border-top:1px solid var(--hair)}
.help-block p{color:var(--cream-dim);margin-bottom:18px;font-size:.9rem}
@media (max-width:700px){
  .trust-strip{grid-template-columns:1fr 1fr}
  .trust-strip-item:nth-child(2){border-right:0}
  .trust-strip-item:nth-child(1),.trust-strip-item:nth-child(2){border-bottom:1px solid var(--hair)}
}

/* ── ÚLTIMOS POSTS DEL BLOG (home) ── */
.blog-latest{background:var(--coffee);padding:110px 0}
.blog-latest .eyebrow{text-align:left}
.blog-latest h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:20px 0 50px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.blog-card{background:var(--coffee);padding:0}
.blog-card .duotone{aspect-ratio:16/10}
.blog-card-body{padding:26px 28px 32px}
.blog-card-date{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block}
.blog-card h3{font-family:var(--font-display);font-variation-settings:"opsz" 50;font-weight:450;font-size:1.2rem;line-height:1.3;margin-bottom:10px;color:var(--cream)}
.blog-card p{font-size:.85rem;color:var(--cream-dim)}
.blog-latest-foot{margin-top:44px;text-align:center}
@media (max-width:900px){ .blog-grid{grid-template-columns:1fr} }

/* ── CTA de reseñas bajo el carrusel ── */
.reviews-cta{margin-top:46px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── PÍLDORA DE CONFIANZA sobre el widget (hero) ── */
.trust-pill-wrap{display:flex;justify-content:center;position:relative;z-index:3;margin-bottom:-17px}
.trust-pill{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(20,16,11,.92);backdrop-filter:blur(8px);
  border:1px solid var(--hair-strong);
  padding:9px 18px 9px 10px;
  transition:border-color .2s;
}
.trust-pill:hover{border-color:var(--gold-bright)}
.avatar-stack{display:flex}
.avatar-stack i{
  font-style:normal;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;color:var(--cream);
  border:1.5px solid var(--ink);margin-left:-8px;
}
.avatar-stack i:first-child{margin-left:0}
.avatar-stack i:nth-child(1){background:#5a4326}
.avatar-stack i:nth-child(2){background:#7a5c32}
.avatar-stack i:nth-child(3){background:#3f3222}
.avatar-stack i:nth-child(4){background:#8a6b2f}
.avatar-stack i:nth-child(5){background:#4a3a26}
.tp-text{font-size:.82rem;color:var(--cream);letter-spacing:.02em}
.tp-text b{color:var(--gold-bright);font-weight:700}
.tp-text em{font-style:normal;color:rgba(242,234,217,.35);padding:0 8px}
.widget-shell.no-tag::before{display:none}

/* ── PÁGINA DE CONTACTO ── */
.field{margin-bottom:24px;position:relative}
.field label{display:block;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.field input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-strong);
  color:var(--cream);font-family:var(--font-body);font-weight:300;font-size:1rem;padding:9px 2px;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(242,234,217,.32)}
.field input:focus{outline:none;border-bottom-color:var(--gold-bright)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:640px){ .field-row{grid-template-columns:1fr;gap:0} }
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;padding-top:40px}
.contact-info h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:18px 0 22px}
.contact-list{display:flex;flex-direction:column}
.contact-list a,.contact-list div{
  display:flex;align-items:center;gap:12px;padding:15px 2px;
  border-top:1px solid var(--hair);color:var(--cream-dim);font-size:.92rem;transition:color .2s;
}
.contact-list > :last-child{border-bottom:1px solid var(--hair)}
.contact-list a:hover{color:var(--gold-bright)}
.contact-list svg{color:var(--gold);flex-shrink:0}
.contact-form{border:1px solid var(--hair-strong);padding:40px 36px;background:var(--coffee)}
.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-strong);
  color:var(--cream);font-family:var(--font-body);font-weight:300;font-size:1rem;padding:9px 2px;
}
.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold-bright)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C6A15B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.field select option{background:var(--coffee);color:var(--cream)}
.field textarea{min-height:120px;resize:vertical}
/* honeypot: fuera de pantalla, jamás display:none (los bots lo detectan) */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.form-note{padding:14px 18px;margin-bottom:26px;font-size:.9rem;border:1px solid}
.form-note.ok{border-color:rgba(120,190,120,.45);color:#a8d5a8;background:rgba(60,120,60,.12)}
.form-note.err{border-color:rgba(220,120,120,.45);color:#e0b0b0;background:rgba(140,60,60,.12)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:44px} .contact-form{padding:32px 24px} }

/* ── HERO CON IMAGEN (páginas principales, no la home) ── */
.page-hero-img{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.page-hero-img picture,.page-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* oscurecido SUTIL: un velo general ligero + refuerzo arriba (texto del
   nav/topbar) + fundido al fondo --ink abajo para integrar la sección */
.ph-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,.22) 42%, rgba(14,12,9,.34) 72%, var(--ink) 100%);
}
.ph-content{
  position:relative;z-index:1;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:170px 28px 64px;text-align:center;
}
.ph-content h1{font-size:clamp(2rem,4vw,3.1rem);margin:18px 0 12px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.ph-content p{color:var(--cream-dim);max-width:56ch;margin:0 auto;text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:640px){ .page-hero-img{min-height:340px} .ph-content{padding-top:130px} }

/* ── HERO DE RUTA (páginas bristol-to-X: sin imagen, identidad propia
   de departure board — y LCP instantáneo en las páginas SEO clave) ── */
.route-hero{position:relative;overflow:hidden;padding:150px 0 70px;text-align:center;border-bottom:1px solid var(--hair)}
.route-hero .route-code-big{
  font-family:var(--font-display);font-variation-settings:"opsz" 144;
  font-size:clamp(3rem,9vw,6.5rem);line-height:1;letter-spacing:.04em;color:var(--cream);
}
.route-hero .route-code-big b{color:var(--gold);font-weight:300;padding:0 14px}
.route-hero h1{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:22px auto 12px;max-width:24ch}
.route-hero p{color:var(--cream-dim);max-width:52ch;margin:0 auto}
.route-facts{display:flex;justify-content:center;gap:0;margin-top:44px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);flex-wrap:wrap}
.route-facts div{padding:18px 34px;border-right:1px solid var(--hair);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.route-facts div:last-child{border-right:0}
.route-facts b{display:block;font-family:var(--font-display);font-style:italic;font-size:1.15rem;letter-spacing:.01em;color:var(--gold-bright);text-transform:none;font-weight:400;margin-top:3px}

/* ── PROSA DE ARTÍCULO / PÁGINA ── */
.prose{max-width:720px;margin:0 auto;color:var(--cream-dim);font-size:1rem}
.prose h2{font-family:var(--font-display);font-variation-settings:"opsz" 60;font-weight:420;font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--cream);margin:52px 0 18px;line-height:1.25}
.prose p{margin-bottom:20px}
.prose strong{color:var(--cream);font-weight:500}
.prose a{color:var(--gold);border-bottom:1px solid var(--hair-strong)}
.prose a:hover{color:var(--gold-bright)}
.prose ul{margin:0 0 20px 20px}
.prose li{margin-bottom:10px}

/* ── FAQ (acordeón — el JS toggleFaq ya vive en footer.php) ── */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-top:1px solid var(--hair)}
.faq-item:last-child{border-bottom:1px solid var(--hair)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;color:var(--cream);
  font-family:var(--font-display);font-variation-settings:"opsz" 40;font-size:1.08rem;font-weight:420;
}
.faq-q::after{content:"+";font-family:var(--font-body);font-weight:300;font-size:1.5rem;color:var(--gold);transition:transform .25s;flex-shrink:0}
.faq-q.open::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--cream-dim);font-size:.95rem}
.faq-a.open{max-height:400px}
.faq-a p{padding:0 4px 24px;max-width:65ch}
.faq-a a{color:var(--gold)}

/* ── estado vacío del blog ── */
.blog-empty{text-align:center;padding:70px 28px;border:1px solid var(--hair);max-width:640px;margin:0 auto}
.blog-empty p{color:var(--cream-dim);margin:14px 0 30px}

/* ══ NAVEGACIÓN AMPLIADA (mega-menú + footer sitemap) ══ */

/* topbar: ahora con Corporate / Partner / Log in */
.topbar-right{gap:18px}
.tb-phone{font-weight:600}

/* ── MEGA-MENÚ ── */
/* .has-mega NO lleva position:relative a propósito: así el panel se ancla
   al <header> (que es sticky = posicionado) y ocupa todo el ancho, en vez
   de centrarse sobre el enlace y salirse de pantalla por la izquierda. */
.has-mega > a{
  display:inline-flex;align-items:center;gap:5px;
  /* el enlace ocupa TODA la altura del header: sin esto queda un hueco
     entre el enlace y el panel, se pierde el :hover al bajar el ratón y
     el menú se cierra antes de llegar. */
  padding:29px 0;
}
.caret{font-size:.6em;opacity:.7;transition:transform .2s}
.has-mega:hover .caret,
.has-mega.open .caret{transform:rotate(180deg)}
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--coffee);
  border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:200;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr 1.15fr .95fr;gap:0;
}
.mega-col{padding:30px 28px;border-right:1px solid var(--hair)}
.mega-col:last-child{border-right:0}
.mega-col h4{
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:16px;
}
.mega-col ul{list-style:none}
.mega-col li{margin-bottom:9px}
.mega-col li a{
  color:var(--cream-dim);font-size:.84rem;letter-spacing:0;text-transform:none;
  font-weight:300;transition:color .16s,padding-left .16s;display:block;padding:2px 0;
}
.mega-col li a:hover{color:var(--gold-bright);padding-left:5px}
.mega-cta{background:rgba(198,161,91,.05)}
.mega-cta p{font-size:.8rem;color:var(--cream-dim);text-transform:none;letter-spacing:0;font-weight:300;margin-bottom:18px;line-height:1.6}
.mega-cta .btn-sm{display:inline-block;text-transform:none;letter-spacing:.02em}
.mega-all{
  display:block;margin-top:16px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.mega-all:hover{color:var(--gold-bright)}

/* ── FOOTER SITEMAP (5 columnas) ── */
.footer-grid{grid-template-columns:1.6fr 1fr 1.15fr 1.25fr 1fr;gap:40px 32px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}

/* ── MENÚ MÓVIL CON SECCIONES ── */


/* ── RUTAS RELACIONADAS (pie de cada página de ruta) ── */
.related{border-top:1px solid var(--hair);padding:70px 0 20px}
.related h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:16px 0 34px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair)}
.related-grid a{
  background:var(--ink);padding:22px 20px;color:var(--cream-dim);font-size:.86rem;
  transition:background .2s,color .2s;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.related-grid a:hover{background:var(--coffee);color:var(--gold-bright)}
.related-grid a::after{content:"\2192";color:var(--gold);opacity:.6}

@media (max-width:1100px){
  .mega-inner{grid-template-columns:1fr 1fr}
  .mega-col{border-bottom:1px solid var(--hair)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px 28px}
}
@media (max-width:960px){
  .related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .topbar-right a:not(.tb-phone){display:none}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr}
}

/* Forzar todo el contenido de la página por debajo del header sticky.
   Sin esto, secciones con position:relative o animaciones crean contextos
   de apilamiento que compiten con el mega-menú del header. */
.page-hero-img{position:relative;z-index:1}
.hero-art{z-index:0}
.quote,.board,.services,.fleet,.reviews,.cta-final,.related,.route-hero{position:relative;z-index:1}