/* =====================================================================
   TEMA · Baldosa
   Las baldosas hidráulicas de las casas viejas de Montevideo:
   azul cobalto, ocre y cal. Cambiando estas variables cambia el look
   de TODAS las páginas.
   ===================================================================== */

:root {
  --cobalto: #1C3A9E;
  --ocre: #E0A12E;
  --verde: #2E7A68;
  --teja: #BE4630;
  /* la baldosa dibujada, para guardas y detalles */
  --baldosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231C3A9E'/%3E%3Cg fill='%2315307F'%3E%3Ccircle r='22'/%3E%3Ccircle cx='80' r='22'/%3E%3Ccircle cy='80' r='22'/%3E%3Ccircle cx='80' cy='80' r='22'/%3E%3C/g%3E%3Cg fill='%23E0A12E'%3E%3Cellipse cx='40' cy='24' rx='7' ry='14'/%3E%3Cellipse cx='40' cy='56' rx='7' ry='14'/%3E%3Cellipse cx='24' cy='40' rx='14' ry='7'/%3E%3Cellipse cx='56' cy='40' rx='14' ry='7'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='6' fill='%23F2F2EC'/%3E%3Cg fill='%23F2F2EC'%3E%3Ccircle r='8'/%3E%3Ccircle cx='80' r='8'/%3E%3Ccircle cy='80' r='8'/%3E%3Ccircle cx='80' cy='80' r='8'/%3E%3C/g%3E%3C/svg%3E");

  /* Colores */
  --fondo: #F2F2EC;        /* cal */
  --fondo-2: #FFFFFF;
  --fondo-3: #E6E7E0;
  --linea: #DCDDD4;
  --linea-2: #C2C4B9;
  --texto: #2B2E45;
  --texto-2: #535873;
  --texto-3: #5F647B;
  --titulo: #14172B;       /* tinta */
  --acento: var(--cobalto);
  --acento-2: #15307F;
  --acento-suave: rgba(28, 58, 158, .13);
  --sobre-acento: #FFFFFF;
  --brasa-clara: var(--ocre);
  --ok: #2E7A68; --ok-suave: #E0F0EA; --ok-texto: #1F5E4F;
  --alerta: #E0A12E; --alerta-suave: #FBEFD5; --alerta-texto: #7A5306;
  --peligro: #BE4630;
  --peligro-suave: #F8E3DE;
  --whatsapp: #0E7468;
  --whatsapp-2: #0B5E54;
  --demo-fondo: #14172B;
  --demo-texto: #F2F2EC;

  /* Tipografías */
  --f-titulo: "Bricolage Grotesque", "Arial Rounded MT Bold", sans-serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 800;
  --t-mayus: none;
  --t-espaciado: -.03em;
  --t-alto: .95;
  --marca-tam: 27px;
  --marca-espaciado: -.02em;

  /* Botones y formas */
  --boton-peso: 700;
  --boton-tam: 16px;
  --radio-boton: 999px;
  --radio-chip: 999px;
  --radio: 18px;
  --radio-hoja: 24px;
  --radio-entrada: 12px;

  /* Plano: el piso es de baldosas */
  --plano-afuera: #E6E7E0;
  --plano-piso: #EEF0F6;
  --baldosa-a: #ECEFF8;
  --baldosa-b: #D0D8F0;
  --baldosa-c: #F1D9A2;
  --plano-pared: #3A3F5C;
  --plano-mueble: #DCDDD4;
  --plano-patio: #E1EEE8;
  --mesa-libre: #FFFFFF;
  --mesa-borde: #7F86A3;
  --mesa-silla: #C6CADB;
  --mesa-hover: #E4EAFB;
  --mesa-fantasma: #9FA4BA;
}

/* La marca lleva una baldosita adelante */
.marca::before { content: ""; width: 30px; height: 30px; border-radius: 7px; background: var(--baldosa) center / 30px; flex: none; }
@media (max-width: 760px) { .marca { flex-direction: row; align-items: center; gap: 8px; } }

/* Guarda de baldosas debajo de la cabecera */
.franja { height: 14px; background: var(--baldosa) 0 0 / 28px 28px; }
.cabecera { border-bottom: 0; }

/* La promo del día: cartelito ocre con sello cobalto */
.chapa { background: var(--ocre); border: 0; color: #3B2A06; }
.chapa .chapa__titulo { color: var(--titulo); }
.chapa__detalle { color: #5A3F0B; }
.chapa__precio { color: var(--titulo); }
.chapa__sello { background: var(--cobalto); color: #fff; }

/* =====================================================================
   PORTADA (solo index.html)
   ===================================================================== */
.portada { display: grid; grid-template-columns: 1fr 1fr; padding: 18px var(--margen) var(--margen); min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); }
.portada__panel {
  position: relative; overflow: hidden; background: var(--cobalto); color: #E3E8F8;
  border-radius: 28px 0 0 28px; padding: clamp(28px, 4vw, 60px) clamp(24px, 4vw, 60px) 120px;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
/* guarda de baldosas al pie del panel, entra deslizándose */
.portada__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--baldosa) 0 0 / 80px 80px; animation: guarda 1.2s var(--ease) both; }
@keyframes guarda { from { background-position: -160px 0; opacity: 0; } }
.portada__titulo { font-size: clamp(54px, 7vw, 108px); color: #fff; }
.portada__titulo span { color: var(--ocre); }
.portada__bajada { font-size: 19px; max-width: 38ch; color: #DCE2F7; }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada__panel .btn { background: #F2F2EC; color: var(--cobalto); }
.portada__panel .btn:hover { background: #fff; }
.portada__panel .btn--ocre { background: var(--ocre); color: var(--titulo); }
.portada__panel .btn--ocre:hover { background: #EDB24A; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; color: #C5CDEE; }
.portada__datos b { display: block; color: #fff; font-size: 15px; font-weight: 600; }
.portada__derecha { display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: 0 28px 28px 0; overflow: hidden; background: #fff; }
.portada__derecha img { width: 100%; height: 100%; object-fit: cover; min-height: 0; animation: acercar 16s var(--ease) both; }
@keyframes acercar { from { transform: scale(1.1); } }
.portada__derecha .chapa { border-radius: 0; box-shadow: none; padding: 18px 22px; grid-template-columns: auto 1fr auto; }
.portada__derecha .chapa__sello { writing-mode: horizontal-tb; transform: none; grid-row: span 2; min-height: 0; width: 52px; height: 52px; padding: 0; border-radius: 12px; background: var(--baldosa) center / 52px; font-size: 0; }
.portada__derecha .chapa__precio { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 28px; }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; padding: 8px 12px 12px; min-height: 0; }
  .portada__panel { border-radius: 24px 24px 0 0; padding: 30px 22px 104px; }
  .portada__derecha { border-radius: 0 0 24px 24px; grid-template-rows: 260px auto; }
  .portada__bajada { font-size: 17px; }
}

/* Destacados como baldosas: cuadrados con junta */
.adelanto { background: var(--fondo); }
.cortes { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.corte { background: var(--fondo-2); border-radius: var(--radio); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.corte:hover { background: var(--fondo-2); transform: translateY(-6px); box-shadow: 0 20px 34px -16px rgba(20, 23, 43, .3); }
.corte__foto { aspect-ratio: 1; }
.corte__precio b { color: var(--cobalto); }
.gancho__plano { background: var(--fondo-2); }
.gancho li::before { color: var(--cobalto); }
.dueno { background: var(--cobalto); position: relative; overflow: hidden; padding-left: clamp(96px, 12vw, 150px); }
.dueno::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(64px, 8vw, 110px); background: var(--baldosa) 0 0 / 55px 55px; }
.dueno .btn { background: var(--ocre); color: var(--titulo); }
.dueno .btn:hover { background: #EDB24A; }

/* Menú: los platos son baldosas blancas */
.plato { border-color: transparent; }
.plato:hover { border-color: var(--linea-2); }
.plato__precio { color: var(--cobalto); }
.marca-plato--casa { background: #FBEFD5; color: #7A5306; }
.categorias button { font-family: var(--f-texto); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.ticket { --ticket-fondo: var(--cobalto); --ticket-texto: #fff; }
.ticket .btn { background: var(--ocre); color: var(--titulo); }
.ticket .btn:hover { background: #EDB24A; }

/* =====================================================================
   PANEL DEL DUEÑO
   ===================================================================== */
body.panel {
  --panel-lateral: #14172B;
  --panel-lateral-texto: #B9BED3;
  --panel-lateral-titulo: #FFFFFF;
  --acento-texto: var(--cobalto);
  --cabecera-fondo: var(--fondo);
}
body.panel .lateral .marca::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.portada__derecha .chapa__titulo, .portada__derecha .chapa__detalle { grid-column: 2; }

/* En el plano: la cocina abierta en cobalto liso (el degradé quedaba barroso) */
.salon__fuego { fill: var(--cobalto); animation: none; }
.salon__rotulo--fuego { fill: #F2F2EC; }
/* Sobre el piso de baldosas, las mesas reservadas llevan un mantel claro para leerse */
.mesa--ocupada .mesa__tabla { fill: rgba(255, 255, 255, .42); stroke: #6E7594; }
.mesa--ocupada .mesa__silla { fill: rgba(255, 255, 255, .35); stroke: #6E7594; }
.mesa--ocupada .mesa__num { fill: #5B617D; }