/* ===== estilo compartido de interiores (mundo mesa italiana) ===== */
:root{
  --rojo:#D3372A;--azul:#2f5aa8;--rosa:#d86f92;--lila:#8f7fc4;--verde-k:#2C6E48;--amarillo:#E1a51a;
  --cloth-pink:#E7D6CF;--cloth-green:#3A6E4C;--plate:#fbfaf5;
}
body{overflow-x:hidden;color:var(--ink)}

/* mantel a rombos tejido (como la foto del home) — verde algo más cálido, borde ligeramente
   difuminado para matar el corte digital, y una malla de hilos + grano encima para dar tela */
.cloth{position:fixed;inset:0;z-index:0;background-color:var(--cloth-pink);
  background-image:conic-gradient(var(--cloth-green) 90deg,transparent 90deg 180deg,var(--cloth-green) 180deg 270deg,transparent 270deg);
  background-size:128px 128px;
  box-shadow:inset 0 0 260px 30px rgba(23,50,33,.30)}
/* trama de hilos (urdimbre + trama) muy sutil para que la tela no se lea plana */
.cloth::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 1px,transparent 1px 4px)}
.cloth::after{content:"";position:absolute;inset:0;opacity:.08;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.topbar{position:relative;z-index:2}

/* barra superior */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut)}
.topbar .back{display:inline-flex;align-items:center;gap:8px;background:var(--plate);border:3px solid var(--verde-k);color:var(--verde-k);font-family:var(--display);text-transform:uppercase;font-size:.86rem;padding:8px 16px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.topbar .back:hover{transform:translateX(-3px)}
.topbar .mk{font-family:var(--display);text-transform:uppercase;color:#fff;font-size:1.2rem;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.topbar .book{background:var(--rojo);border:3px solid var(--rojo);color:#fff;font-family:var(--display);text-transform:uppercase;font-size:.86rem;padding:8px 16px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.topbar .book:hover{transform:translateY(-2px)}

/* espaciado vertical uniforme entre TODOS los bloques (cajones sueltos y filas) */
.wrap{max-width:1020px;margin:0 auto;padding:clamp(20px,4vw,40px) var(--gut) 90px;display:flex;flex-direction:column;gap:clamp(22px,3.2vw,34px)}
.wrap > .row2{gap:clamp(22px,3.2vw,34px)}

/* “platos” = tarjetas blancas con aro de color (cerámica: brillo de glaseado + sombra de contacto) */
.plate-card{background:linear-gradient(158deg,#fffdf8,var(--plate) 42%,#f3eee2);border:7px solid var(--rim,var(--verde-k));border-radius:30px;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.35),0 28px 50px -22px rgba(23,40,26,.5),0 6px 14px -8px rgba(0,0,0,.18);
  padding:clamp(24px,4vw,44px);position:relative}

/* cabecera */
.head{--rim:var(--amarillo);text-align:center}
.eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-k)}
.title{font-family:var(--display);text-transform:uppercase;color:var(--rojo);font-size:clamp(3.2rem,10vw,7.5rem);line-height:.84;margin:.1em 0 .12em}
.subtitle{font-family:var(--script);font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--ink-60)}

/* categorías / listas */
.cat{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--rim);line-height:1;margin-bottom:6px}
.cat-sub{font-family:var(--script);font-style:italic;color:var(--ink-60);font-size:.95rem;margin-bottom:20px}
.dish{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1.5px dashed rgba(44,39,28,.18)}
.dish:first-of-type{border-top:none}
.dish__n{font-weight:700;font-size:1.05rem}
.dish__n .it{font-family:var(--script);font-style:italic;color:var(--rim);font-weight:500}
.dish__d{font-size:.88rem;color:var(--ink-60);margin-top:2px;max-width:44ch}
.dish__p{font-family:var(--display);color:var(--rim);font-size:1.02rem;white-space:nowrap;padding-top:1px}
.dish__p small{font-family:var(--sans);font-weight:600;font-size:.72em;color:var(--ink-60)}
/* subcategoría dentro de un plato-card */
.subcat{font-family:var(--display);text-transform:uppercase;font-size:1.02rem;color:var(--rim);margin:22px 0 8px;display:flex;align-items:center;gap:10px}
.subcat:first-child{margin-top:0}
.subcat::after{content:"";flex:1;height:2px;background:rgba(44,39,28,.12)}
.subcat small{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;color:var(--ink-60)}
/* sub-grilla de dos columnas para listas largas */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px)}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
/* grilla auto de 2–3 columnas (postres / bebidas a todo el ancho) */
.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0 clamp(24px,3vw,48px)}
@media(max-width:520px){.colgrid{grid-template-columns:1fr}}
/* repisa de cut-outs de bebidas */
.bevshelf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3.5vw,46px);flex-wrap:wrap;margin:12px 0 26px}
.bevshelf img{height:clamp(96px,12vw,150px);width:auto;filter:drop-shadow(0 13px 16px rgba(44,39,28,.3));transition:transform .4s var(--ease)}
.bevshelf img:hover{transform:translateY(-7px) rotate(-2deg)}
/* nota "arma tu plato" que rellena el vacío de la columna de pastas */
.howto{margin-top:22px;padding-top:18px;border-top:2px dashed rgba(225,165,26,.5);font-family:var(--script);font-style:italic;font-size:1.02rem;line-height:1.45;color:var(--ink-60);max-width:34ch}
.howto span{font-family:var(--display);font-style:normal;text-transform:uppercase;font-size:.92rem;color:var(--amarillo);letter-spacing:.01em}

/* mapa ilustrado + elección de navegación */
.mapframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.mapcard{cursor:pointer;transition:transform .3s var(--ease)}
.mapcard:hover{transform:translateY(-2px)}
.mapcta{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--rojo);color:#fff;font-family:var(--display);text-transform:uppercase;font-size:.74rem;letter-spacing:.04em;padding:8px 16px;border-radius:999px;box-shadow:0 8px 16px -6px rgba(0,0,0,.45);white-space:nowrap;transition:background .3s var(--ease)}
.mapcard:hover .mapcta{background:var(--verde-k)}
.wayto{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.wayto[hidden]{display:none}
.wayto a{display:inline-flex;align-items:center;gap:8px}

/* guía de pastas (ilustraciones line-art para reconocer cada una) */
.pastaguide{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,40px);align-items:end;margin-top:26px;padding-top:22px;border-top:2px dashed rgba(225,165,26,.5)}
.pastaguide figure{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0}
.pastaguide img{height:clamp(76px,9vw,120px);width:auto;object-fit:contain}
.pastaguide figcaption{font-family:var(--display);text-transform:uppercase;font-size:1rem;color:var(--amarillo);letter-spacing:.02em}

/* salsa (sin precio) */
.sauce{padding:9px 0;border-top:1.5px dashed rgba(44,39,28,.14)}
.sauce:first-child{border-top:none}
.sauce b{font-weight:700;font-size:.98rem}
.sauce span{display:block;font-size:.82rem;color:var(--ink-60)}

/* prosa / cita */
.prose p{margin-bottom:1em;max-width:56ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--rim,var(--verde-k))}
.prose em.it{font-family:var(--script);font-style:italic;color:var(--rim,var(--rojo))}
.sign{font-family:var(--script);font-style:italic;font-size:1.6rem;color:var(--rim,var(--rojo));margin-top:14px}

/* filas de dos */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,34px);align-items:center}
@media(max-width:760px){.row2{grid-template-columns:1fr}}

/* cut-out hiperrealista (pizza, retrato…) flotando sobre el diseño */
.foodcut{display:grid;place-items:center}
.foodcut img{width:100%;max-width:380px;filter:drop-shadow(0 26px 30px rgba(44,39,28,.35));transform:rotate(-4deg);transition:transform .5s var(--ease)}
.plate-card:hover .foodcut img{transform:rotate(-1deg) scale(1.02)}

/* slot de foto (placeholder) */
.foodplate{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;overflow:hidden;border:7px solid var(--rim,var(--azul));background:radial-gradient(circle at 50% 40%,#f3ede0,#e7dfcb)}
.foodplate span{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);max-width:70%}
.portrait{aspect-ratio:3/4;border-radius:22px;overflow:hidden;border:7px solid var(--rim,var(--lila));background:radial-gradient(circle at 50% 30%,#f3ede0,#e7dfcb);display:grid;place-items:end center;padding:18px}
.portrait span{font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}

/* info (ubicación) */
.inforow{display:flex;flex-direction:column;gap:3px;padding:18px 0;border-top:1.5px dashed rgba(44,39,28,.18)}
.inforow:first-child{border-top:none}
.inforow .k{font-family:var(--display);text-transform:uppercase;font-size:1rem;color:var(--rim,var(--verde-k))}
.inforow .v{font-size:1.05rem;font-weight:500}
.inforow a.v:hover{color:var(--rojo)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.fact{border:3px solid var(--rim,var(--verde-k));border-radius:16px;padding:16px}
.fact .k{font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rim);margin-bottom:4px}
.fact .v{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;line-height:.95}
.fact .v small{display:block;font-family:var(--sans);font-weight:500;font-size:.6rem;text-transform:none;color:var(--ink-60);margin-top:4px}

/* comunidad: grid tipo instagram */
.iggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.igcell{aspect-ratio:1;border-radius:16px;overflow:hidden;border:4px solid var(--rim,var(--rosa));display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#f3ede0,#e7dfcb)}
.igcell span{font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)}
/* feed real de Instagram (embeds oficiales) */
.igfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.igpost{width:100%;height:500px;border:0;border-radius:16px;background:#fff;box-shadow:0 8px 22px -12px rgba(0,0,0,.25)}
@media(max-width:760px){.igfeed{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.igfeed{grid-template-columns:1fr}}
/* contenedor del feed en vivo (widget IG) — el iframe cae aquí */
.igwidget{border-radius:16px;overflow:hidden;border:4px solid var(--rim,var(--rosa));background:radial-gradient(circle at 50% 40%,#f3ede0,#e7dfcb)}
.igwidget iframe{display:block;width:100%;border:0;margin:0}
/* crédito del estudio (footer discreto, pastilla legible sobre el mantel) */
.studiocredit{width:max-content;max-width:90%;margin:36px auto 24px;padding:8px 18px;border-radius:999px;
  background:rgba(251,250,245,.85);box-shadow:0 3px 14px -6px rgba(0,0,0,.3);
  text-align:center;font-size:.72rem;letter-spacing:.05em;color:#7a746a}
.studiocredit a{color:#7a746a;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.studiocredit a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}

/* saucer decorativo */
.saucer{position:absolute;width:88px;height:88px;border-radius:50%;background:var(--plate);border:5px solid var(--rim);display:grid;place-items:center;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);transform:rotate(-6deg)}
.saucer span{font-family:var(--display);text-transform:uppercase;font-size:.78rem;color:var(--rim)}
/* platos-foto decorativos (cut-out) */
.platedeco{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 12px 16px rgba(44,39,28,.28));transition:transform .5s var(--ease)}
.plate-card:hover .platedeco{transform:rotate(0deg) scale(1.04)}

.note{text-align:center;margin-top:0;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:0}
.btnp{font-family:var(--display);text-transform:uppercase;font-size:1rem;padding:.7em 1.5em;border-radius:999px;border:3px solid var(--rojo);background:var(--rojo);color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.btnp:hover{transform:translateY(-2px)}
.btnp.ghost{background:var(--plate);color:var(--verde-k);border-color:var(--verde-k)}
