/* ==========================================

1. VARIABLES Y RESET GENERAL
   ========================================== */

:root {
--bg-main: #fcfbfa;
--surface-white: #ffffff;
--text-dark: #2c2a29;
--text-muted: #78716c;

--green-primary: #3b6e4f;
--green-dark: #274b35;
--green-light: #edf5ef;

--orange-primary: #e07a5f;

--border-color: #e6e2dd;

--radius-lg: 16px;
--radius-full: 9999px;

--shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.03);
--shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.06);
}

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

body {
background-color: var(--bg-main);
color: var(--text-dark);
font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;

min-height: 100vh;

display: flex;
flex-direction: column;

overflow-x: hidden;
}

main {
flex: 1;
}

.sabor-card {
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sabor-card:hover {
border-color: #587042;
box-shadow: 0 0 0 2px #587042, var(--shadow-hover);
transform: translateY(-3px);
}

.pais-etiqueta {
color: #587042;
background: #eef5ea;
border: 1px solid #d8e6d0;
border-radius: 9999px;
padding: 4px 8px;
}

.menu-carousel-viewport {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}

.menu-carousel-viewport::-webkit-scrollbar {
display: none;
}

.menu-carousel-slide {
width: 100%;
flex-basis: 100%;
scroll-snap-align: center;
}

#menu-carousel-track {
align-items: center;
gap: 12px;
}

@media (min-width: 640px) {
.menu-carousel-slide {
width: calc((100% - 24px) / 3);
flex-basis: calc((100% - 24px) / 3);
}
}

.menu-carousel-arrow {
display: grid;
width: 40px;
height: 40px;
flex: 0 0 40px;
place-items: center;
border: 1px solid #d8e6d0;
border-radius: 50%;
background: #fff;
color: #587042;
transition: background-color 160ms ease, color 160ms ease;
}

.menu-carousel-arrow:hover {
background: #587042;
color: #fff;
}

.menu-carousel-arrow:focus-visible {
outline: 3px solid #9fc68d;
outline-offset: 2px;
}

.fotos-muestra-viewport {
position: relative;
height: 320px;
overflow: hidden;
perspective: 1000px;
touch-action: pan-y;
}

.fotos-muestra-controls {
display: flex;
}

.fotos-muestra-slide {
position: absolute;
top: 50%;
left: 50%;
width: min(52vw, 22rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.7);
transition: transform 680ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 680ms ease;
will-change: transform, opacity;
}

.fotos-muestra-slide.is-left,
.fotos-muestra-slide.is-right {
opacity: 0.82;
visibility: visible;
}

.fotos-muestra-slide.is-left {
z-index: 1;
transform: translate(-135%, -46%) translateZ(-100px) rotateY(12deg) rotateZ(-5deg) scale(0.72);
}

.fotos-muestra-slide.is-right {
z-index: 2;
transform: translate(35%, -46%) translateZ(-100px) rotateY(-12deg) rotateZ(5deg) scale(0.72);
}

.fotos-muestra-slide.is-front {
z-index: 3;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, -50%) translateZ(50px) scale(1);
}

.fotos-muestra-slide.is-leaving-left,
.fotos-muestra-slide.is-leaving-right {
z-index: 0;
visibility: visible;
}

.fotos-muestra-slide.is-leaving-left {
opacity: 0;
transform: translate(-180%, -46%) scale(0.64);
}

.fotos-muestra-slide.is-leaving-right {
opacity: 0;
transform: translate(80%, -46%) scale(0.64);
}

.fotos-muestra-slide.is-coming-right {
transform: translate(80%, -46%) scale(0.64);
}

.fotos-muestra-slide.is-coming-left {
transform: translate(-180%, -46%) scale(0.64);
}

.fotos-muestra-card {
width: 100%;
padding: 8px;
overflow: hidden;
border: 1px solid #e5d8ba;
border-radius: 16px;
background: #fffdf7;
box-shadow: 0 10px 26px rgba(61, 52, 35, 0.17);
}

.fotos-muestra-imagen {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 10px;
object-fit: cover;
}

@media (max-width: 767px) {
.fotos-muestra-controls {
display: none !important;
}

.fotos-muestra-viewport {
height: 260px;
}

.fotos-muestra-slide {
width: min(50vw, 18rem);
}

.fotos-muestra-slide.is-left {
transform: translate(-108%, -46%) translateZ(-80px) rotateY(8deg) rotateZ(-4deg) scale(0.62);
}

.fotos-muestra-slide.is-right {
transform: translate(-3%, -46%) translateZ(-80px) rotateY(-8deg) rotateZ(4deg) scale(0.62);
}
}

.catalogo-deslizable {
scrollbar-width: thin;
scrollbar-color: #587042 #e7e5e4;
}

.catalogo-deslizable::-webkit-scrollbar {
width: 10px;
}

.catalogo-deslizable::-webkit-scrollbar-thumb {
background: #587042;
border: 2px solid #f5f5f4;
border-radius: 9999px;
}

.catalogo-deslizable::-webkit-scrollbar-track {
background: #e7e5e4;
border-radius: 9999px;
}

/* ==========================================
2. HEADER Y NAVEGACIÓN
========================================== */

.main-header {
background-color: var(--surface-white);
border-bottom:
    1px solid var(--border-color);

position: sticky;

top: 0;

z-index: 1000;

padding: 12px 0;
}

.header-container {
max-width: 1200px;
margin: 0 auto;

padding: 0 20px;

display: flex;

justify-content: space-between;

align-items: center;
}

.logo {
display: flex;
align-items: center;

gap: 10px;
}

.logo-Icon-img {
width: 42px !important;
height: 42px !important;

object-fit: cover;

border-radius: 50%;
}

.logo-text {
font-weight: 700;
font-size: 1.2rem;

color: var(--text-dark);
}

.brand-title {
font-family: "Monsieur La Doulaise", cursive;
font-weight: 400;
font-style: normal;
}

.petit-formal-script-regular {
  font-family: "Petit Formal Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/* NAVEGACIÓN */

.main-nav {
display: flex;
gap: 20px;

align-items: center;
}

.main-nav a {
text-decoration: none;
color: var(--text-muted);

font-weight: 500;

font-size: 0.95rem;

transition: color 0.2s;
}

.main-nav a:hover,
.main-nav a.active {
color: var(--green-primary);
}

/* ==========================================
3. BOTONES GENERALES
========================================== */

.btn-agregar {
background: var(--green-primary);
color: white;

border: none;

padding: 11px 18px;

border-radius: 10px;

cursor: pointer;

font-weight: 600;

font-size: 0.9rem;

transition:
    background 0.2s,
    transform 0.2s;
}

.btn-agregar:hover {
background: var(--green-dark);
transform: translateY(-2px);
}

/* ==========================================
4. SECCIÓN EMPRESAS
========================================== */

.empresas-main {
width: 100%;
max-width: 1100px;

margin: 0 auto;

padding: 70px 20px;
}

/* ENCABEZADO */

.section-header {
text-align: center;
margin-bottom: 30px;
}

.empresas-header {
max-width: 750px;
margin-left: auto;

margin-right: auto;

margin-bottom: 50px;
}

.empresas-tag {
display: inline-block;
background: var(--green-light);

color: var(--green-primary);

font-size: 0.8rem;

font-weight: 700;

letter-spacing: 1px;

padding: 8px 16px;

border-radius: var(--radius-full);

margin-bottom: 20px;
}

.empresas-header h1 {
font-size: clamp(2rem, 4vw, 3.2rem);
color: var(--green-dark);

line-height: 1.2;

margin-bottom: 20px;
}

.empresas-header h1 span {
color: var(--green-primary);
}

.empresas-header p {
color: var(--text-muted);
font-size: 1.05rem;

line-height: 1.7;

max-width: 650px;

margin: 0 auto;
}

/* ==========================================
5. GRID DE SERVICIOS
========================================== */

.servicios-grid {
display: grid;
grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

gap: 30px;
}

/* TARJETA */

.servicio-card {
background: var(--surface-white);
padding: 35px;

border-radius: var(--radius-lg);

border:
    1px solid var(--border-color);

box-shadow: var(--shadow-soft);

display: flex;

flex-direction: column;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.servicio-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}

/* Icono */

.servicio-Icono {
width: 65px;
height: 65px;

display: flex;

justify-content: center;

align-items: center;

background: var(--green-light);

border-radius: 18px;

font-size: 1.9rem;

margin-bottom: 22px;
}

/* TÍTULO */

.servicio-card h2 {
color: var(--green-dark);
font-size: 1.35rem;

margin-bottom: 15px;
}

/* DESCRIPCIÓN */

.servicio-card > p {
color: var(--text-muted);
line-height: 1.7;

margin-bottom: 20px;
}

/* LISTA */

.servicio-lista {
list-style: none;
margin-bottom: 30px;

display: flex;

flex-direction: column;

gap: 10px;

flex-grow: 1;
}

.servicio-lista li {
color: var(--text-dark);
font-size: 0.9rem;
}

.servicio-lista li::first-letter {
color: var(--green-primary);
}

/* BOTÓN EMPRESA */

.empresa-btn {
display: block;
width: 100%;

text-align: center;

text-decoration: none;

margin-top: auto;
}

/* ==========================================
6. SECCIÓN CONTACTO EMPRESAS
========================================== */

.empresas-contacto {
margin-top: 80px;
background: var(--green-dark);

border-radius: var(--radius-lg);

padding: 45px;

color: white;
}

.contacto-contenido {
display: flex;
justify-content: space-between;

align-items: center;

gap: 30px;
}

.empresas-contacto .empresas-tag {
background: rgba(255, 255, 255, 0.12);
color: #d9f0df;

margin-bottom: 15px;
}

.empresas-contacto h2 {
font-size: 1.8rem;
margin-bottom: 15px;
}

.empresas-contacto p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;

max-width: 650px;
}

/* BOTÓN DE CONTACTO */

.btn-contacto {
display: inline-block;
background: var(--orange-primary);

color: white;

text-decoration: none;

font-weight: 700;

padding: 14px 25px;

border-radius: var(--radius-full);

white-space: nowrap;

transition:
    background 0.2s,
    transform 0.2s;
}

.btn-contacto:hover {
background: #c9684c;
transform: translateY(-2px);
}

/* ==========================================
7. MENÚ Y PLATOS
Mantiene compatibilidad con index.html
========================================== */

.menu-section {
max-width: 1200px;
margin: 60px auto;

padding: 0 20px;
}

.section-header h2 {
font-size: 2rem;
color: var(--green-dark);

margin-bottom: 8px;
}

.section-header p {
color: var(--text-muted);
font-size: 1rem;
}

.menu-filters {
display: flex;
justify-content: center;

gap: 8px;

flex-wrap: wrap;

margin-bottom: 35px;
}

.filter-btn {
background: white;
border:
    1px solid var(--border-color);

padding: 8px 18px;

border-radius: var(--radius-full);

cursor: pointer;

font-weight: 500;

color: var(--text-muted);

font-size: 0.9rem;

transition: all 0.2s;
}

.filter-btn:hover {
border-color: var(--green-primary);
color: var(--green-primary);

background: var(--green-light);
}

.filter-btn.active {
background: var(--text-dark);
color: white;

border-color: var(--text-dark);
}

.menu-grid {
display: grid;
grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));

gap: 25px;
}

/* TARJETAS DE PLATOS */

.plato-card {
background: white;
border-radius: var(--radius-lg);

overflow: hidden;

box-shadow: var(--shadow-soft);

display: flex;

flex-direction: column;

border:
    1px solid var(--border-color);

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.plato-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}

.card-media {
position: relative;
width: 100%;

height: 190px;

background: #e2e8f0;

overflow: hidden;
}

.card-media img {
width: 100%;
height: 100%;

object-fit: cover;

transition: transform 0.4s;
}

.plato-card:hover .card-media img {
transform: scale(1.05);
}

.card-content {
padding: 20px;
display: flex;

flex-direction: column;

flex-grow: 1;
}

.card-content h3 {
font-size: 1.15rem;
margin-bottom: 8px;

color: var(--text-dark);

font-weight: 700;
}

.card-content .descripcion {
color: var(--text-muted);
font-size: 0.88rem;

margin-bottom: 16px;

line-height: 1.5;

flex-grow: 1;
}

.card-footer {
display: flex;
justify-content: space-between;

align-items: center;

margin-top: auto;

border-top:
    1px solid var(--border-color);

padding-top: 14px;
}

.card-footer .precio {
font-size: 1.15rem;
font-weight: bold;

color: var(--text-dark);
}

/* ==========================================
8. CARRITO
========================================== */

.carrito-box {
cursor: pointer;
background: var(--green-light);

padding: 8px 16px;

border-radius: var(--radius-full);

color: var(--green-primary);

font-weight: bold;

font-size: 0.95rem;

transition: background 0.2s;
}

.carrito-box:hover {
background: #d7eade;
}

.carrito-overlay {
position: fixed;
top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0, 0, 0, 0.4);

visibility: hidden;

opacity: 0;

transition: 0.3s;

z-index: 2000;
}

.carrito-overlay.open {
visibility: visible;
opacity: 1;
}

.carrito-drawer {
position: fixed;
top: 0;

right: -100%;

width: 100%;

max-width: 380px;

height: 100%;

background: white;

transition: right 0.3s ease;

z-index: 2001;

display: flex;

flex-direction: column;

box-shadow:
    -5px 0 25px rgba(0, 0, 0, 0.1);
}

.carrito-drawer.open {
right: 0;
}

.carrito-header,
.carrito-footer {
padding: 20px;
background: #faf8f5;

border-bottom:
    1px solid var(--border-color);
}

.carrito-header {
display: flex;
justify-content: space-between;

align-items: center;
}

.carrito-body {
padding: 20px;
flex-grow: 1;

overflow-y: auto;
}

.btn-whatsapp {
width: 100%;
background: #25d366;

color: white;

border: none;

padding: 12px;

border-radius: 25px;

font-weight: bold;

cursor: pointer;
}

.btn-vaciar {
width: 100%;
background: none;

border: none;

color: var(--text-muted);

margin-top: 8px;

cursor: pointer;
}

.btn-cerrar-carrito {
background: #eee;
border: none;

width: 34px;

height: 34px;

border-radius: 50%;

cursor: pointer;

font-size: 1rem;
}

/* ==========================================
9. FOOTER
========================================== */

.main-footer {
background-color: var(--green-dark);
color: #cbd5e1;

padding: 60px 20px 20px;

margin-top: auto;
}

.footer-container {
max-width: 1200px;
margin: 0 auto;

display: grid;

grid-template-columns:
    2fr 1fr 1fr;

gap: 40px;

padding-bottom: 40px;

border-bottom:
    1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand h3,
.footer-nav h4,
.footer-contact h4 {
color: white;
margin-bottom: 15px;

font-size: 1.1rem;
}

.footer-brand p {
line-height: 1.6;
}

.footer-nav a,
.footer-contact a,
.footer-contact p {
display: block;
color: #cbd5e1;

text-decoration: none;

margin-bottom: 10px;

font-size: 0.9rem;
}

.footer-nav a:hover {
color: #a3e635;
}

.footer-bottom {
max-width: 1200px;
margin: 0 auto;

text-align: center;

padding-top: 25px;

font-size: 0.85rem;

color: #94a3b8;
}

/* ==========================================
10. RESPONSIVE - TABLET Y CELULAR
========================================== */

@media (max-width: 768px) {
.header-container {
    flex-wrap: wrap;

    gap: 12px;
}


.main-nav {
    gap: 12px;
}


.empresas-main {
    padding: 45px 20px;
}


.empresas-header h1 {
    font-size: 2rem;
}


.servicios-grid {
    grid-template-columns: 1fr;
}


.servicio-card {
    padding: 28px;
}


.empresa-btn {
    width: 100%;
}


.empresas-contacto {
    margin-top: 50px;

    padding: 30px;
}


.contacto-contenido {
    flex-direction: column;

    align-items: flex-start;
}


.btn-contacto {
    width: 100%;

    text-align: center;
}


.footer-container {
    grid-template-columns: 1fr;

    gap: 30px;
}


.carrito-drawer {
    max-width: 100%;
}
}

@media (max-width: 480px) {
.menu-carousel {
    gap: 6px;
}

.menu-carousel-arrow {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.logo-text {
    font-size: 1rem;
}


.main-nav {
    width: 100%;

    justify-content: center;

    font-size: 0.85rem;
}


.empresas-main {
    padding: 35px 15px;
}


.servicio-card {
    padding: 22px;
}


.empresas-contacto {
    padding: 25px 20px;
}
}