/* Sushi Service · Envigado
   Concepto: "Una experiencia para todos tus sentidos".
   Paleta tomada del logo: el rojo de los palillos y el verde del aguacate. */
:root{
  --tinta:#0f0f0d;        /* fondo nori */
  --tinta-2:#191915;
  --arroz:#f3eee4;        /* papel de arroz */
  --arroz-2:#e7dfd0;
  --rojo:#d93a2b;         /* palillos del logo */
  --verde:#86c04f;        /* aguacate del logo */
  --gris:#8a857a;
  --linea:rgba(243,238,228,.16);
  --f-display:'Shippori Mincho B1', 'Yu Mincho', Georgia, serif;
  --f-texto:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'DM Mono', ui-monospace, Consolas, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --barra-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--arroz);font:400 17px/1.6 var(--f-texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:normal;color:var(--rojo)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--arroz);color:var(--tinta);padding:8px 14px}
.saltar:focus{left:12px}

.etiqueta{font:500 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--verde);margin:0 0 18px}
.h2{font:700 clamp(40px,6.4vw,88px)/1 var(--f-display);letter-spacing:-.025em;margin:0;text-wrap:balance}
.sec-cabeza{padding:0 var(--gutter);max-width:1360px;margin:0 auto 40px}
.sec-sub{color:var(--gris);margin:14px 0 0;text-wrap:pretty}

/* Botones: el fondo se llena desde el punto del cursor */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--f-texto);text-decoration:none;border:1px solid transparent;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--arroz);clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .5s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.btn:hover{color:var(--tinta)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-linea{border-color:var(--linea);color:var(--arroz)}
.btn-chico{min-height:40px;padding:0 18px;font-size:14px}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;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));background:rgba(15,15,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.barra.con-borde{border-color:var(--linea)}
.barra-logo img{height:46px;width:auto}
.barra-nav{display:none;gap:28px;margin-left:auto}
.barra-nav a{text-decoration:none;font-size:15px;color:var(--arroz-2)}
.barra-nav a:hover{color:var(--rojo)}
.estado{margin-left:auto;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gris)}
.estado.abierto{color:var(--verde)}
.estado.abierto::before{background:var(--verde);box-shadow:0 0 0 4px rgba(134,192,79,.18)}
.barra .btn-chico{display:none}
@media (min-width:900px){
  .barra-nav{display:flex}
  .estado{margin-left:12px}
  .barra .btn-chico{display:inline-flex}
}

/* Hero */
.hero{display:grid;gap:40px;padding:calc(var(--barra-h) + 36px) var(--gutter) 64px;max-width:1360px;margin:0 auto;align-items:center}
/* "Una experiencia" mide 7,7 em: el tamaño sale del ancho disponible */
.titular{font:800 calc((100vw - 2*var(--gutter))/8.1)/.98 var(--f-display);letter-spacing:-.03em;margin:0 0 26px}
.linea{display:block;overflow:hidden;padding-bottom:.06em}
.linea>span{display:inline-block;white-space:nowrap}
.hero-sub{max-width:46ch;font-size:clamp(17px,1.5vw,19px);color:var(--arroz-2);margin:0 0 30px;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.nota-google{display:flex;align-items:center;gap:18px;padding-top:24px;border-top:1px solid var(--linea)}
.nota-num{font:700 54px/1 var(--f-display);letter-spacing:-.03em}
.nota-detalle p{margin:6px 0 0;font-size:14px;color:var(--gris)}
.estrellas{position:relative;display:inline-block;color:rgba(243,238,228,.18);font-size:18px;letter-spacing:3px;line-height:1}
.estrellas-llenas{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:var(--rojo);width:calc(var(--nota)*100%);transform-origin:left}
.hero-foto{position:relative;margin:0}
.hero-marco{overflow:hidden;border-radius:220px 220px 14px 14px;aspect-ratio:4/5;background:var(--tinta-2)}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.palillos{position:absolute;top:-28px;right:10%;width:64px;height:calc(100% + 56px);pointer-events:none;overflow:visible}
.palillo{stroke:var(--rojo);stroke-width:7;stroke-linecap:round}
.hero-foto figcaption{margin-top:12px;font:400 12px/1.4 var(--f-mono);color:var(--gris);letter-spacing:.04em}
@media (min-width:900px){
  .hero{grid-template-columns:1.4fr .75fr;gap:64px;min-height:100svh;padding-bottom:48px}
  .titular{font-size:clamp(56px,7vw,98px)}
  .hero-marco{aspect-ratio:3/4.4}
}

/* Sentidos: riel horizontal con arrastre */
.sentidos{padding:96px 0 72px;border-top:1px solid var(--linea)}
.riel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 28px;scroll-padding:0 var(--gutter);scrollbar-width:thin;scrollbar-color:var(--rojo) transparent;cursor:grab;overscroll-behavior-x:contain}
.riel.arrastrando{cursor:grabbing;scroll-snap-type:none}
.riel.arrastrando *{pointer-events:none;user-select:none}
.sentido{flex:0 0 min(78vw,360px);scroll-snap-align:start}
.sentido h3{font:700 26px/1.1 var(--f-display);letter-spacing:-.015em;margin:6px 0 8px}
.sentido p{margin:0;color:var(--arroz-2);font-size:15.5px;text-wrap:pretty}
.sentido .sentido-num{color:var(--rojo);font-size:13px;margin-top:18px}
.revela{position:relative;overflow:hidden;border-radius:10px;background:var(--tinta-2)}
.revela img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cortina{position:absolute;inset:0;z-index:2;background:var(--rojo);transform:scaleX(0);pointer-events:none}
.js-anim .revela img{opacity:0}

/* Manifiesto con texto que se rellena */
.manifiesto{padding:96px var(--gutter);background:var(--arroz);color:var(--tinta)}
.relleno{max-width:1180px;margin:0 auto;font:700 clamp(30px,4.6vw,64px)/1.12 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.relleno em{color:var(--rojo)}
.js-anim .relleno{background:linear-gradient(90deg,var(--tinta) 50%,#c9c1b1 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.js-anim .relleno em{color:transparent}

/* Carta */
.carta{padding:110px 0 90px;background:var(--arroz);color:var(--tinta);border-top:1px solid var(--arroz-2)}
.carta .sec-sub{color:#6b665c}
.carta .etiqueta{color:#4f7d27}
.filtros{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gutter) 6px;max-width:1360px;margin:0 auto 26px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:0 0 auto;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid #cfc6b5;background:transparent;color:var(--tinta);font:500 14px/1 var(--f-texto);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filtro:hover{border-color:var(--tinta)}
.filtro.activo{background:var(--tinta);color:var(--arroz);border-color:var(--tinta)}
.rollos{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:1360px;display:grid;gap:0 48px}
.rollo{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:22px 0;border-top:1px solid #d9d0bf}
.rollo.oculto{display:none}
.rollo h3{font:700 clamp(24px,2.4vw,30px)/1.1 var(--f-display);letter-spacing:-.015em;margin:0;display:flex;align-items:center;gap:8px}
.rollo p{grid-column:1/-1;margin:0;color:#57524a;font-size:15.5px;text-wrap:pretty}
.precios{display:flex;gap:14px;align-items:baseline;font:500 17px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.precios span{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.precios small{font-size:10.5px;color:#8a8478;letter-spacing:.06em;text-transform:uppercase}
.precios span+span{color:#6b665c}
.pedir{grid-column:1/-1;justify-self:start;font:500 13px/1 var(--f-mono);color:var(--rojo);text-decoration:none;padding:8px 0;letter-spacing:.04em}
.pedir:hover{text-decoration:underline}
.fuego{display:inline-block;width:12px;height:16px;background:var(--rojo);clip-path:path('M6 0C7 4 12 6 12 11a6 5 0 0 1-12 0c0-3 2-4 3-6 0 2 1 3 2 3 0-3 0-5 1-8Z');vertical-align:-2px}
.carta-nota{max-width:1360px;margin:28px auto 0;padding:0 var(--gutter);font-size:14px;color:#6b665c}
@media (min-width:860px){.rollos{grid-template-columns:1fr 1fr}}

/* Galeria */
.galeria{padding:110px 0 90px}
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--gutter);max-width:1360px;margin:0 auto}
.foto{padding:0;border:0;background:var(--tinta-2);cursor:zoom-in;border-radius:10px;overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.foto:hover img{transform:scale(1.04)}
.f-a,.f-b,.f-d,.f-e{aspect-ratio:3/4}
.f-c{grid-column:1/-1;aspect-ratio:16/8}
@media (min-width:900px){
  .mosaico{grid-template-columns:repeat(12,1fr);grid-auto-rows:110px}
  .f-a{grid-column:1/5;grid-row:span 5;aspect-ratio:auto}
  .f-b{grid-column:5/9;grid-row:2/span 4;aspect-ratio:auto}
  .f-c{grid-column:9/13;grid-row:span 2;aspect-ratio:auto}
  .f-d{grid-column:9/13;grid-row:3/span 4;aspect-ratio:auto}
  .f-e{grid-column:5/9;grid-row:6/span 2;aspect-ratio:auto}
  .f-e img{object-position:50% 35%}
}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92svh}
.visor::backdrop{background:rgba(10,10,8,.9)}
.visor img{max-height:86svh;width:auto;margin:0 auto;border-radius:8px}
.visor-cerrar{display:block;margin:12px auto 0;min-height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--linea);background:var(--tinta);color:var(--arroz);font:500 14px var(--f-texto);cursor:pointer}

/* Opiniones */
.opiniones{display:grid;gap:40px;padding:100px var(--gutter);max-width:1360px;margin:0 auto;border-top:1px solid var(--linea);align-items:start}
.op-num{font:800 clamp(88px,13vw,180px)/.9 var(--f-display);letter-spacing:-.04em;margin:0}
.op-num small{font-size:.28em;color:var(--gris);letter-spacing:0;margin-left:6px}
.barra-nota{height:6px;background:var(--linea);border-radius:6px;overflow:hidden;margin:18px 0 12px;max-width:360px}
.barra-nota span{display:block;height:100%;width:calc(var(--nota)*100%);background:var(--rojo);transform-origin:left}
.op-nota p{margin:0;color:var(--gris)}
.citas{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.citas li{padding:26px 28px;border:1px solid var(--linea);border-radius:14px}
.citas blockquote{margin:0 0 10px;font:700 clamp(28px,3.4vw,44px)/1.05 var(--f-display);letter-spacing:-.02em}
.citas span{font:400 12px var(--f-mono);color:var(--gris);letter-spacing:.06em;text-transform:uppercase}
.cita-resumen p{margin:0;color:var(--arroz-2)}
.cita-resumen strong{color:var(--arroz);font-weight:600}
.op-link{justify-self:start}
@media (min-width:900px){
  .opiniones{grid-template-columns:.9fr 1.1fr}
  .citas li:nth-child(2){margin-left:12%}
  .op-link{grid-column:2}
}

/* Visita */
.visita{display:grid;gap:40px;padding:100px var(--gutter);max-width:1360px;margin:0 auto;border-top:1px solid var(--linea)}
.direccion{color:var(--arroz-2);margin:14px 0 24px}
.servicios{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.servicios li{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--tinta-2);border:1px solid var(--linea)}
.horario{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:15px}
.horario th,.horario td{padding:11px 0;border-bottom:1px solid var(--linea);text-align:left;font-weight:400}
.horario td{text-align:right;font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--arroz-2)}
.horario tr.hoy th,.horario tr.hoy td{color:var(--verde)}
.horario tr.hoy th::after{content:" · hoy";font:400 12px var(--f-mono)}
.visita-cta{display:flex;flex-wrap:wrap;gap:10px}
.visita-mapa{min-height:360px;border-radius:14px;overflow:hidden;background:var(--tinta-2);border:1px solid var(--linea)}
.visita-mapa iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.6) contrast(1.05)}
@media (min-width:900px){.visita{grid-template-columns:1fr 1fr;gap:64px}.visita-mapa{min-height:560px}}

/* Pie */
.pie{padding:64px var(--gutter) calc(110px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--linea);color:var(--gris);font-size:14px}
.pie img{width:220px;margin:0 auto 18px}
.pie p{margin:6px 0}
.pie a{color:var(--arroz-2)}
.pie-chico{font-size:13px}

/* WhatsApp flotante */
.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(0,0,0,.4);transition:transform .25s}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

/* Cursor con texto (solo con mouse) */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:grid;place-items:center;position:fixed;left:0;top:0;z-index:80;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--rojo);color:#fff;font:500 13px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;transform:scale(0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Precarga: los palillos del logo se cierran (solo con JS) */
.precarga{display:none}
.js .precarga{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--tinta);animation:precarga-fuera 0s 5s forwards}
.pre-centro{display:grid;justify-items:center;gap:6px}
.pre-palillos{width:90px;height:120px;overflow:visible}
.pre-palillos line{stroke:var(--rojo);stroke-width:7;stroke-linecap:round}
.pre-centro img{width:min(240px,60vw)}
@keyframes precarga-fuera{to{visibility:hidden;opacity:0}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
video.hero-img{display:block}
@media (prefers-reduced-motion:reduce){.precarga{display:none!important}}