/* ============================================================
   CARTA DINÁMICA - LO DE FACU SAVIO (14/09/2026)
   Diseño propio de Savio (distinto de Bajo, confirmado contra las
   12 capturas de referencia de Fede):
     - Tipografía Times New Roman (Regular/Bold/Italic/Bold Italic)
       en vez de Uni Sans.
     - Fondo BLANCO liso, sin marca de agua diagonal (por ahora -
       Fede pidió dejarlo así, ver carta_savio.js).
     - Sin guardas ilustradas entre módulos: cada módulo es una
       sección independiente separada por espacio en blanco. El
       logo + línea roja va UNA sola vez arriba de toda la página
       (#encabezadoContainer), no repetido por módulo.
     - Título imagen (script font) para la mayoría de los módulos,
       salvo Parrilla (texto sobre marco rojo, ver .parrilla-marco)
       y los subtítulos de texto plano dentro de un bloque (ver
       .carta-subtitulo: "Tacos" y "Entradas/Principales/Al Ahumador").
     - Cajas grises de "nota" (antes imágenes Detalle*.webp) como
       texto plano centrado en itálica.
     - Módulo Bebidas+Cerveza+Cafetería con fondo rosa
       (Fondo_Rosa_Bebidas.webp) cubriendo TODO el módulo.
   ============================================================ */

@font-face {
  font-family: 'Times Savio';
  src: url('fonts/times.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Times Savio';
  src: url('fonts/timesbd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Times Savio';
  src: url('fonts/timesi.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Times Savio';
  src: url('fonts/timesbi.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root{
  --savio-rojo: #B8222C;
  --savio-texto: #1E1E1E;
  --savio-texto-dim: #5A5A5A;
  --savio-gris-nota: #F2F1EF;
  --savio-rosa: #F7DCE3;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body{
  overflow-x: hidden; /* red de seguridad: nada debe generar scroll horizontal */
  max-width: 100%;
}

body{
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  background: #FFFFFF;
  color: var(--savio-texto);
}

/* ============================================================
   ENCABEZADO: logo + línea roja, una sola vez arriba de la página
   ============================================================ */
.carta-encabezado{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px;
  text-align: center;
}
/* Línea roja POR DETRÁS del logo, centrada verticalmente en el medio
   del logo y de punta a punta del ancho del encabezado - no es una
   línea aparte debajo, es la misma línea que "atraviesa" el logo por
   detrás (14/09/2026, a pedido de Fede). */
.carta-encabezado::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--savio-rojo);
  transform: translateY(-50%);
  z-index: 0;
}
/* ANCHO fijo (no alto) + height:auto - así el logo respeta ese ancho
   siempre y nunca se deforma ni se agranda de más (con height fijo +
   max-width, como estaba antes, el navegador podía terminar estirando
   la imagen - reportado por Fede el 14/09/2026). +10% (200->242px) a
   pedido de Fede. z-index por encima de la línea para que quede
   montado arriba de ella. */
.encabezado-logo{
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 242px;
  max-width: 58%;
  height: auto;
}

/* ============================================================
   CARTA
   ============================================================ */
.carta-wrap{
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
}

.carta-modulo{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px 26px;
}

.carta-contenido-inner{
  position: relative;
}

/* Fondo rosa del módulo Bebidas+Cerveza+Cafetería - cubre TODO el
   módulo (no solo el bloque Bebidas), confirmado con Fede. Color
   sólido nomás - Fondo_Rosa_Bebidas.webp quedó SIN USAR: es casi
   totalmente transparente (~10% opacidad) con sus propios bordes
   redondeados, así que superpuesto generaba una costura de dos tonos
   de rosa en las esquinas (reportado por Fede, 14/09/2026). */
.carta-modulo-rosa{
  background-color: var(--savio-rosa);
  border-radius: 18px;
}

/* Separación entre bloques de un mismo módulo (ej. Quesadillas /
   Wraps / Tacos, o Bebidas / Cerveza / Cafetería) */
.carta-bloque + .carta-bloque{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Títulos-imagen (script font) - normalizados por ALTURA fija, igual
   criterio que Bajo, así todos pesan visualmente igual. */
.carta-titulo{
  display: block;
  height: 64px;
  width: auto;
  max-width: 90%;
  margin: 6px auto 16px;
}
.carta-titulo.doble{
  height: 46px;
  margin: 4px auto 0;
}
.carta-titulo.doble + .carta-titulo.doble{
  height: 64px;
  margin-top: 2px;
  margin-bottom: 16px;
}

/* Bebidas/Cerveza/Cafetería a la MISMA altura de caja (64px) se veían
   de distinto tamaño de letra entre sí: cada .webp tiene una cantidad
   distinta de espacio en blanco alrededor de la palabra (colas del
   script en "Cerveza"/"Cafetería" más largas que en "Bebidas"), así
   que normalizar por altura total de imagen achica más la letra en
   esas dos. Corregido a mano por imagen para que las 3 letras queden
   del mismo tamaño real (14/09/2026, a pedido de Fede). */
.carta-modulo-rosa .carta-titulo[src*="Cerveza"]{ height: 88px; margin-bottom: 6px; }
.carta-modulo-rosa .carta-titulo[src*="Cafe"]{ height: 78px; margin-bottom: 10px; }

/* Subtítulo en texto plano dentro de un bloque (ej. "Tacos",
   "Entradas"/"Principales"/"Al Ahumador" en Parrilla) - Times Bold
   Italic, un escalón más chico que un título-imagen. */
.carta-subtitulo{
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--savio-rojo);
  margin: 4px 0 12px;
}

/* Caja gris de "nota" (reemplaza Detalle*.webp) - texto itálico
   centrado, cantos redondeados. */
.carta-nota{
  background: var(--savio-gris-nota);
  border-radius: 14px;
  padding: 12px 20px;
  margin-top: 16px;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  color: var(--savio-texto-dim);
}

/* Nota chica scopeada a UN bloque (ej. la aclaración "(x3)" pegada
   solo al bloque de Tacos) - más chica y sin caja, pegada arriba de
   los items de ese bloque nomás. */
.carta-nota-bloque{
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--savio-texto-dim);
  margin: 6px 0 12px;
}

.carta-item{
  margin-bottom: 10px;
}

.carta-item .item-nombre{
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--savio-texto);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  margin-bottom: 2px;
}

.carta-item .badge-icono{
  width: 0.9em;
  height: 0.9em;
  flex: none;
  object-fit: contain;
}

.carta-item .item-fila{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
}
.carta-item .item-fila + .item-fila{
  margin-top: 4px;
}

.carta-item .item-detalle{
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  color: var(--savio-texto-dim);
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

.item-fila .item-nombre-inline{
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--savio-texto);
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}
.item-fila .item-nombre-inline .badge-icono{
  vertical-align: middle;
  margin: 0 2px 4px 4px;
}

/* Puntos suspensivos - posicionados por JS (ajustarPuntosDeCarta),
   mismo mecanismo que Bajo. */
.item-puntos-abs{
  display: none;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  font-size: 17px;
  color: #C9C4C1;
  letter-spacing: 2px;
}
.item-puntos-abs::after{
  content: "........................................................................................................................";
}

.carta-item .item-precio{
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--savio-texto);
  white-space: nowrap;
  flex: none;
  min-width: 90px;
  text-align: right;
}

/* ============================================================
   PARRILLA - caso especial: sin título-imagen. Marco rojo redondeado
   con el texto "De la Parrilla" flanqueado por líneas rojas, en
   tipografía de palo (sans-serif) en vez de Times, para que se
   destaque como "cartel" dentro de la carta.
   ============================================================ */
.carta-modulo-parrilla{
  padding: 0 24px 26px;
}
.parrilla-marco{
  border: 3px solid var(--savio-rojo);
  border-radius: 22px;
  /* padding-top con lugar para el título, que queda MONTADO sobre el
     borde superior (no debajo de él) - agrandado junto con
     .parrilla-titulo-img (14/09/2026) */
  padding: 78px 22px 8px;
  margin-top: 66px;
  position: relative;
}
/* El título-imagen (DelaParri.webp) va centrado y superpuesto EXACTO
   sobre la línea del borde superior del marco - el fondo blanco atrás
   de la imagen "corta" esa línea en el medio, dejando ver el tramo de
   borde rojo a cada lado como si fueran las líneas que flanquean el
   título (igual que en el diseño de referencia - son el mismo borde
   del marco, no líneas aparte). */
.parrilla-titulo-texto{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  padding: 0 16px;
  max-width: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Al doble del tamaño de un título normal (128px, el doble de los
   64px de ".carta-titulo") - a pedido de Fede 14/09/2026. */
.parrilla-titulo-img{
  display: block;
  height: 128px;
  width: auto;
  max-width: 100%;
}

.carta-bloque-parrilla + .carta-bloque-parrilla{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(184,34,44,0.18);
}

/* ============================================================
   CONTACTO: reutiliza el mismo diseño de cajas de Bajo (mismo
   carta_savio.js: cargarContacto), tipografía Times en vez de Uni
   Sans para que combine con el resto de Savio.
   ============================================================ */
.contacto-dinamico{
  padding: 10px 16px 28px;
  max-width: 900px;
  margin: 0 auto;
}

.contacto-titulo{
  display: block;
  height: 58px;
  width: auto;
  max-width: 94%;
  margin: 4px auto 16px;
}

.contacto-caja{
  position: relative;
  border-style: solid;
  border-repeat: stretch;
  margin: 0 auto 22px;
  padding: 20px 18px;
}
.contacto-caja:last-child{ margin-bottom: 0; }

.contacto-caja-grande{
  border-width: 14px;
  border-image-source: url("imgs Contacto/contorno_grande.webp");
  border-image-slice: 60 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
}
.contacto-caja-mediano{
  border-width: 13px;
  border-image-source: url("imgs Contacto/contorno_mediano.webp");
  border-image-slice: 60 fill;
  border-image-width: 13px;
  border-image-repeat: stretch;
}
.contacto-caja-chico{
  border-width: 10px;
  border-image-source: url("imgs Contacto/contorno_chico.webp");
  border-image-slice: 45 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  text-align: center;
  padding: 12px 18px;
}

.contacto-caja-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.contacto-logo{
  height: 60px;
  width: auto;
  object-fit: contain;
  flex: none;
}
.contacto-instagram-badge{
  position: absolute;
  top: -4px;
  right: -2px;
  height: 30px;
  width: 30px;
}
.contacto-instagram-badge img{ height: 100%; width: 100%; display: block; }

.contacto-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  justify-items: center;
}

.contacto-sucursal{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  font-family: 'Times Savio', 'Times New Roman', Times, serif;
}

.contacto-sucursal-nombre{
  font-weight: 700;
  font-size: 18px;
  color: var(--savio-rojo);
  text-transform: uppercase;
  letter-spacing: .3px;
  text-align: center;
  align-self: center;
  margin-bottom: 6px;
}

.contacto-linea{
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  max-width: 100%;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--savio-texto);
  text-decoration: none;
  text-align: left;
  margin-bottom: 5px;
}
.contacto-icono{
  height: 16px;
  width: 16px;
  object-fit: contain;
  flex: none;
  margin-top: 2px;
}
a.contacto-linea:active{ opacity: .65; }

.contacto-caja-header-lateral{
  display: flex;
  align-items: center;
  gap: 16px;
}
.contacto-logo-lateral, .contacto-caja-header-lateral .contacto-logo{
  height: 74px;
  width: auto;
  flex: none;
}
.contacto-info-lateral{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contacto-marca-nombre-lateral{
  font-weight: 700;
  font-size: 18px;
  color: var(--savio-rojo);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contacto-info-lateral .contacto-linea{ justify-content: flex-start; }

.contacto-tagline{
  height: 53px;
  width: auto;
  display: inline-block;
}

/* ============================================================
   FAB (botón flotante Menú/Contacto) - PROVISORIO, reutiliza los
   mismos íconos de Bajo (ver punto 2.3 del estado del proyecto).
   ============================================================ */
.fab-container {
	position: fixed;
	bottom: 5%;
	right: 3%;
	z-index: 999;
	cursor: pointer;
}
.fab-icon-holder {
	width: 150px;
	height: 150px;
	border-radius: 22%;
	background: transparent; /* 14/09/2026: era #016fb9 - con los botones
	  nuevos (blancos, cuadrados) se asomaba en las puntas redondeadas,
	  mismo problema que se corrigió en .fab */
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.fab {
	width: 150px;
	height: 150px;
	background: transparent; /* 14/09/2026: era var(--savio-rojo) - con el
	  botón nuevo (blanco, cuadrado) se veía como un borde rojo asomando
	  alrededor (reporte de Fede con captura) */
}
.boton {
  /* 14/09/2026: cuadrado con bordes redondeados (no círculo) - el botón
     "LDF_boton.webp" nuevo ya viene con ese contorno dibujado adentro
     de la imagen (a pedido de Fede, igual al favicon), border-radius acá
     solo tiene que acompañar esa forma, no recortarla en círculo.
     display:block saca el hueco que dejan las imágenes inline por
     default (línea de base), que también dejaba ver un borde. */
  border-radius: 22%;
  width: 150px;
  display: block;
}
.fab-options {
	list-style-type: none;
	margin: 0;
	position: absolute;
	bottom: 150px;
	right: 0;
	opacity: 0;
	transition: all 0.3s ease;
	transform: scale(0);
	transform-origin: 85% bottom;
}
.fab:hover + .fab-options, .fab-options:hover {
	opacity: 1;
	transform: scale(1);
}
.fab-container.activo .fab-options {
	opacity: 1;
	transform: scale(1);
}
.fab-options li {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 30px;
}
.fab-label {
	padding: 2px 5px;
	align-self: center;
	user-select: none;
	white-space: nowrap;
	border-radius: 3px;
	font-size: 24px;
	background: #666666;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	margin-right: 10px;
}

/* ============================================================
   MOBILE (igual criterio que Bajo: pensado para ~360-430px reales)
   ============================================================ */
@media (max-width: 640px){
  .carta-encabezado{ padding: 14px 16px 4px; }
  .encabezado-logo{ width: 165px; max-width: 62%; }

  .carta-modulo{ padding: 16px 16px 20px; }
  .carta-modulo-parrilla{ padding: 0 16px 20px; }

  .carta-titulo{ height: 44px; max-width: 92%; }
  .carta-titulo.doble{ height: 30px; }
  .carta-titulo.doble + .carta-titulo.doble{ height: 44px; }
  .carta-modulo-rosa .carta-titulo[src*="Cerveza"]{ height: 60px; }
  .carta-modulo-rosa .carta-titulo[src*="Cafe"]{ height: 54px; }
  .carta-subtitulo{ font-size: 17px; }

  .carta-item{ margin-bottom: 14px; }
  .carta-item .item-nombre{ font-size: 17px; }
  .item-fila .item-nombre-inline{ font-size: 17px; }
  .carta-item .item-detalle{ font-size: 13px; line-height: 1.5; }
  .item-puntos-abs{ font-size: 13px; }
  .carta-item .item-precio{ font-size: 15.5px; min-width: 76px; }

  .parrilla-titulo-img{ height: 88px; }
  .parrilla-marco{ padding-top: 56px; margin-top: 48px; }

  .carta-nota{ font-size: 13px; padding: 10px 14px; }
  .carta-nota-bloque{ font-size: 12px; }

  .contacto-titulo{ height: 44px; }
  .contacto-grid{ grid-template-columns: 1fr; gap: 16px; }
  .contacto-logo{ height: 50px; }
  .contacto-logo-lateral, .contacto-caja-header-lateral .contacto-logo{ height: 58px; }
  .contacto-tagline{ height: 44px; }

	.boton { width: 64px; }
	.fab-icon-holder { width: 64px; height: 64px; }
	.fab { width: 64px; height: 64px; }
	.fab-container { bottom: 4%; right: 4%; }
	.fab-options { bottom: 64px; }
	.fab-options li { padding-bottom: 14px; }
	.fab-label { font-size: 14px; padding: 3px 8px; margin-right: 8px; }
}

/* ============================================================
   PC (>= 1100px): columna central angosta y centrada, igual criterio
   que Bajo pero SIN las guardas laterales fijas (Savio no tiene esa
   ilustración) - acá solo se angosta y centra el contenido.
   ============================================================ */
@media (min-width: 1100px){
  :root{
    --savio-panel-w: min(420px, calc((100vw - 900px) / 2));
  }

  body{
    background-color: #FFFFFF;
  }

  .carta-encabezado,
  .carta-wrap,
  .carta-modulo,
  .menu_contacto,
  .contacto-dinamico{
    max-width: 900px;
  }
  .carta-wrap, .menu_contacto{
    margin-left: auto;
    margin-right: auto;
  }

  /* Guardas laterales fijas (14/09/2026, a pedido de Fede) - mismo
     mecanismo que Bajo: dos ::before/::after del body, position:fixed
     (no se mueven al scrollear, solo la columna central), con el
     patrón "facu" (Laterales fucu.pdf -> guarda_lateral.webp)
     repitiéndose en las dos direcciones. Un solo archivo para los dos
     lados (Savio no tiene, como Bajo, un dibujo distinto por lado).

     guarda_lateral.webp es UN solo "facu" (un período exacto del
     patrón original, medido por autocorrelación para que encastre
     sin cortar ninguna letra) - así el tileado de CSS es el único
     tileado que existe, sin capas de repetición pisándose entre sí.
     Versión anterior (recorte 1000x1000 de 3x3 "facu" a ojo, sin
     alinear al período real): el corte caía a mitad de letra en
     algunas filas y al repetirse en CSS se veía deforme / con las
     líneas descalzadas (14/09/2026, reporte de Fede con captura). */
  body::before,
  body::after{
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--savio-panel-w);
    background-image: url("imgs_carta/guarda_lateral.webp?v=3");
    background-repeat: repeat;
    background-position: top center;
    background-size: 72px 53px;
    z-index: -1;
    pointer-events: none;
  }
  body::before{ left: 0; }
  body::after{ right: 0; }

  .contacto-sucursal-nombre,
  .contacto-marca-nombre-lateral{
    font-size: 26px;
  }
  .contacto-linea{
    font-size: 26px;
    gap: 10px;
  }
  .contacto-icono{
    height: 24px;
    width: 24px;
    margin-top: 4px;
  }
}