/* =====================================================================
   TEMA · La Brasa del Puerto
   Fuego y hierro del Mercado del Puerto: carbón, brasa y chapa.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  /* Colores */
  --fondo: #15100D;        /* carbón */
  --fondo-2: #211A16;      /* hierro */
  --fondo-3: #2D241F;      /* hierro caliente (hover) */
  --linea: #362B25;        /* rejilla */
  --linea-2: #4A3C34;
  --texto: #E9DFD4;        /* ceniza */
  --texto-2: #B7A698;
  --texto-3: #8A796C;
  --titulo: #FBF6F0;       /* sal */
  --acento: #F2542D;       /* brasa */
  --acento-2: #FF7545;
  --acento-suave: rgba(242, 84, 45, .22);
  --sobre-acento: #1A0E08;
  --brasa-clara: #FFB347;
  --ok: #3E9B6A;
  --alerta: #F0B43C;
  --peligro: #FF6B5B;
  --peligro-suave: rgba(255, 107, 91, .12);
  --whatsapp: #0E7468;
  --whatsapp-2: #0B5E54;

  /* Tipografías */
  --f-titulo: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 800;
  --t-mayus: uppercase;
  --t-espaciado: -.005em;
  --t-alto: .96;
  --marca-tam: 26px;

  /* Botones y formas */
  --f-boton: var(--f-titulo);
  --boton-peso: 800;
  --boton-tam: 18px;
  --boton-mayus: uppercase;
  --boton-espaciado: .06em;
  --radio-boton: 6px;
  --radio-chip: 99px;
  --radio: 12px;
  --radio-hoja: 16px;

  /* Plano del salón */
  --plano-afuera: #1B1512;
  --plano-piso: #241C18;
  --plano-pared: #6B5A4E;
  --plano-mueble: #33291F;
  --mesa-libre: #4A3C33;
  --mesa-borde: #7A6555;
  --mesa-silla: #5E4D42;
  --mesa-hover: #5C4A3E;
  --mesa-fantasma: #5A4A40;
}

/* La rejilla de la parrilla: barras verticales de hierro */
.rejilla { background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .028) 46px 50px); }

/* Tira de brasa que late debajo de la cabecera */
.franja { height: 5px; background: linear-gradient(90deg, var(--acento), var(--brasa-clara), var(--acento)); background-size: 200% 100%; animation: fuego 3.2s linear infinite; }

/* =====================================================================
   PORTADA (solo index.html)
   ===================================================================== */
.portada { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); }
.portada__texto { padding: clamp(32px, 5vw, 72px) var(--margen); display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.portada__titulo { font-size: clamp(66px, 9vw, 128px); font-weight: 900; line-height: 1.02; }
.portada__titulo em { font-style: normal; color: var(--acento); display: block; }
.portada__bajada { max-width: 34ch; font-size: 19px; }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 14px 28px; color: var(--texto-2); font-size: 14px; border-top: 1px solid var(--linea); padding-top: 18px; }
.portada__datos b { display: block; color: var(--titulo); font-size: 15px; font-weight: 700; }
.portada__foto { position: relative; overflow: hidden; background: #000; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); animation: acercar 18s var(--ease) both; }
@keyframes acercar { from { transform: scale(1.12); } }
.portada__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fondo) 0%, transparent 24%); pointer-events: none; }
.portada__foto .chapa { border-color: transparent; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .55); position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; max-width: 400px; animation: chapa-entra .8s .5s var(--ease) both; }
@keyframes chapa-entra { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { height: 58vh; min-height: 340px; max-height: 480px; order: -1; }
  .portada__foto::after { background: linear-gradient(0deg, var(--fondo) 0%, transparent 38%); }
  .portada__foto .chapa { left: 16px; right: 16px; bottom: 14px; }
  .portada__texto { padding-top: 20px; }
  .portada__bajada { font-size: 17px; }
}

/* Las secciones de la portada (carta, plano, mapa) están en comun/css/portada.css */

/* =====================================================================
   PANEL DEL DUEÑO: claro para trabajar de día, con la barra de carbón
   ===================================================================== */
body.panel {
  --fondo: #EFEEEC;
  --fondo-2: #FFFFFF;
  --fondo-3: #E8E5E1;
  --linea: #E2D8CF;
  --linea-2: #CDBFB3;
  --texto: #3A2C24;
  --texto-2: #6E5D52;
  --texto-3: #8F7E72;
  --titulo: #1A120E;
  --acento: #C93D18;
  --acento-2: #B3340F;
  --acento-suave: rgba(226, 74, 34, .12);
  --acento-texto: #B83A15;
  --sobre-acento: #FFFFFF;
  --ok: #2E8A5A; --ok-suave: #E1F2E8; --ok-texto: #1D6B43;
  --alerta: #E9A21F; --alerta-suave: #FCF0D6; --alerta-texto: #8A5A00;
  --peligro: #C2362B; --peligro-suave: #FBE4E1;
  --panel-lateral: #15100D;
  --panel-lateral-texto: #B7A698;
  --panel-lateral-titulo: #FBF6F0;
  --cabecera-fondo: #EFEEEC;
  --plano-afuera: #E8E0D8;
  --plano-piso: #FAF6F2;
  --plano-pared: #8C7A6D;
  --plano-mueble: #E5DAD0;
  --mesa-libre: #FFFFFF;
  --mesa-borde: #B9A898;
  --mesa-silla: #D6C8BC;
  --mesa-hover: #FFF1EB;
  --mesa-fantasma: #C9B9AC;
  --foco: #E24A22;
}
body.panel .marca em { color: var(--acento-2); }
/* La vista previa de la promo se ve igual que en la web (oscura) */
body.panel .chapa {
  --fondo-2: #211A16; --titulo: #FBF6F0; --texto: #E9DFD4; --texto-2: #B7A698; --linea: #362B25; --acento: #F2542D; --sobre-acento: #1A0E08;
  background: #211A16; border-color: #362B25;
}

/* La promo es una chapa atornillada: cuatro tornillos planos en las esquinas */
.chapa {
  background-image:
    radial-gradient(circle at 9px 9px, #5A4A40 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) 9px, #5A4A40 2.2px, transparent 2.8px),
    radial-gradient(circle at 9px calc(100% - 9px), #5A4A40 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #5A4A40 2.2px, transparent 2.8px);
}
body.panel .chapa { background-color: #211A16; }