/* Portada CapitalTrip: apartados debajo del slider (pulseras, escapadas noche, teléfono, álbumes por año, preguntas en pulsera). */
.capitaltrip-home{--ctp-ink:#102c45;--ctp-blue:#086da8;--ctp-red:#c8323c;--ctp-red-dark:#a3222b;--ctp-night:#0c2236;--ctp-night-soft:#b9cbd9;--ctp-muted:#4b6071;--ctp-line:#dce5ec;--ctp-soft:#eaf1f5;--ctp-cream:#f3eee4;--ctp-ease:cubic-bezier(.16,1,.3,1)}
.capitaltrip-home .ctp-block{max-width:1208px;margin:0 auto;padding:72px 24px 0;box-sizing:border-box}
.capitaltrip-home .ctp-block h2{margin:0 0 14px;font:400 clamp(30px,3.4vw,44px)/1.12 Georgia,serif;letter-spacing:-.02em;color:var(--ctp-ink)}
.capitaltrip-home .ctp-block h2+p{margin:0;max-width:50ch;font-size:15px;line-height:1.6;color:var(--ctp-muted)}
.ctp-ar{width:18px;height:18px;flex-shrink:0;transition:transform .22s var(--ctp-ease)}
.capitaltrip-home a:hover>.ctp-ar,.capitaltrip-home a:hover i .ctp-ar{transform:translateX(4px)}
.ctp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.capitaltrip-web .ctp-actions .button{display:inline-flex;align-items:center;gap:12px}
.ctp-link{font-size:14px;font-weight:500;color:var(--ctp-blue);text-decoration:underline;text-underline-offset:5px}
.ctp-link:hover{color:var(--ctp-ink)}
.capitaltrip-home :is(.ctp-bands,.ctp-night,.ctp-phone-how,.ctp-timeline,.ctp-faq-band) :focus-visible{outline:2px solid var(--ctp-blue);outline-offset:3px}

/* 1 · Encuentra tu experiencia: pulseras de festival */
.ctp-bands{max-width:1208px;margin:28px auto 0;padding:0 24px;box-sizing:border-box;display:grid;gap:12px}
.ctp-bands a{--band:var(--ctp-red);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;min-height:68px;padding:10px 12px 10px 28px;border-radius:999px;background:var(--band);color:#fff;text-decoration:none;transition:transform .25s var(--ctp-ease),background-color .2s}
.ctp-bands a:nth-child(2){--band:var(--ctp-blue)}
.ctp-bands a:nth-child(3){--band:var(--ctp-night)}
.ctp-bands a:hover{transform:translateX(8px)}
.ctp-bands strong{font:400 26px/1 Anton,Impact,"Arial Narrow",sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.ctp-bands span{padding-left:20px;border-left:1px dashed rgba(255,255,255,.5);font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ctp-bands i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--band)}
.ctp-bands a:focus-visible{outline-offset:4px}

/* 2 · Escapadas: bloque noche con cinta de fotos */
.ctp-night{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:hidden;border-radius:16px;background:var(--ctp-night);color:#fff}
.ctp-night-solo{grid-template-columns:1fr}
.ctp-night-copy{padding:44px 40px}
.capitaltrip-home .ctp-night h2{color:#fff}
.capitaltrip-home .ctp-night h2+p{color:var(--ctp-night-soft)}
.ctp-night .ctp-link{color:#fff}
.ctp-night .ctp-link:hover{color:#ffd2d4}
.ctp-night :focus-visible{outline-color:#8fd0f5!important}
.ctp-belt{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ctp-belt-track{display:flex;gap:12px;width:max-content;height:100%;padding:24px 0;box-sizing:border-box;animation:ctp-belt 48s linear infinite}
.ctp-belt:hover .ctp-belt-track{animation-play-state:paused}
.ctp-belt img{width:210px;height:100%;min-height:280px;object-fit:cover;border-radius:12px;background:#13304b}
@keyframes ctp-belt{to{transform:translateX(calc(-50% - 6px))}}

/* 3 · Cómo reservar: teléfono con la cuenta de viajero */
.ctp-phone-how{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:40px;align-items:center}
.ctp-phone{padding:12px;border-radius:40px;background:var(--ctp-night);box-shadow:0 24px 50px rgba(12,34,54,.28);transform:rotate(2deg);transition:transform .45s var(--ctp-ease)}
.ctp-phone:hover{transform:rotate(0) translateY(-6px)}
.ctp-screen{display:grid;align-content:start;gap:12px;min-height:520px;padding:22px 16px;border-radius:30px;background:#f8f9f7;color:var(--ctp-ink)}
.ctp-screen-head{display:flex;justify-content:space-between;align-items:center;font:700 14px/1 Archivo,"Segoe UI",sans-serif}
.ctp-screen-head em,.ctp-screen-card small{font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ctp-muted)}
.ctp-screen-card{padding:14px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(16,44,69,.06)}
.ctp-screen-card small{display:block;margin-bottom:6px}
.ctp-screen-card b{font:700 15px/1.2 Archivo,"Segoe UI",sans-serif}
.ctp-screen-ticket{background:var(--ctp-blue);color:#fff}
.ctp-screen-ticket small{color:#cfe8f6}
.ctp-bar{height:8px;margin-top:10px;overflow:hidden;border-radius:4px;background:var(--ctp-soft)}
.ctp-bar i{display:block;width:50%;height:100%;border-radius:4px;background:var(--ctp-red)}
.ctp-bar-row{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--ctp-muted)}
.ctp-steps{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.ctp-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px}
.ctp-steps li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ctp-soft);color:var(--ctp-blue)}
.ctp-steps svg{width:20px;height:20px}
.capitaltrip-home .ctp-steps h3{margin:0 0 6px;font:700 17px/1.25 Archivo,"Segoe UI",sans-serif;letter-spacing:-.01em;color:var(--ctp-ink)}
.ctp-steps p{margin:0;font-size:14px;line-height:1.55;color:var(--ctp-muted)}

/* 4 · Portafolio: álbumes por año */
.ctp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:28px}
.capitaltrip-web .ctp-head .button{display:inline-flex;align-items:center;gap:12px}
.ct-years{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-color:var(--ctp-blue) var(--ctp-soft);overscroll-behavior-x:contain}
.ct-year{display:grid;flex:0 0 auto;align-content:start;gap:10px;scroll-snap-align:start}
.capitaltrip-home .ct-year h3{margin:0;padding-bottom:8px;border-bottom:2px solid var(--ctp-ink);font:400 30px/1 Anton,Impact,"Arial Narrow",sans-serif;color:var(--ctp-blue)}
.ct-year-albums{display:flex;gap:10px}
.ct-year-albums a{width:170px;text-decoration:none;color:var(--ctp-ink)}
.ct-year-albums img{width:170px;height:130px;object-fit:cover;border-radius:10px;background:#dfe6eb;transition:transform .35s var(--ctp-ease)}
.ct-year-albums a:hover img{transform:translateY(-4px)}
.ct-year-albums span{display:block;margin-top:8px;font:600 13px/1.25 Archivo,"Segoe UI",sans-serif}
.ct-year-albums a:hover span{color:var(--ctp-red)}
.ct-years-hint{margin:0;font-size:13px;color:var(--ctp-muted)}

/* 5 · Preguntas: pulsera azul */
.ctp-faq-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:28px 40px;padding:34px 38px;border-radius:28px;background:var(--ctp-blue);color:#fff}
.capitaltrip-home .ctp-faq-band h2{font:400 clamp(32px,3.6vw,46px)/1 Anton,Impact,"Arial Narrow",sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.capitaltrip-home .ctp-faq-band h2+p{color:#d9ecf7}
.capitaltrip-web .ctp-faq-band .button{background:#fff;border-color:#fff;color:var(--ctp-blue)}
.capitaltrip-web .ctp-faq-band .button:hover{background:var(--ctp-cream);border-color:var(--ctp-cream)}
.ctp-faq-band .ctp-link{color:#fff}
.ctp-faq-band :focus-visible{outline-color:#fff!important}
.ctp-faq-list{display:grid;align-content:center;gap:8px;padding-left:34px;border-left:2px dashed rgba(255,255,255,.4)}
.ctp-faq-list details{border-radius:999px;background:rgba(255,255,255,.1);transition:background-color .2s,border-radius .3s}
.ctp-faq-list details[open]{border-radius:18px;background:#fff;color:var(--ctp-ink)}
.ctp-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:8px 12px 8px 22px;font-size:15px;font-weight:700;line-height:1.35;list-style:none;cursor:pointer}
.ctp-faq-list summary::-webkit-details-marker{display:none}
.ctp-faq-list summary:focus-visible{border-radius:999px}
.ctp-faq-list details p{margin:0;padding:0 22px 16px;font-size:15px;line-height:1.6;color:var(--ctp-muted)}
.ctp-plus{position:relative;flex:0 0 28px;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;transition:transform .25s var(--ctp-ease)}
.ctp-plus::before,.ctp-plus::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.ctp-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ctp-faq-list details[open] .ctp-plus{transform:rotate(45deg)}
.capitaltrip-home main>.ctp-block:last-child{padding-bottom:80px}

@media(max-width:1000px){
 .ctp-phone-how{grid-template-columns:1fr 280px}
 .ctp-steps{grid-column:1/-1}
}
@media(max-width:860px){
 .ctp-night{grid-template-columns:1fr}
 .ctp-night-copy{padding:28px 24px}
 .ctp-belt-track{padding:0 0 24px}
 .ctp-belt img{width:150px;min-height:180px;height:180px}
 .ctp-faq-band{grid-template-columns:1fr;padding:26px 20px;border-radius:20px}
 .ctp-faq-list{padding:22px 0 0;border-left:0;border-top:2px dashed rgba(255,255,255,.4)}
 .ctp-faq-list details{border-radius:16px}
}
@media(max-width:700px){
 .capitaltrip-home .ctp-block{padding:56px 20px 0}
 .ctp-bands{padding:0 20px}
 .ctp-bands a{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 14px 16px 22px;border-radius:18px}
 .ctp-bands strong{font-size:23px;white-space:normal}
 .ctp-bands span{grid-row:2;padding:0;border:0}
 .ctp-bands i{grid-row:1/3;grid-column:2}
 .ctp-phone-how{grid-template-columns:1fr}
 .ctp-phone{width:100%;max-width:290px;margin:auto;box-sizing:border-box}
 .ctp-actions{flex-direction:column;align-items:stretch}
 .capitaltrip-web .ctp-actions .button{justify-content:center}
 .ctp-actions .ctp-link{align-self:center}
 .capitaltrip-web .ctp-head .button{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .ctp-belt-track{animation:none}
 .ctp-bands a,.ctp-phone,.ctp-ar,.ct-year-albums img,.ctp-plus,.ctp-faq-list details{transition:none}
 .ctp-bands a:hover{transform:none}
}

/* Marco de las fotos por año: el acercamiento de entrada no se sale del recuadro */
.ct-year-albums .ct-year-ph{display:block;width:170px;height:130px;margin:0;overflow:hidden;border-radius:10px;background:#dfe6eb;transition:transform .35s var(--ctp-ease)}
.ct-year-albums .ct-year-ph img{display:block;width:100%;height:100%;border-radius:0}
.ct-year-albums a:hover img{transform:none}
.ct-year-albums a:hover .ct-year-ph{transform:translateY(-4px)}

/* Animaciones de entrada (16 oct 2026). Solo con html.ctp-anim (movimiento permitido y JS);
   capitaltrip-portada.js añade .is-in a cada bloque al entrar en pantalla y numera las piezas (--ctp-i, --ctp-k, --ctp-y). */
@keyframes ctp-left{from{opacity:0;transform:translateX(-60px)}}
@keyframes ctp-up{from{opacity:0;transform:translateY(20px)}}
@keyframes ctp-fade{from{opacity:0}}
@keyframes ctp-drop{from{opacity:0;transform:translateY(-60px) rotate(-6deg)}}
@keyframes ctp-zoom{from{transform:scale(1.35);filter:brightness(.6)}}
@keyframes ctp-blur{from{opacity:0;filter:blur(12px)}}
@keyframes ctp-answer{from{opacity:0;transform:translateY(-6px)}}
.ctp-anim .ctp-bands:not(.is-in) a,
.ctp-anim .ctp-night:not(.is-in),.ctp-anim .ctp-night:not(.is-in) .ctp-night-copy>*,.ctp-anim .ctp-night:not(.is-in) .ctp-belt img,
.ctp-anim .ctp-phone-how:not(.is-in) :is(.ctp-phone-intro>*,.ctp-steps li,.ctp-phone),
.ctp-anim .ctp-timeline:not(.is-in) :is(.ctp-head>div>*,.ctp-head>.button,.ct-year),
.ctp-anim .ctp-faq-band:not(.is-in),.ctp-anim .ctp-faq-band:not(.is-in) :is(.ctp-faq-copy>*,.ctp-faq-list details){opacity:0}
/* 1 · Pulseras: entran desde la izquierda una tras otra */
.ctp-anim .ctp-bands.is-in a{animation:ctp-left .8s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 120ms)}
/* 2 · Escapadas: el bloque aparece y las fotos caen con rebote */
.ctp-anim .ctp-night.is-in{animation:ctp-fade .5s ease-out backwards}
.ctp-anim .ctp-night.is-in .ctp-night-copy>*{animation:ctp-up .8s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 110ms + 150ms)}
.ctp-anim .ctp-night.is-in .ctp-belt img{animation:ctp-drop .8s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--ctp-k,0) * 120ms + 300ms)}
/* 3 · Cómo reservar: entra el contenido y el teléfono se endereza con el scroll */
.ctp-anim .ctp-phone-how.is-in .ctp-phone-intro>*{animation:ctp-up .8s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 110ms)}
.ctp-anim .ctp-phone-how.is-in .ctp-steps li{animation:ctp-up .7s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 130ms + 450ms)}
.ctp-anim .ctp-phone-how.is-in .ctp-phone{animation:ctp-fade .6s ease-out backwards}
.ctp-anim .ctp-phone{transform:rotate(var(--ctp-rot,2deg)) translateY(var(--ctp-ty,0px));transition:transform .15s linear}
.ctp-anim .ctp-phone:hover{transform:rotate(0) translateY(calc(var(--ctp-ty,0px) - 6px));transition:transform .45s var(--ctp-ease)}
/* 4 · Portafolio: los años aparecen y cada foto se aleja y se aclara */
.ctp-anim .ctp-timeline.is-in :is(.ctp-head>div>*,.ctp-head>.button){animation:ctp-up .8s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 110ms)}
.ctp-anim .ctp-timeline.is-in .ct-year{animation:ctp-fade .5s ease-out backwards;animation-delay:calc(var(--ctp-y,0) * 90ms + 200ms)}
.ctp-anim .ctp-timeline.is-in .ct-year-ph img{animation:ctp-zoom 1.4s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-y,0) * 90ms + var(--ctp-k,0) * 70ms + 200ms)}
/* 5 · Preguntas: todo pasa de borroso a nítido; la respuesta se desliza al abrir */
.ctp-anim .ctp-faq-band.is-in{animation:ctp-fade .6s ease-out backwards}
.ctp-anim .ctp-faq-band.is-in :is(.ctp-faq-copy>*,.ctp-faq-list details){animation:ctp-blur .8s var(--ctp-ease) backwards;animation-delay:calc(var(--ctp-i,0) * 110ms + 150ms)}
.ctp-anim .ctp-faq-list details[open] p{animation:ctp-answer .35s var(--ctp-ease)}