/* ── Casa Mía · el sitio ─────────────────────────────────────────────────
   Identidad del manual: marino #0D2A3E, azul #014770, hueso #FFFDF9, azul al
   12 % para fondos suaves; líneas finas y contenedores editoriales; serif
   Baskerville (origen del logo) para títulos, Calibri para texto.
   Motion: el JS añade [data-reveal].es-visible y mueve las fotos; sin JS o con
   reduced-motion, todo se ve igual de completo, solo quieto. */
.sitio{
  --n:#0D2A3E; --a:#014770; --h:#FFFDF9; --p:#FFFFFF;
  --t:#22313D; --t2:#5A6B78; --l:rgba(13,42,62,.18); --tint:rgba(1,71,112,.12);
  --serif:"Baskerville","Baskerville Old Face","Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:Calibri,Carlito,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--h); color:var(--t); font-family:var(--sans);
}
.sitio main{ padding:0 }
.sitio .site-header{ background:linear-gradient(rgba(13,42,62,.55), rgba(13,42,62,0)) }
.sitio .site-header.scrolled{ background:rgba(255,253,249,.92); backdrop-filter:blur(10px) }

/* tipografía */
.cm-eyebrow{ font:700 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--a); margin:0 0 14px }
.cm-t{ font:400 clamp(2rem,4.2vw,3.4rem)/1.08 var(--serif); color:var(--n); margin:0 0 18px; text-wrap:balance; letter-spacing:-.01em }
.cm-p{ font-size:1.05rem; line-height:1.65; color:var(--t); max-width:58ch; margin:0 }
.cm-enlace{ display:inline-flex; align-items:center; min-height:44px; color:var(--a); font-weight:700; border-bottom:1px solid var(--a) }
.cm-enlace:hover{ color:var(--n); border-color:var(--n) }
.cm-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px;
  border-radius:4px; background:var(--a); color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.01em;
  border:1px solid var(--a); transition:background .2s,color .2s;
}
.cm-btn:hover{ background:var(--n); border-color:var(--n) }
.cm-btn-b{ background:transparent; color:var(--a) }
.cm-btn-b:hover{ background:var(--tint); color:var(--n) }
.cm-botones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px }

/* capítulos */
.cm-cap{ padding:clamp(72px,10vw,140px) 24px; max-width:1240px; margin:0 auto }

/* I · el mar */
.cm-hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--n); color:#fff }
.cm-hero-foto{ position:absolute; inset:-8% 0; will-change:transform }
.cm-hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 60%;
  filter:saturate(1.05) contrast(1.02); transform:scale(1.06); animation:cm-respira 18s ease-in-out infinite alternate }
@keyframes cm-respira{ to{ transform:scale(1.0) } }
.cm-mar{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:soft-light; opacity:.9; pointer-events:none }
.cm-hero-velo{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(13,42,62,.35) 0%, rgba(13,42,62,.05) 40%, rgba(13,42,62,.72) 100%) }
.cm-hero-texto{ position:absolute; left:0; right:0; bottom:clamp(64px,12vh,120px); padding:0 24px; text-align:center }
.cm-hero-logo{ width:min(300px,62vw); height:auto; margin:0 auto 26px; filter:drop-shadow(0 2px 14px rgba(0,0,0,.35)) }
.cm-hero-t{ font:400 clamp(1.7rem,4.4vw,3.6rem)/1.1 var(--serif); margin:0 0 12px; text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35) }
.cm-hero-s{ font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; opacity:.9; margin:0 }
.cm-baja{ position:absolute; left:50%; bottom:22px; width:44px; height:44px; margin-left:-22px; display:flex; align-items:flex-start; justify-content:center }
.cm-baja span{ width:1px; height:28px; background:#fff; opacity:.7; animation:cm-baja 2.2s ease-in-out infinite }
@keyframes cm-baja{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* II · frente al Malecón (foto ancha con texto encima, fijada al hacer scroll) */
.cm-malecon{ max-width:none; padding:0; position:relative; background:var(--n); color:#fff }
.cm-malecon-foto{ height:100svh; min-height:520px; overflow:hidden }
.cm-malecon-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 40%;
  filter:sepia(.12) saturate(1.12) contrast(1.04) brightness(.96) }
.cm-malecon-texto{ position:absolute; left:0; right:0; bottom:0; padding:clamp(40px,8vw,96px) 24px;
  background:linear-gradient(180deg, rgba(13,42,62,0), rgba(13,42,62,.78) 45%, rgba(13,42,62,.92)) }
.cm-malecon-texto > *{ max-width:1240px; margin-left:auto; margin-right:auto }
.cm-malecon .cm-eyebrow{ color:#BFD3E0 }
.cm-malecon .cm-t{ color:#fff }
.cm-malecon .cm-p{ color:#E6EEF3 }

/* III · la casa */
.cm-casa-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,72px); align-items:center }
.cm-casa-foto{ margin:0; border:1px solid var(--l); padding:10px; background:var(--p); overflow:hidden }
.cm-casa-foto img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; will-change:transform }
.cm-linea{ font:400 clamp(1.25rem,2vw,1.6rem)/1.35 var(--serif); color:var(--n); margin:0 0 22px;
  padding-left:18px; border-left:1px solid var(--a) }
@media (max-width:820px){ .cm-casa-grid{ grid-template-columns:1fr } }

/* IV · la mesa */
.cm-mesa{ max-width:none; padding-left:0; padding-right:0; background:var(--p); border-top:1px solid var(--l); border-bottom:1px solid var(--l) }
.cm-mesa-cab,.cm-mesa-pie{ max-width:1240px; margin:0 auto; padding:0 24px }
.cm-mesa-pie{ margin-top:28px }
.cm-carril{ display:flex; gap:18px; overflow-x:auto; padding:34px max(24px, calc((100vw - 1240px)/2 + 24px)) 12px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--l) transparent }
.cm-carril:focus-visible{ outline:2px solid var(--a); outline-offset:-2px }
.cm-plato{ flex:0 0 min(300px, 78vw); scroll-snap-align:start; border:1px solid var(--l); background:var(--h) }
.cm-plato-foto{ aspect-ratio:1/1; overflow:hidden; background:#EEE9DF }
.cm-plato-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.cm-plato:hover .cm-plato-foto img{ transform:scale(1.04) }
.cm-plato-pie{ padding:14px 16px 16px; display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.cm-plato h3{ font:400 1.05rem/1.25 var(--serif); color:var(--n); margin:0 }
.cm-plato-precio{ margin:0; font-weight:700; color:var(--a); white-space:nowrap; font-variant-numeric:tabular-nums }
.cm-plato-precio small{ display:block; font-weight:400; color:var(--t2); font-size:.74rem; text-align:right }

/* V · las dos puertas */
.cm-puertas{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.cm-puerta{ display:block; padding:clamp(28px,4vw,48px); border:1px solid var(--l); background:var(--p);
  color:inherit; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s }
.cm-puerta:hover{ transform:translateY(-3px); border-color:var(--a) }
.cm-puerta .cm-btn{ margin-top:24px }
.cm-puerta-b{ background:var(--n); color:#fff }
.cm-puerta-b .cm-t{ color:#fff } .cm-puerta-b .cm-p{ color:#DCE6ED } .cm-puerta-b .cm-eyebrow{ color:#BFD3E0 }
.cm-puerta-b .cm-btn-b{ color:#fff; border-color:#fff }
.cm-puerta-b .cm-btn-b:hover{ background:#fff; color:var(--n) }
.cm-puerta-pausa{ grid-column:1 / -1; text-align:center; background:var(--tint); border-color:transparent }
.cm-puerta-pausa .cm-p{ margin:0 auto }
.cm-puerta-pausa .cm-botones{ justify-content:center }
@media (max-width:720px){ .cm-puertas{ grid-template-columns:1fr } }

/* VI · dónde */
.cm-donde{ border-top:1px solid var(--l) }
.cm-donde-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start }
.cm-dl{ margin:22px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:.98rem }
.cm-dl dt{ font-weight:700; color:var(--t2); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding-top:3px }
.cm-dl dd{ margin:0 } .cm-dl a{ display:inline-flex; align-items:center; min-height:44px; margin:-10px 0; color:var(--a); border-bottom:1px solid var(--tint) }
.cm-mapa{ border:1px solid var(--l); padding:8px; background:var(--p); min-height:300px }
.cm-mapa iframe{ width:100%; height:100%; min-height:300px; border:0; display:block; filter:grayscale(.25) }
@media (max-width:820px){ .cm-donde-grid{ grid-template-columns:1fr } }

/* reveals — visibles por defecto; el JS los baja a 0 solo si va a animarlos */
[data-reveal]{ opacity:1; transform:none }
.cm-anima [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.cm-anima [data-reveal].es-visible{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .cm-hero-foto img{ animation:none; transform:none }
  .cm-baja span{ animation:none }
  .cm-plato-foto img,.cm-puerta{ transition:none }
  .cm-anima [data-reveal]{ opacity:1; transform:none; transition:none }
}

/* la cabecera heredada traía el ámbar viejo en «Pedir»: en el sitio manda el azul */
.sitio .site-header .btn-primary{ background:#014770; border-color:#014770; color:#fff }
.sitio .site-header .btn-primary:hover{ background:#0D2A3E; border-color:#0D2A3E }
.sitio .site-header.scrolled .site-nav > a:hover{ color:#014770 }

/* los platos llegan de uno en uno (revelado CSS, sin depender de GSAP) */
.cm-anima .cm-plato:nth-child(2){ transition-delay:.07s } .cm-anima .cm-plato:nth-child(3){ transition-delay:.14s }
.cm-anima .cm-plato:nth-child(4){ transition-delay:.21s } .cm-anima .cm-plato:nth-child(n+5){ transition-delay:.28s }

/* el pie heredado (negro, ámbar, «Paladar», lema de reserva) pasa a la identidad */
.sitio .site-footer{ background:#0D2A3E; color:#DCE6ED; border-top:1px solid rgba(255,255,255,.08) }
.sitio .site-footer h4{ color:#BFD3E0; letter-spacing:.14em }
.sitio .site-footer a{ color:#fff }
.sitio .site-footer .brand-sub,.sitio .site-footer .footer-tagline{ display:none }
.sitio .site-footer .footer-bottom{ border-color:rgba(255,255,255,.1); color:#9FB3C2 }