/* Handroll Maracaibo — tablilla de menú: fondo nori, paneles crema, franjas rojas de sección */
:root{
  --nori:#16251D;
  --nori-2:#1E3127;
  --crema:#EFE7DB;
  --crema-2:#DCD0BE;
  --rojo:#D6392A;
  --salmon:#C96A4E;
  --lima:#B7CB5B;
  --tinta:#121A15;
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --texto:"Work Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--nori);color:var(--crema);
  font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--crema)}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px}

.envoltura{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}

/* ---- barra superior ---- */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(18,26,21,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(239,231,219,.14)}
.barra .envoltura{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.marca img{height:30px;width:auto}
.menu-nav{display:flex;gap:18px;flex-wrap:wrap;flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.menu-nav a{text-decoration:none;color:var(--crema-2);padding-block:4px;border-bottom:2px solid transparent}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--crema);border-bottom-color:var(--rojo)}

/* ---- botones ---- */
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.boton{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:12px 24px;border-radius:999px;border:2px solid var(--rojo);background:var(--rojo);color:#fff;min-height:44px}
.boton:hover{background:#b92f21;border-color:#b92f21}
.boton.hueco{background:transparent;color:var(--crema);border-color:var(--crema-2)}
.boton.hueco:hover{background:var(--crema);color:var(--tinta);border-color:var(--crema)}

/* ---- portada ---- */
.portada{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;border-bottom:6px solid var(--rojo)}
.portada-texto{padding:56px 20px 56px;display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:620px;margin-left:auto;width:100%}
.portada-foto{position:relative;align-self:stretch;background:var(--nori-2);min-height:420px}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;position:absolute;inset:0}
.kanji{font-size:15px;letter-spacing:.3em;color:var(--rojo);margin:0}
h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,58px);line-height:1.02;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--rojo)}
.entradilla{font-size:19px;color:var(--crema-2);margin:0;max-width:52ch}
.datos-rapidos{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--crema-2);list-style:none;margin:0;padding:0}
.datos-rapidos li{display:flex;align-items:center;gap:7px}
.punto{width:7px;height:7px;border-radius:50%;background:var(--lima);flex:0 0 auto}
@media (max-width:860px){
  .portada{grid-template-columns:1fr}
  .portada-foto{min-height:260px;order:-1}
  .portada-texto{padding-block:36px;margin-inline:auto}
}

/* ---- secciones ---- */
section{padding-block:56px}

.franja{display:inline-flex;align-items:center;gap:10px;background:var(--rojo);color:#fff;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:18px}
h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin:0 0 14px;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:20px;margin:0 0 6px;line-height:1.2}
p{margin:0 0 16px;max-width:68ch}
.destacado{color:var(--lima);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.destacado:hover{color:var(--crema)}

/* ---- bloques de categoría ---- */
.categoria{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;margin-bottom:44px}
.categoria:last-child{margin-bottom:0}
.categoria img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
@media (max-width:760px){.categoria{grid-template-columns:1fr;gap:16px}.categoria img{max-width:320px}}

/* ---- lista de precios con guías ---- */
.carta{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.plato{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.plato-nombre{font-weight:700;font-size:17px;color:var(--crema);min-width:0}
.guia{border-bottom:2px dotted rgba(239,231,219,.35);align-self:end;margin-bottom:5px;min-width:16px}
.precio{font-family:var(--display);font-size:16px;color:var(--lima);font-variant-numeric:tabular-nums;white-space:nowrap}
.plato-desc{grid-column:1/-1;font-size:15px;color:var(--crema-2);margin:0;max-width:60ch}
.con-guia{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline}

/* ---- rejilla de platos con foto ---- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin:0;padding:0;list-style:none}
.ficha{display:flex;flex-direction:column;gap:10px;min-width:0}
.ficha img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.ficha-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ficha h3{margin:0;font-size:17px}
.ficha p{font-size:14.5px;color:var(--crema-2);margin:0}

/* ---- pasos ---- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0;counter-reset:paso}
.paso{border-top:3px solid var(--rojo);padding-top:14px}
.paso span{font-family:var(--display);font-size:13px;color:var(--rojo);letter-spacing:.1em}
@media (max-width:700px){.pasos{grid-template-columns:1fr}}

/* ---- panel crema ---- */
.panel{background:var(--crema);color:var(--tinta)}
.panel h2,.panel h3{color:var(--tinta)}
.panel p{color:#3a4440}
.panel .boton.hueco{color:var(--tinta);border-color:var(--tinta)}
.panel .boton.hueco:hover{background:var(--tinta);color:var(--crema)}
.panel .precio{color:#9A4F1E}
.panel .plato-nombre{color:var(--tinta)}
.panel .plato-desc,.panel .ficha p{color:#3a4440}
.panel .guia{border-bottom-color:rgba(18,26,21,.32)}
.panel .ficha img,.panel .categoria img{border-color:rgba(18,26,21,.18)}
.panel .destacado{color:#1a5c3a}
.panel .destacado:hover{color:var(--tinta)}

/* ---- ubicación ---- */
.ubicacion{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.nap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.nap li{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:16px;border-bottom:1px solid rgba(18,26,21,.14);padding-bottom:12px}
.nap dt,.nap .et{font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b7a73;padding-top:4px}
.nap a{color:#1a3d2c;font-weight:600}
@media (max-width:760px){.ubicacion{grid-template-columns:1fr}.nap li{grid-template-columns:1fr;gap:2px}}

/* ---- preguntas ---- */
.preguntas{display:flex;flex-direction:column;gap:0;margin:0;max-width:78ch}
.preguntas details{border-bottom:1px solid rgba(239,231,219,.16);padding-block:14px}
.preguntas summary{font-family:var(--display);font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:32px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";color:var(--rojo);font-size:22px;line-height:1}
.preguntas details[open] summary::after{content:"–"}
.preguntas p{margin:10px 0 2px;color:var(--crema-2)}

/* ---- cierre ---- */
.cierre{background:var(--rojo);color:#fff;text-align:left}
.cierre h2{color:#fff}
.cierre p{color:#ffe9e5}
.cierre .boton{background:var(--tinta);border-color:var(--tinta)}
.cierre .boton:hover{background:#000;border-color:#000}
.cierre .boton.hueco{background:transparent;border-color:#fff;color:#fff}
.cierre .boton.hueco:hover{background:#fff;color:var(--rojo)}

/* ---- pie ---- */
footer{background:var(--tinta);padding-block:40px;font-size:15px;color:var(--crema-2)}
footer .columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
footer h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--crema);margin-bottom:10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer a{color:var(--crema-2)}
.legal{margin-top:28px;padding-top:16px;border-top:1px solid rgba(239,231,219,.14);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.aviso{font-size:14px;color:var(--crema-2);border-left:3px solid var(--salmon);padding-left:14px;margin-top:8px}

/* ---- móvil: cabecera compacta ---- */
@media (max-width:760px){
  .barra{position:static}
  .barra .envoltura{gap:12px;padding-block:10px}
  .marca img{height:26px}
  .menu-nav{gap:12px;font-size:13px;order:3;width:100%}
  .acciones{flex:1 1 auto}
  .barra .boton{padding:10px 14px;font-size:13px}
}

/* ---- separador entre secciones ---- */
main > section:not(.panel):not(.cierre) + section:not(.panel):not(.cierre){position:relative}
main > section:not(.panel):not(.cierre) + section:not(.panel):not(.cierre)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(620px,86%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,231,219,.28) 18%,rgba(239,231,219,.28) 82%,transparent);
}
main > section:not(.panel):not(.cierre) + section:not(.panel):not(.cierre)::after{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--rojo);
  box-shadow:0 0 0 5px var(--nori);
}

/* ---- encabezado compacto de paginas internas ---- */
.portada.compacta{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center;
  width:100%;max-width:1120px;margin:0 auto;padding:46px 20px 50px;border-bottom:0}
.portada.compacta .portada-texto{padding:0;max-width:none;margin:0;gap:18px}
.portada.compacta .portada-foto{position:static;min-height:0;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--nori-2)}
.portada.compacta .portada-foto img{position:static;width:100%;height:100%;object-fit:cover}
.portada.compacta + section{border-top:1px solid rgba(239,231,219,.14)}
@media (max-width:820px){
  .portada.compacta{grid-template-columns:1fr;gap:24px;padding-block:32px}
  .portada.compacta .portada-foto{order:-1;max-width:360px}
}

/* ---- mapa de Google ---- */
.mapa{margin-top:16px;border-radius:16px;overflow:hidden;line-height:0;background:rgba(0,0,0,.08)}
.mapa iframe{width:100%;height:280px;border:0;display:block}
@media (max-width:620px){.mapa iframe{height:230px}}

/* ---- estilos de carta.html ---- */
.indice{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 8px;padding:0}
.indice a{display:inline-block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(239,231,219,.3);padding:8px 12px;color:var(--crema-2);min-height:36px}
.indice a:hover{border-color:var(--rojo);color:var(--crema)}
.bloque-carta{padding-block:38px;border-top:1px solid rgba(239,231,219,.12)}
.bloque-carta:first-of-type{border-top:0}
.nota-seccion{font-size:15px;color:var(--crema-2);margin:-6px 0 20px;max-width:64ch}
