/* =========================================================
   OLAS VERANO — capa "premium"
   Detalles editoriales y de movimiento. Se puede quitar
   borrando el <link> a este archivo y el <script> premium.js.
   ========================================================= */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.77,0,.18,1);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Tipografía más afinada */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01","kern"}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--lime);color:var(--dark)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.catalog :focus-visible,.hero :focus-visible,.brief :focus-visible{outline-color:var(--lime)}
.intro :focus-visible,.destinations :focus-visible,.placement :focus-visible,.guide :focus-visible{outline-color:var(--purple)}

/* Barra de progreso de lectura */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,var(--lime),#b9f24a);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* Header que se retira al bajar y vuelve al subir */
header{transition:transform .5s var(--ease-out),height .35s var(--ease-out),box-shadow .35s ease}
body.header-hidden:not(.menu-open) header{transform:translateY(-105%)}
body.scrolled header{height:66px}
@media(max-width:760px){body.scrolled header{height:66px}header nav#main-nav{top:66px}}

/* Grano fotográfico sobre los fondos de color */
.hero,.catalog,.brief,footer{position:relative;isolation:isolate}
.hero:before,.catalog:after,.brief:after,footer:before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.hero>*,.catalog>*,.brief>*,footer>*{position:relative;z-index:1}
.hero>.hero-photo{position:relative}

/* Secciones como "hojas" que se superponen con esquinas redondeadas */
.catalog,.guide,.brief{border-radius:44px 44px 0 0;margin-top:-44px;z-index:2;position:relative}
.cases{padding-bottom:calc(clamp(110px,13vw,170px) + 44px)}
.placement{padding-bottom:calc(clamp(110px,13vw,170px) + 44px)}
.guide{padding-bottom:calc(clamp(110px,13vw,170px) + 44px)}
@media(max-width:760px){.catalog,.guide,.brief{border-radius:28px 28px 0 0;margin-top:-28px}}

/* Ticker: marquesina infinita */
.ticker.is-marquee{display:block;padding:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:inline-flex;align-items:center;gap:32px;white-space:nowrap;animation:marquee 38s linear infinite;will-change:transform}
.ticker-track>span{width:16px;height:16px;flex:0 0 16px;font-size:0;display:inline-block;background:var(--purple);clip-path:polygon(44% 0,56% 0,56% 35%,81% 10%,90% 19%,65% 44%,100% 44%,100% 56%,65% 56%,90% 81%,81% 90%,56% 65%,56% 100%,44% 100%,44% 65%,19% 90%,10% 81%,35% 56%,0 56%,0 44%,35% 44%,10% 19%,19% 10%,44% 35%);animation:spin 8s linear infinite}
.ticker.is-marquee:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Titulares que aparecen línea por línea */
.split .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split .line-in{display:inline-block;transform:translate3d(0,110%,0) rotate(2deg);transform-origin:0 100%;transition:transform 1.15s var(--ease-out)}
.split.is-in .line-in{transform:none}
.split.is-in .line:nth-child(2) .line-in{transition-delay:.09s}
.split.is-in .line:nth-child(3) .line-in{transition-delay:.18s}
.split.is-in .line:nth-child(4) .line-in{transition-delay:.27s}

/* Aparición suave de bloques */
.rv{opacity:0;transform:translate3d(0,38px,0);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.rv.is-in{opacity:1;transform:none}

/* Hero: entrada orquestada */
.hero-photo{clip-path:inset(0 0 0 0 round 0)}
body.is-loading .hero-photo{clip-path:inset(12% 8% 12% 8% round 28px)}
.hero-photo{transition:clip-path 1.5s var(--ease-io) .15s}
body.is-loading .hero-copy .eyebrow,body.is-loading .hero-copy p,body.is-loading .hero-copy .button,body.is-loading .hero-foot,body.is-loading .season-seal,body.is-loading .photo-label,body.is-loading .photo-top{opacity:0;transform:translateY(22px)}
.hero-copy .eyebrow,.hero-copy p,.hero-copy .button,.hero-foot,.photo-label,.photo-top{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.hero-copy p{transition-delay:.45s}.hero-copy .button{transition-delay:.55s}.hero-foot{transition-delay:.7s}.photo-label{transition-delay:.9s}.photo-top{transition-delay:1s}
.season-seal{transition:opacity .8s var(--ease-out) 1.1s,transform .8s var(--ease-out) 1.1s}
.hero-foot span{display:inline-block;animation:bob 2.4s var(--ease-io) infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* Botones: relleno que barre + flecha que avanza */
.button{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease-out),color .35s ease,box-shadow .45s var(--ease-out)}
.button:before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--dark);transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:-1}
.button.purple:before{background:var(--lime)}
.button:hover:before{transform:none}
.button.lime:hover{color:var(--lime)}
.button.purple:hover{color:var(--dark)}
.button:hover{box-shadow:0 14px 34px rgba(35,18,57,.22)}
.button span{display:inline-block;transition:transform .45s var(--ease-out)}
.button:hover span:not(#selection-count){transform:translate(3px,-3px) rotate(45deg)}
.hero .button.lime:before{background:#fff}
.hero .button.lime:hover{color:var(--dark)}

/* Enlaces de texto con subrayado animado */
.text-button,nav a,footer a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-out),color .3s ease;padding-bottom:2px}
nav a,footer a{background-size:0 1px}
.text-button:hover{background-size:0 1px;background-position:100% 100%}
nav a:hover,footer a:hover{background-size:100% 1px}
header nav a:after{display:none}

/* Imágenes: zoom lento y tarjetas con elevación */
.experience-card,.case-small article,#catalogo .catalog-item,.placement-circuits article,.guide-grid article{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s ease,background .4s ease}
.experience-card:hover,.case-small article:hover,.placement-circuits article:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(35,18,57,.16)}
.experience-heading,.case-small article,.support-photo{overflow:hidden}
.experience-heading img,.support-photo img{transition:transform 1.2s var(--ease-out),filter .6s ease}
.experience-card:hover .experience-heading img,.catalog-item:hover .support-photo img{transform:scale(1.07)}
.placement-circuits article{position:relative;overflow:hidden}
.placement-circuits article:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--purple);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out)}
.placement-circuits article:hover:after{transform:scaleX(1)}

/* Pestañas de destinos: transición de contenido */
.destination-detail{animation:detail-in .8s var(--ease-out)}
.destination-detail.swap{animation:none}
@keyframes detail-in{from{opacity:.4;transform:translateY(10px)}}
.destination-tabs [role=tab]{transition:background .35s ease,color .35s ease,transform .35s var(--ease-out)}
.destination-tabs [role=tab]:hover{transform:translateY(-2px)}

/* Banda cinética final */
.mega-marquee{overflow:hidden;background:var(--purple);color:transparent;padding:clamp(18px,3vw,36px) 0;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:3}
.mega-track{display:inline-flex;gap:.35em;white-space:nowrap;font:600 clamp(64px,11vw,190px)/1 Manrope,sans-serif;letter-spacing:-.06em;will-change:transform;transform:translate3d(var(--mx,0),0,0)}
.mega-track b{font-weight:600;-webkit-text-stroke:1.5px rgba(229,250,136,.85);color:transparent}
.mega-track b.fill{color:var(--lime);-webkit-text-stroke:0}
.mega-track i{font-style:normal;color:var(--lime);display:inline-block;animation:spin 12s linear infinite}

/* Accesibilidad: sin movimiento para quien lo pide */
@media(prefers-reduced-motion:reduce){
 .rv,.split .line-in,.hero-photo,body.is-loading *{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .ticker-track,.ticker-track>span,.mega-track i,.hero-foot span{animation:none}
}

/* Fuentes de destinos: una por renglón */
.research-sources{flex-direction:column;align-items:flex-start;gap:8px}

/* Brief: el texto de la izquierda acompaña el scroll en escritorio y no se superpone en celular */
#brief>.brief-intro{position:sticky;top:135px}
@media(max-width:760px){#brief>.brief-intro{position:static;top:auto}}

/* Tarjetas seleccionables completas: soportes de vía pública */
#catalogo .catalog-item{cursor:pointer;-webkit-tap-highlight-color:transparent}
#catalogo .catalog-item .support-photo{cursor:pointer}
#catalogo .catalog-item.is-selected{border-color:var(--lime);background:rgba(229,250,136,.12);box-shadow:inset 0 0 0 1px var(--lime)}
#catalogo .catalog-item.is-selected:hover{background:rgba(229,250,136,.16)}
#catalogo .catalog-item.is-selected .add{background:var(--lime);border-color:var(--lime);color:var(--dark)}