/* =====================================================
   CSS PARA CARTA DE RESTAURANTE
   ===================================================== */

@font-face {
    font-family: 'Didot';
    src: url('../fonts/didotltstd-italic.eot');
    src: url('../fonts/didotltstd-italic.eot') format('embedded-opentype'),
         url('../fonts/didotltstd-italic.woff') format('woff'),
         url('../fonts/didotltstd-italic.ttf') format('truetype'),
         url('../fonts/didotltstd-italic.svg#DidotLTStd-Italic') format('svg');
}

@font-face {
    font-family: 'Alethia Pro Regular';
    src: url('../fonts/AlethiaPro-Regular.eot');
    src: url('../fonts/AlethiaPro-Regular.eot') format('embedded-opentype'),
         url('../fonts/AlethiaPro-Regular.woff') format('woff'),
         url('../fonts/AlethiaPro-Regular.ttf') format('truetype'),
         url('../fonts/AlethiaPro-Regular.svg') format('svg');
}

@font-face {
    font-family: 'Bodoni Std';
    src: url('../fonts/BodoniStd.eot');
    src: url('../fonts/BodoniStd.eot') format('embedded-opentype'),
         url('../fonts/BodoniStd.woff') format('woff'),
         url('../fonts/BodoniStd.ttf') format('truetype'),
         url('../fonts/BodoniStd.svg') format('svg');
}

@font-face {
    font-family: 'Bodoni Std Book';
    src: url('../fonts/BodoniStd-Book.eot');
    src: url('../fonts/BodoniStd-Book.eot') format('embedded-opentype'),
         url('../fonts/BodoniStd-Book.woff') format('woff'),
         url('../fonts/BodoniStd-Book.ttf') format('truetype'),
         url('../fonts/BodoniStd-Book.svg') format('svg');
}

@font-face {
    font-family: 'Bodoni Std Italic';
    src: url('../fonts/BodoniStd-Italic.eot');
    src: url('../fonts/BodoniStd-Italic.eot') format('embedded-opentype'),
         url('../fonts/BodoniStd-Italic.woff') format('woff'),
         url('../fonts/BodoniStd-Italic.ttf') format('truetype'),
         url('../fonts/BodoniStd-Italic.svg') format('svg');
}

@font-face {
    font-family: 'DOROVARF';
    src: url('../fonts/DorovarFLF-Carolus.eot');
    src: url('../fonts/DorovarFLF-Carolus.eot') format('embedded-opentype'),
         url('../fonts/DorovarFLF-Carolus.woff') format('woff'),
         url('../fonts/DorovarFLF-Carolus.ttf') format('truetype'),
         url('../fonts/DorovarFLF-Carolus.svg') format('svg');
}

@font-face {
    font-family: 'DTLNobelT';
    src: url('../fonts/DTLNobelT.eot');
    src: url('../fonts/DTLNobelT.eot') format('embedded-opentype'),
         url('../fonts/DTLNobelT.woff') format('woff'),
         url('../fonts/DTLNobelT.ttf') format('truetype'),
         url('../fonts/DTLNobelT.svg') format('svg');
}

@font-face {
    font-family: 'DTLNobelT-Bold';
    src: url('../fonts/DTLNobelT-Bold.eot');
    src: url('../fonts/DTLNobelT-Bold.eot') format('embedded-opentype'),
         url('../fonts/DTLNobelT-Bold.woff') format('woff'),
         url('../fonts/DTLNobelT-Bold.ttf') format('truetype'),
         url('../fonts/DTLNobelT-Bold.svg') format('svg');
}

@font-face {
    font-family: 'DTLNobelT-Euro';
    src: url('../fonts/DTLNobelT-Euro.eot');
    src: url('../fonts/DTLNobelT-Euro.eot') format('embedded-opentype'),
         url('../fonts/DTLNobelT-Euro.woff') format('woff'),
         url('../fonts/DTLNobelT-Euro.ttf') format('truetype'),
         url('../fonts/DTLNobelT-Euro.svg') format('svg');
}

@font-face {
    font-family: 'DTLNobelT-Light';
    src: url('../fonts/DTLNobelT-Light.eot');
    src: url('../fonts/DTLNobelT-Light.eot') format('embedded-opentype'),
         url('../fonts/DTLNobelT-Light.woff') format('woff'),
         url('../fonts/DTLNobelT-Light.ttf') format('truetype'),
         url('../fonts/DTLNobelT-Light.svg') format('svg');
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue.eot');
    src: url('../fonts/HelveticaNeue.eot') format('embedded-opentype'),
         url('../fonts/HelveticaNeue.woff') format('woff'),
         url('../fonts/HelveticaNeue.ttf') format('truetype'),
         url('../fonts/HelveticaNeue.svg') format('svg');
}

@font-face {
    font-family: 'Helvetica Neue Light';
    src: url('../fonts/HelveticaNeue-Light.eot');
    src: url('../fonts/HelveticaNeue-Light.eot') format('embedded-opentype'),
         url('../fonts/HelveticaNeue-Light.woff') format('woff'),
         url('../fonts/HelveticaNeue-Light.ttf') format('truetype'),
         url('../fonts/HelveticaNeue-Light.svg') format('svg');
}

@font-face {
    font-family: 'Helvetica Neue Roman';
    src: url('../fonts/HelveticaNeue-Roman.eot');
    src: url('../fonts/HelveticaNeue-Roman.eot') format('embedded-opentype'),
         url('../fonts/HelveticaNeue-Roman.woff') format('woff'),
         url('../fonts/HelveticaNeue-Roman.ttf') format('truetype'),
         url('../fonts/HelveticaNeue-Roman.svg') format('svg');
}

@font-face {
    font-family: 'MinionPro-Regular';
    src: url('../fonts/MinionPro-Regular.eot');
    src: url('../fonts/MinionPro-Regular.eot') format('embedded-opentype'),
         url('../fonts/MinionPro-Regular.woff') format('woff'),
         url('../fonts/MinionPro-Regular.ttf') format('truetype'),
         url('../fonts/MinionPro-Regular.svg') format('svg');
}

@font-face {
    font-family: 'NINJAWARRIOR';
    src: url('../fonts/NINJAWARRIOR.eot');
    src: url('../fonts/NINJAWARRIOR.eot') format('embedded-opentype'),
         url('../fonts/NINJAWARRIOR.woff') format('woff'),
         url('../fonts/NINJAWARRIOR.ttf') format('truetype'),
         url('../fonts/NINJAWARRIOR.svg') format('svg');
}

@font-face {
    font-family: 'Quicksand-Light';
    src: url('../fonts/Quicksand-Light.eot');
    src: url('../fonts/Quicksand-Light.eot') format('embedded-opentype'),
         url('../fonts/Quicksand-Light.woff') format('woff'),
         url('../fonts/Quicksand-Light.ttf') format('truetype'),
         url('../fonts/Quicksand-Light.svg') format('svg');
}

@font-face {
    font-family: 'Tahoma';
    src: url('../fonts/Tahoma.eot');
    src: url('../fonts/Tahoma.eot') format('embedded-opentype'),
         url('../fonts/Tahoma.woff') format('woff'),
         url('../fonts/Tahoma.ttf') format('truetype'),
         url('../fonts/Tahoma.svg') format('svg');
}

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

body {
    font-family: var(--fuente-principal, 'Arial, sans-serif');
    font-size: var(--tamano-fuente);
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
}

.carta-container {
    max-width: 750px;
    margin: 0 auto;
    background-color: var(--color-fondo, #ffffff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}

/* Botones de Idioma */
.idioma-buttons {
    height: 1333.500px;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 2rem;
    position: relative;
    align-items: center !important;
}

.idioma-buttons.top-left { left: 15px; }
.idioma-buttons.top-center { 
    justify-content: flex-start !important;
}
.idioma-buttons.top-right { right: 15px; }
.idioma-buttons.center { 
    justify-content: center;
}
.idioma-buttons.bottom-left { top: auto; bottom: 15px; left: 15px; }
.idioma-buttons.bottom-center { 
    justify-content: flex-end !important;
 }
.idioma-buttons.bottom-right { top: auto; bottom: 15px; right: 15px; }

.btn-idioma {
    background: var(--fondo-botones, #ffffff);
    background-size: 100% 100%;
    color: var(--color-botones, #000000);
    font-family: var(--fuente-botones, 'Arial, sans-serif');
    border: none;
    padding: 8px 12px;
    height: 65px;
    width: 363px;
    border-radius: 0px;
    cursor: pointer;
    font-size: var(--tamano-botones);
    transition: all 0.3s ease;
    z-index: 3;
}

/* Botón Volver */
.boton-volver.izquierda { left: 20px; }
.boton-volver.centro { left: 50%; transform: translateX(-50%); }
.boton-volver.derecha { right: 20px; }

.btn-volver {
    border: 1px solid var(--color-boton-volver, #ffffff);
    color: var(--color-boton-volver, #ffffff);
    font-family: var(--fuente-boton-volver, Arial);
    font-size: var(--tamano-boton-volver, 14px);
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 145px;
    background: none;
}

.btn-volver a {
    text-decoration: none;
    color: var(--color-boton-volver, #ffffff);
    font-family: var(--fuente-boton-volver, Arial);
    font-size: var(--tamano-boton-volver, 14px);
    font-weight: 400;
}

.btn-volver:hover {
    background-color: rgba(0,0,0,0.1);
}

.btn-volver:hover a {
    color: white;
}

.btn-volver img {
    width: 20px;
    height: 20px;
}

/* Fondos de Imagen */
.fondo-superior-familias,
.fondo-inferior-familias,
.fondo-superior-productos,
.fondo-inferior-productos {
    position: absolute;
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

.fondo-inferior-familias {
    width: calc(100% + 4rem);
    height: 100%;
    position: static;
}

.fondo-superior-familias { top: 0; left: 0; }
.fondo-inferior-familias { bottom:  0; left: 0; }
.fondo-superior-productos { top: 50%; transform: translateY(-50%); }
.fondo-inferior-productos { bottom: 0; }

.familia-index-header {
    text-align: center;
}

/* Contenido Principal */
.carta-content {
    position: relative;
    z-index: 2;
}

/* Encabezado de la Carta */
.carta-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #e9ecef;
}

.carta-titulo {
    font-size: 2.5em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
}

.carta-descripcion {
    font-size: 1.1em;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

/* Familias */
.familia-section {
    min-height: 800px;
    padding: 120px 61px;
    position: relative;
}

.familia-section:not(:last-child) {
    border-bottom: 5px solid;
}

.familia-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: var(--fondo-superior-productos, #ffffff);
    opacity: 1;
    z-index: 1;
    top: 0;
    left: 0;
    pointer-events: none;
}

.familia-section:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: var(--fondo-inferior-productos, #ffffff);
    opacity: 1;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.familia-header {
    margin-bottom: 25px;
}

.subfamilia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.familia-titulo {
    font-family: var(--fuente-familias-cabecera, 'Arial');
    font-size: var(--tamano-familias-cabecera);
    color: var(--color-familias-cabecera, #2c3e50);
    font-weight: bold;
}

.subfamilia-titulo {
    font-family: var(--fuente-productos-titulo, 'Arial');
    font-size: calc(var(--tamano-familias-cabecera) * 0.9);
    color: var(--color-familias-cabecera, #2c3e50);
}

.subsubfamilia-titulo {
    font-size: calc(var(--tamano-familias-cabecera) * 0.6);
    color: var(--color-familias-cabecera, #2c3e50);
    font-weight: bold;
}

h4.subsubfamilia-titulo {
    font-size: calc(var(--tamano-familias-cabecera) * 0.6);
    font-weight: bold;
}

h4.subfamilia-titulo {
    font-size: calc(var(--tamano-familias-cabecera) * 0.7);
}

.subfamilia .subfamilia .producto-nombre {
    font-family: var(--fuente-productos-descripcion, 'Arial');
    font-size: var(--tamano-productos-descripcion);
    color: var(--color-productos-descripcion, #666666);
}

.subfamilia .subfamilia.no-lista .producto-nombre {
    font-family: var(--fuente-productos-titulo, 'Arial');
    font-size: var(--tamano-productos-titulo);
    color: var(--color-productos-titulo, #2c3e50);
}

.subfamilia .subfamilia.no-lista .producto-item:not([data-es-bebida="true"]) .producto-nombre::before {
    display: none;
}

.subfamilia .subfamilia .producto-item:not([data-es-bebida="true"]) .producto-nombre::before {
    content: "◆";
    color: inherit;
    padding-right: 0.5rem;
    font-size: 0.6rem;
    line-height: 1;
    display: inline-block;
    vertical-align: bottom;
    height: 0.9rem;
}

.subfamilia .subfamilia .producto-propiedades {
    margin-left: 1rem;
}

.familia-section[data-type="bebida"] .producto-nombre {
    color: var(--color-titulo-bebida, #000);
    font-family: var(--fuente-titulo-bebida, 'Arial');
    font-size: var(--tamano-titulo-bebida);
}

.familia-section[data-type="bebida"] .producto-desc {
    color: var(--color-descripcion-bebida, #000);
    font-family: var(--fuente-descripcion-bebida, 'Arial');
    font-size: var(--tamano-descripcion-bebida);
}

.familia-section[data-type="bebida"] span.precio {
    color: var(--color-precio-bebida, #000);
    font-family: var(--fuente-precio-bebida, 'Arial');
    font-size: var(--tamano-precio-bebida);
}

span.precio-mercado {
    text-align: center;
    text-transform: uppercase;
}

.familia-index-header .familia-index {
    font-family: var(--fuente-familias-indice, 'Arial');
    font-size: var(--tamano-familias-indice);
    color: var(--color-familias-indice, #666666);
    margin-top: 30px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
}

/* Productos */
.productos-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subfamilia .productos-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.producto-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.producto-info {
    width: 100%;
    display: flex;
}

.producto-item {
    border-radius: 8px;
    padding-top: 20px;
    display: flex;
}

.producto-details {
    width: 100%;
    display: flex;
}

.producto-info-text {
    width: 100%;
}

.icons-info {
    width: 30px;
}

.producto-titulo {
    margin-bottom: 8px;
}

.producto-nombre {
    font-family: var(--fuente-productos-titulo, 'Arial');
    font-size: var(--tamano-productos-titulo);
    color: var(--color-productos-titulo, #2c3e50);
    font-weight: 400;
    line-height: 1;
}

.producto-descripcion {
    font-family: var(--fuente-productos-descripcion, 'Arial');
    font-size: var(--tamano-productos-descripcion);
    color: var(--color-productos-descripcion, #666666);
    margin-bottom: 12px;
}

.producto-precio, .subfamilia-precio {
    font-size: var(--tamano-productos-precio);
    color: var(--color-productos-precio, #2c3e50);
    font-family: var(--fuente-productos-precio, 'Arial');
    margin-bottom: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.producto-precio:has(.producto-suplemento) {
    width: 25%;
    text-align: right;
}

.producto-precio.hidden {
    visibility: hidden;
}

div.subfamilia:not(.subfamilia .subfamilia) {
    margin-left: 2rem;
}

.subfamilia .productos-container .producto-item {
    margin-left: 1rem;
}

.familia-bebida .icons-info {
    display: none;
}

.familia-bebida .producto-item {
    margin-left: 0 !important;
}

.familia-bebida .producto-item .producto-nombre {
    font-family: var(--fuente-titulo-bebida, 'Arial');
    font-size: var(--tamano-titulo-bebida);
    color: var(--color-titulo-bebida, #000);
}

.familia-bebida .subfamilia-titulo {
    font-family: var(--fuente-titulo-bebida, 'Arial');
    font-weight: bold;
}

/* Propiedades */
.producto-propiedades {
    margin: 10px 0;
}

.producto-propiedades[data-mostrar="iconos"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.propiedad-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.propiedad-icono {
    width: 24px;
    height: 24px;
    object-fit: contain;
    cursor: help;
    transition: transform 0.2s ease;
}

.propiedad-icono:hover {
    transform: scale(1.2);
}

.propiedad-texto {
    font-family: var(--fuente-alergenos, 'Arial');
    font-size: var(--tamano-alergenos);
    color: var(--color-alergenos, #666666);
    font-weight: 500;
    font-style: italic;
}

img.spicy-icon,
img.info-icon {
    height: 20px;
}

/* Modo Lista */
.propiedades-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.propiedad-lista-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #dee2e6;
}

.propiedad-lista-item:last-child {
    border-bottom: none;
}

.propiedad-icono-lista {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.propiedad-texto-lista {
    font-family: var(--fuente-alergenos, 'Arial');
    font-size: var(--tamano-alergenos);
    color: var(--color-alergenos, #666666);
}

/* Variantes y Suplementos */
/* .producto-variantes,
.producto-suplementos {
    padding-left: 15px;
} */

.variante-item,
.suplemento-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.6em;
    color: var(--color-productos-descripcion, #666666);
    padding: 4px 0;
    gap: 10px;
    width: 160px;
}

.variante-item:last-child,
.suplemento-item:last-child {
    border-bottom: none;
}

.suplemento-item {
    align-items: center;
    gap: 8px;
}

.suplemento-precio {
    color: var(--color-productos-descripcion, #666666);
    font-weight: bold;
}

img.suplemento-icono {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Leyenda de Propiedades */
/* .leyenda-propiedades {
    margin-top: 40px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
} */

.leyenda-propiedades h4 {
    font-size: 1.2em;
    color: #495057;
    margin-bottom: 15px;
    text-align: center;
}

.leyenda-propiedades.izquierda h4 { text-align: left; }
.leyenda-propiedades.centro h4 { text-align: center; }
.leyenda-propiedades.derecha h4 { text-align: right; }

.leyenda-item {
    display: inline-flex;
    font-size: var(--tamano-alergenos);
    gap: 5px;
    align-items: center;
}

.leyenda-icono {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.leyenda-texto {
    font-size: var(--tamano-alergenos);
    color: var(--color-alergenos, #666666);
    font-family: var(--fuente-alergenos, 'Arial');
    font-weight: 500;
}

.leyenda-container-izquierda {
    text-align: left;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 15px;
    display: flex;
}

.leyenda-container-centro {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 15px;
}

.leyenda-container-derecha {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 15px;
}

/* Pie de Página */

.producto-footer {
    display: flex;
    align-items: flex-end;
    margin-top: 100%;
    gap:30px;
}

.middle-footer {
    order: 2;
    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.left-footer {
    order: 1;
    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.right-footer {
    order: 3;
    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.carta-footer {
}

.carta-footer.izquierda { text-align: left; }
.carta-footer.centro { text-align: center; }
.carta-footer.derecha { text-align: right; }

.pie-descripcion, .suplemento-item-leyenda {
    font-family: var(--fuente-leyenda, 'Arial');
    font-size: var(--tamano-leyenda);
    color: var(--color-leyenda, #666666);
    line-height: 1.5;
}

.fondo-idiomas {
    position: absolute;
    width: 100%;
    height: 1333.500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1;
    top: 0;
    pointer-events: none;
}

.familias-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    min-height: 1333.500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-width: 5px 0;
    border-style: solid;
    gap: 30px;
    padding-bottom: 0;
    padding-top: calc(100px + 2rem);
}

.description-families {
    position: absolute;
    bottom: 100px;
    left: 2rem;
    right: 2rem;
}

.producto-details.format-serving {
    padding-left: 1.5rem;
}

.producto-item:has(.producto-details.format-serving) {
    padding-top: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .idioma-buttons {
        height: 100dvh;
        width: auto;
    }
    .fondo-idiomas {
        height: 100dvh;
    }
    body {
        padding: 10px;
    }

    /* .carta-content {
        padding: 20px 15px;
    } */

    .carta-titulo {
        font-size: 2em;
    }

    .familia-titulo {
        font-size: 1.5em;
    }

    .idioma-buttons,
    .boton-volver {
        position: static;
        transform: none;
        margin: 10px auto;
        justify-content: center;
    }

    .idioma-buttons {
        margin-bottom: 20px;
    }

    .boton-volver {
        margin-top: 20px;
    }
    
    .familia-section {
        padding: 120px 40px;
    }
    .producto-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px;   
    }
}

@media (max-width: 480px) {
    .carta-titulo {
        font-size: 1.8em;
    }

    .producto-precio {
        font-size: 1.2em;
    }
}