/* =====================================================================
   TEMA · Tono
   La carta de colores del esmalte: la cabecera y la portada SON esmalte,
   con su veta de brillo. El color (--laca) lo elige la visitante en la
   portada; por defecto es cereza.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  --laca: #B3123A;                 /* el esmalte elegido */
  --sobre: #FFFFFF;                /* letras encima del esmalte */
  --sobre-2: rgba(255, 255, 255, .84);
  /* el esmalte oscurecido, para textos y precios sobre blanco */
  --laca-texto: color-mix(in srgb, var(--laca) 58%, #1C1016);

  /* Colores */
  --fondo: #FFFFFF;
  --fondo-2: #F7F4F6;
  --fondo-3: #EEE9EC;
  --linea: #E9E3E6;
  --linea-2: #D5CCD1;
  --texto: #3A2A32;
  --texto-2: #65505B;
  --texto-3: #7A6671;
  --titulo: #1C1016;
  --acento: var(--laca);
  --acento-2: color-mix(in srgb, var(--laca) 82%, #000);
  --acento-suave: color-mix(in srgb, var(--laca) 12%, transparent);
  --sobre-acento: var(--sobre);
  --brasa-clara: color-mix(in srgb, var(--laca) 45%, #fff);
  --ok: #0F7A5A; --ok-suave: #DFF1EA; --ok-texto: #0A5C43;
  --alerta: #E09A1C; --alerta-suave: #FCEFD2; --alerta-texto: #7A5000;
  --peligro: #C0283A;
  --peligro-suave: #FBE3E6;
  --whatsapp: #0E7468;
  --whatsapp-2: #0B5E54;
  --demo-fondo: #1C1016;
  --demo-texto: #FFFFFF;
  --ticket-fondo: #1C1016;
  --ticket-texto: #FFFFFF;
  --foco: var(--laca-texto);

  /* Tipografías: Italiana, fina de boutique, y Manrope para leer */
  --f-titulo: "Italiana", "Didot", Georgia, serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 400;
  --t-mayus: none;
  --t-espaciado: -.005em;
  --t-alto: .98;
  --marca-tam: 36px;
  --marca-espaciado: .14em;

  /* Botones y formas */
  --f-boton: var(--f-texto);
  --boton-peso: 800;
  --boton-tam: 15px;
  --boton-espaciado: .02em;
  --radio-boton: 999px;
  --radio-chip: 999px;
  --radio: 20px;
  --radio-hoja: 24px;
  --radio-entrada: 14px;
}

/* La cabecera es esmalte en todas las páginas */
.cabecera { --cabecera-fondo: var(--laca); color: var(--sobre); border-bottom: 0; transition: background-color .7s var(--ease); }
.cabecera .marca { color: var(--sobre); text-transform: uppercase; }
.cabecera nav a:not(.btn) { color: var(--sobre-2); }
.cabecera nav a:not(.btn):hover, .cabecera nav a[aria-current="page"] { color: var(--sobre); background: color-mix(in srgb, var(--sobre) 12%, transparent); }
.cabecera .btn { background: var(--sobre); color: var(--laca); }
.cabecera .btn:hover { background: var(--sobre); filter: brightness(.95); }
.franja { display: none; }
@media (max-width: 760px) { .marca { flex-direction: row; } }

/* Botones del color del esmalte; la letra encima se adapta al tono */
.btn { transition: transform .25s var(--ease-rebote), background-color .7s var(--ease), color .7s var(--ease); }
.btn:not(.btn--linea):not(.btn--suave):not(.btn--peligro):not(.btn--whatsapp):hover { background: var(--acento-2); }
.btn--linea { color: var(--titulo); }
.btn--whatsapp { color: #fff; }

/* Precios y textos de acento: el esmalte oscurecido, para leerse sobre blanco */
.plato__precio, .trat__pie b, .opcion b, .marca-plato--casa, .libres-hoy .ficha:hover { color: var(--laca-texto); }
.plato__precio, .trat__pie b { font-family: var(--f-texto); font-weight: 800; font-size: 22px; }
.plato--grande .plato__precio { font-size: 28px; }
.marca-plato--casa { background: var(--acento-suave); }
.categorias button { font-family: var(--f-texto); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.plato__nombre { font-size: 28px; }

/* La promo: una etiqueta de esmalte */
.chapa { background: var(--fondo-2); border: 0; }
.chapa__titulo { font-size: 26px; }
.chapa__precio { color: var(--laca-texto); font-family: var(--f-texto); font-weight: 800; font-size: 22px; }

/* =====================================================================
   PORTADA (solo index.html): toda en esmalte
   ===================================================================== */
.portada { position: relative; overflow: hidden; background: var(--laca); color: var(--sobre); transition: background-color .7s var(--ease), color .7s var(--ease); }
/* la veta de brillo del esmalte */
.portada::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 42% 58% at 72% 78%, rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
.dueno::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 48%, rgba(255, 255, 255, .14) 62%, transparent 76%); pointer-events: none; }
.portada__cuerpo { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 16px var(--lado) 24px; }
.portada__titulo { font-size: clamp(72px, 10vw, 150px); line-height: .92; color: var(--sobre); }
.portada__bajada { font-size: 19px; max-width: 34ch; color: var(--sobre-2); margin: 22px 0 30px; }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada .btn { background: var(--sobre); color: var(--laca); }
.portada .btn--linea { background: transparent; color: var(--sobre); box-shadow: inset 0 0 0 1.5px var(--sobre); }
.portada .btn--linea:hover { background: color-mix(in srgb, var(--sobre) 12%, transparent); }
.portada__datos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; font-size: 14px; color: var(--sobre-2); }
.portada__datos b { display: block; color: var(--sobre); }
.una { justify-self: center; width: min(100%, 400px); aspect-ratio: 3 / 4; border-radius: 200px 200px 26px 26px; overflow: hidden; box-shadow: 0 0 0 10px color-mix(in srgb, var(--sobre) 16%, transparent), 0 30px 60px -24px rgba(0, 0, 0, .45); }
.una img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada .chapa { position: absolute; right: var(--lado); bottom: 28px; max-width: 320px; }
/* la promo en la portada: etiqueta del mismo esmalte, con borde y brillo */
.portada .chapa { background: color-mix(in srgb, var(--laca) 86%, #000); color: var(--sobre); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sobre) 50%, transparent), 0 18px 32px -14px rgba(0, 0, 0, .5); overflow: hidden; }
.portada .chapa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .16) 55%, transparent 70%); pointer-events: none; }
.portada .chapa .chapa__titulo, .portada .chapa__precio { color: var(--sobre); }
.portada .chapa__detalle { color: var(--sobre-2); }
.portada .chapa__sello { background: var(--sobre); color: color-mix(in srgb, var(--laca) 86%, #000); }

/* La carta de colores: muestras con forma de uña */
.carta-tonos { position: relative; padding: 0 var(--lado) 30px; }
.carta-tonos p { font-size: 14px; color: var(--sobre-2); margin-bottom: 6px; }
.carta-tonos p b { color: var(--sobre); }
.muestras { display: flex; gap: 12px; overflow-x: auto; padding: 16px 4px 10px; scrollbar-width: none; }
.muestras::-webkit-scrollbar { display: none; }
.muestra { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--sobre); font: 600 13px/1 var(--f-texto); min-width: 64px; }
.muestra i { display: block; width: 54px; height: 76px; border-radius: 27px 27px 10px 10px; background: var(--c); position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 8px 16px -8px rgba(0, 0, 0, .4); transition: transform .4s var(--ease-rebote); }
.muestra i::after { content: ""; position: absolute; left: 18%; top: 10%; width: 18%; height: 46%; border-radius: 10px; background: rgba(255, 255, 255, .35); }
.muestra:hover i { transform: translateY(-6px); }
.muestra[aria-pressed="true"] i { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 0 3px var(--sobre), 0 14px 22px -10px rgba(0, 0, 0, .5); }
@media (max-width: 860px) {
  .portada__cuerpo { grid-template-columns: 1fr; }
  .una { order: -1; width: min(66%, 280px); }
  .portada .chapa { position: relative; right: auto; bottom: auto; margin: 20px var(--margen) 0; max-width: none; }
  .portada__bajada { font-size: 17px; }
}

/* Secciones de la portada */
.trat { background: var(--fondo-2); }
.trat__txt strong { font-size: 30px; }
.dueno { position: relative; overflow: hidden; background: var(--laca); color: var(--sobre); transition: background-color .7s var(--ease); }
.dueno > * { position: relative; z-index: 1; }
.dueno h2 { color: var(--sobre); }
.dueno .btn { background: var(--sobre); color: var(--laca); }
.ticket .btn { background: var(--laca); color: var(--sobre); }

/* =====================================================================
   PANEL DE LA DUEÑA: siempre cereza, claro para trabajar
   ===================================================================== */
body.panel {
  --laca: #B3123A;
  --sobre: #FFFFFF;
  --fondo: #F3F1F2;
  --fondo-2: #FFFFFF;
  --panel-lateral: #1C1016;
  --panel-lateral-texto: #C9B9C1;
  --panel-lateral-titulo: #FFFFFF;
  --acento-texto: #8E0E2E;
  --cabecera-fondo: #F3F1F2;
}
body.panel .marca { text-transform: uppercase; }

/* Los números (pasos, días, horas) van con la letra de texto: la Italiana es solo para títulos */
.paso__num, .dia b, .grupo-hora__hora, .agenda__horas span { font-family: var(--f-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.dia b { font-size: 24px; }
.grupo-hora__hora { font-size: 18px; }

/* Profesionales: cada una es una uña pintada de su color */
.persona .avatar, .pro .avatar:not(.avatar--todas), .agenda__pro .avatar { border-radius: 999px 999px 10px 10px; position: relative; overflow: hidden; }
.persona .avatar { width: 44px; height: 60px; }
.pro .avatar:not(.avatar--todas) { width: 32px; height: 42px; }
.agenda__pro .avatar { width: 28px; height: 38px; }
.persona .avatar::after, .pro .avatar:not(.avatar--todas)::after, .agenda__pro .avatar::after { content: ""; position: absolute; left: 20%; top: 9%; width: 16%; height: 42%; border-radius: 9px; background: rgba(255, 255, 255, .35); }