/* Secciones de contenido después del recorrido de barcazas (datos de empresasrvc.cl).
   Paleta de la marca: blanco, azul y rojo (como la Cullamó: casco rojo, cubierta blanca, mar azul).
   Cada sección elige un tema (oscura por defecto, --light, --blue, --red) que redefine las mismas
   variables; los componentes solo usan las variables.
   Sin backdrop-filter ni desenfoques en vivo: en la gráfica integrada del equipo de prueba cuestan
   mucho y le quitan GPU al video de las barcazas. */
:root{
  --navy-950:#030a26;--navy-900:#061541;--navy-800:#0e2672;
  --blue:#2252e6;--blue-deep:#14309e;--blue-light:#7ea6f8;
  --red:#3f7af3;--red-deep:#1f3fb0;--red-light:#8fb3ff;
  --white:#fff;
  --radius:22px;--sans:Manrope,Arial,Helvetica,sans-serif;--display:Anton,Impact,'Arial Narrow',sans-serif;
  interpolate-size:allow-keywords
}

/* Temas */
.site,.sec{
  --bg:var(--navy-900);--ink:#f4f7ff;--muted:rgba(222,232,255,.72);
  --line:rgba(140,175,255,.16);--line-strong:rgba(140,175,255,.34);
  --surface:rgba(8,22,58,.72);--card:linear-gradient(180deg,rgba(34,82,230,.18),rgba(6,16,42,.78));--shadow:0 24px 60px rgba(0,0,0,.35);
  --kicker:var(--red-light);--accent:var(--red-light);--em:linear-gradient(95deg,#9cbcff 0%,var(--red) 100%);
  --num:linear-gradient(180deg,#fff,#9dbcff);--price:var(--blue-light);--free:var(--blue-light);
  --input:rgba(2,8,23,.7);--glow-a:rgba(34,82,230,.26);--glow-b:rgba(63,122,243,.14);--wave:var(--blue-light)
}
.sec--light{
  --bg:#fff;--ink:#061a40;--muted:rgba(6,26,64,.66);
  --line:rgba(6,26,64,.11);--line-strong:rgba(6,26,64,.24);
  --surface:#f2f5fc;--card:#fff;--shadow:0 18px 50px rgba(6,26,64,.10);
  --kicker:var(--red);--accent:var(--red);--em:linear-gradient(95deg,var(--blue) 0%,var(--blue-deep) 100%);
  --num:linear-gradient(180deg,var(--blue),var(--blue-deep));--price:var(--blue);--free:var(--blue);
  --input:#f6f8fd;--glow-a:rgba(34,82,230,.10);--glow-b:rgba(63,122,243,.07);--wave:var(--blue)
}
.sec--blue{
  --bg:linear-gradient(160deg,#2252e6 0%,#1d45cc 55%,#14309e 100%);--ink:#fff;--muted:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.2);--line-strong:rgba(255,255,255,.4);
  --surface:rgba(255,255,255,.08);--card:rgba(255,255,255,.12);--shadow:0 24px 60px rgba(4,16,60,.35);
  --kicker:#fff;--accent:#fff;--em:linear-gradient(95deg,#fff 0%,#dbe7ff 100%);
  --num:linear-gradient(180deg,#fff,#dbe6ff);--price:#fff;--free:#fff;
  --input:rgba(255,255,255,.12);--glow-a:rgba(255,255,255,.16);--glow-b:rgba(63,122,243,.25);--wave:#fff
}
.sec--red{
  --bg:linear-gradient(150deg,#6d727d 0%,#5b5f69 45%,#3e424b 100%);--ink:#fff;--muted:rgba(255,255,255,.85);
  --line:rgba(255,255,255,.24);--line-strong:rgba(255,255,255,.5);
  --surface:rgba(255,255,255,.1);--card:rgba(255,255,255,.14);--shadow:0 24px 60px rgba(20,28,60,.35);
  --kicker:#fff;--accent:#fff;--em:linear-gradient(95deg,#fff 0%,#cfe0ff 100%);
  --num:linear-gradient(180deg,#fff,#e4ecff);--price:#fff;--free:#fff;
  --input:rgba(255,255,255,.12);--glow-a:rgba(255,255,255,.18);--glow-b:rgba(34,82,230,.28);--wave:#fff
}

/* Agregados al inicio y a la flota */
.live-next{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:10px 18px 10px 14px;border:1px solid rgba(255,255,255,.28);background:rgba(4,16,43,.72);border-radius:999px;transition:border-color .25s,background .25s}
.live-next:hover{border-color:var(--red-light);background:rgba(10,31,77,.88)}
.live-next__dot{width:10px;height:10px;border-radius:50%;background:#3dff9a;box-shadow:0 0 0 0 rgba(61,255,154,.6);animation:live-pulse 2s ease-out infinite;flex-shrink:0}
.live-next__text{display:flex;flex-direction:column;line-height:1.25}
.live-next__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.live-next strong{font:700 15px/1.3 var(--sans)}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(61,255,154,.55)}70%{box-shadow:0 0 0 10px rgba(61,255,154,0)}100%{box-shadow:0 0 0 0 rgba(61,255,154,0)}}
.hero .primary-button:hover{background:var(--red);border-color:var(--red);color:#fff}
.hero .steps dt{background:linear-gradient(180deg,#fff 40%,#b9d0ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Barra fija y accesos */
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 16px;background:#fff;color:#000;border-radius:8px;font:600 14px var(--sans)}
.skip-link:focus{top:16px}
.site-bar{position:fixed;inset:0 0 auto;z-index:40;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);background:rgba(4,16,43,.94);border-bottom:1px solid rgba(140,175,255,.16);font-family:var(--sans);color:#fff}
.site-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--red) 50% 100%);transform:scaleX(var(--progress,0));transform-origin:left}
/* Advertencia de cierre de puerto, bajo la barra superior. */
.port-alert{position:fixed;top:68px;left:0;right:0;z-index:39;display:flex;align-items:center;gap:14px;padding:12px var(--gutter);background:linear-gradient(90deg,#2a55d6,#3f7af3 55%,#2a55d6);color:#fff;font-family:var(--sans);box-shadow:0 14px 34px rgba(20,28,60,.45);animation:port-alert-in .5s cubic-bezier(.16,1,.3,1) both}
.port-alert[hidden]{display:none}
@keyframes port-alert-in{from{transform:translateY(-110%);opacity:0}}
.port-alert__icon{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#2a55d6;font:900 20px/1 var(--sans);animation:port-alert-pulse 1.6s ease-in-out infinite}
@keyframes port-alert-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.port-alert__text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;line-height:1.4}
.port-alert__text strong{font:800 15px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.port-alert__text small{font-size:12px;opacity:.8}
.port-alert__link{flex-shrink:0;padding:8px 16px;border-radius:999px;background:#fff;color:#2a55d6;font:800 13px var(--sans);white-space:nowrap}
.port-alert__close{flex-shrink:0;width:32px;height:32px;padding:0;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
@media(max-width:767px){
  .port-alert{align-items:flex-start;gap:10px;padding:10px 14px}
  .port-alert__icon{width:28px;height:28px;font-size:16px}
  .port-alert__text{display:block;font-size:13px}
  .port-alert__text span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .port-alert__text strong{display:block;font-size:14px}
  .port-alert__link{align-self:center;padding:7px 12px;font-size:12px}
  .port-alert__close{width:28px;height:28px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.port-alert,.port-alert__icon{animation:none}}
/* La barra está desde el inicio (pedido del cliente), así que el encabezado del video sobra. */
.hero .header{display:none}
/* Logo de la empresa (versión clara sobre fondos oscuros) */
.logo{align-items:center}
.logo img{display:block;width:auto;height:var(--logo-h,58px);filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.header .logo{--logo-h:clamp(52px,6vw,66px)}
.site-bar .logo{--logo-h:50px}
.mobile-menu .logo{--logo-h:56px}
.site-bar__nav{display:none;gap:28px;font-size:14px}
.site-bar__nav a{color:rgba(222,232,255,.72);transition:color .2s}
.site-bar__nav a:hover,.site-bar__nav a[aria-current="true"]{color:#fff}
.site-bar__nav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--red)}
.site-bar__actions{display:flex;align-items:center;gap:14px}
.pill-button{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:linear-gradient(90deg,var(--red),#5b8ff5);color:#fff;font:700 13px var(--sans);box-shadow:0 8px 26px rgba(63,122,243,.35);transition:transform .2s,box-shadow .2s}
.pill-button:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(63,122,243,.5)}
@media(min-width:900px){.site-bar__nav{display:flex}}

/* Base de las secciones */
.site{position:relative;background:var(--navy-900);color:var(--ink);font-family:var(--sans);overflow:clip}
.sec{position:relative;padding:clamp(88px,12vw,150px) 0;scroll-margin-top:40px;background:var(--bg);color:var(--ink);content-visibility:auto;contain-intrinsic-size:auto 900px}
.sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 42% at var(--gx,82%) var(--gy,8%),var(--glow-a),transparent 72%),radial-gradient(36% 30% at var(--hx,6%) var(--hy,92%),var(--glow-b),transparent 70%)}
.wrap{position:relative;width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto}
.kicker{display:flex;align-items:center;gap:12px;font:800 12px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--kicker);margin:0 0 18px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
.display{font:400 clamp(2.7rem,7.2vw,6.2rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 28px;text-wrap:balance}
.display em{font-style:normal}
.display em,.display em .w{color:transparent;background:var(--em);-webkit-background-clip:text;background-clip:text}
.lead{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;color:var(--muted);max-width:52ch;margin:0 0 32px;text-wrap:pretty}
.lead a{color:var(--ink);border-bottom:2px solid var(--accent)}
.muted{color:var(--muted)}
.sub{font:400 clamp(2rem,4vw,3.2rem)/1 var(--display);text-transform:uppercase;margin:0}
.primary-button--glow{background:linear-gradient(90deg,var(--red),#5b8ff5);color:#fff;border:0;border-radius:14px;font-weight:700;box-shadow:0 14px 36px rgba(63,122,243,.35)}
.primary-button--glow:hover{background:var(--blue);color:#fff;box-shadow:0 14px 36px rgba(34,82,230,.4)}

/* Entradas: palabras y bloques (las activa sections.js al entrar en pantalla) */
[data-split] .w{display:inline-block}
.js-anim [data-split] .w{opacity:0;transform:translateY(.5em) rotate(2deg);transform-origin:left bottom;transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 65ms)}
.js-anim [data-split].is-in .w{opacity:1;transform:none}
/* Animación (no transición) sobre translate: no pisa las transiciones propias de cada tarjeta
   ni su transform (inclinación 3D, efectos al pasar el mouse). */
.js-anim [data-reveal]{opacity:0}
.js-anim [data-reveal].is-in{animation:reveal-in .9s cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
@keyframes reveal-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}

/* Nosotros */
.about{--gx:85%;--gy:0%}
.manifesto{font:700 clamp(1.45rem,3.1vw,2.6rem)/1.32 var(--sans);letter-spacing:-.01em;max-width:30ch;margin:0 0 clamp(56px,8vw,96px)}
.manifesto .w{opacity:clamp(.16,calc(var(--p,0) * var(--n,1) - var(--i)),1);transition:opacity .25s linear}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 clamp(64px,9vw,110px)}
.stat{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue)}
.stat:nth-child(even)::before{background:var(--red)}
.stat:nth-child(2){--delay:80ms}.stat:nth-child(3){--delay:160ms}.stat:nth-child(4){--delay:240ms}
.stat dt{font:400 clamp(2.6rem,5vw,4.2rem)/1 var(--display);background:var(--num);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat:nth-child(even) dt{background:linear-gradient(180deg,var(--red-light),var(--red));-webkit-background-clip:text;background-clip:text}
.stat dd{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Servicio subsidiado por el Estado: franja con el logo del Ministerio (en Nosotros, la ficha de la
   ruta y el pie). */
.subsidy{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:center;margin:calc(clamp(64px,9vw,110px) * -.55) 0 clamp(64px,9vw,110px);padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,36px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.subsidy::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--blue) 0 50%,var(--red) 50% 100%)}
.subsidy__logo{width:clamp(64px,8vw,92px);height:auto;border-radius:6px}
.subsidy__tag{margin:0 0 6px;font:800 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.subsidy__title{margin:0 0 6px;font:800 clamp(1.1rem,2vw,1.45rem)/1.25 var(--sans)}
.subsidy__text{margin:0;color:var(--muted);font-size:14px;line-height:1.55;max-width:70ch}
/* Celular: la franja más compacta (letra, logo y márgenes más chicos). */
@media(max-width:767px){
  .subsidy{gap:14px;padding:16px 16px 16px 20px}
  .subsidy__logo{width:52px}
  .subsidy__tag{font-size:9.5px;letter-spacing:.16em;margin-bottom:4px}
  .subsidy__title{font-size:15px;margin-bottom:4px}
  .subsidy__text{font-size:12px;line-height:1.5}
}
.route-card__subsidy{display:flex;align-items:center;gap:10px;margin:-6px 0 16px!important;padding:8px 12px 8px 8px;border-radius:12px;background:#f2f5fc;font-size:12.5px!important;font-weight:700;line-height:1.35!important;color:var(--navy-900)!important}
.route-card__subsidy img{flex-shrink:0;width:34px;height:auto;border-radius:4px}
.footer__subsidy{display:flex;align-items:center;gap:12px;margin:18px 0 0;font-size:13px;line-height:1.4;color:rgba(222,232,255,.72)}
.footer__subsidy img{width:46px;height:auto;border-radius:4px}
.footer__subsidy b{display:block;color:#fff}
.fleet-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.fleet-head p{margin:0}
/* Sección «Nuestra flota» con fondo rojo (como «Donde estés»). */
.fleet{--gx:20%;--gy:0%;--hx:85%;--hy:100%}
.fleet .fleet-head{margin-bottom:clamp(28px,4vw,44px)}
.fleet .fleet-head .display{margin-bottom:0}
.fleet .fleet-head .lead{max-width:34ch}
.about .subsidy{margin-bottom:0}
/* Sobre el rojo: un borde claro para despegar las tarjetas, y la Mailen en un rojo más profundo. */
.fleet .vessel{box-shadow:0 0 0 1px rgba(255,255,255,.28),0 28px 60px rgba(20,28,60,.45)}
.fleet .vessel--photo:nth-child(3){--tint:rgba(96,6,12,.95)}
/* Celular: las barcazas en fila, se pasan de lado o con las flechas (como «Donde estés»). */
/* .carousel-nav.fleet-nav: gana a la regla general .carousel-nav, que está más abajo y las mostraba en el computador. */
.carousel-nav.fleet-nav{display:none}
@media(max-width:767px){
  .fleet .fleet-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 26px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;perspective:none}
  .fleet .fleet-grid::-webkit-scrollbar{display:none}
  .fleet .vessel{flex:0 0 84%;scroll-snap-align:center;min-height:380px}
  .carousel-nav.fleet-nav{display:flex;margin-top:0}
}
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;perspective:1000px}
.vessel{position:relative;padding:26px 24px 24px;min-height:260px;border-radius:var(--radius);background:linear-gradient(160deg,var(--navy-800),var(--navy-950));color:#fff;overflow:hidden;box-shadow:var(--shadow);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .3s;transform-style:preserve-3d}
.vessel:nth-child(2){background:linear-gradient(160deg,var(--blue),var(--blue-deep))}
.vessel:nth-child(3){background:linear-gradient(160deg,#5b8ff5,var(--red-deep))}
.vessel:nth-child(4){background:#fff;color:var(--navy-900);border:1px solid rgba(6,26,64,.12)}
.vessel:hover{box-shadow:0 30px 70px rgba(6,26,64,.28)}
.vessel::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(50% 50% at 50% 0%,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.vessel__sector{display:inline-block;padding:6px 10px;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.vessel__name{font:400 clamp(2.2rem,3.4vw,2.8rem)/1 var(--display);text-transform:uppercase;margin:22px 0 26px}
.vessel__metrics{display:flex;gap:28px;margin:0}
.vessel__metrics div{display:flex;flex-direction:column;gap:4px}
.vessel__metrics dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.vessel__metrics dd{margin:0;font:800 1.35rem/1.1 var(--sans)}
.vessel__wave{position:absolute;right:-10px;bottom:16px;width:150px;opacity:.45;color:currentColor}
/* Tarjetas con foto real (fotos del cliente): la foto de fondo y un tinte del color de la tarjeta abajo. */
.vessel--photo{display:flex;flex-direction:column;justify-content:space-between;min-height:400px;--tint:rgba(4,16,43,.94)}
.vessel--photo:nth-child(2){--tint:rgba(13,59,191,.94)}
.vessel--photo:nth-child(3){--tint:rgba(168,19,26,.94)}
.vessel--photo::after{display:none}
.vessel__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.vessel--photo:hover .vessel__photo{transform:scale(1.1)}
.vessel__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 28%,transparent 42%,var(--tint) 86%)}
.vessel--photo .vessel__sector,.vessel--photo .vessel__body{position:relative;align-self:flex-start}
.vessel--photo .vessel__sector{background:rgba(0,0,0,.35)}
.vessel--photo .vessel__name{margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.35)}

/* Foto del muelle junto al manifiesto (Nosotros) */
.about__intro{display:grid;gap:40px;align-items:center;margin:0 0 clamp(56px,8vw,96px)}
.about__intro .manifesto{margin:0}
@media(min-width:1024px){.about__intro{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.about__photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/4;max-height:620px;box-shadow:0 30px 70px rgba(6,26,64,.25)}
.about__photo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 6px #fff;pointer-events:none}
.about__photo img,.about__photo video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
@supports (animation-timeline:view()){
  .about__photo img,.about__photo video{animation:photo-drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes photo-drift{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
}
.about__photo figcaption{position:absolute;z-index:2;left:18px;bottom:18px;padding:8px 14px;border-radius:999px;background:var(--red);color:#fff;font:700 12px var(--sans);letter-spacing:.06em}

/* Foto final con la Mailen navegando (Cierre): entera y al ancho del contenido; la foto mide
   1179 px de ancho, así que a pantalla completa se estiraba y recortaba el casco. */

/* Rutas */
.routes{--gx:20%;--gy:20%;--hx:95%;--hy:90%}
/* Texto y lista de rutas a la izquierda; mapa y detalle a la derecha. */
.routes__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media(min-width:1024px){.routes__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}}
.route-list{display:grid;gap:12px;margin-top:28px}
.route-item{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 16px;width:100%;text-align:left;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);overflow:hidden;transition:border-color .25s,background .25s,transform .25s}
.route-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);transform:scaleY(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.route-item:hover{border-color:var(--line-strong);transform:translateX(4px)}
.route-item[aria-selected="true"]{border-color:var(--line-strong);background:linear-gradient(90deg,rgba(34,82,230,.32),var(--surface))}
.route-item[aria-selected="true"]::before{transform:none}
.route-item__name{font:800 1.1rem/1.3 var(--sans)}
.route-item__price{font:700 .95rem/1.3 var(--sans);color:var(--price);white-space:nowrap}
.route-item__meta{grid-column:1/-1;font-size:13px;color:var(--muted)}
.route-item__badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
/* El mapa en relieve (viewBox 1407 × 540): medidas de texto y trazos en unidades del mapa.
   En escritorio el marco está anclado a la derecha y «Ampliar» lo hace crecer hacia la izquierda
   sobre el texto (ancho y alto los fija sections.js, con transición). En celular se desliza de
   lado para que los nombres no queden diminutos. */
.routes__stage{position:relative;border-radius:28px}
.map-frame{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.route-map{display:block;width:100%;height:auto}
/* Botón del mapa: solo la flecha, en la esquina de abajo (pedido del cliente). El texto «Ampliar» /
   «Reducir» queda oculto a la vista, pero lo leen los lectores de pantalla. */
.map-frame__toggle{display:grid;place-items:center;position:absolute;bottom:14px;right:14px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy-900);box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;transition:transform .25s,background .25s}
.map-frame__toggle:hover{transform:translateY(-2px);background:#eef3ff}
.map-frame__toggle:focus-visible{outline:3px solid var(--red-light);outline-offset:3px}
.map-frame__toggle span[aria-hidden]{font-size:20px;line-height:1}
.map-frame__toggle [data-map-toggle-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:1024px){
  .routes__stage{width:100%;aspect-ratio:1407/540;transition:height 1s cubic-bezier(.65,0,.25,1)}
  .map-frame{position:absolute;top:0;right:0;z-index:5;width:100%;transition:width 1s cubic-bezier(.65,0,.25,1),box-shadow .6s}
  .map-frame.is-expanded{box-shadow:0 40px 120px rgba(0,0,0,.6)}
}
/* Celular y tablet: el mapa completo al ancho de la pantalla; «Ampliar» lo abre a pantalla completa
   (con el teléfono vertical, girado para aprovechar el alto, con los nombres grandes). */
@media(max-width:1023px){
  /* Con el mapa a pantalla completa, la sección no puede contenerlo (content-visibility encierra a
     los elementos fijos) y debe quedar sobre las demás. */
  .sec.has-full-map{content-visibility:visible;z-index:60}
  .sec.has-full-map [data-reveal]{animation:none!important;opacity:1}
  .map-frame__toggle{bottom:10px;right:10px;width:40px;height:40px}
  .map-frame.is-full{position:fixed;inset:0;z-index:70;display:grid;place-items:center;border:0;border-radius:0;background:#061541;box-shadow:none}
  .map-frame.is-full .route-map{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(96vw,(100svh - 80px) * 2.6)}
  .map-frame.is-full .map-frame__toggle{position:fixed;top:14px;right:14px}
}
@media(max-width:1023px) and (orientation:portrait){
  .map-frame.is-full .route-map{width:calc(100svh - 90px);max-width:none;rotate:90deg}
}
@media(prefers-reduced-motion:reduce){.routes__stage,.map-frame{transition:none}}
/* Nombres con contorno oscuro para leerse sobre el verde y el azul del relieve. */
.route-map text{paint-order:stroke;stroke:rgba(4,16,43,.85);stroke-linejoin:round}
.route-map__road{fill:none;stroke:rgba(255,246,220,.5);stroke-width:4;stroke-linecap:round;stroke-dasharray:14 10}
.route-map__town{fill:#fff;font:800 32px var(--sans);letter-spacing:.02em;stroke-width:7px}
.route-map__town--small{font-size:24px;fill:rgba(255,255,255,.85)}
.route-map__place{fill:rgba(255,250,235,.9);font:700 19px var(--sans);stroke-width:5px}
.route-map__water-label{fill:rgba(200,220,255,.7);font:700 20px var(--sans);letter-spacing:.3em;text-transform:uppercase;stroke:none}
.route-map__note{fill:rgba(255,255,255,.7);font:600 16px var(--sans);stroke-width:4px}
.route-path{fill:none;stroke:rgba(255,255,255,.32);stroke-width:4;stroke-linecap:round;stroke-dasharray:.008 .01;transition:stroke .3s,stroke-width .3s}
.route-path.is-active{stroke:url(#map-route);stroke-width:7;stroke-dasharray:1 1;animation:draw-route 1.6s cubic-bezier(.65,0,.35,1) both}
@keyframes draw-route{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.route-boat{fill:#fff;stroke:var(--red);stroke-width:5}
.port circle:not(.port__halo){fill:#dfe9ff}
.port__halo{fill:rgba(63,122,243,.3);transform-box:fill-box;transform-origin:center;opacity:0}
.port text{fill:#fff;font:800 26px var(--sans);paint-order:stroke;stroke:#061541;stroke-width:7px}
.port .port__sub{font-weight:700;font-size:19px;fill:rgba(234,242,255,.9)}
.port.is-active circle:not(.port__halo){fill:var(--red-light)}
.port.is-active .port__halo{opacity:1;animation:halo 2.2s ease-out infinite}
@keyframes halo{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}
.route-card{margin-top:16px;padding:24px;border-radius:22px;background:#fff;color:var(--navy-900);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.route-card h3{font:800 1.3rem/1.25 var(--sans);margin:0 0 6px}
.route-card p{margin:0 0 16px;color:rgba(6,26,64,.66);font-size:14px;line-height:1.6}
.route-card .muted{color:rgba(6,26,64,.6)}
.route-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.route-card__facts div{padding:12px 14px;border-radius:14px;background:#f2f5fc}
.route-card__facts div:first-child{background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff}
.route-card__facts div:first-child dt,.route-card__facts div:first-child .muted{color:rgba(255,255,255,.8)}
.route-card__facts dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(6,26,64,.6)}
.route-card__facts dd{margin:4px 0 0;font:800 1.05rem/1.25 var(--sans)}
.route-card__actions{display:flex;flex-wrap:wrap;gap:10px}
.ghost-button{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid var(--line-strong);border-radius:999px;font:700 13px var(--sans);background:transparent;color:inherit;transition:border-color .2s,background .2s,color .2s}
.ghost-button:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.route-card .ghost-button{border-color:rgba(6,26,64,.24)}

/* Horarios y tarifas */
.schedule{--gx:90%;--gy:30%;--hx:0%;--hy:100%}
.schedule__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px}
.clock{display:inline-flex;align-items:center;gap:10px;margin:0 0 34px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;color:var(--muted)}
.clock strong{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.clock__dot{width:8px;height:8px;border-radius:50%;background:#16c172;animation:live-pulse 2s ease-out infinite}
.tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:18px;scrollbar-width:thin}
.tab{flex:0 0 auto;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:700 14px var(--sans);transition:all .25s}
.tab:hover{color:var(--ink);border-color:var(--line-strong)}
.tab[aria-selected="true"]{color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--blue),var(--blue-deep));box-shadow:0 10px 26px rgba(34,82,230,.3)}
.schedule__body{display:grid;gap:18px}
@media(min-width:1024px){.schedule__body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.panel{padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.panel h3{font:800 1.15rem/1.3 var(--sans);margin:0 0 4px}
.panel__sub{margin:0 0 20px;color:var(--muted);font-size:14px}
.segmented{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);margin:0 0 20px;max-width:100%;overflow-x:auto}
.segmented button{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 13px var(--sans);white-space:nowrap;transition:all .25s}
.segmented button[aria-pressed="true"]{background:var(--navy-900);color:#fff}
.sec--blue .segmented button[aria-pressed="true"],.sec--red .segmented button[aria-pressed="true"]{background:#fff;color:var(--navy-900)}
.departures{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.departure{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font:800 1rem/1 var(--sans);font-variant-numeric:tabular-nums;transition:opacity .3s}
.departure.is-past{opacity:.38}
.departure.is-next{border-color:transparent;background:linear-gradient(180deg,#5b8ff5,var(--red));color:#fff;box-shadow:0 0 0 4px rgba(63,122,243,.15),0 12px 28px rgba(63,122,243,.32)}
.departure.is-next small{display:block;margin-top:5px;font:700 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.next-banner{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:14px 16px;border-radius:14px;background:rgba(22,193,114,.09);border:1px solid rgba(22,193,114,.28);font-size:14px}
.next-banner strong{font-size:1.05rem}
.coordinated{padding:22px;border:1.5px dashed var(--line-strong);border-radius:16px}
.coordinated p{margin:0 0 16px;color:var(--muted);line-height:1.6}
.fare-table{width:100%;border-collapse:collapse;font-size:14px}
.fare-table td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fare-table td:last-child{text-align:right;font-weight:800;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums}
.fare-table .is-free{color:var(--free)}
.fares__valid{display:inline-block;margin:0 0 16px;padding:4px 10px;border-radius:999px;background:rgba(63,122,243,.1);color:var(--accent);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.notes{display:grid;gap:8px;margin:26px 0 0;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.6}
@media(min-width:900px){.notes{grid-template-columns:1fr 1fr;column-gap:32px}}
.notes li{padding-left:18px;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* App */
.app{--gx:80%;--gy:35%;--hx:10%;--hy:10%}
.app__grid{display:grid;gap:56px;align-items:center}
@media(min-width:1024px){.app__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.app-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.app-steps button{position:relative;display:flex;gap:18px;align-items:flex-start;width:100%;padding:16px 18px;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);overflow:hidden;transition:border-color .3s,background .3s,color .3s}
.app-steps button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red)}
.app-steps li.is-active button{border-color:transparent;background:#fff;color:var(--navy-900);box-shadow:0 16px 40px rgba(4,16,60,.28)}
.app-steps li.is-active button::after{animation:step-progress var(--step-ms,1800ms) linear forwards}
@keyframes step-progress{to{width:100%}}
.app-steps li.is-done .app-steps__num{background:var(--navy-900);color:#fff;border-color:transparent}
.app-steps__num{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);font:800 13px var(--sans);transition:all .3s}
.app-steps li.is-active .app-steps__num{background:var(--red);color:#fff;border-color:transparent}
.app-steps strong{display:block;font:800 1.05rem/1.3 var(--sans);margin:2px 0 4px}
.app-steps span span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.app-steps li.is-active span span{color:rgba(6,26,64,.66)}
.promo{display:flex;align-items:center;gap:22px;padding:20px 22px;margin:0 0 22px;border-radius:22px;background:linear-gradient(120deg,#5b8ff5,var(--red) 50%,var(--red-deep));color:#fff;box-shadow:0 20px 50px rgba(30,40,80,.35)}
.promo__value{font:400 clamp(3.4rem,6vw,4.6rem)/.9 var(--display);color:#fff}
.promo__value span{font-size:.55em}
.promo__text{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.promo__text strong{font-size:14px}
.promo__text small{font-size:12px;color:rgba(255,255,255,.85)}
.promo__code{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border:1.5px dashed rgba(255,255,255,.8);border-radius:12px;background:rgba(0,0,0,.12);font:800 1.1rem var(--sans);letter-spacing:.12em;color:#fff}
.promo__code span{padding:6px 10px;border-radius:8px;background:#fff;color:var(--red);font-size:11px;letter-spacing:.08em}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 16px;border-radius:14px;background:#000;color:#fff;font:800 1.05rem/1.1 var(--sans);box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .2s,background .2s}
.store:hover{transform:translateY(-4px) scale(1.03);background:var(--navy-900);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.store:hover svg{animation:store-wiggle .6s ease-in-out}
@keyframes store-wiggle{30%{rotate:-12deg}60%{rotate:10deg}}
/* Ícono de App Barcazas (assets/icono-app-barcazas.svg) en el teléfono de muestra */
.screen__brand{display:flex;align-items:center;gap:6px}
.screen__brand::before{content:"";width:16px;height:16px;border-radius:4px;background:url("./assets/icono-app-barcazas.svg") center/cover}
.store svg{width:26px;height:26px}
.store small{display:block;font:500 10px var(--sans);letter-spacing:.06em;color:rgba(255,255,255,.7)}
.app__device{position:relative;display:grid;place-items:center;min-height:620px}
.device-glow{position:absolute;width:min(520px,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,.06) 55%,transparent 70%)}
.device-ring{position:absolute;width:min(460px,82%);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.18)}
.device-ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:2px dashed rgba(63,122,243,.55);animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.phone{position:relative;width:290px;height:590px;padding:16px;border-radius:46px;background:linear-gradient(160deg,#1b2a4d,#060b18);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 0 0 7px #03060f,0 40px 90px rgba(4,16,60,.55);animation:float 6s ease-in-out infinite;transform:rotate(-4deg)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.phone__notch{position:absolute;top:22px;left:50%;width:90px;height:24px;margin-left:-45px;border-radius:20px;background:#03060f;z-index:2}
.screen{position:absolute;inset:16px;padding:58px 20px 22px;border-radius:32px;background:linear-gradient(180deg,#fff,#eaf0ff);color:var(--navy-900);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:12px}
.phone[data-screen="1"] [data-screen-id="1"],.phone[data-screen="2"] [data-screen-id="2"],.phone[data-screen="3"] [data-screen-id="3"],.phone[data-screen="4"] [data-screen-id="4"]{opacity:1;transform:none}
.screen__brand{margin:0;font:800 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.screen__title{margin:0 0 6px;font:800 1.35rem/1.2 var(--sans)}
.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#4a5f8a}
.field i{display:block;height:38px;border-radius:10px;background:#fff;border:1px solid #c8d8f5}
.screen__button{margin-top:auto;padding:14px;border-radius:14px;background:var(--red);color:#fff;text-align:center;font:800 14px var(--sans)}
.ticket-line{display:flex;justify-content:space-between;padding:12px 14px;border-radius:12px;background:#fff;font-size:13px;box-shadow:0 2px 8px rgba(6,26,64,.06)}
.ticket-line b{color:var(--blue)}
.pay-card{position:relative;height:120px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;padding:16px;font:700 12px var(--sans)}
.pay-card i{position:absolute;left:16px;bottom:16px;width:40px;height:28px;border-radius:6px;background:linear-gradient(135deg,#ffd76a,#c99a2e)}
.mini-ticket{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 76px 14px 14px;min-height:82px;border-radius:14px;background:#fff;font-size:12px;color:#4a5f8a;border-left:4px solid var(--red);box-shadow:0 2px 10px rgba(6,26,64,.08)}
.mini-ticket b{color:var(--navy-900);font-size:14px}
.mini-qr{position:absolute;right:12px;top:12px;width:56px;height:56px}
.big-qr{align-self:center;width:190px;height:190px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(8,28,71,.2);outline:3px solid var(--red);outline-offset:6px}
.mini-qr svg,.big-qr svg{display:block;width:100%;height:100%}
.screen__hint{margin:0;text-align:center;font-size:12px;font-weight:700;color:#4a5f8a}
.float-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:#fff;color:var(--navy-900);font:700 13px var(--sans);box-shadow:0 18px 40px rgba(4,16,60,.35);animation:float 7s ease-in-out infinite}
.float-chip__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--red);color:#fff;font-size:12px}
.float-chip--b .float-chip__icon{background:var(--blue)}
.float-chip--a{left:2%;top:18%;animation-delay:-2s}
.float-chip--b{right:0;bottom:16%;animation-delay:-4s}
@media(max-width:600px){.app__device{min-height:560px}.phone{width:260px;height:530px}.float-chip--a{left:0;top:6%}.float-chip--b{right:0;bottom:4%}}

/* Preguntas frecuentes */
.faq{--gx:10%;--gy:30%}
.faq__grid{display:grid;gap:40px}
@media(min-width:1024px){.faq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.faq__list{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:border-color .3s,background .3s,box-shadow .3s}
.faq-item[open]{border-color:var(--line-strong);background:var(--card);box-shadow:var(--shadow)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;list-style:none;font:700 1rem/1.4 var(--sans)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);font-weight:400;font-size:20px;transition:transform .35s,background .3s,color .3s}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--red);border-color:transparent;color:#fff}
.faq-item::details-content{block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.16,1,.3,1),content-visibility .4s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
.faq-item p{margin:0;padding:0 22px 22px;color:var(--muted);line-height:1.7}

/* Contacto */
.contact{--gx:85%;--gy:15%}
.contact__grid{display:grid;gap:22px}
@media(min-width:1024px){.contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contact__cards{display:grid;gap:12px}
.contact-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 56px 20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:border-color .25s,transform .25s,background .25s}
.contact-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);transition:width .3s}
.contact-card:nth-child(even)::before{background:var(--red)}
.contact-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.contact-card:hover::before{width:8px}
.contact-card__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-card strong{font:800 clamp(1.05rem,2vw,1.3rem)/1.3 var(--sans);word-break:break-word}
.contact-card__sub{font-size:13px;color:var(--muted)}
.contact-card__go{position:absolute;right:20px;top:50%;translate:0 -50%;color:var(--red-light);font-size:20px;transition:transform .25s}
.contact-card:hover .contact-card__go{transform:translate(3px,-3px)}
.contact-form{display:grid;gap:16px;padding:clamp(22px,3vw,32px);border-radius:var(--radius);background:#fff;color:var(--navy-900);box-shadow:var(--shadow)}
.contact-form h3{margin:0;font:800 1.3rem var(--sans)}
.contact-form label{display:grid;gap:8px;font-size:13px;font-weight:700;color:rgba(6,26,64,.7)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;border:1px solid rgba(6,26,64,.18);border-radius:12px;background:#f6f8fd;color:var(--navy-900);font:500 15px var(--sans);transition:border-color .2s,box-shadow .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(34,82,230,.15)}
.contact-form__hint{margin:0;font-size:12px;line-height:1.6;color:rgba(6,26,64,.6)}

/* Encuéntranos */
.channels{--gx:50%;--gy:0%}
.carousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px max(var(--gutter),calc((100% - 1200px) / 2)) 40px;perspective:1200px;scrollbar-width:none;cursor:grab}
.carousel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel.is-dragging .channel{pointer-events:none}
/* Pantallas anchas: las cuatro tarjetas a la vista, sin desplazarse. */
@media(min-width:1100px){.carousel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;cursor:auto}.channel{flex:none}}
.carousel-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:-6px}
.carousel-nav__btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1.5px solid rgba(255,255,255,.65);border-radius:50%;background:transparent;color:#fff;font-size:20px;transition:background .2s,color .2s,opacity .2s}
.carousel-nav__btn:hover:not(:disabled){background:#fff;color:var(--red)}
.carousel-nav__btn:disabled{opacity:.35;cursor:default}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.channel{position:relative;flex:0 0 clamp(240px,26vw,300px);scroll-snap-align:center;display:flex;flex-direction:column;gap:6px;padding:16px 16px 22px;border-radius:26px;background:#fff;color:var(--navy-900);box-shadow:0 24px 50px rgba(20,28,60,.3);transform:translateY(var(--lift,0)) rotateY(var(--r,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s}
/* Al pasar el mouse: la tarjeta se levanta y se inclina hacia el cursor (sections.js), un brillo la
   sigue, el dibujo se acerca, cruza un destello y aparece la flecha «ir». Los íconos flotan suave
   siempre y al pasar el mouse cada uno hace su gesto. */
.channel:hover,.channel:focus-visible{--lift:-12px;box-shadow:0 44px 80px rgba(20,28,60,.5)}
.channel::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s;pointer-events:none}
.channel:hover::before{opacity:1}
.channel::after{content:"↗";position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font:800 16px/1 var(--sans);opacity:0;transform:translate(-8px,8px) scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.channel:hover::after,.channel:focus-visible::after{opacity:1;transform:none}
.channel__art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%);transform:translateX(-120%);pointer-events:none}
.channel:hover .channel__art::before{transform:translateX(120%);transition:transform .9s cubic-bezier(.65,0,.35,1)}
.channel__art{transition:background-size .8s,background-position .8s}
.channel__art i{animation:channel-bob 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.1s)}
.channel:nth-child(2) .channel__art i{--i:1}.channel:nth-child(3) .channel__art i{--i:2}.channel:nth-child(4) .channel__art i{--i:3}
@keyframes channel-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.channel:hover .channel__art--app i{animation:app-pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes app-pop{to{translate:0 -10px;rotate:-6deg;scale:1.12}}
.channel__art--ig{background-size:100% 100%;background-position:50% 50%}
.channel:hover .channel__art--ig{background-size:180% 180%;background-position:100% 0}
.channel:hover .channel__art--ig i{animation:ig-snap .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ig-snap{40%{scale:.85;rotate:-10deg}to{scale:1.15;rotate:0deg}}
.channel:hover .channel__art--fb i{animation:fb-bounce .9s cubic-bezier(.28,.84,.42,1) infinite}
@keyframes fb-bounce{0%,100%{translate:0 0;scale:1}30%{translate:0 -14px;scale:1.05 .95}55%{translate:0 0;scale:1.08 .92}70%{scale:.97 1.03}}
.channel:hover .channel__art--phone i{animation:phone-ring 1.1s ease-in-out infinite}
@keyframes phone-ring{0%,50%,100%{rotate:0deg}5%,15%,25%,35%{rotate:-14deg}10%,20%,30%,40%{rotate:14deg}}
.channel strong{font:800 1.2rem var(--sans);margin-top:10px}
.channel > span:last-child{font-size:13px;color:rgba(6,26,64,.62)}
.channel__art{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--navy-800),var(--navy-950))}
.channel__art i{position:absolute;inset:0;display:block}
.channel__art--app{background:linear-gradient(140deg,var(--blue),var(--blue-deep))}
.channel__art--app i{inset:0;margin:auto;width:46%;height:61%;border-radius:22%;background:url("./assets/icono-app-barcazas.svg") center/cover;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.channel__art--ig{background:radial-gradient(circle at 30% 110%,#ffd76a,#ff5e62 40%,#c13584 65%,#5851db)}
.channel__art--ig i{inset:28% 36%;border:5px solid #fff;border-radius:28%}
.channel__art--ig i::after{content:"";position:absolute;inset:28%;border:5px solid #fff;border-radius:50%}
.channel__art--fb{background:linear-gradient(140deg,#1877f2,#0b3d91)}
.channel__art--fb i::after{content:"f";position:absolute;inset:0;display:grid;place-items:center;font:800 5rem/1 Arial,sans-serif;color:#fff}
.channel__art--web{background:linear-gradient(140deg,var(--navy-800),var(--navy-950))}
.channel__art--web i{inset:16% 10%;border-radius:12px;background:linear-gradient(180deg,var(--red) 0 14%,#fff 14% 100%);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.channel__art--phone{background:linear-gradient(140deg,#5b8ff5,var(--red-deep))}
.channel__art--phone i::after{content:"☎";position:absolute;inset:0;display:grid;place-items:center;font-size:4rem;color:#fff}

/* Cierre */
.finale{--gx:50%;--gy:55%;--hx:50%;--hy:100%;text-align:center;padding-bottom:clamp(100px,14vw,180px)}
.finale__inner{display:flex;flex-direction:column;align-items:center}
.finale .kicker::after{content:"";width:28px;height:2px;background:currentColor}
.finale__logo{display:block;width:auto;height:clamp(150px,22vw,260px);margin:4px 0 22px}
.finale .lead{margin-inline:auto}

/* Blog: mosaico de fotos y videos (los videos, sin sonido, se reproducen solos mientras se ven). */
.blog{--gx:15%;--gy:5%;--hx:90%;--hy:95%}
.blog__head{display:grid;gap:8px 48px;align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.blog__head .display{margin-bottom:0}
.blog__head .lead{margin:0}
@media(min-width:1024px){.blog__head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
.blog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,30vw,230px);grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px)}
/* Computador: 4 columnas (la pieza grande ocupa 2 × 2 y las 6 verticales completan dos filas). */
@media(min-width:900px){.blog__grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,17vw,240px)}}
.post{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:22px;overflow:hidden;background:var(--navy-800);color:#fff;text-align:left;font:inherit;cursor:zoom-in;isolation:isolate;box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.post--wide{grid-column:span 2;grid-row:span 2}
.post--wide .post__media{object-position:50% 55%}
.post--tall{grid-row:span 2}
.post:hover,.post:focus-visible{transform:translateY(-8px);box-shadow:0 34px 70px rgba(0,0,0,.5)}
.post:focus-visible{outline:3px solid var(--red-light);outline-offset:3px}
.post__media{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.post:hover .post__media{transform:scale(1.1)}
.post::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,10,31,.35),transparent 30%,transparent 50%,rgba(2,10,31,.88));transition:opacity .4s}
.post__tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(2,10,31,.6);font:800 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.post__tag--video{background:var(--red)}
.post__tag--video::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:live-dot 1.6s ease-in-out infinite}
@keyframes live-dot{50%{opacity:.25}}
.post__text{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:3px;transform:translateY(6px);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.post:hover .post__text{transform:none}
.post__text strong{font:800 clamp(1rem,1.4vw,1.2rem)/1.25 var(--sans)}
.post__text span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.8);opacity:.85}
/* Ventana del blog */
.media-modal{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;font-family:var(--sans);overflow:hidden}
.media-modal[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:56px clamp(8px,2vw,24px) 24px;animation:modal-in .45s cubic-bezier(.16,1,.3,1) both}
.media-modal::backdrop{background:rgba(2,10,31,.9)}
.media-modal__figure{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;min-width:0;height:100%;justify-content:center}
.media-modal__stage{display:grid;place-items:center;min-height:0;max-height:calc(100svh - 140px)}
.media-modal__stage img,.media-modal__stage video{display:block;max-width:min(92vw,1400px);max-height:calc(100svh - 140px);width:auto;height:auto;border-radius:16px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.media-modal figcaption{text-align:center;font-size:14px;color:rgba(255,255,255,.8)}
.media-modal figcaption strong{display:block;font-size:1.05rem;color:#fff}
.media-modal__close{position:fixed;right:16px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--navy-900);font-size:26px;line-height:1;cursor:pointer;transition:transform .3s}
.media-modal__close:hover{transform:rotate(90deg)}
.media-modal__nav{width:48px;height:48px;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;background:transparent;color:#fff;font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.media-modal__nav:hover{background:#fff;color:var(--navy-900)}
@media(max-width:600px){.media-modal[open]{grid-template-columns:1fr;padding-bottom:84px}.media-modal__nav{position:fixed;bottom:20px}.media-modal__nav--prev{left:calc(50% - 60px)}.media-modal__nav--next{right:calc(50% - 60px)}}

/* Pie */
.footer{position:relative;background:var(--navy-950);color:#fff;padding:56px 0 28px;font-size:14px;content-visibility:auto;contain-intrinsic-size:auto 300px}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue) 0 33.3%,#fff 33.3% 66.6%,var(--red) 66.6% 100%)}
.footer__grid{display:grid;gap:32px}
@media(min-width:900px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer .logo{--logo-h:76px}
.footer .muted{color:rgba(222,232,255,.68)}
.footer nav{display:flex;flex-direction:column;gap:10px}
.footer nav p{margin:0 0 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-light);font-weight:800}
.footer nav a{color:rgba(222,232,255,.72);transition:color .2s}
.footer nav a:hover{color:#fff}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(140,175,255,.1);color:rgba(222,232,255,.6);font-size:13px}

/* Cinta de próximas salidas */
.ticker{position:relative;overflow:hidden;background:var(--red);color:#fff;font:700 14px/1 var(--sans);box-shadow:inset 0 -1px 0 rgba(255,255,255,.18)}
.ticker__track{display:flex;width:max-content;animation:ticker 45s linear infinite;animation-play-state:paused}
.ticker.is-running .ticker__track{animation-play-state:running}
/* Sin pausa al pasar el mouse: la cinta anda siempre (pedido del cliente). */
.ticker__group{display:flex;align-items:center;gap:34px;padding:15px 17px}
.ticker__item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ticker__item b{padding:5px 8px;border-radius:6px;background:#fff;color:var(--red);font-variant-numeric:tabular-nums}
.ticker__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.ticker__sep{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Dígitos que giran al cambiar (próxima salida del inicio) */
.flip{display:inline-flex;perspective:200px}
.flip__c{display:inline-block;transform-origin:50% 60%}
.flip__c.is-flipping{animation:flip .55s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--k) * 60ms)}
@keyframes flip{from{transform:rotateX(-95deg);opacity:0}to{transform:none;opacity:1}}

/* Botones magnéticos (siguen un poco al cursor) */
.magnetic,.magnetic:hover{transform:translate(var(--mx,0px),var(--my,0px));transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s,color .25s,box-shadow .25s}

/* Aviso al abrir la página: afiche de tarifas en una ventana (como en empresasrvc.cl) */
body.modal-open{overflow:hidden}
.tariff-modal{width:min(680px,calc(100% - 32px));max-width:none;max-height:min(88svh,900px);margin:auto;padding:0;border:0;border-radius:6px;background:transparent;color:#061a40;font-family:var(--sans);overflow:visible}
.tariff-modal[open]{animation:modal-in .45s cubic-bezier(.16,1,.3,1) both}
.tariff-modal::backdrop{background:rgba(4,16,43,.72)}
@keyframes modal-in{from{opacity:0;translate:0 24px;scale:.98}to{opacity:1;translate:none;scale:none}}
.tariff-modal__panel{display:flex;flex-direction:column;max-height:min(88svh,900px);background:#fff;border-top:6px solid var(--red);border-radius:6px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.tariff-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px 18px;border-bottom:1px solid rgba(6,26,64,.12)}
.tariff-modal__head h2{margin:0;font:800 clamp(1.25rem,2.6vw,1.6rem)/1.25 var(--sans);letter-spacing:-.01em;max-width:18ch}
.tariff-modal__close{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(6,26,64,.25);border-radius:4px;background:#fff;color:#33415c;font:600 15px var(--sans);font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.tariff-modal__close:hover:not(:disabled){border-color:var(--red);color:var(--red)}
/* Afiche de tarifas: «Cerrar en 3…» bloqueado los primeros 3 segundos. */
.tariff-modal__close:disabled{opacity:.5;cursor:not-allowed}
.tariff-modal__close span[aria-hidden]{font-size:20px;line-height:1}
.tariff-modal__body{overflow-y:auto;padding:20px 26px 26px;overscroll-behavior:contain}
.tariff-modal__body > p{margin:0 0 22px;font-size:16px;line-height:1.7;color:#1b2330}
.tariff-modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin:0 0 22px}
.tariff-modal__primary{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;background:var(--red);color:#fff;font:800 15px var(--sans);border-radius:2px;transition:background .2s}
.tariff-modal__primary:hover{background:var(--red-deep)}
.tariff-modal__link{font:700 16px var(--sans);color:#061a40;border-bottom:2px solid currentColor;padding-bottom:2px}
.tariff-modal__link:hover{color:var(--red)}
.poster--modal{max-width:none;box-shadow:0 10px 30px rgba(6,26,64,.15)}

/* Política de privacidad en una ventana */
.policy-modal{width:min(780px,calc(100% - 32px));max-width:none;max-height:min(90svh,960px);margin:auto;padding:0;border:0;background:transparent;color:#061a40;font-family:var(--sans);overflow:visible}
.policy-modal[open]{animation:modal-in .45s cubic-bezier(.16,1,.3,1) both}
.policy-modal::backdrop{background:rgba(4,16,43,.72)}
.policy-modal__panel{display:flex;flex-direction:column;max-height:min(90svh,960px);background:#fff;border-top:6px solid var(--blue);border-radius:6px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.policy-modal__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;border-bottom:1px solid rgba(6,26,64,.12)}
.policy-modal__head h2{margin:0;font:800 1.3rem/1.25 var(--sans)}
.policy-modal__body{overflow-y:auto;padding:8px 30px 34px;overscroll-behavior:contain;font-size:15.5px;line-height:1.75;color:#1b2330}
.policy-modal__body h1{margin:10px 0 4px;font:800 clamp(1.5rem,3.4vw,2.1rem)/1.2 var(--sans);color:#061a40}
.policy-modal__body h2{margin:34px 0 10px;padding-top:6px;font:800 1.2rem/1.3 var(--sans);color:#061a40;scroll-margin-top:12px}
.policy-modal__body h3{margin:20px 0 6px;font:800 1rem/1.4 var(--sans);color:var(--blue)}
.policy-modal__body p{margin:0 0 12px}
.policy-modal__body ul,.policy-modal__body ol{margin:0 0 14px;padding-left:22px}
.policy-modal__body li{margin-bottom:4px}
.policy-modal__body a{color:var(--blue);font-weight:700;border-bottom:1px solid currentColor}
.policy__kicker{margin:16px 0 0!important;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.policy__date{color:rgba(6,26,64,.6);font-size:14px}
.policy__lead{margin:6px 0 22px!important;padding-left:16px;border-left:4px solid var(--red);font-size:17px;font-weight:600;color:#061a40}
.policy__index{margin:20px 0 6px;padding:16px 20px;border-radius:10px;background:#f2f5fc}
.policy__index h2{margin:0 0 8px!important;font-size:1rem!important}
.policy__index ol{columns:2;column-gap:28px;margin:0!important}
.policy__index a{font-weight:600;border:0!important}
/* Elegir Gmail, Outlook u otra aplicación al tocar un correo. */
.mail-modal{width:min(460px,calc(100% - 32px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:#061a40;font-family:var(--sans);overflow:visible}
.mail-modal[open]{animation:modal-in .45s cubic-bezier(.16,1,.3,1) both}
.mail-modal::backdrop{background:rgba(4,16,43,.72)}
.mail-modal__panel{padding:20px 22px 22px;background:#fff;border-top:6px solid var(--red);border-radius:6px;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.mail-modal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.mail-modal__kicker{margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.mail-modal__address{margin:0 0 18px;font:800 1.15rem/1.3 var(--sans);overflow-wrap:anywhere}
.mail-modal__options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mail-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 16px;border:1.5px solid rgba(6,26,64,.14);border-radius:16px;color:#061a40;text-align:center;transition:border-color .2s,transform .2s,box-shadow .2s}
.mail-option:hover,.mail-option:focus-visible{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,26,64,.14)}
.mail-option svg{width:46px;height:46px;margin-bottom:4px}
.mail-option strong{font:800 1rem/1.2 var(--sans)}
.mail-option small{font-size:12px;color:rgba(6,26,64,.6)}
.mail-modal__web{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:rgba(6,26,64,.62);text-align:center}
.mail-modal__web a{color:var(--blue);font-weight:700;border-bottom:1px solid currentColor}
.mail-modal__more{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin-top:16px}
.mail-modal__more a,.mail-modal__more button{padding:0;border:0;border-bottom:1px solid currentColor;background:none;color:var(--blue);font:700 13.5px/1.4 var(--sans);cursor:pointer}
@media(max-width:600px){.policy-modal__head{padding:14px 18px}.policy-modal__body{padding:6px 18px 26px}.policy__index ol{columns:1}}
@media(max-width:600px){.tariff-modal__head{padding:18px 18px 14px}.tariff-modal__body{padding:16px 18px 20px}.tariff-modal__close{padding:0 12px;font-size:14px}}

/* Aviso a la comunidad: afiche de tarifas (copia del afiche de empresasrvc.cl).
   Medidas en cqw (ancho del afiche): mantiene sus proporciones en cualquier pantalla. */
.notice{--gx:12%;--gy:15%;--hx:95%;--hy:85%}
.notice__grid{display:grid;gap:48px;align-items:start}
@media(min-width:1024px){.notice__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.notice__intro{position:sticky;top:110px}}
.notice__hint{margin:-12px 0 26px;font-size:13px;color:var(--muted)}
.notice__actions{display:flex;flex-wrap:wrap;gap:12px}
.poster{
  --p-red:#3f7af3;--p-navy:#13284f;--p-teal:#1d6f84;--p-ink:#1b2330;--p-soft:#5d6574;--p-band:#eef0f3;--p-line:#e2e5ea;
  container-type:inline-size;justify-self:center;width:100%;max-width:640px;background:#fff;color:var(--p-ink);border-radius:8px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);font-family:Arial,Helvetica,sans-serif
}
.poster__head{position:relative;aspect-ratio:940/600;overflow:hidden;color:#fff}
.poster__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.poster__head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,36,0) 22%,rgba(8,16,36,.5) 52%,rgba(8,16,36,.78)),linear-gradient(0deg,rgba(8,16,36,.5),transparent 38%)}
.poster__logo{position:absolute;z-index:1;left:4.3cqw;top:0;width:18cqw;aspect-ratio:1.25;display:grid;place-items:center;background:#fff;border-radius:0 0 2cqw 2cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25)}
.poster__logo img{display:block;width:66%;height:auto}
.poster__top{position:absolute;z-index:1;right:4cqw;top:3.2cqw;display:flex;flex-direction:column;align-items:flex-end;gap:1.6cqw;text-align:right}
.poster__tag{padding:1cqw 2.2cqw;background:var(--p-red);font:800 2.15cqw/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.poster__sub{font:700 1.75cqw/1.2 Arial,sans-serif}
.poster__title{position:absolute;z-index:1;right:4cqw;top:17cqw;margin:0;text-align:right;font:900 10.6cqw/.98 'Arial Black',Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 .5cqw 2cqw rgba(0,0,0,.35)}
.poster__valid{position:absolute;z-index:1;right:4cqw;bottom:3.4cqw;left:24cqw;margin:0;display:flex;align-items:baseline;justify-content:center;gap:1.1cqw;padding:1.5cqw 1.6cqw;background:var(--p-red);font:800 2cqw/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 1cqw 3cqw rgba(0,0,0,.3)}
.poster__valid strong{font:900 3.9cqw/1 'Arial Black',Arial,sans-serif;letter-spacing:0}
.poster__routes{display:grid;grid-template-columns:1fr 1fr;padding:3.6cqw 4cqw 2cqw}
.poster__route{--tone:var(--p-red);--tone-line:var(--p-navy);padding:0 3cqw;text-align:center;cursor:default;transition:background .25s}
.poster__route + .poster__route{border-left:1px solid var(--p-line)}
.poster__route--teal{--tone:var(--p-teal);--tone-line:var(--p-teal)}
/* Explícito también para el rojo: el encabezado de la tabla (.poster__col) no es .poster__route y
   sin esto la etiqueta «RUTA 1» quedaba sin fondo (blanca sobre blanco). */
.poster__route--red{--tone:var(--p-red);--tone-line:var(--p-navy)}
.poster__pill{display:inline-block;padding:.9cqw 3.4cqw;background:var(--tone);color:#fff;font:800 2.5cqw/1 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:.4cqw}
.poster__line{position:relative;height:5.2cqw;margin:2.4cqw .6cqw .6cqw}
.poster__line::before{content:"";position:absolute;left:2cqw;right:2cqw;top:50%;height:.7cqw;background:var(--tone-line);translate:0 -50%}
.poster__dot{position:absolute;top:50%;width:3.6cqw;aspect-ratio:1;border:.8cqw solid var(--tone-line);border-radius:50%;background:#fff;translate:0 -50%}
.poster__dot--a{left:0}.poster__dot--b{right:0}
.poster__ferry{position:absolute;left:50%;top:50%;width:5.6cqw;color:var(--tone-line);translate:-50% -78%;animation:poster-ferry 7s ease-in-out infinite alternate}
.poster__route--teal .poster__ferry{animation-delay:-3.5s}
@keyframes poster-ferry{from{left:22%}to{left:78%}}
.poster__ends{display:flex;justify-content:space-between;font:700 2.2cqw/1.2 Arial,sans-serif;color:var(--tone-line)}
.poster__table{width:calc(100% - 8cqw);margin:1cqw 4cqw 0;border-collapse:collapse;table-layout:fixed}
.poster__table col:first-child{width:56%}
.poster__table thead th{padding:0 0 1.4cqw;font-weight:400;vertical-align:bottom}
.poster__table thead th:first-child{text-align:left;font:800 1.95cqw/1 Arial,sans-serif;letter-spacing:.14em;color:#4a5262;text-transform:uppercase;padding-bottom:2cqw}
.poster__col{display:flex;flex-direction:column;align-items:center;gap:.8cqw;font:600 1.65cqw/1.1 Arial,sans-serif;color:var(--p-ink)}
.poster__col .poster__pill{font-size:2.05cqw;padding:.8cqw 0;width:88%}
.poster__group th{padding:1.2cqw 1.4cqw;background:var(--p-band);text-align:left}
.poster__group span{display:inline-flex;align-items:center;gap:2cqw;font:800 1.95cqw/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#2a3242}
.poster__icon{display:grid;place-items:center;width:3.6cqw;aspect-ratio:1;background:var(--p-red);color:#fff;border-radius:.3cqw}
.poster__icon svg{width:70%;height:70%}
.poster__row td{padding:1.25cqw 0;border-bottom:1px solid var(--p-line);vertical-align:middle;transition:background .2s}
.poster__row:hover td{background:#f5f8fd}
.poster__name{text-align:left;padding-left:1cqw!important;font:600 2.3cqw/1.25 Arial,sans-serif;color:var(--p-ink)}
.poster__name small{display:block;margin-top:.4cqw;font:400 1.65cqw/1.3 Arial,sans-serif;color:var(--p-soft)}
.poster__badge{display:inline-block;margin-top:1cqw;padding:.7cqw 1.4cqw;border-radius:.6cqw;background:var(--p-red);color:#fff;font:800 1.3cqw/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.poster__cell{text-align:center}
.poster__cell b{display:block;font:800 2.9cqw/1.05 Arial,sans-serif;color:var(--p-ink);font-variant-numeric:tabular-nums}
.poster__cell small{display:block;margin-top:.3cqw;font:400 1.5cqw/1 Arial,sans-serif;color:#6b7380}
.poster__free{font:800 2.6cqw/1 Arial,sans-serif;letter-spacing:.06em;color:var(--p-red)}
.poster__na{font:700 1.9cqw/1 Arial,sans-serif;letter-spacing:.06em;color:#8a919c}
.poster[data-col="1"] [data-col="1"],.poster[data-col="2"] [data-col="2"]{background:rgba(63,122,243,.07)}
.poster[data-col="2"] [data-col="2"]{background:rgba(29,111,132,.09)}
.poster__foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;margin-top:3.4cqw;padding:3.2cqw 4cqw;background:#0b0b0d;color:#fff}
.poster__qr{width:13cqw;aspect-ratio:1;padding:.9cqw;background:#fff;color:#000}
.poster__qr svg{display:block;width:100%;height:100%}
.poster__info small{display:block;font:800 1.65cqw/1 Arial,sans-serif;letter-spacing:.2em;color:#cfd3da;text-transform:uppercase}
.poster__info strong{display:block;margin:.8cqw 0 .6cqw;font:800 3.6cqw/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.poster__info span{font:500 1.9cqw/1.2 Arial,sans-serif;color:#e5e7eb}
/* La dirección de la página (más larga que el teléfono que había antes): letra algo menor. */
.poster__info .poster__site{font-size:2.85cqw}
.poster__site a{color:inherit;text-decoration:none}
.poster__gov{display:flex;align-items:center;gap:2.4cqw;text-align:right;font:500 1.8cqw/1.35 Arial,sans-serif;color:#e5e7eb}
.poster__gov img{display:block;width:13cqw;height:auto}
.poster__gov b{display:block;margin-bottom:.6cqw;font:800 1.9cqw/1 Arial,sans-serif;letter-spacing:.12em;color:#fff;text-transform:uppercase}

/* PDF del afiche (?afiche, sections.js): solo el afiche, quieto y con sus colores, centrado en UNA
   hoja A4 (antes se imprimía la página entera con el resto invisible: hojas en blanco y el afiche
   repartido en partes). */
@media print{@page{size:A4 portrait;margin:8mm}}
html.afiche-pdf,html.afiche-pdf body{margin:0;background:#fff}
html.afiche-pdf body{display:flex;justify-content:center;align-items:flex-start;min-height:0}
html.afiche-pdf *,html.afiche-pdf *::before,html.afiche-pdf *::after{animation:none!important;transition:none!important}
html.afiche-pdf .poster{max-width:none;margin:0 auto;opacity:1!important;translate:none!important;transform:none!important;box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html.afiche-pdf .poster *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* Movimiento en toda la página. Solo transform y opacidad (los mueve la tarjeta gráfica, sin
   repintar), y las secciones fuera de pantalla no se dibujan (content-visibility), así que no le
   quitan fluidez al video de las barcazas. */
/* Los resplandores de fondo de cada sección se desplazan lento (detrás del contenido). */
.sec{isolation:isolate}
.sec::before,.sec::after{z-index:-1}
.sec::before{animation:glow-drift 18s ease-in-out infinite alternate}
@keyframes glow-drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.12)}}
/* Olas que corren en las secciones azul, roja y oscuras. */
.sec--blue::after,.sec--red::after,.routes::after,.notice::after,.contact::after{content:"";position:absolute;left:0;bottom:0;width:200%;height:140px;pointer-events:none;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 140' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 40q75-30 150 0t150 0 150 0 150 0'/%3E%3Cpath d='M0 80q75-30 150 0t150 0 150 0 150 0' opacity='.7'/%3E%3Cpath d='M0 120q75-30 150 0t150 0 150 0 150 0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") 0 100%/600px 140px repeat-x;
  animation:waves-run 26s linear infinite}
.routes::after,.notice::after,.contact::after{opacity:.07}
@keyframes waves-run{to{transform:translateX(-50%)}}
/* La rayita de cada antetítulo late y la palabra destacada de los títulos tiene un destello. */
.kicker::before{transform-origin:left;animation:kicker-line 3s ease-in-out infinite}
@keyframes kicker-line{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.7)}}
.display em .w{background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%),var(--em);background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:em-shine 6s ease-in-out infinite}
@keyframes em-shine{0%,55%{background-position:120% 0,0 0}100%{background-position:-20% 0,0 0}}
/* Botones: un brillo los cruza al pasar el mouse. */
.pill-button,.ghost-button,.primary-button--glow{position:relative;overflow:hidden;isolation:isolate}
.pill-button::before,.ghost-button::before,.primary-button--glow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
.pill-button:hover::before,.ghost-button:hover::before,.primary-button--glow:hover::before{transform:translateX(110%);transition:transform .75s cubic-bezier(.65,0,.35,1)}
/* Tarjetas que se levantan al pasar el mouse. */
.stat{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.stat::before{transition:width .35s}
.stat:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(6,26,64,.18)}
.stat:hover::before{width:8px}
.faq-item{transition:border-color .3s,background .3s,box-shadow .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.faq-item:not([open]):hover{transform:translateX(6px);border-color:var(--line-strong)}
.faq-item summary:hover::after{transform:rotate(90deg)}
.faq-item[open] summary:hover::after{transform:rotate(135deg)}
.contact-card{transition:border-color .25s,transform .4s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .3s}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.25)}
.route-card{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.route-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(0,0,0,.45)}
/* Con el scroll: los títulos se deslizan de lado y el teléfono de la App flota a otra velocidad. */
@supports (animation-timeline:view()){
  .sec .display{animation:title-drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes title-drift{from{translate:4% 0}to{translate:-4% 0}}
  .app__device{animation:device-parallax linear both;animation-timeline:view();animation-range:cover}
  @keyframes device-parallax{from{translate:0 70px}to{translate:0 -70px}}
}

/* Celular: «Nuevas tarifas» (afiche) y el Blog no ocupan lugar en la página; se abren desde el
   menú como un panel a pantalla completa, con «Cerrar» (sections.js). Pedido del cliente. */
.panel-close{display:none}
@media(hover:none){.notice__hint{display:none}}
/* Las Preguntas frecuentes (data-panel-always) son panel también en el computador. */
[data-panel-always]{display:none}
[data-mobile-panel].is-panel-open{display:block;position:fixed;inset:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;padding-top:76px}
[data-mobile-panel].is-panel-open .panel-close{display:inline-flex;align-items:center;gap:8px;position:fixed;top:14px;right:14px;z-index:3;padding:10px 16px;border:0;border-radius:999px;background:#fff;color:var(--navy-900);font:800 14px/1 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer}
[data-mobile-panel].is-panel-open .panel-close span{font-size:20px;line-height:.6}
[data-panel-always].is-panel-open .panel-close{background:var(--navy-900);color:#fff}
@media(min-width:768px){[data-panel-always].is-panel-open{padding-block:96px 56px}}
@media(max-width:767px){[data-mobile-panel]{display:none}}

/* Safari (iPhone, iPad, Mac) y pantallas táctiles: las secciones se dibujan siempre. Con
   content-visibility:auto, Safari a veces no detecta que una sección ya está en pantalla y la deja
   sin dibujar (se veía solo el fondo azul) o dibujada a medias (afiche cortado). */
@supports (font:-apple-system-body){.sec,.footer{content-visibility:visible}}
@media (hover:none) and (pointer:coarse){.sec,.footer{content-visibility:visible}}

/* Celular y pantallas táctiles: sin los adornos que se redibujan sin parar (resplandores que se
   desplazan, olas, destello de los títulos, títulos que se deslizan con el scroll, íconos que
   flotan). En un teléfono le quitan fluidez al scroll; las entradas y los toques siguen. */
@media(max-width:767px),(hover:none) and (pointer:coarse){
  .sec::before,.sec::after,.kicker::before,.display em .w,.sec .display,.app__device,.channel__art i{animation:none!important}
  .display em .w{background-image:var(--em)}
}

/* Movimiento reducido: todo visible y quieto */
@media(prefers-reduced-motion:reduce){
  [data-split] .w,[data-reveal]{opacity:1!important;transform:none!important;translate:none!important}
  .manifesto .w{opacity:1!important}
  .phone,.float-chip,.device-ring::after,.ticker__track,.poster__ferry,.flip__c{animation:none!important}
  .magnetic{transform:none!important}
  .channel{transform:none!important}
  .channel__art i,.channel__art i::after,.channel__art::before{animation:none!important;transition:none!important}
  .sec::before,.sec::after,.kicker::before,.display em .w,.sec .display,.app__device{animation:none!important}
  .stat:hover,.faq-item:hover,.contact-card:hover,.route-card:hover,.post:hover{transform:none!important}
  .post__media,.post__tag--video::before{transition:none!important;animation:none!important}
}