/* Dato informativo .css 2026-09-22 Información Códigos/Web_Nacho_sitio_2026-09-22.md */

@font-face {
  font-family: 'Uni Sans Book';
  src: url('fonts/UniSansBook.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Uni Sans SemiBold';
  src: url('fonts/UniSansSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root{
  --ldf-rojo: #B8222C;
  --ldf-negro-guarda: #3a3634;
  --ldf-texto: #1E1E1E;
  --ldf-texto-dim: #6E6C6C;
}

html, body{
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.carta-wrap{
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  overflow: hidden;
}

.carta-modulo{
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  overflow: hidden;
  contain: paint;
  padding-bottom: 18px;
}

/* Banda superior sólida (reemplaza la guarda ilustrada de Bajo, que es
   arte propio de esa marca) con el logo de Lo de Nacho centrado y un
   borde inferior ondulado hecho con CSS mask (sin imagen). */
.guarda-top-wrap{
  position: relative;
  height: 170px;
  background: var(--ldf-rojo);
  margin-bottom: 18px;
}
.guarda-top-wrap::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 20px;
  background: var(--ldf-rojo);
  -webkit-mask-image: radial-gradient(circle at 14px 0, transparent 14px, black 15px);
  mask-image: radial-gradient(circle at 14px 0, transparent 14px, black 15px);
  -webkit-mask-size: 28px 20px;
  mask-size: 28px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.guarda-top-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 145px;
  width: auto;
  max-width: 72%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* "Fondo Carta" ya viene diseñado como marca de agua (gris muy claro,
   transparencia incorporada en el propio archivo) - no hace falta
   bajarle opacidad ni rotarlo por CSS, sólo centrarlo. */
.carta-modulo .logo-marca{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  max-width: 640px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.carta-contenido{
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 10px;
  overflow: hidden;
}

.carta-contenido-inner{
  position: relative;
  z-index: 1;
}

.carta-bloque + .carta-bloque{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #EFE8E5;
}

.carta-titulo{
  display: block;
  height: 60px;
  width: auto;
  max-width: 90%;
  margin: 8px 0 14px;
}
.carta-titulo.doble{
  height: 42px;
  margin-bottom: 0;
}
.carta-titulo.doble + .carta-titulo.doble{
  height: 60px;
  margin-top: 2px;
  margin-bottom: 14px;
}

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

.carta-item .item-nombre{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--ldf-texto);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  margin-bottom: 2px;
}

.carta-item .badge-icono{
  width: 1em;
  height: 1em;
  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: 'Uni Sans Book', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ldf-texto-dim);
  text-transform: uppercase;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

.item-fila .item-nombre-inline{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--ldf-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;
}

.item-puntos-abs{
  display: none;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Uni Sans Book', Arial, sans-serif;
  font-size: 20px;
  color: #C9C4C1;
  letter-spacing: 2px;
}
.item-puntos-abs::after{
  content: "........................................................................................................................";
}

.carta-item .item-precio{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 25px;
  color: var(--ldf-texto);
  white-space: nowrap;
  flex: none;
  min-width: 96px;
  text-align: right;
}

/* Cierre inferior sólido (reemplaza la guarda ilustrada de Bajo) */
.carta-guarda-inf{
  display: block;
  width: 100%;
  height: 60px;
  background: var(--ldf-negro-guarda);
  position: relative;
}
.carta-guarda-inf::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -19px;
  height: 20px;
  background: var(--ldf-negro-guarda);
  -webkit-mask-image: radial-gradient(circle at 14px 20px, transparent 14px, black 15px);
  mask-image: radial-gradient(circle at 14px 20px, transparent 14px, black 15px);
  -webkit-mask-size: 28px 20px;
  mask-size: 28px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* Unión entre módulos: cierre oscuro + apertura roja, sólidas */
.carta-union{
  display: block;
  width: 100%;
  height: 90px;
  position: relative;
  background: linear-gradient(to bottom, var(--ldf-negro-guarda) 0 40px, var(--ldf-rojo) 40px 100%);
}
.carta-union::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 21px;
  height: 20px;
  background: var(--ldf-negro-guarda);
  -webkit-mask-image: radial-gradient(circle at 14px 20px, transparent 14px, black 15px);
  mask-image: radial-gradient(circle at 14px 20px, transparent 14px, black 15px);
  -webkit-mask-size: 28px 20px;
  mask-size: 28px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.carta-union::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 20px;
  background: var(--ldf-rojo);
  -webkit-mask-image: radial-gradient(circle at 14px 0, transparent 14px, black 15px);
  mask-image: radial-gradient(circle at 14px 0, transparent 14px, black 15px);
  -webkit-mask-size: 28px 20px;
  mask-size: 28px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* ============================================================
   CONTACTO - mismos marcos/estilos que Bajo (imgs Contacto/ es un
   set genérico ya compartido entre sitios)
   ============================================================ */
.contacto-dinamico{
  padding: 6px 16px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.contacto-titulo{
  display: block;
  height: 62px;
  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%;
}

.contacto-sucursal-nombre{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ldf-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-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ldf-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-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ldf-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;
}

@media (max-width: 640px){
  .carta-contenido{ padding: 4px 16px 6px; }
  .carta-titulo{ height: 42px; max-width: 92%; }
  .carta-titulo.doble{ height: 29px; }
  .carta-titulo.doble + .carta-titulo.doble{ height: 42px; }
  .carta-item{ margin-bottom: 16px; }
  .carta-item .item-nombre{ font-size: 18px; }
  .item-fila .item-nombre-inline{ font-size: 18px; }
  .carta-item .item-detalle{ font-size: 13.5px; line-height: 1.5; }
  .item-puntos-abs{ font-size: 13.5px; }
  .carta-item .item-precio{ font-size: 16px; min-width: 78px; }
  .carta-modulo .logo-marca{ width: 100%; max-width: 400px; }
  .guarda-top-wrap{ height: 140px; }
  .guarda-top-logo{ height: 108px; max-width: 82%; }

  .contacto-titulo{ height: 46px; }
  .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; }
}

@media (min-width: 1100px){
  :root{
    --ldf-panel-w: min(420px, calc((100vw - 900px) / 2));
  }

  .carta-wrap,
  .carta-modulo,
  .menu_contacto{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  body{ background-color: #FFFFFF; }

  /* Guardas laterales fijas (22/09/2026, v3): mismo patrón que
     lodefacu.com.ar (body::before/::after, position:fixed,
     repeat-y). El isologo "Lo de Nacho" va en su orientación normal
     (no rotado 90°) y repetido en vertical - la relación de aspecto
     del tile hace que a los anchos de pantalla típicos entren ~3
     repeticiones por alto de pantalla (v2 tenía ~4, gap más chico).
     ?v=3 en la URL: evita que el hosting/navegador sirva la imagen
     vieja en caché al actualizar el archivo (a diferencia de
     estilos_carta_nacho.css?v= del index.html, esto NO cachebustea
     solo -  hay que sumarlo acá también). */
  body::before,
  body::after{
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--ldf-panel-w);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
    opacity: .55;
    z-index: -1;
    pointer-events: none;
  }
  body::before{
    left: 0;
    background-image: url("imgs Lateral/guarda_lateral_izq.webp?v=3");
  }
  body::after{
    right: 0;
    background-image: url("imgs Lateral/guarda_lateral_der.webp?v=3");
  }

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