/* ===========================================================
   La Totuma Corrida — rebuilt site
   Palette derived from the logo: charcoal black, totuma red,
   totumo gold. Fusion Japonesa–Caribe, La Candelaria, Bogotá.
   =========================================================== */

:root{
  --ink:#151311;          /* near-black charcoal          */
  --ink-2:#211d1a;        /* raised charcoal              */
  --paper:#f7f2e9;        /* warm bone / totumo cream     */
  --red:#d81f26;          /* totuma red                   */
  --red-deep:#a5141a;
  --gold:#c8a369;         /* totumo gold                  */
  --gold-soft:#e0c79a;
  --muted:#b9b0a4;
  --line:rgba(200,163,105,.28);
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --r:14px;

  --display:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--paper);
  background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(21,19,17,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:52px;height:52px;border-radius:50%}
.brand b{font-family:var(--display);font-size:1.35rem;letter-spacing:.06em;
  color:var(--paper);line-height:1}
.brand span{display:block;font-size:.62rem;letter-spacing:.34em;
  color:var(--gold);text-transform:uppercase}
.menu{display:flex;gap:.35rem;align-items:center}
.menu a{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55rem .8rem;border-radius:8px;color:var(--muted);
  transition:color .2s,background .2s}
.menu a:hover,.menu a.active{color:var(--paper)}
.menu a.active{color:var(--gold)}
.menu .book{background:var(--red);color:#fff;border-radius:999px;
  padding:.55rem 1.15rem;letter-spacing:.14em}
.menu .book:hover{background:var(--red-deep);color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:26px;height:2px;background:var(--paper);
  margin:5px 0;transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;
  text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
   radial-gradient(120% 80% at 50% -10%,rgba(216,31,38,.32),transparent 60%),
   var(--ink)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(60% 60% at 50% 45%,transparent,rgba(0,0,0,.55));
  mix-blend-mode:multiply}
.hero .totuma-mark{width:min(340px,60vw);opacity:.14;position:absolute;
  z-index:-1;filter:grayscale(.2);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{padding:6rem 0}
.eyebrow{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem}
.hero h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.7rem,7vw,5.4rem);line-height:.98;margin:0 0 1rem;
  color:var(--paper)}
.hero h1 em{font-style:italic;color:var(--red)}
.hero p{max-width:44ch;margin:0 auto 2rem;color:var(--muted);
  font-size:clamp(1rem,2.4vw,1.18rem)}
.cta-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.9rem 1.7rem;border-radius:999px;
  transition:transform .15s,background .2s,color .2s;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);color:#fff}
.btn-ghost{border-color:var(--gold);color:var(--gold-soft)}
.btn-ghost:hover{background:var(--gold);color:var(--ink)}

/* ---------- section scaffolding ---------- */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-head{max-width:60ch}
.sec-head .kick{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--red);font-weight:700}
.sec-head h2{font-family:var(--serif);font-weight:600;
  font-size:clamp(1.9rem,4.5vw,3rem);margin:.5rem 0 .6rem;color:var(--paper)}
.sec-head p{color:var(--muted);margin:0}
.center{margin-inline:auto;text-align:center}

/* ---------- intro / fusion ---------- */
.fusion{background:
   linear-gradient(180deg,var(--ink),var(--ink-2))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,5vw,4rem);
  align-items:center}
.split .media{position:relative}
.split .media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--shadow);aspect-ratio:4/3}
.split .media .tag{position:absolute;left:-14px;bottom:-14px;background:var(--red);
  color:#fff;font-family:var(--display);letter-spacing:.05em;font-size:1.1rem;
  padding:.5rem 1rem;border-radius:10px;box-shadow:var(--shadow)}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,3vw,1.7rem);
  line-height:1.4;color:var(--gold-soft);margin:0 0 1rem}
.split p{color:var(--muted)}

/* ---------- menu cards ---------- */
.menus{background:var(--ink)}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,3vw,1.6rem);margin-top:2.4rem}
.mcard{position:relative;border-radius:var(--r);overflow:hidden;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;color:#fff;isolation:isolate;border:1px solid var(--line)}
.mcard::before{content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;transition:transform .5s}
.mcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.82))}
.mcard:hover::before{transform:scale(1.06)}
.mcard.teppan::before{background-image:
  linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)),
  url("https://images.unsplash.com/photo-1602273660127-a0000560a4c1?auto=format&fit=crop&w=1200&q=70")}
.mcard.sushi::before{background-image:url("../img/sushi-real.jpg")}
.mcard .k{font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold)}
.mcard h3{font-family:var(--serif);font-size:2rem;margin:.3rem 0 .4rem}
.mcard p{color:#e7e2d8;font-size:.95rem;margin:0 0 1rem;max-width:34ch}
.mcard .go{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);border-bottom:1px solid var(--gold);padding-bottom:2px;
  align-self:flex-start}
.mcard:hover .go{color:#fff}

/* ---------- gallery ---------- */
.gallery{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.grid-photos{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;gap:.75rem;margin-top:2.2rem}
.grid-photos figure{margin:0;overflow:hidden;border-radius:12px;position:relative}
.grid-photos img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.grid-photos figure:hover img{transform:scale(1.07)}
.grid-photos .wide{grid-column:span 2}
.grid-photos .tall{grid-row:span 2}

/* ---------- reviews ---------- */
.reviews{background:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  margin-top:2.4rem}
.quote{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;position:relative}
.quote .stars{color:var(--gold);letter-spacing:.15em;font-size:.9rem}
.quote blockquote{margin:.7rem 0 1rem;font-family:var(--serif);
  font-size:1.08rem;line-height:1.45;color:var(--paper)}
.quote cite{font-style:normal;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}

/* ---------- reserve strip ---------- */
.reserve{background:
   linear-gradient(0deg,rgba(21,19,17,.9),rgba(21,19,17,.9)),
   url("../img/sushi-real.jpg") center/cover fixed;
  text-align:center}
.reserve h2{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);
  margin:0 0 .6rem}
.reserve p{color:var(--muted);max-width:40ch;margin:0 auto 1.8rem}

/* ---------- info / footer ---------- */
.site-footer{background:#0f0d0b;border-top:1px solid var(--line);
  padding:3.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.foot-grid h4{font-family:var(--display);letter-spacing:.1em;font-size:1.15rem;
  color:var(--gold);margin:0 0 .8rem}
.foot-grid p,.foot-grid a{color:var(--muted);font-size:.92rem;margin:.25rem 0}
.foot-grid a:hover{color:var(--paper)}
.foot-brand img{width:64px;height:64px;border-radius:50%;margin-bottom:.8rem}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--gold-soft);
  transition:.2s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.copy{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-size:.8rem;color:var(--muted)}

/* ---------- generic page hero (subpages) ---------- */
.page-hero{padding:clamp(4rem,10vw,7rem) 0 clamp(2rem,5vw,3rem);
  text-align:center;position:relative;
  background:radial-gradient(120% 80% at 50% -20%,rgba(216,31,38,.28),transparent 60%),var(--ink)}
.page-hero .eyebrow{margin-bottom:.8rem}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4rem);
  margin:0;color:var(--paper)}
.page-hero p{color:var(--muted);max-width:52ch;margin:1rem auto 0}

/* ---------- menu list (teppan/sushi pages) ---------- */
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3rem}
.menu-block h3{font-family:var(--serif);font-size:1.6rem;color:var(--gold);
  margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.dish{display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;padding:.7rem 0;border-bottom:1px dashed rgba(200,163,105,.14)}
.dish .d-name{font-weight:600;color:var(--paper)}
.dish .d-desc{display:block;font-size:.85rem;color:var(--muted);font-weight:400;
  margin-top:.15rem}
.dish .d-price{font-family:var(--display);font-size:1.25rem;color:var(--red);
  white-space:nowrap}

/* ---------- reservation form ---------- */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,3.5rem);
  align-items:start}
.res-info dt{font-family:var(--display);letter-spacing:.08em;color:var(--gold);
  font-size:1.05rem;margin-top:1.3rem}
.res-info dd{margin:.2rem 0 0;color:var(--muted)}
.res-info dd a:hover{color:var(--paper)}
form.book-form{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.8rem}
.book-form label{display:block;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);margin:1rem 0 .35rem}
.book-form input,.book-form select,.book-form textarea{width:100%;
  background:var(--ink);border:1px solid var(--line);border-radius:10px;
  color:var(--paper);padding:.75rem .9rem;font:inherit;font-size:.95rem}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.book-form .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.book-form button{margin-top:1.6rem;width:100%}
.form-note{font-size:.8rem;color:var(--muted);margin-top:1rem;text-align:center}
.hours-line{display:flex;justify-content:space-between;padding:.4rem 0;
  border-bottom:1px dashed rgba(200,163,105,.14);color:var(--muted);font-size:.92rem}
.hours-line b{color:var(--paper);font-weight:600}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .totuma-mark{animation:none}
  .reserve{background-attachment:scroll}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split,.res-grid{grid-template-columns:1fr}
  .split .media{order:-1}
  .menu-list{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-photos{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
}
@media (max-width:680px){
  .menu{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    background:var(--ink-2);flex-direction:column;align-items:stretch;
    padding:5rem 1.4rem 2rem;gap:.2rem;transform:translateX(100%);
    transition:transform .32s ease;box-shadow:var(--shadow);z-index:60}
  .menu.open{transform:none}
  .menu a{padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .menu .book{margin-top:1rem;text-align:center}
  .burger{display:block;z-index:70}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .card-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .book-form .two{grid-template-columns:1fr}
  .copy{flex-direction:column;text-align:center}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;
    opacity:0;pointer-events:none;transition:.3s}
  .nav-scrim.show{opacity:1;pointer-events:auto}
}