/* =============================================================================
 * LANDSHARK BAR & GRILL · DOLPHIN MALL — SISTEMA DE MARCA  ·  v3 (2026-07-30)
 * -----------------------------------------------------------------------------
 * FUENTE DE VERDAD: la CARTA OFICIAL impresa de la sede — PDF
 * "menu 260422_Miami-Dolphin Mall" (cód. MIA-DM-0126, InDesign, 2 págs, 792×1224 pt).
 * El cliente pidió expresamente que la carta digital y la landing compartan ESA
 * línea gráfica. Todo lo de acá está medido de ese archivo, no interpretado.
 *
 * HISTORIAL (para que nadie repita el camino):
 *   v1 — arena/atardecer deducido "de oído". Genérico. Rechazado por Joan.
 *   v2 — amarillo gritón con los colores del LOGO (#004A3D/#FFF43A/#FC4209).
 *        Más de marca, pero **no se parecía a la carta oficial** → el cliente lo
 *        marcó al verlo. El logo y la carta NO usan la misma paleta.
 *   v3 — esta: la de la carta oficial. Es CLARA, AIREADA Y DE ACUARELA, no gritona.
 *
 * MEDIDO DEL PDF:
 *   · Títulos de sección  #004E62  (teal azulado, no el verde del logo)
 *   · Nombres de ítem     #C5380E  (rojo óxido)
 *   · Fondo, de arriba a abajo: #F0B556 → #E5E3C7 → #DAECED → #FFFFFF → #BDD6D8
 *   · Arte lineal (palmeras + tablas de surf + orilla) extraído del propio PDF a
 *     240 dpi y pasado a tinta sobre transparente → `assets/brand/art-*.png`.
 *
 * REGLA: acá NO hay sombras duras, bordes gruesos ni bloques de color plano. La
 * carta oficial es liviana y respira. Si algo se ve "de cartel", está mal.
 * ========================================================================== */

:root{
  /* --- los dos colores de texto de la carta oficial --- */
  --ls-teal:#004E62;          /* títulos de sección, reglas, arte lineal */
  --ls-teal-2:#0A6B80;
  --ls-teal-3:#4E93A3;
  --ls-red:#C5380E;           /* nombres de plato, acentos, CTA */
  --ls-red-2:#A32B06;

  /* --- v4 · EL AZUL DEL LETRERO REAL (2026-08-03) -------------------------
     Pedido del cliente: "¿mantenemos este tono de azul o usamos el azul más
     claro de la identidad?". Tenía razón — y el CEREBRO §7 ya lo decía:
     "la sede es cyan y amarillo; cuando exista foto del local, la paleta se
     MIDE de ahí". Se midió del letrero de la fachada: #35BAD8 (H 191°).
     El teal de la carta impresa es #004E62 (H 192°): MISMO TONO, mucho más
     oscuro. Por eso esto no es cambiar de color, es abrir el mismo color.

     Reparto, decidido por contraste medido (WCAG AA), no a ojo:
       · el TEXTO se queda en --ls-teal   → 9.27:1 sobre papel. No se toca.
       · las BANDAS pasan a --ls-slab     → blanco encima 6.13:1 ✅ (antes 9.27)
       · el cyan real es DECORATIVO       → 2.29:1 sobre blanco: jamás texto.
       · para acento legible en papel     → --ls-cyan-ink 4.24:1
     ⚠️ Al aclarar la banda, --pg-gold cae a 3.34:1 y DEJA DE PASAR en las
     etiquetas de 10.5px → sobre banda se usa --pg-gold-lt (4.53:1).        */
  --ls-slab:#0A6B80;          /* fondo de bandas — el "azul más claro" */
  --ls-cyan:#35BAD8;          /* MEDIDO del letrero. Solo relleno decorativo */
  --ls-cyan-ink:#17869F;      /* acento cyan que sí se puede leer en papel */
  --ls-foam:#DCF0F5;          /* superficie clara y aireada */
  --pg-gold-lt:#FFD98A;       /* el oro, aclarado, para texto chico sobre banda */

  /* --- el degradado del papel --- */
  --pg-gold:#F0B556;
  --pg-sand:#E5E3C7;
  --pg-sky:#DAECED;
  --pg-white:#FFFFFF;
  --pg-foot:#BDD6D8;

  /* --- superficies y texto --- */
  --cream:#FFFDF7;
  --ink:#2B3A3A;              /* descripciones */
  --ink-dim:#5F7275;
  --line:rgba(0,78,98,.22);
  --line-soft:rgba(0,78,98,.12);

  /* --- del logo oficial (SOLO para el logo y detalles de marca, no para la página) --- */
  --logo-green:#004A3D; --logo-yellow:#FFF43A; --logo-red:#FC4209;

  --r:14px; --r-sm:9px; --r-lg:20px;
  --maxw:1000px; --maxw-wide:1240px;
  --shadow:0 10px 30px -18px rgba(0,78,98,.45);

  /* --- tipografía ---
     La carta usa un slab condensado vintage para los títulos, una script de pincel
     para los subtítulos ("Draft", "Bottles", "Blender") y una humanista para el texto.
     Bevan y Yellowtail son las equivalencias libres más cercanas. */
  --font-d:"Bevan",Georgia,serif;
  /* --font-s: pendiente — la real es Marcelle Script. Ninguna cursiva libre dio el tono. */
  --font-b:"Instrument Sans",system-ui,sans-serif;
  --font-m:"DM Mono",ui-monospace,monospace;
}

/* ============================ RESET ============================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
img,video{max-width:100%;display:block}
::selection{background:var(--pg-gold);color:var(--ls-teal)}
:focus-visible{outline:3px solid var(--ls-red);outline-offset:3px;border-radius:4px}

/* ============================ EL PAPEL ============================
   El degradado de la carta oficial, de una vez, para toda la página. */
.paper{background:
  linear-gradient(180deg,
    var(--pg-gold) 0%,
    #EFC77E 3%,
    var(--pg-sand) 8%,
    var(--pg-sky) 17%,
    var(--pg-white) 34%,
    var(--pg-white) 76%,
    #EFF6F5 90%,
    var(--pg-foot) 100%)}

/* cabecera con el arte lineal del PDF a los costados */
.header-art{position:relative;overflow:hidden}
.header-art::before,.header-art::after{content:"";position:absolute;top:0;
  width:min(31%,320px);aspect-ratio:72/70;background-size:contain;background-repeat:no-repeat;
  pointer-events:none;opacity:.92}
.header-art::before{left:0;background-image:url("assets/brand/art-palmeras-izq.png");background-position:left top}
.header-art::after{right:0;background-image:url("assets/brand/art-palmeras-der.png");background-position:right top}
@media(max-width:700px){.header-art::before,.header-art::after{width:44%;opacity:.7}}

/* la orilla, para cerrar bloques */
/* Orilla dibujada en SVG. La del PDF venía siempre pegada a texto (nota de alérgenos,
   precios) y se colaba en los pies — por eso se rehizo limpia. */
.shore{height:clamp(34px,5vw,58px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23004E62' stroke-linecap='round'%3E%3Cpath d='M0 34c120 0 180-16 300-16s180 16 300 16 180-16 300-16 180 16 300 16 180-16 240-16' stroke-width='3.5' opacity='.55'/%3E%3Cpath d='M0 56c130 0 190-14 320-14s190 14 320 14 190-14 320-14 190 14 320 14' stroke-width='2.6' opacity='.38'/%3E%3Cpath d='M0 74c110 0 165-10 275-10s165 10 275 10 165-10 275-10 165 10 275 10 165-10 220-10' stroke-width='2' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}

/* ============================ TIPOGRAFÍA ============================
   Los títulos de la carta llevan un halo claro apenas perceptible. */
.title{font-family:var(--font-d);color:var(--ls-teal);line-height:1.06;letter-spacing:.005em;
  text-shadow:0 2px 0 rgba(255,255,255,.85)}

/* regla de sección: línea con textura, como el trazo de pincel del PDF */
.rule{height:2px;border:0;background:var(--ls-teal);opacity:.5;
  mask-image:repeating-linear-gradient(90deg,#000 0 22px,rgba(0,0,0,.35) 22px 26px);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 22px,rgba(0,0,0,.35) 22px 26px)}

/* ============================ PRIMITIVAS ============================
   Botones livianos: la carta no tiene "carteles". Relleno plano, esquina muy
   redonda, sin sombra dura. */
.btn{font-family:var(--font-b);font-weight:700;font-size:16px;border:2px solid transparent;
  border-radius:40px;padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .12s ease;
  text-decoration:none;line-height:1.15}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ls-red);color:#fff;border-color:var(--ls-red)}
.btn-primary:hover{background:var(--ls-red-2);border-color:var(--ls-red-2)}
.btn-teal{background:var(--ls-teal);color:#fff;border-color:var(--ls-teal)}
.btn-teal:hover{background:var(--ls-teal-2);border-color:var(--ls-teal-2)}
.btn-ghost{background:rgba(255,255,255,.72);color:var(--ls-teal);border-color:var(--ls-teal)}
.btn-ghost:hover{background:#fff}
.on-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.14)}

.eyebrow{font-family:var(--font-m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ls-teal-3);display:inline-flex;align-items:center;gap:10px;font-weight:500}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ls-red);flex:0 0 auto}

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