/* ============ FUENTES DE MARCA ============ */
  @font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/firasans-italic.woff2) format('woff2')}
  @font-face{font-family:'Fira Sans';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/firasans-italic-600.woff2) format('woff2')}
  @font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/firasans-300.woff2) format('woff2')}
  @font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/firasans-400.woff2) format('woff2')}
  @font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/firasans-500.woff2) format('woff2')}
  @font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/firasans-700.woff2) format('woff2')}
  @font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/robotoslab.woff2) format('woff2')}
  @font-face{font-family:'Basier Square';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/basiersquare.woff2) format('woff2')}

  /* ============ IDENTIDAD OUTNØRD ============ */
  :root{
    --paper:#F9F8F8;          /* fondo claro de la web original */
    --paper-alt:#EFEDF2;
    --white:#FFFFFF;
    --ink:#1E2235;            /* azul noche de marca */
    --ink-deep:#1E2235;       /* casi negro de marca */
    --ink-soft:rgba(30,34,53,.76);
    --ink-faint:rgba(30,34,53,.58);
    --berry:#9E5676;          /* acento vino de marca */
    --cta:#F5A524;            /* llamada a la acción */
    --cta-claro:#FFB84D;      /* al pasar el ratón: aclara */
    --cta-oscuro:#D98B14;     /* al pulsar */
    --wine:#551A33;
    --violet:#473D55;
    --grey:#C8C6CB;
    --snow:#F4F3F6;
    --snow-soft:rgba(249,248,248,.82);
    --snow-faint:rgba(249,248,248,.62);
    --berry-light:#C98CA8;    /* acento sobre fondos oscuros */
    --line:rgba(30,34,53,.12);
    --line-dark:rgba(249,248,248,.14);
    --ease:cubic-bezier(.22,1,.36,1);
    --pad:clamp(1.25rem,5vw,5.5rem);
    --r:10px;
    --nav-h:68px;
    --split:46%;
    --hero-r:clamp(22px,3vw,44px);   /* esquinas redondeadas del hero 1 */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);color:var(--ink);
    font-family:'Fira Sans',sans-serif;font-weight:300;
    font-size:1.02rem;line-height:1.7;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  ::selection{background:rgba(158,86,118,.22)}
  /* salto al contenido: solo visible al tabular */
  .salta{
    position:fixed;top:.6rem;left:.6rem;z-index:300;
    transform:translateY(-160%);transition:transform .25s var(--ease);
    background:var(--cta);color:var(--ink);text-decoration:none;
    font:500 .74rem/1 'Fira Sans';letter-spacing:.14em;text-transform:uppercase;
    padding:.85rem 1.2rem;border-radius:4px;
    box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  }
  .salta:focus-visible,.salta:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
  main:focus{outline:none}
  img{max-width:100%;display:block}
  picture{display:contents}   /* el <picture> solo agrupa formatos: la caja es la del <img loading="lazy" decoding="async"> */
  a{color:inherit}
  h1,h2,h3,h4{font-family:'Basier Square','Fira Sans',sans-serif;font-weight:400;line-height:1.14;letter-spacing:-.005em;text-wrap:balance}
  h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
  h3{font-size:clamp(1.4rem,2.6vw,2rem)}
  strong{font-weight:500}
  .kicker{
    font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink);font-weight:500;display:flex;align-items:center;gap:.9rem;
  }
  .kicker::before{content:"";width:2.2rem;height:1px;background:var(--ink);flex:none;opacity:.55}
  .dark .kicker{color:#fff}
  .dark .kicker::before{background:#fff;opacity:.6}
  .lead{color:var(--ink-soft);max-width:60ch;font-size:clamp(1rem,1.3vw,1.13rem)}
  /* palabras destacadas dentro del cuerpo de texto */
  .lead b,.prog li b,.amen div b,.day p b,details p b,.faq-cta p b{font-weight:500;color:var(--ink)}
  .dark .lead b,.dark .day p b,.dark details p b{color:var(--snow)}
  .boat .quote b,.final .lead b{color:var(--snow)}
  .hero-vid .slide p b{color:#fff;font-weight:700}
  header .lead b{color:var(--ink);font-weight:600}
  .dark .lead{color:var(--snow-soft)}
  em{font-style:italic}

  /* ============ BOTONES ============ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    padding:1rem 1.9rem;border-radius:2px;
    font:500 .8rem/1 'Fira Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;
    transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  }
  /* icono de cada botón */
  .btn .bi{
    width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .3s var(--ease);
  }
  .btn:hover .bi{transform:translateX(2px)}
  .btn-berry:hover .bi{transform:none}
  .btn:focus-visible,a:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
  .btn-berry{background:var(--cta);color:var(--ink)}
  .btn-berry:hover{background:var(--cta-claro);transform:translateY(-2px)}
  .btn-berry:active{background:var(--cta-oscuro);transform:translateY(0)}
  /* secundario: solo texto subrayado y flecha, sin fondo */
  .btn-ink{
    background:none;border:0;padding:0;border-radius:0;color:var(--ink);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;
    text-decoration-color:rgba(30,34,53,.35);
    transition:text-decoration-color .3s var(--ease),color .3s var(--ease);
  }
  .btn-ink:hover{background:none;transform:none;text-decoration-color:currentColor}
  .btn-ink:hover .bi{transform:translateX(4px)}
  /* sobre fotografía, en blanco */
  .hero-vid .slide .btn-ink{
    color:#fff;text-decoration-color:rgba(255,255,255,.5);
    text-shadow:0 1px 12px rgba(30,34,53,.85),0 1px 3px rgba(30,34,53,.6);
  }
  .btn-ghost{border-color:rgba(30,34,53,.35);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink);background:rgba(30,34,53,.05)}
  .dark .btn-ghost{border-color:rgba(249,248,248,.4);color:var(--snow)}
  .dark .btn-ghost:hover{border-color:var(--snow);background:rgba(249,248,248,.08)}
  .link-more{
    font:500 .78rem/1 'Fira Sans';letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
    text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;
  }
  .link-more::after{content:"→";font-size:1rem;transition:transform .3s var(--ease)}
  .link-more:hover::after{transform:translateX(6px)}


  /* ============ AURORA ANIMADA (bloque de contacto) ============ */
  .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .veil{position:absolute;filter:blur(52px);mix-blend-mode:screen;border-radius:50%;will-change:transform,opacity}
  .veil.a{left:-12%;top:-16%;width:78%;height:58%;
    background:linear-gradient(105deg,transparent 14%,rgba(84,214,164,.34) 40%,rgba(58,164,196,.22) 64%,transparent 88%);
    transform:rotate(-8deg);animation:drift-a 19s var(--ease) infinite alternate}
  .veil.b{right:-16%;top:-8%;width:70%;height:54%;
    background:linear-gradient(255deg,transparent 18%,rgba(110,96,180,.22) 48%,rgba(84,214,164,.2) 74%,transparent 92%);
    transform:rotate(6deg);animation:drift-b 25s var(--ease) infinite alternate}
  @keyframes drift-a{from{transform:rotate(-8deg) translate3d(-3%,0,0) scaleY(1)}to{transform:rotate(-3deg) translate3d(6%,4%,0) scaleY(1.25)}}
  @keyframes drift-b{from{transform:rotate(6deg) translate3d(3%,-2%,0)}to{transform:rotate(1deg) translate3d(-5%,5%,0) scaleY(1.18)}}

  /* ============ REVEAL ============ */
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
  .js .rv.on{opacity:1;transform:none}
  .js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}
  @media (prefers-reduced-motion:reduce){
    .js .rv{opacity:1;transform:none;transition:none}
    .veil{animation:none}
    html{scroll-behavior:auto}
  }

  /* ============ NAV ============ */
  html{scroll-padding-top:5.2rem}
  #nav{position:fixed;top:0;left:0;right:0;z-index:60;isolation:isolate}
  #nav.solid{box-shadow:0 12px 32px -18px rgba(0,0,0,.55)}
  /* cada capa es la barra completa; la clara se recorta según la sección de debajo */
  #nav .nav-in{
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
    padding:.9rem var(--pad);
    background:#1E2235;border-bottom:1px solid rgba(249,248,248,.1);
  }
  #nav .logo{height:34px;width:auto;flex:none}
  #nav .links{display:flex;gap:clamp(1.1rem,2vw,2rem);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
  #nav .links a{text-decoration:none;color:var(--snow-soft);transition:color .3s;white-space:nowrap}
  #nav .links a:hover{color:#fff}
  #nav .btn{padding:.75rem 1.4rem;flex:none}
  /* ---- navegación en pantallas medias y estrechas ---- */
  #nav .menu{
    display:none;width:44px;height:44px;flex:none;padding:0;cursor:pointer;
    background:none;border:1px solid rgba(249,248,248,.28);border-radius:6px;
    place-items:center;
  }
  #nav .menu span,#nav .menu span::before,#nav .menu span::after{
    content:"";display:block;width:19px;height:1.5px;background:#fff;border-radius:2px;
    transition:transform .3s var(--ease),opacity .2s var(--ease);
  }
  #nav .menu span{position:relative}
  #nav .menu span::before{position:absolute;top:-6px}
  #nav .menu span::after{position:absolute;top:6px}
  #nav .menu[aria-expanded="true"] span{background:transparent}
  #nav .menu[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  #nav .menu[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  .menu-panel{
    position:absolute;left:0;right:0;top:100%;z-index:59;
    background:#1E2235;border-bottom:1px solid rgba(249,248,248,.14);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.75);
    padding:.6rem var(--pad) 1.4rem;display:grid;gap:.1rem;
  }
  .menu-panel[hidden]{display:none}
  .menu-panel a{
    padding:.95rem 0;text-decoration:none;color:var(--snow-soft);
    font:400 .82rem/1 'Fira Sans';letter-spacing:.18em;text-transform:uppercase;
    border-bottom:1px solid rgba(249,248,248,.1);
  }
  .menu-panel a:hover,.menu-panel a:focus-visible{color:#fff}
  .menu-panel .btn{margin-top:1rem;border-bottom:0;justify-content:center}
  @media(max-width:1020px){
    #nav .links{display:none}
    #nav .menu{display:grid}
  }
  @media(min-width:1021px){.menu-panel{display:none}}
  /* en movil el CTA se queda entre el logo y el menu, y se compacta */
  @media(max-width:1020px){#nav .nav-in > .btn{margin-left:auto}}
  @media(max-width:600px){
    #nav .nav-in{gap:.6rem}
    #nav .nav-in > .btn{padding:.7rem .85rem;font-size:.66rem;letter-spacing:.1em}
    #nav .nav-in > .btn svg.bi{width:15px;height:15px}
  }

  /* ============ HERO — PARTIDO EN DOS MITADES ============ */
  header{
    position:relative;min-height:100svh;background:var(--ink-deep);
    display:grid;grid-template-columns:var(--split) 1fr;grid-template-rows:1fr auto;
  }
  @media(max-width:1000px){
    header{grid-template-columns:1fr;grid-template-rows:auto auto auto;--split:0%}
    .hero-pane{grid-row:1;grid-column:1}
    .hero-vid{grid-row:2;grid-column:1}
    .hero-car{grid-row:2;grid-column:1}
    .hero-stats{grid-row:3}
  }
  /* HERO 1 — mitad izquierda: fondo claro con nevada */
  .hero-pane{
    position:relative;display:flex;align-items:center;grid-row:1;grid-column:1;
    z-index:2;margin-top:var(--nav-h);
    /* lámina por delante: esquinas derechas redondeadas + sombra sobre el hero 2 */
    border-radius:0 var(--hero-r) var(--hero-r) 0;
box-shadow:0 0 0 1px rgba(255,255,255,.4),20px 0 38px -10px rgba(0,0,0,.62);
    background:
      radial-gradient(105% 80% at 4% 0%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 38%,transparent 62%),
      radial-gradient(100% 90% at 100% 100%,rgba(30,34,53,.34) 0%,transparent 64%),
      linear-gradient(156deg,#CBDAEA 0%,#AEC4DC 46%,#8FA9C6 100%);
  }
  /* foto de fondo del hero 1, tintada por el azul hielo */
  .hero-pane::before{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:image-set(url(../img/hero-esquiadores.avif) type("image/avif"), url(../img/hero-esquiadores.webp) type("image/webp"), url(../img/hero-esquiadores.jpg) type("image/jpeg")) center 42%/cover no-repeat;
    opacity:.55;mix-blend-mode:luminosity;
  }
  /* montañas sutiles al pie del hero 1 */
  .hero-pane .ridge{
    position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:
      /* velo hielo sobre la columna del texto, para que contraste siempre */
      linear-gradient(100deg,rgba(240,245,251,.93) 0%,rgba(240,245,251,.78) 42%,rgba(240,245,251,.6) 72%,rgba(240,245,251,.5) 100%),
      /* siluetas al pie */
      linear-gradient(180deg,transparent 60%,rgba(30,34,53,.1) 100%),
      conic-gradient(from 45deg at 20% 100%,transparent 0deg,rgba(30,34,53,.09) 90deg,transparent 91deg),
      conic-gradient(from 45deg at 68% 100%,transparent 0deg,rgba(30,34,53,.07) 90deg,transparent 91deg);
  }
  .hero-in{
    position:relative;width:100%;
    padding-top:clamp(2.6rem,5svh,4rem);
    padding-bottom:clamp(2.6rem,5svh,4rem);
    /* mismo margen a izquierda y derecha, alineado con la rejilla de las secciones */
    --hero-side-pad:clamp(1.25rem,3vw,3rem);
    padding-left:var(--hero-side-pad);
    padding-right:var(--hero-side-pad);
  }
  .hero-left{
    display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    gap:clamp(1.5rem,3.2svh,2.4rem);
  }
  .hero-head{display:flex;flex-direction:column;align-items:center;gap:1.15rem;width:100%}
  .hero-head .lead{text-align:center;max-width:24rem;margin:0 auto;font-size:clamp(.9rem,1.05vw,1rem);line-height:1.62}
  .hero-left h1{margin:0}
  .hero-left .hero-cta{margin-top:0}
  @media(max-width:1000px){
    .hero-pane{
      min-height:calc(var(--vh0,100svh) - var(--nav-h));
      border-radius:0 0 clamp(16px,4vw,28px) clamp(16px,4vw,28px);
      box-shadow:0 1px 0 rgba(255,255,255,.5);
    }
    .hero-in{padding-bottom:11rem}
    .hero-left{gap:1.5rem}
  }
  /* franja de datos: abarca las dos mitades */
  .hero-stats{
    position:relative;grid-column:1/-1;z-index:4;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    background:var(--ink);
    border-top:1px solid rgba(249,248,248,.14);
  }
  .hero-stats .cell{
    padding:1.35rem 1rem;text-align:center;position:relative;
  }
  .hero-stats .cell + .cell::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:2.4rem;background:rgba(249,248,248,.16);
  }
  .hero-stats b{font:400 clamp(1.25rem,2vw,1.8rem)/1.15 'Roboto Slab',serif;color:#fff;display:block;font-variant-numeric:tabular-nums}
  .hero-stats i{font-style:normal;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--snow-soft)}
  /* cinco estrellas en lugar de una cifra */
  .hero-stats .stars{display:flex;justify-content:center;gap:.22rem;line-height:1;padding:.3rem 0 .16rem}
  .hero-stats .stars svg:not(.glogo){width:clamp(14px,1.25vw,18px);height:auto;fill:#F5B32B;flex:none}
  .hero-stats .glogo{width:clamp(15px,1.35vw,19px);height:auto;flex:none;margin-right:.2rem}
  .hero-stats .nota{font:400 .95rem/1 'Roboto Slab',serif;color:#fff;margin-left:.35rem;font-variant-numeric:tabular-nums}
  @media(max-width:700px){.hero-stats .stars svg:not(.glogo){width:12px}.hero-stats .glogo{width:13px}.hero-stats .nota{font-size:.82rem}}
  @media(max-width:760px){
    .hero-stats .cell{padding:1rem .5rem}
    .hero-stats b{font-size:1.05rem}
    .hero-stats i{font-size:.58rem;letter-spacing:.12em}
  }
  /* ============ CARRUSEL DE VÍDEOS (3 programas) ============ */
  /* capa de vídeo: ocupa todo el hero y va por detrás, así asoma por las esquinas del hero 1 */
  .hero-vid{
    position:relative;overflow:hidden;background:var(--ink-deep);
    grid-row:1;grid-column:1/-1;z-index:0;
    opacity:0;animation:carin 1.1s var(--ease) .4s forwards;
  }
  /* columna derecha: solo los controles, transparente sobre el vídeo */
  .hero-car{
    position:relative;grid-row:1;grid-column:2;z-index:3;pointer-events:none;

  }
  @keyframes carin{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.hero-vid{opacity:1;animation:none}}
  @media(max-width:1000px){
    .hero-vid{height:78svh;box-shadow:inset 0 18px 40px -16px rgba(0,0,0,.6)}
    .hero-car{height:78svh;box-shadow:none}
  }
  .hero-vid .stage{position:absolute;inset:0}
  .hero-vid .slide{
    position:absolute;inset:0;opacity:0;pointer-events:none;
    transition:opacity .8s var(--ease);
  }
  .hero-vid .slide.on{opacity:1;pointer-events:auto}
  .hero-vid .slide img.foto{
    position:absolute;left:calc(var(--split) - var(--hero-r));top:0;
    width:calc(100% - var(--split) + var(--hero-r));height:100%;
    object-fit:cover;background:var(--ink-deep);
    object-position:var(--focus,60%) center;
  }
  .hero-vid .slide .grad{
    position:absolute;top:0;bottom:0;right:0;left:var(--split);
    background:linear-gradient(180deg,rgba(30,34,53,.3) 0%,transparent 24%,transparent 52%,rgba(30,34,53,.34) 74%,rgba(30,34,53,.62) 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(80px,10vw,170px));
    mask-image:linear-gradient(90deg,transparent 0,#000 clamp(80px,10vw,170px));
  }
  .hero-vid .slide .body{
    position:absolute;left:var(--split);right:0;top:0;bottom:0;
    padding:clamp(4rem,8svh,6rem) clamp(1.6rem,2.4vw,2.4rem) clamp(3rem,6svh,4rem);
    display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-content:end;
    text-align:left;gap:.6rem 1.4rem;
  }
  @media(max-width:700px){
    .hero-vid .slide .body{grid-template-columns:1fr;justify-items:start}
    .hero-vid .slide .vert{display:none}
    .hero-vid .slide .t{grid-area:1/1/2/2}
    .hero-vid .slide .dsc{grid-area:2/1/3/2}
  }
  /* numeración arriba del hero 2 */
  .hero-vid .slide .num::before,.hero-vid .slide .num::after{display:none}
  .hero-vid .slide .t{
    font:400 clamp(1.7rem,2.9vw,2.6rem)/1.14 'Basier Square','Fira Sans',sans-serif;color:#fff;
    text-shadow:0 2px 22px rgba(30,34,53,.9),0 1px 4px rgba(30,34,53,.65);
  }
  /* ancho en ch: cada descripcion cabe en dos lineas */
  .hero-vid .slide p{font:500 .95rem/1.5 'Fira Sans',sans-serif;color:#fff;max-width:min(100%,44ch);text-shadow:0 1px 14px rgba(30,34,53,.95),0 1px 3px rgba(30,34,53,.7)}
  /* palabra vertical, de abajo arriba */
  .hero-vid .slide .vert{
    grid-area:1/1/3/2;align-self:end;justify-self:start;
    writing-mode:vertical-rl;transform:rotate(180deg);
    display:flex;align-items:center;gap:.85rem;
    font:500 .62rem/1 'Fira Sans';letter-spacing:.34em;text-transform:uppercase;
    color:rgba(255,255,255,.7);margin:0 .9rem 1.6rem 0;
    text-shadow:0 1px 10px rgba(30,34,53,.9);
  }
  /* remate: una raya que se apaga al alejarse de la palabra */
  .hero-vid .slide .vert::after{
    content:"";flex:none;width:1px;height:3.4rem;
    background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,0));
  }
  .hero-vid .slide .t{grid-area:1/2/2/3;align-self:end;max-width:30rem}
  .hero-vid .slide .dsc{grid-area:2/2/3/3;max-width:min(30rem,100%)}
  /* el botón se ancla a la línea que separa el título de la descripción */
  .hero-vid .slide .btn{
    grid-area:1/3/2/4;justify-self:end;align-self:end;margin:0;white-space:nowrap;
    transform:translateY(calc(50% + .3rem));
  }
  @media(max-width:700px){
    .hero-vid .slide .btn{grid-area:3/1/4/2;justify-self:start;transform:none;margin-top:.8rem}
  }
  /* controles: flechas a los lados, indicadores abajo */
  .hero-car .arrow{
    pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(30,34,53,.32);color:#fff;border:1px solid rgba(249,248,248,.35);
    font:300 1.15rem/1 'Fira Sans';
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  }
  .hero-car .arrow.prev{left:1.1rem}
  .hero-car .arrow.next{right:1.1rem}
  .hero-car .arrow:hover{background:rgba(249,248,248,.92);border-color:#fff;color:var(--ink)}
  /* las tres pestañas: se ve de golpe que son tres viajes distintos */
  .hero-car .tabs-tit{
    position:absolute;left:0;right:0;top:calc(clamp(6.6rem,12svh,8.8rem) - 1.15rem);z-index:4;
    text-align:center;pointer-events:none;
    font:500 .64rem/1 'Fira Sans';letter-spacing:.28em;text-transform:uppercase;
    color:rgba(255,255,255,.82);text-shadow:0 1px 12px rgba(30,34,53,.9);
  }
  @media(max-width:1000px){.hero-car .tabs-tit{top:0}}
  @media(max-width:620px){.hero-car .tabs-tit{font-size:.56rem;letter-spacing:.18em}}
  .hero-car .tabs{
    pointer-events:auto;position:absolute;left:0;right:0;top:clamp(6.6rem,12svh,8.8rem);z-index:4;
    width:max-content;max-width:calc(100% - 2.5rem);margin:0 auto;
    display:flex;gap:.25rem;padding:.3rem;border-radius:999px;
    background:rgba(30,34,53,.62);border:1px solid rgba(249,248,248,.24);overflow:hidden;
    -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  }
  .hero-car .tab{
    position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;cursor:pointer;border:0;border-radius:999px;
    padding:.55rem 1rem;background:none;color:var(--snow-soft);
    font:500 .68rem/1 'Fira Sans';letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
    transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  }
  .hero-car .tab b{font:400 .74rem/1 'Roboto Slab',serif;letter-spacing:.04em;opacity:.7}
  .hero-car .tab:not(.on):hover{
    color:#fff;background:rgba(249,248,248,.14);
    box-shadow:0 8px 20px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(249,248,248,.28);
  }
  .hero-car .tab.on{color:var(--ink)}
  /* la marca blanca: viaja hasta la pestaña activa en vez de saltar */
  .hero-car .marca{
    position:absolute;left:0;top:.3rem;bottom:.3rem;width:0;z-index:0;
    border-radius:999px;background:#fff;pointer-events:none;
    transform:translateX(0);
    transition:none;
  }
  .hero-car .marca.listo{transition:transform .5s var(--ease),width .5s var(--ease)}
  @media (prefers-reduced-motion:reduce){.hero-car .marca.listo{transition:none}}
  .hero-car .tab.on b{opacity:1;color:var(--berry)}
  /* barra de progreso del auto-avance, en el borde inferior de la paginación */
  .hero-car .bar{
    position:absolute;left:0;bottom:0;height:2px;width:100%;
    transform:scaleX(0);transform-origin:left center;
    background:#fff;opacity:.9;pointer-events:none;
    animation:barra var(--auto,7s) linear infinite;
  }
  @keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hero-car.manual .bar{display:none;animation:none}  /* al navegar a mano desaparece */
  @media (prefers-reduced-motion:reduce){.hero-car .bar{display:none;animation:none}}
  @media(max-width:1000px){.hero-car .tabs{top:1.2rem}}
  @media(max-width:620px){
    .hero-car .tab{padding:.5rem .7rem;font-size:.6rem;letter-spacing:.1em}
    .hero-car .tab span{display:none}
    .hero-car .tab b{font-size:.8rem}
  }
  .hero-in .kicker{color:var(--ink);justify-content:center}
  .hero-in .kicker::before{background:var(--ink);opacity:.5}
  .hero-sub{
    font:400 clamp(1.05rem,1.45vw,1.42rem)/1.25 'Basier Square','Fira Sans',sans-serif;color:var(--ink);
    display:flex;align-items:center;justify-content:center;gap:.7rem;margin:-.5rem 0 .35rem;
  }
  .hero-sub::before{content:"";width:1.6rem;height:1px;background:var(--ink);opacity:.55;flex:none}
  .hero-in h1{
    color:var(--ink);font-size:clamp(1.85rem,2.9vw,3.5rem);font-weight:400;margin:1.5rem 0 0;
  }
  @media(max-width:1000px){.hero-in h1{font-size:clamp(2.2rem,7vw,4rem)}}
  .hero-in h1 .row span{white-space:nowrap}
  .hero-in h1 b{font-weight:600}
  .hero-in h1 .row{display:block;overflow:hidden}
  .hero-in h1 .row span{display:block;transform:translateY(112%);animation:rise 1.1s var(--ease) forwards}
  .hero-in h1 .row:nth-child(2) span{animation-delay:.15s}
  @keyframes rise{to{transform:none}}
  @media (prefers-reduced-motion:reduce){.hero-in h1 .row span{transform:none;animation:none}}
  /* ancho en ch: la desc se queda en tres líneas en cualquier pantalla */
  .hero-in .lead{color:var(--ink);font-weight:400;max-width:min(100%,66ch);margin:0 auto}
  .hero-cta{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
  .hero-cta .btn-berry{padding:.95rem 1.5rem}   /* panel estrecho: entra en una línea */
  .hero-cta .btn-ink{padding:0 .2rem}
  .hero-season{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.3rem}
  .hero-season span{
    display:inline-flex;align-items:center;gap:.5rem;
    font:400 .72rem/1.3 'Fira Sans';letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  }
  .hero-season i{width:5px;height:5px;border-radius:50%;background:var(--berry);flex:none}
  .hero-season b{font-weight:600;color:var(--ink);letter-spacing:.06em}
  @media(max-width:520px){.hero-season{gap:.35rem .9rem}.hero-season span{font-size:.66rem}}

  /* ============ TÍTULOS LETRA A LETRA (diagonal) ============ */
  .tsplit .word{display:inline-block;white-space:nowrap}
  .js .tsplit .ch{
    display:inline-block;opacity:0;
    transform:translate(.45em,.9em) rotate(9deg);
    transform-origin:0 100%;
    transition:transform .75s var(--ease),opacity .45s ease;
    transition-delay:var(--d,0s);
    will-change:transform;
  }
  .js .tsplit.go .ch{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.js .tsplit .ch{opacity:1;transform:none;transition:none}}


  /* ============ SECCIONES ============ */
  section{position:relative;padding:clamp(4rem,10svh,8rem) var(--pad)}
  .wrap{max-width:1200px;margin:0 auto}
  .dark{background:var(--ink-deep);color:var(--snow)}
  .alt{background:var(--white)}

  /* Destino */
  .destino{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:stretch}
  @media(max-width:900px){.destino{grid-template-columns:1fr}}
  .destino h2{margin:1.2rem 0 1.4rem}
  .shots{position:relative;isolation:isolate;margin-right:1.2rem;margin-bottom:1.2rem;display:flex;align-self:stretch}
  .shots::after{
    content:"";position:absolute;inset:1.2rem -1.2rem -1.2rem 1.2rem;border:1px solid rgba(30,34,53,.35);z-index:-1;
  }
  .shots img.foto{width:100%;height:100%;min-height:22rem;aspect-ratio:auto;object-fit:cover}
  @media(max-width:900px){.shots img.foto{height:auto;aspect-ratio:4/3}}
  .shots .mini{
position:absolute;left:-1.6rem;bottom:-1.8rem;width:min(38%,13rem);height:auto;aspect-ratio:1/1;object-fit:cover;z-index:2;
    border:6px solid var(--paper);box-shadow:0 24px 48px -24px rgba(30,34,53,.45);
  }
  .gastro .gwrap{position:relative}
  .gastro .mini{
    position:absolute;right:-1rem;bottom:-1.6rem;width:44%;aspect-ratio:4/3;object-fit:cover;
    border:6px solid var(--white);box-shadow:0 24px 48px -24px rgba(30,34,53,.45);
  }
  /* filosofía — cita a todo el ancho, sin huecos */
  .philo{
    display:grid;grid-template-columns:1fr minmax(300px,28rem);gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
    margin-top:clamp(1.4rem,3svh,2.2rem);
  }
  @media(max-width:860px){.philo{grid-template-columns:1fr}}
  .philo blockquote{position:relative;padding-top:2.6rem}
  .philo blockquote::before{
    content:"“";position:absolute;top:-.6rem;left:-.4rem;
    font:400 6.5rem/1 'Roboto Slab',serif;color:var(--ink);opacity:.16;
  }
  .philo .q{
    font:italic 300 clamp(1.25rem,2.3vw,1.85rem)/1.5 'Fira Sans';color:var(--ink);
    max-width:44ch;text-wrap:balance;display:block;
  }
  .philo cite{display:block;margin:1.3rem 0 2.4rem;font:500 .7rem/1 'Fira Sans';letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-style:normal}
  .philo .q b{font-weight:600;font-style:italic;color:var(--ink)}
  /* ============ VÍDEOS DE YOUTUBE ============ */
  .ytcol{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .yt{
    position:relative;display:block;width:100%;aspect-ratio:3/4;text-decoration:none;
    padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer;
    background:var(--ink);box-shadow:0 22px 44px -24px rgba(30,34,53,.5);
  }
  .yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),opacity .3s var(--ease)}
  .yt:hover img{transform:scale(1.04);opacity:.9}
  .yt .play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:56px;height:56px;border-radius:50%;
    background:rgba(30,34,53,.72);border:1px solid rgba(249,248,248,.6);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:background .3s var(--ease),transform .3s var(--ease);
  }
  .yt .play::after{
    content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
    border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
  }
  .yt:hover .play{background:var(--berry);border-color:var(--berry);transform:translate(-50%,-50%) scale(1.06)}
  .yt .cap{
    position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .8rem;text-align:left;
    font:400 .8rem/1.35 'Fira Sans',sans-serif;color:#fff;
    background:linear-gradient(0deg,rgba(30,34,53,.85),transparent);
  }
  .yt:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
  /* nombre de cada persona, bajo su vídeo */
  .persona{display:flex;flex-direction:column;gap:.7rem;margin:0}
  .persona figcaption{
    font:500 .66rem/1 'Fira Sans';letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);text-align:center;
  }
  .values{
    margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;gap:2.4rem;flex-wrap:wrap;
    font:500 .78rem/1 'Fira Sans';letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
  }

  /* Cabecera de sección */
  .sec-head{max-width:760px;margin-bottom:clamp(2.5rem,6svh,4rem)}
  .sec-head h2{margin:1.2rem 0 1.2rem}

  /* ============ PROGRAMAS — bloques editoriales alternos ============ */
  .prog{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:stretch;padding:clamp(3rem,7svh,5rem) 0;border-top:1px solid var(--line)}
  .prog:first-of-type{border-top:0;padding-top:0}
  .prog.flip .media{order:2}
  @media(max-width:900px){
    .prog,.prog.flip .media{grid-template-columns:1fr;order:0}
    .prog .media{min-height:0}
    .prog .media img.foto{position:static;height:auto;aspect-ratio:4/3.4}
  }
  .prog .media{position:relative;align-self:stretch;min-height:26rem}
  .prog .media img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .prog .media .tag{
    position:absolute;top:1.2rem;left:1.2rem;z-index:7;background:var(--ink);color:#fff;
    transition:box-shadow .22s var(--ease);
    font:500 .66rem/1 'Fira Sans';letter-spacing:.22em;text-transform:uppercase;padding:.6rem 1rem;
  }
  .prog .media:hover .tag{
    box-shadow:0 0 0 1px rgba(249,248,248,.55),0 10px 24px -12px rgba(0,0,0,.65);
  }
  .prog .media .mini{
    position:absolute;right:-1rem;bottom:-2rem;width:min(44%,15rem);height:auto;aspect-ratio:1/1;object-fit:cover;
    border:6px solid var(--paper);box-shadow:0 24px 48px -24px rgba(30,34,53,.45);
  }
  @media(max-width:900px){.prog .media .mini{right:.5rem}}
  /* el número, y a su lado el título con un icono sobre cada cosa que nombra */
  .prog .phead{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.5rem)}
  .prog .phead .num{flex:none}
  /* cada apunte, con su icono encima y separado de los demás */
  .prog .ptit{
    display:flex;align-items:flex-end;flex-wrap:wrap;gap:.6rem 1.9rem;margin:1.4rem 0 1.9rem;
    font:500 .62rem/1.4 'Fira Sans';letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  }
  .prog .ptit .seg{display:flex;flex-direction:column;align-items:center;gap:.55rem}
  .prog .ptit .seg i{font-style:normal;margin-right:-.2em}   /* descuenta el interletraje final */
  .prog .ptit .sep{align-self:flex-end;opacity:.35}
  @media(max-width:560px){.prog .ptit{gap:.6rem 1.1rem}.prog .ptit .sep{display:none}}
  .prog .ico.flip svg{transform:rotate(-65deg) scale(.86)}   /* esquis en horizontal: la diagonal los cruza limpia */
  .prog .num{
    font:300 clamp(3.2rem,5vw,4.6rem)/1 'Roboto Slab',serif;color:transparent;
    -webkit-text-stroke:1px var(--grey);letter-spacing:0;
  }
  .prog .ico{position:relative;display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem}
  .prog .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
  /* lo que el programa no lleva: tachado en diagonal, mismo color */
  .prog .ico.off::after{
    content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.6px;
    background:currentColor;transform:translateX(-50%) rotate(45deg);border-radius:2px;
  }
  .prog .phead{margin-bottom:1.15rem}
  .prog .phead h3{
    margin:0;font-size:clamp(1.35rem,2.2vw,1.75rem);color:var(--ink);
  }
  .prog .lead{font-size:1rem}
  .prog ul{list-style:none;margin:1.7rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.6rem}
  @media(max-width:560px){.prog ul{grid-template-columns:1fr}}
  .prog li{font-size:.9rem;color:var(--ink-soft);padding-left:1.3rem;position:relative}
  .prog li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1.5px;background:var(--ink);opacity:.55}
  .prog-foot{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.1rem}
  .price{display:flex;flex-direction:column}
  .price b{font:400 1.65rem/1.1 'Roboto Slab',serif}
  .price span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-top:.2rem}


  /* ============ TRIPTICO DE FOTOS (semana) ============ */
  .tript{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:3rem}
  @media(max-width:760px){.tript{grid-template-columns:1fr}}
  .tript figure{position:relative;overflow:hidden}
  .tript img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
  .tript figure:hover img{transform:scale(1.05)}
  .tript figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:2rem 1.1rem .8rem;
    background:linear-gradient(0deg,rgba(30,34,53,.75),transparent);
    font:500 .68rem/1.4 'Fira Sans';letter-spacing:.2em;text-transform:uppercase;color:#fff;
  }
  /* incluye / no incluye */
  /* ============ QUÉ INCLUYE (líneas dentro de cada programa) ============ */
  .inc-lines{margin-top:2rem;border-top:1px solid var(--line)}
  .inc-lines > div{
    display:grid;grid-template-columns:6.2rem 1fr;gap:.2rem 1.2rem;
    padding:.8rem 0;border-bottom:1px solid var(--line);
  }
  .inc-lines b{font:500 .62rem/1.7 'Fira Sans';letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
  .inc-lines span{font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
  /* el signo distingue lo que entra de lo que no; el color es el mismo */
  .inc-lines b{display:flex;align-items:center;gap:.5rem}
  .inc-lines b::before{
    content:"+";flex:none;
    display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;
    font:400 .85rem/1 'Fira Sans';letter-spacing:0;
    color:var(--ink);border:1px solid rgba(30,34,53,.32);
  }
  .inc-lines .no b::before{content:"−"}
  @media(max-width:560px){.inc-lines > div{grid-template-columns:1fr}}
  /* versión oscura (bloque de auroras) */
  .dark .inc-lines{border-top-color:rgba(249,248,248,.18)}
  .dark .inc-lines > div{border-bottom-color:rgba(249,248,248,.18)}
  .dark .inc-lines b{color:#fff}
  .dark .inc-lines span{color:var(--snow-soft)}
  .dark .inc-lines b::before{color:#fff;border-color:rgba(249,248,248,.4)}
  /* tarifas escalonadas */
  .tiers{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
  .tiers span{
    font:400 .74rem/1 'Fira Sans';letter-spacing:.04em;color:var(--ink-soft);
    border:1px solid var(--line);padding:.5rem .8rem;white-space:nowrap;
  }
  .tiers b{font-weight:500;color:var(--ink)}
  .tiers a{
    color:var(--berry);font-weight:500;text-decoration:none;
    border-bottom:1px solid rgba(158,86,118,.5);padding-bottom:1px;
    transition:color .3s var(--ease),border-color .3s var(--ease);
  }
  .tiers a b{color:inherit;font-weight:500}
  .tiers a:hover{color:var(--wine);border-color:var(--wine)}

  /* ============ LODGE ============ */
  .lodge-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
  .lodge-grid .shots{order:-1}
  @media(max-width:900px){.lodge-grid{grid-template-columns:1fr}.lodge-grid .shots{order:0}}
  .amen{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem;margin-top:2rem}
  @media(max-width:560px){.amen{grid-template-columns:1fr}}
  .amen div{font-size:.9rem;color:var(--ink-soft);padding:.7rem 0 .7rem 1.3rem;border-left:1px solid var(--line);position:relative}
  .amen div::before{content:"";position:absolute;left:-1px;top:.95rem;width:1px;height:1rem;background:var(--ink)}

  /* Gastro */
  .gastro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
  @media(max-width:900px){.gastro{grid-template-columns:1fr}}
  .gastro img{aspect-ratio:3/4;object-fit:cover;width:100%}

  /* ============ BARCO — partido, sin aire muerto ============ */
  .boat{padding:0;background:var(--ink);color:var(--snow)}
  .boat .split{display:grid;grid-template-columns:1fr 1fr;min-height:58svh}
  @media(max-width:900px){.boat .split{grid-template-columns:1fr}}
  .boat .bg{
    position:relative;overflow:hidden;min-height:15rem;background:var(--ink-deep);
  }
  .boat .bg img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
  .boat .bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(30,34,53,.35),transparent 30%)}
  @media(max-width:900px){.boat .bg::after{background:linear-gradient(0deg,rgba(30,34,53,.5),transparent 40%)}}
  .boat .panel{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(1.8rem,4svh,2.6rem) clamp(1.5rem,4.5vw,4.5rem);
  }
  .boat .kicker{color:#fff}
  .boat .kicker::before{background:#fff;opacity:.7}
  .boat h2{color:#fff;font-weight:300}
  .boat h2 b{font-weight:600}
  .boat .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.4rem;border-top:1px solid rgba(249,248,248,.22);padding-top:1.1rem}
  @media(max-width:560px){.boat .facts{grid-template-columns:1fr}}
  .boat .facts b{font:400 clamp(1.4rem,2.2vw,1.9rem)/1.1 'Roboto Slab',serif;color:#fff;display:block;white-space:nowrap}
  .boat .facts span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--snow-soft)}
  .boat .quote{
    margin-top:1.3rem;padding-left:1.3rem;border-left:2px solid rgba(249,248,248,.45);
    font:italic 400 1.02rem/1.6 'Fira Sans';color:var(--snow-soft);max-width:46ch;
  }

  /* ============ SEMANA ============ */
  .week{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--line);margin-top:3rem}
  @media(max-width:820px){.week{grid-template-columns:1fr}}
  .day{padding:0 2rem 0 1.8rem;border-right:1px solid var(--line)}
  @media(max-width:820px){.day{border-right:0;padding:1.4rem 0 1.4rem 1.8rem;border-bottom:1px solid var(--line)}}
  .day .tag{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .day h4{font-size:1.15rem;font-weight:500;margin:.5rem 0 .5rem}
  .day p{color:var(--ink-soft);font-size:.92rem}

  /* ============ CÓMO TRABAJAMOS ============ */
  /* nota que responde a la duda antes de que la pregunten */
  .calma{
    display:flex;gap:.75rem;margin-top:1.6rem;padding:.9rem 1.1rem;border-radius:8px;
    background:var(--paper-alt);font-size:.86rem;line-height:1.55;color:var(--ink-soft);
  }
  .calma::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--berry);flex:none;margin-top:.55rem}
  .calma b{font-weight:500;color:var(--ink)}
  .alt .calma{background:var(--paper)}

  /* ============ ACORDEÓN ============ */
  details{border-bottom:1px solid var(--line)}
  details summary{
    cursor:pointer;list-style:none;padding:1.2rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;
    font:500 1rem/1.4 'Fira Sans';color:var(--ink);
  }
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";font:300 1.5rem/1 'Roboto Slab';color:var(--ink-faint);transition:transform .3s var(--ease),color .3s var(--ease)}
  details summary:hover::after{color:var(--ink)}
  details[open] summary::after{transform:rotate(45deg)}
  details p{padding:0 0 1.3rem;color:var(--ink-soft);font-size:.94rem;max-width:62ch}
  .faq-head{margin:0 0 .8rem;border-top:1px solid var(--line);padding-top:1.6rem}
  .faq-cta{
    margin-top:2.2rem;padding:1.7rem 1.8rem;border-radius:var(--r);
    background:var(--paper-alt);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  }
  .faq-cta h4{font:500 1.1rem/1.3 'Fira Sans';color:var(--ink);margin-bottom:.25rem}
  .faq-cta p{font-size:.86rem;color:var(--ink-soft);max-width:30ch}

  /* ============ CTA FINAL ============ */
  .final .kicker::after{content:"";width:2.2rem;height:1px;background:#fff;opacity:.7;flex:none}
  .final{position:relative;overflow:hidden;background:var(--ink-deep)}
  .final{padding-top:clamp(2.2rem,5svh,3.2rem)}   /* menos aire sobre el eyebrow */
  .final .in{position:relative;max-width:860px;margin:0 auto;text-align:center;padding:0 0 clamp(2rem,6svh,4rem)}
  .final h2{color:#fff;font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:400}
  .final h2 b{font-weight:600}
  .final .lead{margin:1.6rem auto 2.6rem;color:var(--snow-soft)}
  .contact-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .contact-alt{margin-top:2.4rem;font-size:.9rem;color:var(--snow-faint)}
  .contact-alt a{color:var(--snow-soft);text-decoration-color:rgba(249,248,248,.5);text-underline-offset:4px}
  .contact-alt a:hover{color:#fff}

  /* ============ FORMULARIO DE CONTACTO ============ */
  .cform{
    max-width:920px;margin:1.6rem auto 0;text-align:left;
    display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem 1.4rem;
    padding:clamp(1.5rem,3.4vw,2.9rem);border-radius:16px;
    background:rgba(249,248,248,.08);border:1px solid rgba(249,248,248,.22);
    -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
    box-shadow:0 34px 80px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);
  }
  /* teléfono: prefijo + número */
  .cform .tel-campo{
    display:grid;grid-template-columns:5rem 1fr;gap:0;
    background:rgba(30,34,53,.55);border:1px solid rgba(249,248,248,.26);border-radius:7px;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .cform .tel-campo:focus-within{border-color:#fff;background:rgba(30,34,53,.75)}
  /* el aviso de error tiñe el marco entero */
  .cform .tel-campo:has([aria-invalid="true"]){border-color:var(--berry-light);background:rgba(158,86,118,.14)}
  .cform .tel-campo .pref{position:relative;display:block}
  /* una raya fina separa el prefijo del número */
  .cform .tel-campo .pref::after{
    content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;
    background:rgba(249,248,248,.22);
  }
  .cform .tel-campo .mas{
    position:absolute;left:.85rem;top:50%;transform:translateY(-50%);pointer-events:none;
    font:300 .95rem/1 'Fira Sans';color:#fff;opacity:.9;
  }
  .cform .tel-campo #f-pref{padding-left:1.7rem;padding-right:.6rem;text-align:left}
  .cform .tel-campo input{min-width:0;background:none;border:0;border-radius:0}
  .cform .tel-campo input:focus{background:none}
  .cform .tel-campo #f-pref{font-variant-numeric:tabular-nums}
  /* viajeros: dos círculos para subir y bajar, en vez de las flechas diminutas */
  .cform .stepper{position:relative}
  .cform .stepper input{padding-right:5rem;text-align:left}
  .cform .stepper input::-webkit-outer-spin-button,
  .cform .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cform .paso{
    position:absolute;top:50%;transform:translateY(-50%);
    width:2rem;height:2rem;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;padding:0;
    background:rgba(249,248,248,.12);border:1px solid rgba(249,248,248,.3);
    font:400 1rem/1 'Fira Sans';color:#fff;
    transition:background .25s var(--ease),border-color .25s var(--ease);
  }
  .cform .paso:hover{background:rgba(249,248,248,.26);border-color:#fff}
  .cform .paso.menos{right:2.6rem}
  .cform .paso.mas{right:.55rem}
  /* fechas: si son flexibles, se apagan */
  /* poco aire entre las dos casillas, mas hacia el campo que gobiernan */
  .cform .dates.off{opacity:.42;pointer-events:none}
  .cform .head{
    grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding-bottom:1.1rem;margin-bottom:.2rem;border-bottom:1px solid rgba(249,248,248,.18);
  }
  .cform .head b{font:400 1.2rem/1.3 'Roboto Slab',serif;color:#fff}
  .cform .head span{font-size:.8rem;color:var(--snow-soft)}
  .cform .full,.cform .c6{grid-column:span 6}
  .cform .c4{grid-column:span 4}
  .cform .c3{grid-column:span 3}
  .cform .c2{grid-column:span 2}
  @media(max-width:860px){
    .cform .c4,.cform .c3{grid-column:span 4}
    .cform .c2{grid-column:span 2}
  }
  @media(max-width:600px){.cform{grid-template-columns:1fr}.cform .full,.cform .c6,.cform .c4,.cform .c3,.cform .c2{grid-column:1}}
  .cform label{
    display:block;font:500 .66rem/1 'Fira Sans';letter-spacing:.2em;text-transform:uppercase;
    color:var(--snow-soft);margin-bottom:.55rem;
  }
  .cform input,.cform select,.cform textarea{
    width:100%;padding:.85rem 1rem;
    font:300 .95rem/1.45 'Fira Sans',sans-serif;color:#fff;
    background:rgba(30,34,53,.55);border:1px solid rgba(249,248,248,.26);border-radius:7px;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .cform input::placeholder,.cform textarea::placeholder{color:rgba(249,248,248,.45)}
  .cform textarea{min-height:120px;resize:none}
  /* el calendario nativo, legible sobre fondo oscuro */
  .cform input[type=date]{
    color-scheme:dark;min-height:3rem;position:relative;
    -webkit-appearance:none;appearance:none;width:100%;min-width:0;
    padding-right:2.9rem;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'><rect x='3.4' y='5' width='17.2' height='15.6' rx='2.2'/><path d='M3.4 9.7h17.2M8 3.4v3.2M16 3.4v3.2'/></svg>");
    background-repeat:no-repeat;
    background-position:calc(100% - 14px) center;
    background-size:17px 17px;
  }
  /* placeholder propio en español mientras el campo está vacío */
  @supports selector(::-webkit-datetime-edit){
    .cform input[type=date].vacio:not(:focus)::-webkit-datetime-edit{opacity:0}
    .cform input[type=date].vacio:not(:focus)::before{
      content:attr(data-ph);position:absolute;left:1rem;top:50%;transform:translateY(-50%);
      font:300 .95rem/1 'Fira Sans';color:rgba(249,248,248,.45);pointer-events:none;
    }
  }
  /* brightness(0) lo vuelve negro y invert(1) blanco: sale blanco venga del color que venga */
  /* el indicador nativo, invisible: el icono visible es el del fondo */
  .cform input[type=date]::-webkit-calendar-picker-indicator{
    opacity:0;cursor:pointer;margin:0;padding:0;
  }
  @media(max-width:760px){
    /* en el movil, tocar cualquier parte del campo abre el calendario */
    .cform input[type=date]::-webkit-calendar-picker-indicator{
      position:absolute;inset:0;width:100%;height:100%;
    }
  }
  .cform input[type=number]{-moz-appearance:textfield}
  .cform .opc{letter-spacing:.1em;text-transform:none;color:var(--snow-faint);font-weight:400}
  .cform .hint{display:block;margin-top:.45rem;font-size:.72rem;line-height:1.4;color:var(--snow-faint)}
  .cform .err{display:none;margin-top:.45rem;font-size:.74rem;line-height:1.4;color:var(--berry-light)}
  .cform .err.on{display:block}
  .cform [aria-invalid="true"]{border-color:var(--berry-light);background:rgba(158,86,118,.14)}
  .cform input[type=checkbox]{
    width:24px;height:24px;min-width:24px;flex:none;margin:0;
    accent-color:var(--berry);cursor:pointer;
  }
  .cform input[type=checkbox][aria-invalid="true"]{outline:2px solid var(--berry-light);outline-offset:2px;background:none}
  /* las dos fechas, una al lado de la otra */
  .cform .dates{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:1.1rem 1.4rem}
  .cform .dates .check{grid-column:1;align-self:center;margin:0}
  .cform .dates .pers{grid-column:2}
  @media(max-width:520px){
    .cform .dates{grid-template-columns:1fr}
    .cform .dates .check,.cform .dates .pers{grid-column:1}
  }
  /* casilla de fechas flexibles */
  .cform .check{
    display:inline-flex;align-items:center;gap:.6rem;margin:.9rem 0 0;cursor:pointer;
    font:400 .84rem/1.3 'Fira Sans';letter-spacing:0;text-transform:none;color:var(--snow-soft);
  }
  .cform .check input{
    width:24px;height:24px;min-width:24px;min-height:24px;flex:none;padding:0;margin:0;border-radius:4px;
    accent-color:var(--berry);cursor:pointer;
  }
  .cform .check:hover{color:#fff}
  .cform .fechas-bloque .check{margin:.2rem 0 1rem}
  /* consentimiento: texto a dos líneas, casilla arriba */
  .cform .consent{display:flex;align-items:flex-start;gap:.7rem;margin:0}
  .cform .consent input{margin-top:-.1rem}
  .cform .consent span{max-width:62ch}
  .cform .consent a{color:var(--berry-light);text-decoration:none;border-bottom:1px solid rgba(201,140,168,.5)}
  .cform .consent a:hover{color:#fff;border-color:#fff}
  .cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(249,248,248,.7) 50%),linear-gradient(135deg,rgba(249,248,248,.7) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
  .cform select option{color:var(--ink);background:#fff}
  /* la flecha nunca pisa el texto */
  .cform select{padding-right:2.6rem;text-overflow:ellipsis}
  .cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
    outline:2px solid var(--cta);outline-offset:2px;
    border-color:#fff;background:rgba(30,34,53,.75);
  }
  /* con el raton (o al enfocar por guion) tambien se ve, aunque sin contorno grueso */
  .cform input:focus,.cform select:focus,.cform textarea:focus{
    border-color:#fff;background:rgba(30,34,53,.75);
  }
  /* las casillas y el boton de enviar, con el mismo contorno */
  .cform input[type=checkbox]:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
  .cform .btn{display:flex;width:max-content;min-width:11rem;justify-content:center;margin:.2rem auto 0;padding:1.05rem 2.1rem}
  .cform .legal{font-size:.74rem;color:var(--snow-faint);text-align:center;margin-top:-.2rem}
  .cform .legal a{color:var(--snow-soft);text-underline-offset:3px}
  .form-done{
    max-width:920px;margin:2.8rem auto 0;padding:2.2rem 1.8rem;text-align:center;
    border:1px solid rgba(249,248,248,.28);background:rgba(249,248,248,.07);border-radius:10px;
  }
  .form-done b{display:block;font:400 1.35rem/1.3 'Roboto Slab',serif;color:#fff;margin-bottom:.6rem}
  .form-done span{font-size:.92rem;color:var(--snow-soft)}

  /* ============ FAQ DESPLEGABLE EN CONTACTO ============ */
  .faq-box{max-width:920px;margin:2.4rem auto 0;text-align:left}
  .faq-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
    padding:1.15rem 1.6rem;cursor:pointer;border-radius:12px;
    background:rgba(249,248,248,.07);border:1px solid rgba(249,248,248,.22);
    font:300 1rem/1.4 'Fira Sans',sans-serif;color:var(--snow-soft);text-align:left;
    transition:background .3s var(--ease),border-color .3s var(--ease);
  }
  .faq-toggle b{font-weight:500;color:#fff}
  .faq-toggle:hover{background:rgba(249,248,248,.12);border-color:rgba(249,248,248,.4)}
  .faq-toggle i{
    font:300 1.6rem/1 'Roboto Slab',serif;color:#fff;font-style:normal;flex:none;
    transition:transform .35s var(--ease);
  }
  .faq-toggle[aria-expanded="true"] i{transform:rotate(45deg)}
  .faq-toggle[aria-expanded="true"]{border-radius:12px 12px 0 0;background:rgba(249,248,248,.12)}
  .faq-panel{
    max-height:0;overflow:hidden;
    transition:max-height .5s var(--ease);
  }
  .faq-inner{
    padding:.4rem 1.6rem 1.2rem;border:1px solid rgba(249,248,248,.22);border-top:0;
    border-radius:0 0 12px 12px;background:rgba(249,248,248,.05);
  }
  /* acordeón en versión oscura */
  .final details{border-bottom-color:rgba(249,248,248,.16)}
  .final details:last-of-type{border-bottom:0}
  .final details summary{color:#fff;font-weight:400}
  .final details summary::after{color:var(--snow-faint)}
  .final details summary:hover::after{color:#fff}
  .final details p{color:var(--snow-soft)}
  @media (prefers-reduced-motion:reduce){.faq-panel{transition:none}}

  footer{background:var(--ink-deep);border-top:1px solid var(--line-dark);padding:3.5rem var(--pad);font-size:.82rem;color:var(--snow-faint)}
  footer .wrap{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;align-items:flex-start}
  footer .brand-logo{width:clamp(150px,16vw,190px);height:auto;display:block}
  footer a{color:var(--snow-soft);text-decoration:none}
  footer a:hover{color:#fff}
  footer .col{display:flex;flex-direction:column;gap:.45rem}
  footer .col:first-child{max-width:26rem}
  footer .col-title{font:500 .7rem/1 'Fira Sans';letter-spacing:.24em;text-transform:uppercase;color:var(--snow);margin-bottom:.5rem}
  footer .dest{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.8rem}
  @media(max-width:560px){footer .dest{grid-template-columns:1fr}}
  footer .dest a{display:block;padding:.1rem 0}
  footer .dest a small{display:block;font-size:.72rem;color:var(--snow-faint)}
  footer .dest a:hover small{color:var(--snow-soft)}
  /* linea legal: obligatoria y discreta, separada del resto del pie */
  footer .legal-pie{
    max-width:1200px;margin:2.6rem auto 0;padding-top:1.4rem;
    border-top:1px solid rgba(249,248,248,.14);
    display:flex;justify-content:space-between;align-items:center;gap:.8rem 2rem;flex-wrap:wrap;
    font-size:.74rem;color:var(--snow-faint);
  }
  footer .legal-pie nav{display:flex;gap:.7rem 1.5rem;flex-wrap:wrap}
  footer .legal-pie a,footer .legal-pie .cookies-pref{color:var(--snow-faint);text-decoration:none}
  footer .legal-pie .cookies-pref{background:none;border:0;padding:0;font:inherit;cursor:pointer}
  footer .legal-pie a:hover,footer .legal-pie a:focus-visible,
  footer .legal-pie .cookies-pref:hover,footer .legal-pie .cookies-pref:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
  @media(max-width:760px){
    footer .legal-pie{justify-content:center;text-align:center;flex-direction:column;gap:.9rem;margin-top:2.2rem}
    footer .legal-pie nav{justify-content:center;gap:.6rem 1.2rem}
  }
  .social{display:flex;gap:.7rem;margin-top:1.1rem}
  .social a{
    width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(249,248,248,.28);color:var(--snow-soft);
    transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  }
  .social a:hover{background:rgba(249,248,248,.92);border-color:#fff;color:var(--ink-deep)}
  .social svg{width:17px;height:17px;fill:currentColor}

  /* ============ RAÍL DE PROGRESO (izquierda, centro) ============ */
  .rail{position:fixed;left:1.5rem;top:50%;transform:translateY(-50%);z-index:55}
  .rail .rail-in{display:flex;flex-direction:column;align-items:center;gap:.9rem}
  /* la capa clara solo se ve en el tramo que pisa una sección oscura */
  .rail .rail-in.claro{
    position:absolute;inset:0;pointer-events:none;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
    -webkit-mask-image:linear-gradient(#0000 0 100%);mask-image:linear-gradient(#0000 0 100%);
  }
  @media(max-width:1180px){.rail{display:none}}
  .rail a{
    position:relative;width:9px;height:9px;border-radius:50%;
    border:1px solid rgba(30,34,53,.5);background:transparent;display:block;
    transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  }
  .rail a::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:100%;width:1px;height:.9rem;background:rgba(30,34,53,.25);transition:background .3s var(--ease)}
  .rail a:last-child::before{display:none}
  /* tramo sobre secciones oscuras: puntos en blanco */
  .rail .claro a{border-color:rgba(255,255,255,.85)}
  .rail .claro a::before{background:rgba(255,255,255,.45)}
  .rail .claro a.on{background:#fff;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
  .rail a::after{
    content:attr(data-label);position:absolute;left:1.5rem;top:50%;
    transform:translate(-8px,-50%);
    font:500 .62rem/1 'Fira Sans';letter-spacing:.18em;text-transform:uppercase;color:#fff;
    background:rgba(30,34,53,.92);padding:.5rem .85rem;border-radius:999px;
    border:1px solid rgba(249,248,248,.18);
    box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
    opacity:0;transform:translate(-8px,-50%);white-space:nowrap;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
  .rail a:hover::after{opacity:1;transform:translate(0,-50%)}
  .rail a.on{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px rgba(30,34,53,.18)}

  /* ============ VOLVER ARRIBA ============ */
  /* WhatsApp: aparece con el botón de volver arriba, justo encima */
  .wapp{
    position:fixed;right:1.4rem;bottom:calc(1.4rem + 47px + .7rem);z-index:65;
    width:47px;height:47px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    background:rgba(30,34,53,.82);color:#fff;border:1px solid rgba(249,248,248,.25);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
    opacity:0;pointer-events:none;transform:translateY(12px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
  }
  .wapp.show{opacity:1;pointer-events:auto;transform:none}
  .wapp svg{width:23px;height:23px;fill:currentColor}
  .wapp.show:hover{background:#1F9D55;border-color:#2ECC71;transform:translateY(-2px)}
  @media(max-width:760px){
    .wapp{
      left:1rem;right:auto;
      bottom:calc(1rem + env(safe-area-inset-bottom));
      width:44px;height:44px;
    }
    .wapp svg{width:21px;height:21px}
  }
  .to-top{
    position:fixed;right:1.4rem;bottom:1.4rem;z-index:65;
    width:47px;height:47px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    background:rgba(30,34,53,.82);color:#fff;border:1px solid rgba(249,248,248,.25);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    opacity:0;pointer-events:none;transform:translateY(12px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease);
  }
  .to-top.show{opacity:1;pointer-events:auto;transform:none}
  .to-top:hover{background:rgba(249,248,248,.94);border-color:#fff;color:var(--ink-deep)}
  .to-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* movil: los dos botones flotantes, mismo tamano y misma linea */
  @media(max-width:760px){
    .wapp,.to-top{
      width:46px;height:46px;
      bottom:calc(1rem + env(safe-area-inset-bottom));
    }
    .wapp{left:1rem;right:auto}
    .to-top{right:1rem;left:auto}
    .wapp svg{width:22px;height:22px}
    .to-top svg{width:17px;height:17px}
  }

  /* ============ LIGHTBOX ============ */
  /* ============ GALERÍA: las fotos invitan a ampliarse ============ */
  section img{cursor:pointer;transition:filter .22s var(--ease)}
  .philo{position:relative}
  /* la lupa aparece sobre la foto que se está señalando */
  .lens{
    position:absolute;z-index:6;pointer-events:none;
    display:grid;place-items:center;opacity:0;transition:opacity .32s var(--ease);
  }
  .lens.full{inset:0}   /* la foto no tiene geometría propia: cubre su hueco */
  .shots .mini.map{object-fit:contain;background:var(--ink)}
  .oculta{display:none}   /* está en la galería, no en la página */
  /* las demás heredan left/top/width de su clase (mini, p1…) y solo limpian el marco */
  .shots .lens.mini,.prog .media .lens.mini{
    border-color:transparent;box-shadow:none;background:none;
  }
  .lens.mini::before{width:clamp(34px,3vw,44px)}
  .lens.mini::after{
    width:13px;height:13px;
    background:
      linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center/1.5px 13px no-repeat;
  }
  .lens::before{
    content:"";width:clamp(44px,4.5vw,58px);aspect-ratio:1;border-radius:50%;
    background:rgba(249,248,248,.94);box-shadow:0 14px 34px -12px rgba(30,34,53,.65);
    transform:scale(.82);transition:transform .32s var(--ease);
  }
  .lens::after{
    content:"";position:absolute;width:16px;height:16px;
    background:
      linear-gradient(var(--ink),var(--ink)) center/16px 1.5px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center/1.5px 16px no-repeat;
  }
  img:hover + .lens,img:focus-visible + .lens{opacity:1}
  img:hover + .lens::before,img:focus-visible + .lens::before{transform:scale(1)}
  img:hover,img:focus-visible{filter:brightness(.72);transition-duration:.16s}
  .mini:hover,.mini:focus-visible{filter:brightness(.88)}
  /* el mapa es casi negro: oscurecerlo no se ve, se aclara un poco */
  .mini.map:hover,.mini.map:focus-visible{filter:brightness(1.12)}
  section img:focus-visible{outline:2px solid var(--berry-light);outline-offset:3px}
  /* distintivo del grupo de fotos */
  .gal-badge{
    position:absolute;right:.75rem;bottom:.75rem;z-index:7;pointer-events:none;
    display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:999px;
    background:rgba(30,34,53,.7);backdrop-filter:blur(10px) saturate(150%);
    font:500 .64rem/1 'Fira Sans';letter-spacing:.14em;text-transform:uppercase;color:#fff;
    transition:background .3s var(--ease),transform .3s var(--ease);
  }
  .gal-badge::before{
    content:"";width:11px;height:11px;border:1.5px solid #fff;border-radius:2px;
    box-shadow:3px -3px 0 -1.5px rgba(255,255,255,.55);
  }
  /* el contador vive dentro de la foto pequeña, que es la que está delante */
  .prog .media .gal-badge{right:-.4rem;bottom:-1.4rem}
  /* en el barco no hay foto pequeña: la etiqueta va al centro */
  .boat .bg .gal-badge{
    left:50%;right:auto;top:auto;bottom:1.1rem;transform:translateX(-50%);
  }
  .boat .bg:hover .gal-badge{transform:translate(-50%,-3px)}
  .shots .gal-badge{left:-1rem;right:auto;bottom:-1.2rem}
  @media(max-width:900px){.prog .media .gal-badge{right:1.1rem;bottom:-1.4rem}}
  .philo .gal-badge{left:.6rem;right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
  .philo .lens{inset:auto;left:0;top:50%;transform:translateY(-50%);width:clamp(11rem,18vw,15rem);aspect-ratio:3/4}
  @media(max-width:860px){.philo .lens{width:100%;aspect-ratio:3/2;top:0;transform:none}}
  figure:hover .gal-badge,.media:hover .gal-badge,.philo:hover .gal-badge{
    background:rgba(30,34,53,.92);transform:translateY(-3px);
  }
  .philo:hover .gal-badge{transform:translateY(calc(-50% - 3px))}
  @media(max-width:560px){.gal-badge{font-size:.58rem;padding:.35rem .6rem}}
  .lightbox{
    position:fixed;inset:0;z-index:300;
    display:flex;align-items:center;justify-content:center;
    background:rgba(30,34,53,.9);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  }
  .lightbox.open{opacity:1;pointer-events:auto}
  .lightbox img{
    max-width:min(88vw,1400px);max-height:calc(var(--vh0,100svh) * .82);object-fit:contain;
    border-radius:var(--r);box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
    cursor:default;
  }
  .lightbox .lb-cap{
    position:absolute;left:50%;transform:translateX(-50%);bottom:2rem;
    font:400 .82rem/1.4 'Fira Sans';color:var(--snow-soft);text-align:center;
    max-width:70ch;padding:0 1rem;
  }
  .lightbox button{
    position:absolute;width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(249,248,248,.08);color:#fff;border:1px solid rgba(249,248,248,.3);
    cursor:pointer;font:300 1.4rem/1 'Fira Sans';
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:background .3s var(--ease),border-color .3s var(--ease);
  }
  .lightbox button:hover{background:rgba(249,248,248,.92);border-color:#fff;color:var(--ink-deep)}
  .lightbox .lb-close{top:1.6rem;right:1.6rem}
  .lightbox .lb-prev{left:1.6rem;top:50%;transform:translateY(-50%)}
  .lightbox .lb-next{right:1.6rem;top:50%;transform:translateY(-50%)}
  .lightbox .lb-prev.off,.lightbox .lb-next.off{display:none}
  @media(max-width:700px){
    .lightbox .lb-prev{left:.7rem}.lightbox .lb-next{right:.7rem}
    .lightbox button{width:44px;height:44px}
  }

  /* ============ SUAVIZADO GENERAL ============ */
  .btn{border-radius:4px}
  .prog .media img,.prog .media .mini,
  .shots img,
  .gastro .gwrap img,.gastro .mini,
  .philo img{border-radius:var(--r)}
  .shots::after{border-radius:var(--r)}
  .prog .media .tag{border-radius:999px}
  .tript figure{border-radius:var(--r);overflow:hidden}
  .tiers span{border-radius:999px}
  .amen div{border-radius:0 6px 6px 0}
  details summary:hover{opacity:.75}

  /* ============ MOVIL: CONTENIDO CENTRADO ============ */
  /* Hasta 760 px se lee en una sola columna, asi que todo se centra
     y nada sobresale de los margenes de la seccion. */
  @media(max-width:760px){
    .sec-head{margin-left:auto;margin-right:auto;text-align:center}
    .destino > div,.lodge-grid > div,.gastro > div,.boat .panel,
    .prog > div:not(.media),footer .col{text-align:center}

    /* filas de datos y etiquetas, al centro */
    .values,.facts,.tiers,.prog-foot,.hero-season{justify-content:center}
    .amen{justify-items:center}
    .amen div{border-radius:6px;text-align:center}
    .prog .phead{justify-content:center;flex-wrap:wrap;text-align:center}
    .prog .ptit{justify-content:center}
    .prog ul{justify-items:center}
    .prog li{padding-left:0;text-align:center}
    .prog li::before{display:none}
    .inc-lines > div{justify-items:center;text-align:center}
    .philo blockquote,.philo .q,.boat .quote{text-align:center}
    .philo blockquote::before{left:50%;transform:translateX(-50%)}
    footer .brand-logo{margin-left:auto;margin-right:auto}
    footer .col:first-child{max-width:none}
    footer .col{align-items:center}
    footer .dest{grid-template-columns:1fr 1fr;gap:.75rem 1rem;justify-items:center;text-align:center}
    footer .dest a{padding:0}
    footer .link-all{align-self:center}
    footer .social{justify-content:center;margin-top:.9rem}

    /* imagenes: los marcos y las miniaturas se meten dentro del ancho */
    .shots{margin-right:0;margin-bottom:2.6rem}
    .shots::after{display:none}
    .shots .mini{left:0;bottom:-1.6rem;width:min(42%,11rem)}
    .gastro .mini{right:0;bottom:-1.2rem}
    .prog .media .mini{right:0}
    .prog .media .gal-badge{right:.9rem;bottom:-1.35rem;left:auto}
    .shots .gal-badge{left:.9rem;right:auto;bottom:-.55rem}
  }

  /* pantallas muy estrechas: menos aire lateral y titulares mas contenidos */
  @media(max-width:480px){
    section{padding-left:1.1rem;padding-right:1.1rem}
    .sec-head h2,.destino h2{font-size:clamp(1.6rem,7.4vw,2.1rem)}
    .prog .num{font-size:2.9rem}
    .prog-foot .btn,.hero-cta .btn{width:100%;justify-content:center}
    .shots .mini{left:0;bottom:-1.2rem;width:38%}
  }

  /* Hasta 1000 px el hero se apila de verdad: reglas posteriores devolvian el
     carrusel a la segunda columna, que ahi mide 0 y dejaba las pestanas y las
     flechas fuera de la pantalla. */
  @media(max-width:1000px){
    .hero-vid{grid-column:1;grid-row:2;overflow:hidden}
    .hero-car{grid-column:1;grid-row:2}
    .hero-stats{grid-column:1/-1;grid-row:3}
  }
  /* movil estrecho: la franja de datos pasa a dos filas de dos */
  @media(max-width:560px){
    .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero-stats .cell:nth-child(3)::before{display:none}
    .hero-stats .cell:nth-child(n+3){border-top:1px solid rgba(249,248,248,.14)}
  }
  /* En un movil el titular no cabe de una linea: el nowrap del hero fijaba un
     ancho minimo de 479 px y estiraba toda la cabecera. */
  @media(max-width:560px){
    header > *{min-width:0}
    .hero-in h1{font-size:clamp(1.7rem,6.6vw,2.3rem)}
    .hero-in h1 .row span{white-space:normal}
    .hero-in h1 .row{overflow:visible}
  }
  /* el titulo del programa y sus apuntes no deben fijar el ancho de la columna */
  @media(max-width:760px){
    .prog,.prog > div,.prog .phead,.prog .phead h3,.prog .ptit,.prog .ptit .seg,
    .destino > div,.lodge-grid > div,.gastro > div,.boat .panel{min-width:0}
    .prog .phead h3{overflow-wrap:break-word}
    .prog .ptit .seg{max-width:100%}
  }
  /* botones de una sola linea muy larga: el texto envuelve y el icono no se sale */
  @media(max-width:760px){
    .btn{flex-wrap:wrap;white-space:normal;text-align:center}
    .btn svg.bi{flex:none}
    footer .col{margin-left:auto;margin-right:auto}
  }
  /* movil: el eyebrow va centrado y con una linea a cada lado */
  @media(max-width:760px){
    .kicker{justify-content:center}
    .kicker::after{content:"";width:2.2rem;height:1px;background:var(--ink);flex:none;opacity:.55}
    .dark .kicker::after{background:#fff;opacity:.6}
    .boat .kicker::after{background:#fff;opacity:.7}
    .hero-in .kicker::after{background:var(--ink);opacity:.5}
  }
  /* ============ MOVIL: NADA ATADO AL ALTO DE LA VENTANA ============ */
  /* Al ocultarse la barra de direcciones el alto del viewport cambia. Aunque
     svh es estable, en movil el ritmo vertical se fija en rem para que ningun
     bloque se recalcule al hacer scroll. Cubre tambien la tableta, que
     tiene el mismo comportamiento de barra. */
  @media(max-width:1000px){
    section{padding-top:3.6rem;padding-bottom:3.6rem}
    .sec-head{margin-bottom:2.4rem}
    .prog{padding-top:2.8rem;padding-bottom:2.8rem}
    .philo{margin-top:1.4rem}
    .hero-in{padding-top:2.6rem}
    .hero-left{gap:1.5rem}
    .hero-vid .slide .body{padding-top:4rem;padding-bottom:1.7rem}
    .boat .panel{padding-top:2rem;padding-bottom:2rem}
    .final{padding-top:2.2rem}
    .final .in{padding-bottom:2.4rem}
    .hero-car .tabs-tit{top:1.15rem}
    .hero-car .tabs{top:2.7rem}
    /* el hero tampoco: la mitad de arriba fluye con su contenido y el carrusel
       toma su altura del ancho, no de la ventana */
    header{min-height:0}
    .hero-vid,.hero-car{height:min(34rem,128vw)}
  }
  /* movil: el hero 1 acaba exactamente donde empieza la barra del navegador,
     sin esquinas redondeadas, y el hero 2 queda entero debajo. */
  @media(max-width:760px){
    .hero-pane{
      min-height:calc(var(--vh0,100svh) - var(--nav-h));
      border-radius:0;
      box-shadow:0 1px 0 rgba(255,255,255,.45);
    }
    .hero-in{padding-bottom:2.6rem}
    .hero-pane{align-items:stretch}
    .hero-in{display:flex;flex-direction:column;justify-content:center}
    .hero-left{flex:1 1 auto;justify-content:space-evenly;gap:1.15rem;max-height:38rem;margin:auto 0}
    .hero-head{gap:1.25rem}
  }
  @media(max-width:760px){:root{--hero-r:0px}}
  /* movil: el contenido del hero 2, en una columna centrada */
  @media(max-width:700px){
    .hero-vid .slide .body{
      grid-template-columns:1fr;grid-template-rows:auto auto auto;
      justify-items:center;text-align:center;gap:.75rem;
      padding-left:1.4rem;padding-right:1.4rem;
    }
    .hero-vid .slide .t{grid-area:1/1/2/2;max-width:100%}
    .hero-vid .slide .dsc{grid-area:2/1/3/2;max-width:34ch;margin:0 auto}
    .hero-vid .slide .btn{grid-area:3/1/4/2;justify-self:center;align-self:auto;transform:none;margin-top:.7rem}
    .hero-vid .slide .vert,.hero-vid .slide .num{display:none}
    .hero-vid .slide .btn-ink{padding:.55rem .3rem}
    .hero-vid .slide .t{font-size:1.5rem}
    .hero-vid .slide .dsc{font-size:.875rem;line-height:1.5}
  }
  @media(max-width:900px){
    .inc-lines > div:last-child{padding-bottom:0;border-bottom:0}
    .prog:last-of-type{padding-bottom:0}
    #programas{padding-bottom:2.4rem}
  }
  /* ---- movil: ningun campo puede exceder su celda ----
     Los controles nativos (fecha, telefono, numero) traen un ancho minimo
     propio que en el movil real puede ser mayor que la columna; con min-width
     automatico la rejilla se ensancha y el campo sobresale del recuadro. */
  @media(max-width:760px){
    .cform{grid-template-columns:minmax(0,1fr)}
    .cform > *{min-width:0;max-width:100%}
    .cform input,.cform select,.cform textarea{width:100%;max-width:100%;min-width:0}
    .cform input:not([type=date]):not([type=checkbox]){-webkit-appearance:none;appearance:none}
    .cform input[type=checkbox]{width:24px;height:24px}
    .cform .check{min-height:44px;align-items:center}
    .cform .tel-campo{grid-template-columns:4.6rem minmax(0,1fr)}
    .cform .dates{grid-template-columns:minmax(0,1fr)}
    .cform .dates .check,.cform .dates .pers{grid-column:1}
  }
  /* moviles estrechos: el recuadro cede margen para que quepan los campos */
  @media(max-width:430px){
    .cform{padding:1.1rem}
  }
  @media(max-width:1000px){.boat .split{min-height:0}}
  /* nada debe provocar barra horizontal en el movil */
  @media(max-width:760px){html,body{overflow-x:clip}}