@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Hanken+Grotesk:wght@400;500;600&display=swap');

:root{
  --noche:#04211f;
  --noche-2:#07332f;
  --hoja:#5cc72c;
  --lima:#b6f06f;
  --turq:#1fc4d1;
  --turq-claro:#7be6ee;
  --ambar:#f4b860;
  --coral:#ff8f6b;
  --hielo:#eafaf5;
  --bruma:#a3c4bb;
  --filo:rgba(234,250,245,.14);
  --serif:'Gloock',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --suave:cubic-bezier(.2,.7,.2,1);
  --corazon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 88C20 64 2 46 2 26 2 12 13 2 27 2c10 0 18 5 23 13C55 7 63 2 73 2c14 0 25 10 25 24 0 20-18 38-48 62z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.entra body::before{content:'';position:fixed;inset:0;background:var(--turq);z-index:200}
body{margin:0;background:var(--noche);color:var(--hielo);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--turq-claro);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:14px 24px;background:var(--lima);color:#08291b;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s,transform .15s var(--suave)}
.boton:hover{background:#fff}
.boton:active{transform:scale(.97)}
.boton.fantasma{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.boton.fantasma:hover{background:rgba(255,255,255,.14)}

/* Tour */
.tour{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120;width:min(780px,calc(100vw - 24px));background:rgba(4,33,31,.9);backdrop-filter:blur(16px);color:var(--hielo);border-radius:20px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px var(--filo);padding:14px 16px 14px 20px;animation:subir .5s var(--suave)}
@keyframes subir{from{opacity:0;transform:translate(-50%,16px)}}
.tour .pasos{display:flex;gap:4px;margin-bottom:11px}
.tour .pasos i{flex:1;height:3px;border-radius:9px;background:var(--filo)}
.tour .pasos i.ya{background:var(--lima)}
.tour .fila{display:flex;gap:18px;align-items:center}
.tour .texto{flex:1;min-width:0}
.tour small{display:block;color:var(--turq-claro);font-size:13px;font-weight:600}
.tour h3{font-size:22px;line-height:1.2;margin:1px 0 2px}
.tour p{margin:0;font-size:15px;line-height:1.4;color:#cfe3dc}
.tour .mandos{display:flex;gap:6px;align-items:center;flex:none}
.tour button{border:0;cursor:pointer;border-radius:99px;font-weight:600;font-size:15px}
.tour .sig{background:var(--lima);color:#08291b;padding:11px 20px}
.tour .sig:hover{background:#fff}
.tour .ant{background:none;color:var(--hielo);width:40px;height:40px;box-shadow:inset 0 0 0 1px var(--filo)}
.tour .ant:disabled{opacity:.3;cursor:default}
.tour .altos{position:absolute;top:18px;right:18px;display:flex;gap:14px}
.tour .altos button{background:none;color:var(--bruma);font-size:14px;font-weight:500;padding:0}
.tour .altos button:hover{color:#fff}
.tour-mini{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:6px;background:rgba(4,33,31,.92);color:var(--hielo);padding:6px;border-radius:99px;box-shadow:0 14px 34px -12px rgba(0,0,0,.65),0 0 0 1px var(--filo);animation:aparece .3s var(--suave)}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}
.tour-mini button{border:0;cursor:pointer;border-radius:99px;font-weight:600;font-size:14px}
.tour-mini .abre{background:none;color:var(--hielo);padding:8px 10px}
.tour-mini .ant{background:none;color:var(--hielo);width:36px;height:36px;box-shadow:inset 0 0 0 1px var(--filo)}
.tour-mini .ant:disabled{opacity:.3;cursor:default}
.tour-mini .sig{background:var(--lima);color:#08291b;padding:9px 16px}
.atajos{position:fixed;left:18px;bottom:18px;z-index:155}
.abre-atajos{width:46px;height:46px;border:0;border-radius:50%;background:rgba(4,33,31,.9);backdrop-filter:blur(12px);box-shadow:0 10px 24px -10px rgba(0,0,0,.65),0 0 0 1px rgba(234,250,245,.2);display:grid;place-content:center;gap:4px;cursor:pointer}
.abre-atajos span{display:block;width:18px;height:2px;border-radius:2px;background:#eafaf5;transition:transform .25s var(--suave),opacity .2s}
.abre-atajos.abierto span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abre-atajos.abierto span:nth-child(2){opacity:0}
.abre-atajos.abierto span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.atajos nav{position:absolute;left:0;bottom:56px;display:grid;gap:2px;min-width:188px;padding:6px;border-radius:18px;background:rgba(4,33,31,.95);backdrop-filter:blur(14px);box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(234,250,245,.14);animation:aparece .2s var(--suave)}
.atajos nav[hidden]{display:none}
.atajos a,.atajos .ir-recorrido{border:0;background:none;color:#eafaf5;text-decoration:none;text-align:left;font:500 15px var(--sans);padding:11px 14px;border-radius:12px;cursor:pointer;transition:background .2s}
.atajos a:hover,.atajos .ir-recorrido:hover{background:rgba(234,250,245,.12)}
.atajos [aria-current]{background:var(--lima);color:#062320}
.atajos [aria-current]:hover{background:var(--lima)}
.anillo{position:fixed;z-index:110;border-radius:20px;pointer-events:none;box-shadow:0 0 0 2px var(--turq-claro),0 0 0 200vmax rgba(2,18,17,.62);transition:all .6s var(--suave)}
.cortina{position:fixed;inset:0;z-index:190;background:var(--turq);display:grid;place-items:center;color:#04211f;transition:opacity .7s}
.cortina h2{font-size:clamp(38px,6vw,84px);text-align:center;padding:0 20px;opacity:0;transition:opacity .35s .3s}
.cortina.ver h2{opacity:1}
.corazon-paso{-webkit-mask:var(--corazon) center/0 no-repeat;mask:var(--corazon) center/0 no-repeat}

/* Portada del recorrido */
.intro{position:fixed;inset:0;z-index:160;background:radial-gradient(ellipse at 50% 40%,#0b4a44,var(--noche) 68%);display:grid;place-items:center;text-align:center;padding:24px;transition:opacity .7s}
.intro svg{width:min(44vh,300px);height:auto;margin:auto;display:block}
.intro .hojita{transform-box:fill-box;transform-origin:center;animation:brota .6s var(--suave) both}
@keyframes brota{from{transform:scale(0);opacity:0}}
.intro h1{font-size:clamp(40px,6.4vw,80px);line-height:1.04;margin:18px 0 12px}
.intro p{margin:0 0 24px;color:var(--bruma);font-size:19px}
.intro .acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cierre-tour{position:fixed;inset:0;z-index:150;background:radial-gradient(ellipse at 50% 30%,#0b4a44,var(--noche) 70%);display:grid;place-items:center;padding:24px;overflow:auto}
.cierre-tour>div{max-width:900px;width:100%}
.cierre-tour h2{font-size:clamp(38px,6vw,76px);line-height:1.05;margin-bottom:28px}
.fases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--filo);margin-bottom:28px}
.fases div{padding:16px 18px 6px 0}
.fases b{display:block;font:400 25px var(--serif);margin-bottom:3px}
.fases span{color:var(--bruma);font-size:16px}

@media (max-width:720px){
  .tour{bottom:8px;padding:12px 14px;border-radius:16px}
  .tour .fila{flex-direction:column;align-items:stretch;gap:9px}
  .tour h3{font-size:19px;padding-right:44px}.tour p{font-size:14px}
  .tour .mandos{justify-content:space-between}
  .tour .sig{flex:1}
  .tour .altos{top:24px;right:14px}
  .tour h3{padding-right:130px}
  .fases{grid-template-columns:1fr}
  .atajos{left:auto;right:12px;bottom:auto;top:12px}
  .abre-atajos{width:42px;height:42px}
  .atajos nav{left:auto;right:0;bottom:auto;top:50px}
}
@media (prefers-reduced-motion:reduce){.intro .hojita,.tour{animation:none}}