/* TEMA DE LA TERRACITA DE FLORES — solo :root y singularidades de esta app */

:root {
  /* Fondo de las páginas interiores (base + logo flotante) */
  --fondo-interior: url(/images/fondo.webp);
  --logo-fondo: url(/images/logo_fondo.webp);

  /* App de CRISTAL (liquid glass): sin degradado de marca en ninguna superficie */
  --color-degradado2: none;

  --blanco: #ffffff;
  --negro: #111111;
  --fondo-negro: #000;

  /* Carta: nombres en blanco (tema oscuro), descripciones y precios en beige */
  --color-nombre-plato: var(--blanco);
  --color-acento-carta: var(--color-titulo);
  --color-footer-acento: var(--color-titulo);
  --fondo-app: #000;

  /* TOKENS SEMÁNTICOS DE TEMA — La Terracita es tema OSCURO */
  --color-texto-tema: var(--blanco);
  --color-icono-nav: var(--blanco);
  --halo-texto: 0 0 0.25rem var(--negro), 0 0 0.625rem var(--negro),
    0 0 1.25rem var(--negro);

  /* Beige de marca. Sobre el fondo negro mide 14,3:1, muy por encima del 4,5:1 */
  --color-primario: #ead1bb;
  --color-secundario: #ead1bb;
  --color-titulo: #ead1bb;

  --color-form-borde: rgba(255, 255, 255, 0.4);
  --color-form-borde-focus: rgba(255, 255, 255, 0.3);

  /* Formulario de reservas sobre el fondo de la app, con velo oscuro al 55% */
  --form-fondo: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url(/images/fondo.webp) center / cover no-repeat;
  --form-texto: var(--blanco);
  --form-input-fondo: rgba(255, 255, 255, 0.08);
  --form-placeholder: rgba(234, 209, 187, 0.4);
  --form-warning: color-mix(in srgb, var(--color-primario) 55%, #fff);
  --form-datepicker-filtro: invert(1);

  /* Liquid Glass */
  --lg-bg-color: rgba(0, 0, 0, 0.4);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-blur: 0.25rem;

  /* Sombras */
  --sombra: 0.1875rem 0.1875rem 0.25rem #fff,
    -0.1875rem -0.1875rem 0.25rem var(--negro);

  /* El hero del index medía 9rem de alto en esta app, no las 10 de flota */
  --hero-alto-max: 9rem;

  /* Botones */
  --border-radius: 1.25rem;

  /* Tipografía */
  --tipo-principal: "Roboto", sans-serif;

  /* Botón Reservar en marrón oscuro, texto blanco y borde beige de la casa */
  --reservar-color-1: #5a3420;
  --reservar-color-2: #2a160b;
  --reservar-brillo: #7a4a2c;
  --reservar-texto: #ffffff;
  --reservar-borde: #ead1bb;

  /* Singularidades que la base pide por token para no perderlas al sincronizar */
  --movimiento-animacion: slide-in-elliptic-top-bck 1.7s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  --movimiento-bottom: 12dvh;
  --luz-destello: #ffffff;
}

/* Entrada elíptica del logo flotante del index, propia de La Terracita */
@-webkit-keyframes slide-in-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5);
    transform: translateY(-600px) rotateX(30deg) scale(6.5);
    -webkit-transform-origin: 50% 200%;
    transform-origin: 50% 200%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
    transform-origin: 50% -500px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-bck {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(6.5);
    transform: translateY(-600px) rotateX(30deg) scale(6.5);
    -webkit-transform-origin: 50% 200%;
    transform-origin: 50% 200%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
    transform-origin: 50% -500px;
    opacity: 1;
  }
}

/* Mandala giratorio del index: decoración exclusiva de esta app */
.mandala {
  position: fixed;
  top: 50%;
  left: 10%;
  width: 70dvw;
  max-width: 50rem;
  height: auto;
  margin: auto;
  object-fit: cover;
  opacity: 0.2;
  transform-origin: 50% 50%;
  animation: 40s rotate linear infinite;
  /* Decorativo: por detrás del contenido (-3, nunca -1 = nivel de .wrapper) */
  z-index: -3;
  pointer-events: none;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* Nota de familia como mini banner (mismo estilo que el botón MÁS INFORMACIÓN), a todo el ancho */
.textos__header-footer-familia {
  width: 100%;
  box-sizing: border-box;
  margin: 0.75rem 0;
  padding: 0.3rem 1rem;
  text-align: center;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
  color: var(--color-texto-tema);
  background-image: var(--color-degradado2);
}

/* Rótulo CARTA DE NOCHE: mismo aspecto que la barra de familia, centrado */
.rotulo-carta {
  position: relative;
  width: 100%;
  max-width: var(--ancho-contenido, 50rem);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 0 1.5rem;
  padding: 0.4rem;
  border-radius: var(--border-radius);
  box-shadow:
    var(--sombra),
    inset 1px 1px 0 var(--lg-highlight, rgba(255, 255, 255, 0.75)),
    inset 0 0 0.3125rem var(--lg-highlight, rgba(255, 255, 255, 0.75));
  background-color: var(--lg-bg-color, rgba(0, 0, 0, 0.4));
  -webkit-backdrop-filter: blur(var(--lg-blur, 0.25rem)) saturate(120%) brightness(var(--lg-brightness, 1.15));
  backdrop-filter: blur(var(--lg-blur, 0.25rem)) saturate(120%) brightness(var(--lg-brightness, 1.15));
}
.rotulo-carta .hero-titulo {
  max-width: none;
  margin: 0.2rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 2.25rem;
  text-align: center;
  color: var(--color-titulo, var(--color-primario));
  text-shadow: 0 0 0.25rem var(--negro), 0 0 0.625rem var(--negro), 0 0 1.25rem var(--negro);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
/* Título de la CARTA DE DÍA (su única familia) centrado como el de noche */
#comidas .platos__familia-h2 {
  text-align: center;
}