/* Café Apasionado · Envigado
   Concepto: una galeria acogedora. Fondo crema como papel, fucsia de sus sillas,
   ladrillo y verde de sus plantas. Letras: Fraunces (suave, con cursivas) + Figtree. */
:root{
  --crema:#f5ede2;
  --crema-2:#ebe0d1;
  --papel:#fbf6ef;
  --tinta:#2a1d1a;
  --cafe:#5a3b2e;
  --fucsia:#b0175c;
  --fucsia-2:#d23f80;
  --ladrillo:#a5553a;
  --verde:#4e6b43;
  --gris:#7d6f66;
  --linea:rgba(42,29,26,.14);
  --f-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --barra-h:70px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + 10px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17.5px/1.65 var(--f-texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
em{font-style:italic;color:var(--fucsia);font-variation-settings:"SOFT" 100,"WONK" 1}
:focus-visible{outline:2px solid var(--fucsia);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-999px;top:8px;z-index:300;background:var(--tinta);color:var(--crema);padding:8px 14px}
.saltar:focus{left:12px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

.etiqueta{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;font:600 12px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.etiqueta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fucsia)}
.h2{font:400 clamp(42px,6.2vw,96px)/1 var(--f-display);font-variation-settings:"SOFT" 50,"opsz" 144;letter-spacing:-.02em;margin:0;text-wrap:balance}
.cabeza{max-width:1320px;margin:0 auto 52px;padding:0 var(--gutter)}
.sub{color:var(--gris);margin:18px 0 0;max-width:52ch;text-wrap:pretty}

.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:600 15px/1 var(--f-texto);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:color .4s var(--ease),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--tinta);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn-fucsia{background:var(--fucsia);color:#fff}
.btn-linea{border-color:var(--tinta);color:var(--tinta)}
.btn-linea:hover{color:var(--crema)}
.btn-chico{min-height:42px;padding:0 20px;font-size:14px}

/* Precarga: la taza se llena */
.precarga{display:none}
.js .precarga{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--crema);color:var(--tinta);animation:precarga-fuera 0s 5s forwards}
.taza{width:110px;height:110px}
.taza-cafe{fill:var(--fucsia);transform:translateY(60px)}
.precarga-nombre{margin:0;font:400 30px/1 var(--f-display)}
@keyframes precarga-fuera{to{visibility:hidden;opacity:0}}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:22px;height:calc(var(--barra-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));transition:background .4s,box-shadow .4s}
.barra.solida{background:rgba(245,237,226,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linea)}
.marca{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;text-decoration:none;font:500 24px/1 var(--f-display)}
.marca small{width:100%;font:600 9.5px/1 var(--f-texto);letter-spacing:.3em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.barra-nav{display:none;gap:30px;margin-left:auto}
.barra-nav a{position:relative;text-decoration:none;font-size:15px;color:var(--cafe)}
.barra-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--fucsia);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.barra-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.barra .btn{margin-left:auto;flex-shrink:0}
@media (max-width:480px){.marca{font-size:20px}.barra .btn-chico{padding:0 16px;font-size:13.5px}}
@media (min-width:960px){.barra-nav{display:flex}.barra .btn{margin-left:6px}}

/* Hero */
.hero{display:grid;gap:44px;padding:calc(var(--barra-h) + 36px) var(--gutter) 80px;max-width:1360px;margin:0 auto;align-items:center}
.titular{position:relative;margin:0 0 26px;font:300 clamp(60px,15vw,168px)/.92 var(--f-display);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.035em}
.titular em{font-weight:400}
.linea{display:block;overflow:hidden;padding:0 .06em .1em 0}
.linea>span{display:inline-block}
.vapor{position:absolute;left:2.55em;top:-.42em;width:.7em;pointer-events:none;z-index:1}  /* sobre la palabra "café" */
.vapor svg{width:100%;overflow:visible}
/* Vapor: tres hilos que suben y se desvanecen, sin parar */
.vapor path{fill:none;stroke:var(--fucsia);stroke-width:3.4;stroke-linecap:round;opacity:.7;stroke-dasharray:40 84;animation:vapor 3.6s linear infinite}
.vapor path:nth-child(2){animation-delay:-1.2s;animation-duration:4.2s}
.vapor path:nth-child(3){animation-delay:-2.4s;animation-duration:3.9s}
@keyframes vapor{0%{stroke-dashoffset:0;opacity:0}25%{opacity:.85}100%{stroke-dashoffset:124;opacity:0}}
.hero-sub{max-width:44ch;color:var(--cafe);font-size:clamp(17px,1.4vw,19.5px);margin:0 0 30px;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.nota-google{margin:0;padding-top:22px;border-top:1px solid var(--linea);font-size:14.5px;color:var(--gris)}
.nota-google b{font:500 28px/1 var(--f-display);color:var(--tinta);margin-right:4px}
/* El cuadro: clavo, cuerda y marco de madera; adentro el video y la lluvia */
.cuadro{position:relative;margin:30px 0 0;justify-self:center;width:min(100%,520px);transform-origin:50% -40px}
.clavo{position:absolute;left:50%;top:-58px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9c3a0,#6c5240);box-shadow:0 2px 3px rgba(0,0,0,.3);z-index:2}
.cuerda{position:absolute;left:50%;top:-52px;width:46%;height:56px;transform:translateX(-50%);
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),#7a6152 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent calc(50% - 1px),#7a6152 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
.marco{padding:16px;background:linear-gradient(135deg,#7b5236,#5a3923 40%,#8a603f 60%,#4b2f1d);border-radius:4px;box-shadow:0 30px 60px -20px rgba(42,29,26,.55),0 10px 20px -10px rgba(42,29,26,.4),inset 0 0 0 2px rgba(255,230,190,.18)}
.lienzo{position:relative;overflow:hidden;aspect-ratio:4/5;background:#1d1411;box-shadow:inset 0 0 0 6px var(--papel),inset 0 0 30px rgba(0,0,0,.45)}
.lienzo video{width:100%;height:100%;object-fit:cover}
.lluvia{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cuadro figcaption{margin-top:16px;text-align:center;font:italic 400 16px/1.3 var(--f-display);color:var(--gris)}
@media (min-width:960px){
  .hero{grid-template-columns:1.15fr .85fr;gap:70px;min-height:100svh}
  .titular{font-size:clamp(96px,9.4vw,168px)}
  .cuadro{margin-top:60px}
}

/* Lo que preparamos */
.carta{padding:120px 0 120px;background:var(--papel);border-top:1px solid var(--linea)}
.carta-cuerpo{display:grid;gap:60px;max-width:1320px;margin:0 auto;padding:0 var(--gutter);align-items:start}
.pedidos{list-style:none;margin:0;padding:0}
.pedidos li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--linea)}
.pedidos li:last-child{border-bottom:1px solid var(--linea)}
.pedidos .n{font:italic 400 22px/1.4 var(--f-display);color:var(--fucsia)}
.pedidos h3{margin:0 0 4px;font:400 clamp(26px,2.6vw,34px)/1.1 var(--f-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;transition:color .3s}
.pedidos p{margin:0;color:var(--gris)}
.pedidos li:hover h3{color:var(--fucsia)}
.carta-fotos{position:relative;min-height:520px}
.polaroid{position:absolute;margin:0;padding:12px 12px 44px;background:#fff;box-shadow:0 20px 40px -18px rgba(42,29,26,.45);width:58%}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:italic 400 18px/1 var(--f-display);color:var(--cafe)}
.p1{left:0;top:0;rotate:-6deg}
.p2{right:0;top:60px;rotate:5deg}
.p3{left:20%;top:250px;rotate:-2deg}
@media (min-width:960px){.carta-cuerpo{grid-template-columns:1fr 1fr;gap:80px}.carta-fotos{min-height:720px}}
@media (max-width:959px){.carta-fotos{min-height:clamp(420px,120vw,620px)}}

/* El lugar: cuadros colgados */
.lugar{padding:130px 0 120px;background:linear-gradient(var(--crema-2),var(--crema));position:relative}
.pared{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 18px;max-width:1320px;margin:0 auto;padding:30px var(--gutter) 0}
.colgado{position:relative;padding:10px;border:0;background:#fff;cursor:zoom-in;box-shadow:0 22px 40px -22px rgba(42,29,26,.55);transform-origin:50% -34px;color:var(--tinta);text-align:left}
.colgado img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hilo{position:absolute;left:50%;top:-34px;width:1.5px;height:34px;background:#7a6152;transform:translateX(-50%)}
.hilo::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9c3a0,#6c5240)}
.ficha{display:block;padding:10px 4px 2px;font:italic 400 17px/1.2 var(--f-display);color:var(--cafe)}
.c2 img,.c6 img{aspect-ratio:1}
@media (min-width:960px){
  .pared{grid-template-columns:repeat(3,1fr);gap:80px 40px}
  .c2{margin-top:60px}.c5{margin-top:-40px}.c4{margin-top:20px}
}
.visor{border:0;padding:0;background:transparent;max-width:min(94vw,1000px);max-height:94svh}
.visor::backdrop{background:rgba(42,29,26,.88);backdrop-filter:blur(4px)}
.visor img{max-height:84svh;width:auto;margin:0 auto;border:10px solid #fff}
.visor-cerrar{display:block;margin:14px auto 0;min-height:44px;padding:0 24px;border-radius:999px;border:0;background:var(--crema);color:var(--tinta);font:600 14px var(--f-texto);cursor:pointer}

/* Tardes: disco que gira */
.tardes{display:grid;gap:50px;align-items:center;padding:130px var(--gutter);max-width:1320px;margin:0 auto}
.disco{justify-self:center;width:min(78vw,420px)}
.disco svg{width:100%;animation:girar 9s linear infinite}
.vinilo{fill:#1c1412}
.surco{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.etiqueta-disco{fill:var(--fucsia)}
.texto-disco{font:600 9px var(--f-texto);letter-spacing:.24em;fill:#fff}
.centro{fill:var(--crema)}
@keyframes girar{to{transform:rotate(360deg)}}
.disco svg{transform-origin:50% 50%}
.tardes-texto>p{color:var(--cafe);max-width:46ch;font-size:18.5px}
@media (min-width:960px){.tardes{grid-template-columns:.8fr 1.2fr;gap:90px}}

/* Opiniones */
.opiniones{display:grid;gap:40px;padding:120px var(--gutter);max-width:1320px;margin:0 auto;border-top:1px solid var(--linea)}
.op-num{margin:0;font:300 clamp(100px,14vw,200px)/.9 var(--f-display);letter-spacing:-.04em}
.op-num small{display:block;font:500 14px/1.4 var(--f-texto);letter-spacing:.04em;color:var(--gris);margin-top:10px}
.op-nota>p:last-child{margin:4px 0 0;color:var(--gris)}
.repiten{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.repiten li{padding:22px 0;border-bottom:1px solid var(--linea);font:400 clamp(24px,2.6vw,34px)/1.2 var(--f-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em}
.op-aclara{margin:0;color:var(--gris);font-size:15px}
.op-aclara a{color:var(--fucsia)}
@media (min-width:960px){.opiniones{grid-template-columns:.8fr 1.2fr;column-gap:80px}.op-aclara{grid-column:2}}

/* Horario: letrero de fichas */
.horario-sec{display:grid;gap:50px;padding:120px var(--gutter);background:var(--tinta);color:var(--crema)}
.horario-sec>*{max-width:620px;width:100%;justify-self:center}
.horario-sec .etiqueta{color:#c8b9a8}
.tablero{align-self:center}
.fichas{display:flex;flex-wrap:wrap;gap:5px;font:600 clamp(26px,5.4vw,52px)/1 var(--f-texto);letter-spacing:.02em;perspective:600px}
.ficha-c{display:inline-grid;place-items:center;width:1.05em;height:1.4em;background:#3a2b26;color:var(--crema);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);position:relative}
.ficha-c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45)}
.ficha-c.vacia{background:transparent;box-shadow:none}
.fichas.abierto .ficha-c:not(.vacia){color:#ffd6e7;background:var(--fucsia)}
.tablero-sub{margin:18px 0 0;color:#c8b9a8;font-size:16px}
.horario-lista .h2{color:var(--crema)}
.horario-lista .h2 em{color:var(--fucsia-2)}
.horario{width:100%;border-collapse:collapse;margin-top:30px}
.horario th,.horario td{padding:14px 0;border-bottom:1px solid rgba(245,237,226,.14);text-align:left;font-weight:400}
.horario td{text-align:right;font-variant-numeric:tabular-nums;color:#e3d6c6}
.horario tr.hoy th,.horario tr.hoy td{color:var(--fucsia-2)}
.horario tr.hoy th::after{content:" · hoy";font:italic 400 15px var(--f-display)}
@media (min-width:960px){.horario-sec{grid-template-columns:1fr 1fr;gap:90px}}

/* Visita */
.visita{display:grid;gap:44px;padding:120px var(--gutter);max-width:1320px;margin:0 auto}
.direccion{color:var(--cafe);margin:16px 0 22px;font-size:18px}
.direccion b{color:var(--fucsia);font-weight:600}
.servicios{list-style:none;padding:0;margin:0 0 30px;display:flex;gap:8px;flex-wrap:wrap}
.servicios li{padding:9px 16px;border-radius:999px;background:var(--papel);border:1px solid var(--linea);font-size:14.5px}
.visita-cta{display:flex;flex-wrap:wrap;gap:10px}
.visita-mapa{min-height:380px;border-radius:6px;overflow:hidden;border:10px solid #fff;box-shadow:0 22px 40px -22px rgba(42,29,26,.5)}
.visita-mapa iframe{width:100%;height:100%;min-height:380px;border:0;filter:sepia(.25) saturate(.9)}
@media (min-width:960px){.visita{grid-template-columns:1fr 1fr;gap:70px}.visita-mapa{min-height:520px}}

/* Pie */
.pie{padding:80px var(--gutter) calc(110px + env(safe-area-inset-bottom));text-align:center;background:var(--crema-2);color:var(--gris);font-size:14.5px}
.pie-marca{margin:0 0 12px;font:300 clamp(48px,8vw,92px)/1 var(--f-display);color:var(--tinta);letter-spacing:-.03em}
.pie p{margin:6px 0}
.pie a{color:var(--fucsia)}

.wa-flotante{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(42,29,26,.35);transition:transform .3s var(--ease)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .precarga{display:none!important}
  .vapor path{stroke-dashoffset:0}
}