/* =============================================================================
   ROUTES OF PERU · info-pages.css
   Páginas informativas: Transfer (y luego Contáctenos / Nosotros).
   Ruta: wp-content/themes/routes-custom/assets/css/info-pages.css
   Paleta: crema / dorado / negro carbón. Namespaced con .transfer-page.
   ============================================================================= */

:root{
  --tf-gold:#C7B16E;
  --tf-gold-soft:#f7e7b5;
  --tf-gold-deep:#9c884b;
  --tf-ink:#101010;
  --tf-ink-2:#1a1a1a;
  --tf-cream:#f7f3ea;
  --tf-cream-2:#efe7d6;
  --tf-text:#23211c;
  --tf-muted:rgba(35,33,28,.66);
  --tf-line:rgba(199,177,110,.30);
  --tf-radius:20px;
  --tf-shadow:0 22px 60px rgba(16,16,16,.14);
  --tf-shadow-gold:0 18px 48px rgba(199,177,110,.22);
  --tf-ease:cubic-bezier(.16,1,.3,1);
  --tf-gap:clamp(24px,3.6vw,42px);
}

/* ---------------------------------------------------------------- base ---- */
.transfer-page{
  background:var(--tf-cream); color:var(--tf-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  /* overflow-x:clip evita el desborde horizontal SIN crear un contenedor de
     scroll propio (a diferencia de overflow-x:hidden, que forzaba overflow-y:auto
     y provocaba la doble barra de scroll / traba al bajar en móvil). */
  overflow-x:clip;
}
.transfer-page .container{ width:min(1200px, calc(100% - 36px)); margin-inline:auto; }
.transfer-page h1,.transfer-page h2,.transfer-page h3{ margin:0; line-height:1.12; }

/* logo whatsapp + distintivo "en línea" (puntito verde pulsante) */
.tf-walogo{ flex-shrink:0; display:inline-block; vertical-align:middle; position:relative; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* contenedor del logo para anclar el punto */
.tf-btn--wa, .tf-mini-wa, .tf-card__wa, .tf-tariff-card__wa{ position:relative; }
.tf-btn--wa .tf-walogo::after,
.tf-mini-wa .tf-walogo::after,
.tf-card__wa .tf-walogo::after,
.tf-tariff-card__wa .tf-walogo::after{
  content:""; position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%;
  background:#3ee37a; box-shadow:0 0 0 2px #0c0c0c, 0 0 8px rgba(62,227,122,.9);
  animation:tfDotPulse 1.8s ease-in-out infinite;
}
@keyframes tfDotPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.35); opacity:.7; } }
@media (prefers-reduced-motion:reduce){ .tf-walogo::after{ animation:none !important; } }

/* reveal */
.transfer-page .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--tf-ease), transform .6s var(--tf-ease); }
.transfer-page .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .transfer-page .reveal{ opacity:1; transform:none; transition:none; } }

/* section heads */
.tf-sec-head{ max-width:760px; margin:0 auto 22px; text-align:center; }
.tf-sec-eyebrow{ display:inline-block; margin-bottom:8px; font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--tf-gold); }
.tf-sec-title{ font-size:clamp(25px,4vw,38px); font-weight:900; color:var(--tf-ink); letter-spacing:-.5px; }
.tf-sec-text{ margin:10px 0 0; color:var(--tf-muted); font-weight:500; }

/* =================================================================== BOTONES */
.tf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:999px;
  font-weight:900; letter-spacing:.3px; font-size:15px;
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--tf-ease), box-shadow .4s ease, border-color .4s ease, color .35s ease;
}
.tf-btn:active{ transform:scale(.97); }
.tf-btn--wa{
  color:var(--tf-gold-soft);
  background:linear-gradient(140deg,#151310 0%, #0c0c0c 100%);
  border-color:rgba(199,177,110,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(199,177,110,.10);
}
.tf-btn--wa::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(120deg, transparent 20%, rgba(199,177,110,.28) 50%, transparent 80%); transform:translateX(-120%); transition:opacity .35s ease; }
.tf-btn--wa:hover::before{ opacity:1; animation:tfShine 1.6s var(--tf-ease); }
@keyframes tfShine{ from{ transform:translateX(-120%);} to{ transform:translateX(120%);} }
.tf-btn--ghost{ color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); }
@media (hover:hover){
  .tf-btn--wa:hover{ transform:translateY(-3px); border-color:var(--tf-gold); box-shadow:0 18px 40px rgba(199,177,110,.30); color:#fff; }
  .tf-btn--ghost:hover{ border-color:var(--tf-gold); color:var(--tf-gold-soft); }
}

/* ================================================================ HERO ==== */
.tf-hero{
  position:relative; padding:clamp(120px,16vh,160px) 0 var(--tf-gap);
  min-height:100svh; display:flex; align-items:center; /* cubre toda la portada en PC y móvil */
  background:linear-gradient(180deg, #0c0c0c 0%, #141414 60%, #161616 100%);
  color:#fff; overflow:hidden; isolation:isolate;
}
.tf-hero__inner{ width:100%; }
/* base negra FIJA debajo de las imágenes: elimina el flash blanco entre slides */
.tf-hero__base{ position:absolute; inset:0; z-index:0; background:#0c0c0c; }
.tf-hero__slides{ position:absolute; inset:0; z-index:0; background:#0c0c0c; }
.tf-hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-color:#0c0c0c; /* respaldo: nunca blanco */
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s ease-in-out, transform 7s ease;
  will-change:opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.tf-hero__slide.is-active{ opacity:.48; transform:scale(1); }
.tf-hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,8,8,.82) 0%, rgba(10,10,10,.66) 45%, rgba(12,12,12,.92) 100%),
    radial-gradient(800px 360px at 18% 10%, rgba(199,177,110,.18), transparent 60%);
}
.tf-hero__orbs{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
/* orbes suaves (blur moderado para no cargar la GPU en móvil) */
.tf-orb{ position:absolute; border-radius:50%; opacity:.45; }
.tf-orb--1{ width:240px; height:240px; left:-60px; top:20%; background:radial-gradient(circle, rgba(199,177,110,.32), transparent 68%); animation:tfFloat 16s ease-in-out infinite; }
.tf-orb--2{ width:180px; height:180px; right:8%; top:8%; background:radial-gradient(circle, rgba(247,231,181,.22), transparent 68%); animation:tfFloat 13s ease-in-out infinite reverse; }
.tf-orb--3{ width:200px; height:200px; right:18%; bottom:-40px; background:radial-gradient(circle, rgba(199,177,110,.20), transparent 68%); animation:tfFloat 18s ease-in-out infinite; }
@keyframes tfFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(20px,-26px,0); } }
@media (prefers-reduced-motion:reduce){ .tf-orb{ animation:none; } }
.tf-hero__inner{ position:relative; z-index:2; }

.tf-eyebrow{ display:inline-block; margin-bottom:13px; padding:7px 16px; border-radius:999px; border:1px solid var(--tf-line); background:rgba(199,177,110,.12); font-size:12px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; color:var(--tf-gold-soft); }
.tf-hero__title{
  font-size:clamp(32px,6vw,56px); font-weight:900; letter-spacing:-1px;
  background:linear-gradient(92deg,#fff 30%, var(--tf-gold-soft) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.tf-hero__sub{ margin:15px 0 0; max-width:660px; color:rgba(255,255,255,.86); font-weight:500; font-size:clamp(15px,1.6vw,18px); }
.tf-hero__sub strong{ color:var(--tf-gold-soft); }

.tf-hero__perks{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.tf-hero__perks li{
  display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:14px;
  background:rgba(18,16,12,.62); border:1px solid rgba(255,255,255,.14);
  font-weight:700; font-size:14px; color:#fff;
  transition:transform .3s var(--tf-ease), border-color .3s ease, background .3s ease;
}
@media (hover:hover){ .tf-hero__perks li:hover{ transform:translateY(-3px); border-color:var(--tf-line); background:rgba(199,177,110,.12); } }
.tf-perk__ico{ font-size:16px; }
.tf-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.tf-hero__nota{ margin:18px 0 0; max-width:640px; padding:13px 18px; border-radius:14px; background:rgba(0,0,0,.4); border:1px dashed var(--tf-line); color:rgba(255,255,255,.88); font-size:14px; }
.tf-hero__nota strong{ color:var(--tf-gold-soft); }

/* ============================================================ MAP PRO ===== */
.tf-map-section{ padding:var(--tf-gap) 0; background:var(--tf-cream); }
.tf-mapwrap{ display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:stretch; }
.tf-map{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid rgba(199,177,110,.25);
  box-shadow:0 30px 70px rgba(16,16,16,.22);
  background:#0e0e0e;
}
.tf-map::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--tf-gold), transparent); opacity:.85; }
.tf-map__svg{ display:block; width:100%; height:auto; }
.tf-route-line{ stroke-dasharray:10 16; animation:tfDash 2.6s linear infinite; }
.tf-route-line--2{ animation-duration:3.2s; } .tf-route-line--3{ animation-duration:3.8s; }
@keyframes tfDash{ to{ stroke-dashoffset:-52; } }
.tf-pin-pulse{ transform-box:fill-box; transform-origin:center; animation:tfPulse 2.4s ease-in-out infinite; }
@keyframes tfPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:0; transform:scale(1.5); } }
.tf-wave{ stroke-dasharray:4 8; animation:tfDash 3s linear infinite; } .tf-wave--2{ animation-duration:4s; }
.tf-map-car circle{ filter:drop-shadow(0 0 6px rgba(199,177,110,.8)); }
@media (prefers-reduced-motion:reduce){ .tf-route-line,.tf-pin-pulse,.tf-wave,.tf-map-car *{ animation:none !important; } }

.tf-map__legend{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:14px; background:#121212; color:rgba(255,255,255,.85); font-size:12.5px; font-weight:700; border-top:1px solid rgba(199,177,110,.18); }
.tf-map__legend span{ display:inline-flex; align-items:center; gap:8px; }
.tf-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.tf-dot--origin{ background:var(--tf-gold); }
.tf-dot--dest{ background:#fff; border:2px solid var(--tf-gold); }
.tf-dot--route{ background:linear-gradient(90deg,var(--tf-gold),var(--tf-gold-soft)); }

/* tabla de distancias */
.tf-dist{
  background:linear-gradient(150deg,#0d0d0d,#1b1913); color:#fff;
  border:1px solid rgba(199,177,110,.25); border-radius:24px;
  padding:24px 22px; box-shadow:var(--tf-shadow); display:flex; flex-direction:column;
}
.tf-dist__title{
  font-size:18px; font-weight:900; color:var(--tf-gold-soft);
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1px solid rgba(199,177,110,.20);
}
.tf-dist__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.tf-dist__item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(199,177,110,.16);
  transition:transform .4s var(--tf-ease), border-color .35s ease, background .35s ease;
}
@media (hover:hover){ .tf-dist__item:hover{ transform:translateX(3px); border-color:var(--tf-line); background:rgba(199,177,110,.08); } }
.tf-dist__num{ width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; color:#0e0e0e; background:linear-gradient(180deg,var(--tf-gold),var(--tf-gold-soft)); }
.tf-dist__info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.tf-dist__info strong{ font-size:15px; color:#fff; }
.tf-dist__info small{ font-size:12px; color:rgba(255,255,255,.55); }
.tf-dist__data{ display:flex; flex-direction:column; gap:2px; text-align:right; }
.tf-dist__data em{ font-style:normal; font-size:12px; font-weight:800; color:var(--tf-gold-soft); white-space:nowrap; }
.tf-dist__note{ margin:14px 0 0; font-size:12.5px; color:rgba(255,255,255,.6); }

/* ================================================================ RATES === */
.tf-rates{ padding:var(--tf-gap) 0; background:linear-gradient(180deg,var(--tf-cream),var(--tf-cream-2)); }
.tf-table{ border-radius:var(--tf-radius); overflow:hidden; background:var(--tf-ink); color:#fff; box-shadow:var(--tf-shadow); border:1px solid rgba(199,177,110,.20); }
.tf-table__head,.tf-row{ display:grid; grid-template-columns:1.1fr 1fr 1.8fr .9fr .9fr; gap:12px; align-items:center; padding:18px 24px; }
.tf-table__head{ background:linear-gradient(135deg, rgba(199,177,110,.18), rgba(199,177,110,.06)); font-size:12px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--tf-gold-soft); border-bottom:1px solid rgba(199,177,110,.20); }
.tf-table__price-h{ text-align:left; }
.tf-row{ border-bottom:1px solid rgba(255,255,255,.06); transition:background .2s ease; }
.tf-row:last-child{ border-bottom:0; }
@media (hover:hover){ .tf-row:hover{ background:rgba(199,177,110,.06); } }
.tf-row__unit{ display:inline-flex; align-items:center; gap:12px; font-size:16px; }
.tf-row__unit strong{ color:#fff; }
.tf-row__cap{ color:rgba(255,255,255,.78); font-weight:600; }
.tf-row__ruta{ color:rgba(255,255,255,.66); font-size:14px; }
.tf-row__price{ display:inline-flex; align-items:baseline; gap:4px; flex-wrap:wrap; font-weight:900; color:var(--tf-gold-soft); }
.tf-row__price em{ font-style:normal; font-size:13px; opacity:.85; }
.tf-row__price b{ font-size:24px; }
.tf-row__note{ flex-basis:100%; font-size:11px; font-weight:700; color:rgba(255,255,255,.55); }
.tf-mini-wa{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px;
  background:linear-gradient(140deg,#151310,#0c0c0c); border:1px solid rgba(199,177,110,.5);
  color:var(--tf-gold-soft); font-weight:800; font-size:13px; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.3); transition:transform .4s var(--tf-ease), border-color .35s ease, color .35s ease;
}
@media (hover:hover){ .tf-mini-wa:hover{ transform:translateY(-2px); border-color:var(--tf-gold); color:#fff; } }
.tf-rates__legend{ margin:16px 0 0; text-align:center; color:var(--tf-muted); font-size:13.5px; }

/* iconos de unidad (CSS) */
.tf-uico{ width:30px; height:20px; display:inline-block; position:relative; flex-shrink:0; border-radius:5px 7px 4px 4px; background:linear-gradient(180deg,var(--tf-gold),var(--tf-gold-soft)); }
.tf-uico::before{ content:""; position:absolute; left:5px; top:4px; right:7px; height:6px; border-radius:3px; background:rgba(16,16,16,.45); }
.tf-uico::after{ content:""; position:absolute; left:5px; bottom:-4px; width:6px; height:6px; border-radius:50%; background:#111; box-shadow:14px 0 0 #111; }
.tf-uico--van,.tf-uico--minibus,.tf-uico--bus{ width:38px; border-radius:6px 6px 4px 4px; }
.tf-uico--bus::after{ box-shadow:10px 0 0 #111, 22px 0 0 #111; }

/* ---------- CARRUSEL (móvil) ---------- */
.tf-carousel{ display:none; position:relative; padding:0 6px; background:transparent; }
.tf-car__viewport{ overflow:hidden; border-radius:var(--tf-radius); background:transparent; }
.tf-car__track{
  display:flex; transition:transform .6s var(--tf-ease);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:translateZ(0); /* GPU: sin flash ni lag al deslizar */
}
/* permite scroll vertical nativo fluido sobre el carrusel (evita traba al bajar) */
.tf-carousel{ touch-action:pan-y; }
.tf-car__slide{ flex:0 0 100%; padding:4px; box-sizing:border-box; backface-visibility:hidden; }

.tf-tariff-card{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,#0d0d0d 0%, #1c1a14 100%);
  border:1px solid rgba(199,177,110,.30); border-radius:18px; padding:24px 22px 22px;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.tf-tariff-card::before{ content:""; position:absolute; top:-40%; right:-30%; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(199,177,110,.22), transparent 65%); pointer-events:none; }
.tf-tariff-card__shine{ position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent); transform:skewX(-18deg); animation:tfCardShine 5s ease-in-out infinite; pointer-events:none; }
@keyframes tfCardShine{ 0%,70%{ left:-60%; } 100%{ left:140%; } }
.tf-tariff-card__top{ display:flex; align-items:center; gap:12px; position:relative; }
.tf-tariff-card__name{ font-size:22px; font-weight:900; color:#fff; }
.tf-tariff-card__cap{ margin:10px 0 0; color:var(--tf-gold); font-weight:800; font-size:14px; letter-spacing:.4px; }
.tf-tariff-card__ruta{ margin:6px 0 0; color:rgba(255,255,255,.72); font-size:14px; }
.tf-tariff-card__price{ display:flex; align-items:baseline; gap:10px; margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(199,177,110,.20); }
.tf-tariff-card__from{ font-size:12px; font-weight:900; letter-spacing:1.5px; color:rgba(255,255,255,.6); }
.tf-tariff-card__amount{ display:inline-flex; align-items:baseline; gap:3px; color:var(--tf-gold-soft); font-weight:900; }
.tf-tariff-card__amount em{ font-style:normal; font-size:15px; }
.tf-tariff-card__amount b{ font-size:40px; line-height:1; }
.tf-tariff-card__note{ margin:8px 0 0; font-size:11px; font-weight:700; color:rgba(255,255,255,.55); }
.tf-tariff-card__wa{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; min-height:50px; border-radius:14px;
  background:linear-gradient(140deg,#151310,#0c0c0c); border:1px solid rgba(199,177,110,.5);
  color:var(--tf-gold-soft); font-weight:800; font-size:15px; text-decoration:none; position:relative; overflow:hidden; isolation:isolate;
}
.tf-tariff-card__wa:active{ transform:scale(.98); }

/* FLECHAS PREMIUM (estilo inicio): redondas, doradas, con glow y pulso.
   Se centran respecto al VIEWPORT (la tarjeta). Como el contenedor .tf-carousel
   también incluye los puntitos de abajo, subo las flechas la mitad de esa área
   (dots + su margen ≈ 25px -> -12.5px) para que queden a la MISMA distancia
   de arriba y de abajo dentro de la card. */
.tf-car__viewport{ position:relative; }
.tf-car__dots{ height:9px; } /* alto fijo para cálculo estable */
.tf-car__nav{
  position:absolute; top:50%; transform:translateY(calc(-50% - 12px)); z-index:3;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(199,177,110,.55);
  background:radial-gradient(circle at 30% 30%, #1e1b14, #0b0b0b);
  color:var(--tf-gold-soft); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 0 rgba(199,177,110,.35);
  transition:border-color .2s ease, box-shadow .25s ease, color .2s ease;
  animation:tfNavPulse 2.6s ease-in-out infinite;
}
@keyframes tfNavPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 0 rgba(199,177,110,.40);} 60%{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 10px rgba(199,177,110,0);} }
.tf-car__nav:hover{ border-color:var(--tf-gold); color:#fff; }
.tf-car__nav--prev{ left:2px; } .tf-car__nav--next{ right:2px; }
.tf-car__dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.tf-car__dot{ width:9px; height:9px; border-radius:50%; cursor:pointer; padding:0; border:0; background:rgba(35,33,28,.28); transition:all .25s ease; }
.tf-car__dot.is-active{ width:26px; border-radius:5px; background:var(--tf-gold); }

/* ================================================================ FLEET ===
   Cards con EFECTOS FULL: tilt 3D, zoom, iluminación que sigue, borde dorado
   animado, brillo que recorre, badge flotante y botón distintivo. */
.tf-fleet{ padding:var(--tf-gap) 0; background:
  radial-gradient(700px 300px at 100% 0%, rgba(199,177,110,.10), transparent 60%),
  var(--tf-cream); }
.tf-fleet__grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); perspective:1200px; }
.tf-card{
  position:relative; border-radius:var(--tf-radius); overflow:hidden; background:#fff;
  border:1px solid rgba(16,16,16,.08);
  box-shadow:0 12px 34px rgba(16,16,16,.08);
  transition:transform .4s var(--tf-ease), box-shadow .4s ease, border-color .4s ease;
  display:flex; flex-direction:column; transform-style:preserve-3d;
}
/* borde dorado luminoso animado al hover */
.tf-card::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  padding:1.5px; opacity:0;
  background:linear-gradient(130deg, transparent, var(--tf-gold), var(--tf-gold-soft), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .3s ease;
}
@media (hover:hover){
  .tf-card:hover{ box-shadow:0 32px 70px rgba(199,177,110,.36); border-color:transparent; }
  .tf-card:hover::before{ opacity:1; }
}
.tf-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#16140f,#23201a); }
.tf-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--tf-ease), filter .4s ease; }
@media (hover:hover){ .tf-card:hover .tf-card__media img{ transform:scale(1.12); filter:saturate(1.1) contrast(1.04); } }
/* brillo diagonal que recorre la imagen al hover */
.tf-card__media::after{
  content:""; position:absolute; top:0; left:-70%; width:50%; height:100%; z-index:1;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:none; pointer-events:none;
}
@media (hover:hover){ .tf-card:hover .tf-card__media::after{ animation:tfMediaShine 1.4s var(--tf-ease); } }
@keyframes tfMediaShine{ from{ left:-70%; } to{ left:140%; } }
/* iluminación superior */
.tf-card__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(380px 220px at 50% -10%, rgba(199,177,110,.5), transparent 70%); transition:opacity .35s ease; z-index:1; }
@media (hover:hover){ .tf-card:hover .tf-card__glow{ opacity:1; } }
/* badge precio flotante con glow */
.tf-card__badge{
  position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:baseline; gap:2px;
  padding:7px 13px; border-radius:999px; background:var(--tf-ink); color:var(--tf-gold-soft);
  font-weight:900; font-size:17px; box-shadow:0 8px 18px rgba(0,0,0,.3); border:1px solid var(--tf-line);
  transition:transform .3s var(--tf-ease), box-shadow .3s ease;
}
@media (hover:hover){ .tf-card:hover .tf-card__badge{ transform:translateY(-2px) scale(1.06); box-shadow:0 12px 26px rgba(199,177,110,.4); } }
.tf-card__badge em{ font-style:normal; font-size:12px; opacity:.85; }
.tf-card__body{ padding:15px 20px 19px; display:flex; flex-direction:column; gap:5px; flex:1; position:relative; z-index:2; background:#fff; }
.tf-card__title{ font-size:20px; font-weight:900; color:var(--tf-ink); transition:color .25s ease; }
@media (hover:hover){ .tf-card:hover .tf-card__title{ color:var(--tf-gold-deep); } }
.tf-card__cap{ margin:0; color:var(--tf-gold-deep); font-weight:800; font-size:13px; letter-spacing:.4px; }
.tf-card__ruta{ margin:2px 0 13px; color:var(--tf-muted); font-size:13.5px; }
.tf-card__wa{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 18px; border-radius:12px;
  background:linear-gradient(140deg,#151310,#0c0c0c); border:1px solid rgba(199,177,110,.5);
  color:var(--tf-gold-soft); font-weight:800; font-size:14px; text-decoration:none; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--tf-ease), border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.tf-card__wa::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(120deg, transparent 20%, rgba(199,177,110,.3) 50%, transparent 80%); transform:translateX(-120%); transition:opacity .35s ease; }
@media (hover:hover){ .tf-card__wa:hover{ transform:translateY(-2px); border-color:var(--tf-gold); color:#fff; box-shadow:0 12px 26px rgba(199,177,110,.25); } .tf-card__wa:hover::before{ opacity:1; animation:tfShine 1.6s var(--tf-ease); } }

/* ================================================================ FINAL ===
   Espacio SUPERIOR bien reducido para juntar el CTA con las tarifas (PC y móvil),
   manteniendo un respiro inferior con la siguiente sección. */
.tf-final{ padding:0 0 clamp(18px,2.6vw,28px); }
.tf-rates{ padding-bottom:clamp(10px,1.4vw,16px); }
.tf-final__inner{
  position:relative; overflow:hidden; border-radius:26px; padding:clamp(28px,5vw,50px);
  background:radial-gradient(600px 240px at 85% 0%, rgba(199,177,110,.18), transparent 60%), linear-gradient(135deg,#0c0c0c,#191919);
  color:#fff; box-shadow:var(--tf-shadow); border:1px solid rgba(199,177,110,.22); text-align:center;
}
.tf-final__inner::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:repeating-linear-gradient(60deg, rgba(199,177,110,.05) 0 2px, transparent 2px 24px); -webkit-mask-image:radial-gradient(60% 60% at 50% 0%, #000, transparent); mask-image:radial-gradient(60% 60% at 50% 0%, #000, transparent); }
.tf-final__shine{ position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.07), transparent); transform:skewX(-18deg); animation:tfCardShine 7s ease-in-out infinite; pointer-events:none; }
.tf-final__text{ position:relative; }
.tf-final__title{ font-size:clamp(26px,4.4vw,40px); font-weight:900; margin:6px 0 12px; background:linear-gradient(92deg,#fff, var(--tf-gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tf-final__text p{ margin:0 auto; max-width:560px; color:rgba(255,255,255,.80); }
.tf-final__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:22px 0 0; position:relative; }
.tf-final__nota{ margin:16px 0 0; color:rgba(255,255,255,.62); font-size:13.5px; position:relative; }

/* =========================================================================
   EFECTOS EN TÁCTIL (celular / tablet) — controlados por JS con .is-touched:
   - Al tocar un elemento se activa el EFECTO COMPLETO.
   - Si tocas otra cosa, el JS quita .is-touched del anterior al instante.
   - Si no tocas nada más, el efecto queda hasta que el JS lo retira (1.6s).
   Solo se aplica en dispositivos táctiles. No cambia la estructura.
   ========================================================================= */
@media (hover:none){
  /* CARDS de flota: efecto completo al tocar */
  .tf-card.is-touched{ box-shadow:0 32px 70px rgba(199,177,110,.36); border-color:transparent; transform:translateY(-4px); }
  .tf-card.is-touched::before{ opacity:1; }
  .tf-card.is-touched .tf-card__glow{ opacity:1; }
  .tf-card.is-touched .tf-card__media img{ transform:scale(1.12); filter:saturate(1.1) contrast(1.04); }
  .tf-card.is-touched .tf-card__media::after{ animation:tfMediaShine 1.4s var(--tf-ease); }
  .tf-card.is-touched .tf-card__badge{ transform:translateY(-2px) scale(1.06); box-shadow:0 12px 26px rgba(199,177,110,.4); }
  .tf-card.is-touched .tf-card__title{ color:var(--tf-gold-deep); }

  /* BOTONES WhatsApp: brillo dorado completo al tocar */
  .tf-btn--wa.is-touched::before,
  .tf-card__wa.is-touched::before,
  .tf-tariff-card__wa.is-touched::before,
  .tf-mini-wa.is-touched::before{ opacity:1; animation:tfShine 1.6s var(--tf-ease); }
  .tf-btn--wa.is-touched{ transform:translateY(-2px); border-color:var(--tf-gold); color:#fff; box-shadow:0 18px 40px rgba(199,177,110,.30); }
  .tf-card__wa.is-touched{ border-color:var(--tf-gold); color:#fff; box-shadow:0 12px 26px rgba(199,177,110,.25); }
  .tf-tariff-card__wa.is-touched{ border-color:var(--tf-gold); color:#fff; }
  .tf-mini-wa.is-touched{ border-color:var(--tf-gold); color:#fff; }

  /* botón fantasma "Ver tarifas" */
  .tf-btn--ghost.is-touched{ border-color:var(--tf-gold); color:var(--tf-gold-soft); }

  /* perks del hero */
  .tf-hero__perks li.is-touched{ transform:translateY(-3px); border-color:var(--tf-line); background:rgba(199,177,110,.14); }

  /* tarjeta de tarifa (carrusel): brillo completo al tocar */
  .tf-tariff-card.is-touched{ border-color:var(--tf-gold); box-shadow:0 24px 50px rgba(199,177,110,.28); }
  .tf-tariff-card.is-touched .tf-tariff-card__shine{ animation:tfCardShine 1.6s var(--tf-ease); }

  /* items de distancias */
  .tf-dist__item.is-touched{ transform:translateX(3px); border-color:var(--tf-line); background:rgba(199,177,110,.08); }

  /* micro-feedback de pulsación (independiente, muy corto) */
  .tf-btn:active{ transform:scale(.98); }
  .tf-card__wa:active,.tf-tariff-card__wa:active,.tf-mini-wa:active{ transform:scale(.98); }
}

/* ============================ EXTRA EFECTOS GLOBALES ====================== */
/* el mapa "respira" con un leve zoom al entrar en viewport */
.tf-map .tf-map__svg{ transition:transform .8s var(--tf-ease); }
.tf-mapwrap.is-visible .tf-map .tf-map__svg{ animation:tfMapIn 1s var(--tf-ease) both; }
@keyframes tfMapIn{ from{ transform:scale(1.04); } to{ transform:scale(1); } }
/* títulos de sección con subrayado dorado que crece */
.tf-sec-title{ position:relative; display:inline-block; }
.tf-sec-title::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--tf-gold),var(--tf-gold-soft)); transform:translateX(-50%);
  transition:width .6s var(--tf-ease) .2s;
}
.tf-sec-head.is-visible .tf-sec-title::after{ width:64px; }
/* filas de la tabla desktop: realce dorado al hover con desplazamiento */
@media (hover:hover){
  .tf-row{ transition:background .2s ease, transform .2s var(--tf-ease); }
  .tf-row:hover{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce){
  .tf-mapwrap.is-visible .tf-map .tf-map__svg{ animation:none; }
  .tf-sec-title::after{ transition:none; }
}

/* ================================================================ RESPONSIVE */
@media (max-width:980px){
  .tf-mapwrap{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .tf-table{ display:none; }
  .tf-carousel{ display:block; padding:0 8px; }
  /* MAPA más grande y premium en celular */
  .tf-map{ border-radius:22px; }
  .tf-map__svg{ min-height:440px; }
  /* dar aire para que las flechas no tapen la tarjeta */
  .tf-carousel .tf-tariff-card{ margin:0 14px; }
  .tf-car__nav{ width:44px; height:44px; }
  .tf-car__nav--prev{ left:-2px; } .tf-car__nav--next{ right:-2px; }
  /* PERKS 2x2 en móvil */
  .tf-hero__perks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tf-hero__perks li{ justify-content:flex-start; }
}
@media (max-width:600px){
  .transfer-page .container{ width:min(1200px, calc(100% - 28px)); }
  /* HERO llena la portada: ocupa al menos el alto de pantalla visible y empuja la sección blanca fuera */
  .tf-hero{ min-height:100svh; padding-top:clamp(96px,16vh,128px); display:flex; align-items:center; }
  .tf-hero__inner{ width:100%; }
  .tf-hero__title{ font-size:clamp(34px,9vw,46px); }
  .tf-hero__sub{ font-size:15.5px; }
  .tf-hero__perks li{ font-size:13px; padding:11px 12px; }
  .tf-perk__txt{ line-height:1.2; }
  .tf-btn{ width:100%; }
  .tf-hero__cta{ flex-direction:column; }
  .tf-final__actions .tf-btn{ width:100%; }
  .tf-map__legend{ gap:10px; font-size:11.5px; }
  .tf-card__media{ aspect-ratio:16/11; }
  /* JUNTAR el CTA "Reserva o coordina" con la sección de ARRIBA y de ABAJO */
  .tf-rates{ padding-bottom:6px; }
  .tf-car__dots{ margin-top:10px; }
  .tf-rates__legend{ margin-top:10px; font-size:12.5px; }
  .tf-final{ padding:8px 0 12px; }        /* arriba y abajo bien juntos */
  .tf-final__inner{ padding:24px 20px; }  /* interior más compacto */

  /* RENDIMIENTO en teléfonos: aligerar carga de la GPU para scroll fluido */
  .tf-orb{ display:none; }                 /* orbes con blur fuera en móvil */
  .tf-wave{ display:none; }                /* olas del mapa fuera en móvil */
  .tf-final__shine{ display:none; }        /* brillo automático del CTA fuera */
  .tf-tariff-card__shine{ display:none; }  /* brillo automático de tarjetas fuera */
}