/* =========================================================
   LASOGA URBAN FOOD · contacto.css  (v2)
   Concepto: las franjas de neón de LASOGA guían hasta la puerta.
   Sin GSAP: animaciones CSS (una sola vez) + .rv de base.js +
   líneas de luz que siguen el scroll mediante la variable --p.
   Sin JS: todo el contenido visible.
   ========================================================= */

/* ---------- Líneas de luz (reaccionan al scroll con --p, 0 → 1) ---------- */
.ct-lights{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ct-lights i{position:absolute;left:var(--l);width:var(--w);top:var(--t);height:var(--h,6px);border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(244,122,32,.9) 18%,rgba(255,160,70,1) 50%,rgba(244,122,32,.9) 82%,transparent);
  box-shadow:0 0 24px 4px rgba(244,122,32,.3);filter:blur(var(--b,2px));opacity:var(--o,.55);
  transform:translate3d(calc(var(--p,0) * var(--dx,0px)),0,0) scaleX(calc(1 + var(--p,0) * var(--ds,0)));
  animation:ct-on 1.6s ease-out var(--d,0s) both}
@keyframes ct-on{0%{opacity:0}20%{opacity:calc(var(--o,.55) * .5)}26%{opacity:.05}44%{opacity:calc(var(--o,.55) * .9)}50%{opacity:.2}72%,100%{opacity:var(--o,.55)}}
.ct-glow{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(244,122,32,.22),rgba(184,74,20,.08) 55%,transparent 75%)}

/* ---------- 1 · Portada (más breve que Inicio) ---------- */
.ct-hero{position:relative;isolation:isolate;overflow:hidden;min-height:78vh;min-height:78svh;display:grid;align-content:end;
  padding-top:calc(var(--nav-h) + 40px + env(safe-area-inset-top,0px));padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.ct-hero::after{content:"";position:absolute;inset:auto 0 0;height:40%;z-index:0;background:linear-gradient(transparent,var(--carbon));pointer-events:none}
.ct-hero-in{position:relative;z-index:1;display:grid;gap:clamp(1.2rem,3vw,1.8rem)}
.ct-title{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(4rem,12.5vw,11.5rem);line-height:.8;letter-spacing:-.015em}
.ct-title .ln{display:block;clip-path:inset(-40% -10% 0 -10%);padding-bottom:.05em}
.ct-title .ln > span{display:inline-block;animation:ct-rise 1.1s var(--ease) both}
.ct-title .ln:nth-child(2) > span{animation-delay:.12s;color:transparent;-webkit-text-stroke:2px var(--cream)}
.ct-title .ln:nth-child(3) > span{animation-delay:.24s}
.ct-title em{font-style:normal;color:var(--orange)}
.ct-title b{display:inline-block;width:.17em;height:.17em;margin-left:.05em;background:var(--orange)}
.ct-hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;animation:ct-fade 1s .7s var(--ease) both}
.ct-hero-row p{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--orange)}
@keyframes ct-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes ct-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Botones ---------- */
.ct-btns{display:flex;flex-wrap:wrap;gap:.7rem}
.ct-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;text-decoration:none;overflow:hidden;isolation:isolate;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:1.1rem 1.5rem;border:1px solid var(--orange);
  transition:color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.ct-btn svg{width:17px;height:17px;flex:none;transition:transform .45s var(--ease)}
.ct-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ct-btn.primary{background:var(--orange);color:var(--carbon);box-shadow:0 16px 44px -18px rgba(244,122,32,.75)}
.ct-btn.primary::before{background:var(--cream)}
.ct-btn.ghost{color:var(--cream);border-color:var(--line);background:rgba(14,13,12,.4)}
.ct-btn.ghost::before{background:var(--orange)}
.ct-btn:hover,.ct-btn:focus-visible{transform:translateY(-3px)}
.ct-btn:hover::before,.ct-btn:focus-visible::before{transform:scaleX(1)}
.ct-btn.ghost:hover,.ct-btn.ghost:focus-visible{color:var(--carbon);border-color:var(--orange);box-shadow:0 16px 44px -18px rgba(244,122,32,.7)}
.ct-btn:hover svg{transform:translateX(3px)}
.ct-btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- Secciones ---------- */
.ct-sec{position:relative;isolation:isolate;padding-block:clamp(3.5rem,8vw,6.5rem);border-top:1px solid var(--line)}
.ct-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.ct-sec-head .n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--cream-dim)}

/* 2 · Ubicación: tipografía editorial + mapa ilustrativo enlazado */
.ct-loc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.ct-addr{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,7.5vw,6.8rem);line-height:.86;text-wrap:balance}
.ct-addr span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--cream)}
.ct-city{margin:1rem 0 1.6rem;color:var(--cream-dim);font-size:1.05rem}
.ct-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.ct-chips span{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;color:var(--cream-dim)}
.ct-map{position:relative;display:block;aspect-ratio:4/3.4;border-radius:14px;overflow:hidden;text-decoration:none;border:1px solid var(--line);
  background:
    linear-gradient(28deg,transparent 47%,rgba(239,228,207,.10) 47% 49%,transparent 49%),
    linear-gradient(-62deg,transparent 58%,rgba(239,228,207,.08) 58% 59.5%,transparent 59.5%),
    linear-gradient(90deg,transparent 31%,rgba(239,228,207,.06) 31% 32%,transparent 32%),
    repeating-linear-gradient(0deg,rgba(239,228,207,.035) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(239,228,207,.035) 0 1px,transparent 1px 40px),
    radial-gradient(55% 55% at 52% 55%,rgba(244,122,32,.16),transparent 70%),var(--carbon-2);
  transition:border-color .4s,box-shadow .4s}
.ct-map:hover,.ct-map:focus-visible{border-color:rgba(244,122,32,.7);box-shadow:0 0 50px -12px rgba(244,122,32,.4)}
.ct-map:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ct-pin{position:absolute;left:52%;top:55%;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:.4rem;z-index:2}
.ct-pin i{width:22px;height:22px;background:var(--orange);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 8px rgba(244,122,32,.18)}
.ct-pin span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:var(--cream);color:var(--carbon);padding:.25rem .5rem;white-space:nowrap}
.ct-pulse{position:absolute;left:52%;top:55%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:1px solid var(--orange);animation:ct-pulse 2.6s infinite var(--ease)}
@keyframes ct-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(5);opacity:0}}
.ct-map-tag{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:rgba(14,13,12,.75);padding:.3rem .55rem}

/* 3 · Horarios */
.ct-hours{margin:0;display:grid;border-top:1px solid var(--line)}
.ct-day{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:clamp(.9rem,2vw,1.2rem) 0;border-bottom:1px solid var(--line);transition:background .3s}
.ct-day dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1;display:flex;align-items:center;gap:.8rem}
.ct-day dd{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem .6rem}
.ct-slot{font-family:var(--f-mono);font-size:clamp(.82rem,1.5vw,1rem);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;
  border:1px solid rgba(244,122,32,.4);border-radius:999px;padding:.35rem .75rem;color:var(--cream)}
.ct-day.off dt{color:var(--cream-dim);-webkit-text-stroke:0}
.ct-day.off .ct-slot{border-style:dashed;border-color:var(--line);color:var(--cream-dim)}
.ct-day.today dt{color:var(--orange)}
.ct-day.today .ct-slot{background:rgba(244,122,32,.12);border-color:var(--orange)}
.ct-today{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:var(--orange);color:var(--carbon);padding:.2rem .45rem}
.ct-hours-note{margin:1rem 0 0;color:var(--cream-dim);font-size:.82rem}

/* 4 · Contacto directo */
.ct-direct{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.ct-num{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,9vw,7.6rem);line-height:1;letter-spacing:.02em;color:#ffd9b8;
  font-variant-numeric:tabular-nums;white-space:nowrap;user-select:all;
  text-shadow:0 0 6px rgba(255,170,90,.9),0 0 18px rgba(244,122,32,.75),0 0 44px rgba(244,122,32,.5),0 0 90px rgba(244,122,32,.3)}
.ct-num-label{margin:.6rem 0 1.6rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
.ct-side{display:grid;gap:1rem;border-left:1px solid var(--line);padding-left:clamp(1.2rem,3vw,2rem)}
.ct-side h3{margin:0;font-family:var(--f-mono);font-size:.68rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.ct-side p{margin:0;color:var(--cream-dim)}
.ct-ig{display:inline-flex;align-items:center;gap:.6rem;color:var(--cream);text-decoration:none;font-family:var(--f-mono);font-size:.9rem;letter-spacing:.06em;
  border-bottom:1px solid var(--orange);padding-bottom:.3rem;width:max-content;transition:color .3s}
.ct-ig svg{width:18px;height:18px;color:var(--orange)}
.ct-ig:hover{color:var(--orange)}
.ct-copy{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  border-bottom:1px dashed var(--line);padding-bottom:.2rem;width:max-content;transition:color .3s,border-color .3s}
.ct-copy:hover,.ct-copy.ok{color:var(--orange);border-color:var(--orange)}
.ct-copy:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* 5 · Cierre */
.ct-end{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(5rem,14vw,10rem);text-align:center;border-top:1px solid var(--line)}
.ct-end .ct-glow{width:min(900px,130vw);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}
.ct-end h2{margin:0 auto;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(3.4rem,10.5vw,9.6rem);line-height:.84;max-width:11ch;text-wrap:balance}
.ct-end h2 em{font-style:normal;color:var(--orange)}
.ct-end .ct-btns{justify-content:center;margin-top:clamp(2rem,5vw,3rem)}
.ct-demo{margin:2.4rem auto 0;max-width:60ch;color:var(--cream-dim);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em}

/* Espera de la tipografía: el titular arranca una sola vez, ya con la letra de LASOGA */
html.ct-wait .ct-hero-in{visibility:hidden}
html.ct-wait .ct-hero *{animation-play-state:paused!important}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .ct-hero{min-height:0;align-content:start;padding-top:calc(var(--nav-h) + 36px + env(safe-area-inset-top,0px));padding-bottom:2.5rem}
  .ct-title .ln:nth-child(2) > span{-webkit-text-stroke-width:1.5px}
  .ct-hero-row{flex-direction:column;align-items:stretch}
  .ct-btns .ct-btn{flex:1 1 100%}
  .ct-loc,.ct-direct{grid-template-columns:1fr}
  .ct-map{aspect-ratio:4/3}
  .ct-side{border-left:0;border-top:1px solid var(--line);padding:1.4rem 0 0}
  .ct-day{padding:.75rem 0}
  .ct-day dt{font-size:1.5rem}
  .ct-day dd{flex-direction:column;align-items:flex-end;gap:.3rem}
  .ct-slot{font-size:.78rem;padding:.25rem .6rem}
}
@media (prefers-reduced-motion:reduce){
  .ct-lights i,.ct-title .ln > span,.ct-hero-row,.ct-pulse{animation:none}
  .ct-lights i{transform:none}
}