/* Ruta: domicilios2/assets/css/estilos.css
   =========================================================================
   Mister Pollo - Domicilios  ·  Hoja de estilos central
   -------------------------------------------------------------------------
   TODO el tema se controla desde el bloque :root de abajo.
   Cambia esos valores y cambia el sitio entero (colores, fuentes, formas).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@500;600;700&display=swap');

/* ===================  CAMBIA AQUÍ PARA RE-TEMATIZAR  =================== */
:root {
    /* --- Marca --- */
    --marca:          #E1251B;   /* rojo Mister Pollo (del logo) */
    --marca-oscura:   #B81810;   /* hover/active del rojo */
    --acento:         #F5A623;   /* dorado "crocante" */
    --fresco:         #2A9D8F;   /* verde fresco (acciones positivas) */

    /* --- Superficies y texto --- */
    --fondo:          #FFFFFF;   /* blanco */
    --superficie:     #FFFFFF;   /* tarjetas, cabeceras */
    --borde:          #ECECEC;   /* líneas y separadores */
    --texto:          #221E1C;   /* texto principal */
    --texto-suave:    #7A726B;   /* texto secundario */

    /* --- Estados de pedido --- */
    --estado-pendiente: #F5A623;
    --estado-pagado:    #2A9D8F;
    --estado-camino:    #457B9D;
    --estado-entregado: #1D3557;
    --estado-cancelado: #9CA3AF;
    --estado-rechazado: #E63946;

    /* --- Tipografía --- */
    --fuente-titulo: 'Poppins', system-ui, sans-serif;
    --fuente-texto:  'Inter', system-ui, sans-serif;
    --fuente-fun:    'Baloo 2', system-ui, sans-serif;
    --fuente-display:'Poppins', system-ui, sans-serif;
    --oro:           #B07A1E;
    --amarillo:      #FFC72C;   /* amarillo del pico (acento alegre) */
    --amarillo-osc:  #E8A800;
    --tinta:         #26211d;   /* casi-negro para contornos tipo sticker */

    /* --- Forma y profundidad --- */
    --radio:     16px;
    --radio-sm:  10px;
    --radio-pill: 999px;
    --sombra:    0 8px 28px rgba(40, 25, 10, .09);
    --sombra-sm: 0 2px 10px rgba(40, 25, 10, .06);
    --transicion: .18s ease;

    /* --- Espaciado base --- */
    --esp: 16px;
}
/* ====================================================================== */


/* ===================  Reset / base  =================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    line-height: 1.2;
    margin: 0 0 .5em;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }


/* ===================  Layout  =================== */
.contenedor {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.seccion { padding: 28px 0; }

.rejilla {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}


/* ===================  Barra superior (admin)  =================== */
.topbar {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.marca-logo {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 18px;
    color: var(--texto);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.marca-logo .punto { color: var(--marca); }
.topbar-derecha { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--texto-suave); }


/* ===================  Botones  =================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 15px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primario { background: var(--marca); color: #fff; box-shadow: var(--sombra-sm); }
.btn-primario:hover { background: var(--marca-oscura); }

.btn-fresco { background: var(--fresco); color: #fff; }
.btn-acento { background: var(--acento); color: #3a2a00; }

.btn-ghost { background: transparent; color: var(--texto); border-color: var(--borde); }
.btn-ghost:hover { background: var(--fondo); }

.btn-peligro { background: transparent; color: var(--marca); border-color: var(--marca); }
.btn-peligro:hover { background: var(--marca); color: #fff; }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-bloque { width: 100%; }


/* ===================  Tarjetas  =================== */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra-sm);
}

/* Tarjeta-enlace del panel */
.panel-tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra-sm);
    color: var(--texto);
    transition: transform var(--transicion), box-shadow var(--transicion);
    display: block;
}
.panel-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); text-decoration: none; }
.panel-tarjeta .titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 17px; }
.panel-tarjeta .sub { color: var(--texto-suave); font-size: 13px; margin-top: 4px; }


/* ===================  Formularios  =================== */
.campo { margin-bottom: 16px; }
.campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 6px;
}
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--fuente-texto);
    font-size: 15px;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, .15);
}
.campo .ayuda { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }


/* ===================  Tablas  =================== */
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
}
.tabla th, .tabla td { padding: 13px 16px; text-align: left; }
.tabla thead th {
    background: var(--fondo);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borde);
}
.tabla tbody tr { border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child { border-bottom: 0; }
.tabla tbody tr:hover { background: #FFFCF7; }


/* ===================  Badges de estado  =================== */
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--radio-pill);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}
.badge--pendiente_pago { background: var(--estado-pendiente); color: #3a2a00; }
.badge--pagado         { background: var(--estado-pagado); }
.badge--en_preparacion { background: var(--acento); color: #3a2a00; }
.badge--en_camino      { background: var(--estado-camino); }
.badge--entregado      { background: var(--estado-entregado); }
.badge--cancelado      { background: var(--estado-cancelado); }
.badge--pago_rechazado { background: var(--estado-rechazado); }
.badge--reembolsado    { background: var(--texto-suave); }


/* ===================  Mensajes / alertas  =================== */
.alerta {
    padding: 12px 14px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    margin-bottom: 14px;
}
.alerta-error { background: #FDECEA; color: #B71C1C; }
.alerta-ok    { background: #E7F6F3; color: #1B6F64; }


/* ===================  Estado vacío  =================== */
.vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--texto-suave);
}
.vacio h2 { color: var(--texto); }


/* ===================  Pantalla centrada (login)  =================== */
.pantalla-centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tarjeta-auth {
    width: 100%;
    max-width: 360px;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 34px 30px;
}
.tarjeta-auth .marca-logo { justify-content: center; font-size: 22px; margin-bottom: 4px; }
.tarjeta-auth .tagline { text-align: center; color: var(--texto-suave); font-size: 13px; margin: 0 0 22px; }
.tarjeta-auth .barra-oro { height: 4px; width: 46px; background: var(--acento); border-radius: 999px; margin: 0 auto 22px; }


/* ===================  Hero del panel admin  =================== */
.hero-admin {
    background: var(--marca);
    color: #fff;
    border-radius: var(--radio);
    padding: 26px 28px;
    box-shadow: var(--sombra-sm);
}
.hero-admin h2 { color: #fff; margin: 0 0 4px; }
.hero-admin p { margin: 0; opacity: .92; font-size: 14px; }

/* Icono circular para tarjetas del panel */
.ico-circulo {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #FCE9CF;
    color: var(--acento);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}


/* ===================  Accesibilidad  =================== */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .btn:hover, .panel-tarjeta:hover { transform: none; }
}

/* =================================================================
   SITIO PÚBLICO — estilo editorial (limpio, claro, fotográfico)
   Hero a pantalla completa, Playfair en títulos, mucho aire.
   ================================================================= */

/* Cabecera (transparente sobre el hero, sólida al hacer scroll / en otras páginas) */
.sitio-header { position: sticky; top: 0; z-index: 50; background: rgba(250,247,242,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); transition: background .3s ease, border-color .3s ease; }
.sitio-header-inner { max-width: 1280px; margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo-lockup { display: flex; align-items: center; text-decoration: none; }
.logo-lockup img { height: 64px; width: auto; display: block; transition: filter .3s ease; }
.nav-publico { display: flex; align-items: center; gap: 34px; }
.nav-publico .enlaces { display: flex; gap: 30px; }
.nav-publico a { color: var(--texto); font-size: 13px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; text-decoration: none; }
.nav-publico a:hover { color: var(--marca); }
/* Línea roja bajo la opción activa */
.nav-publico .enlaces a { position: relative; padding-bottom: 6px; }
.nav-publico .enlaces a.activo { color: var(--marca); }
.nav-publico .enlaces a.activo::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--marca); border-radius: 2px;
}
/* En el menú transparente sobre el hero, la línea va blanca para que se vea */
.sitio-header.nav-hero .nav-publico .enlaces a.activo { color: #fff; }
.sitio-header.nav-hero .nav-publico .enlaces a.activo::after { background: #fff; }
.sitio-header.nav-hero.solido .nav-publico .enlaces a.activo { color: var(--marca); }
.sitio-header.nav-hero.solido .nav-publico .enlaces a.activo::after { background: var(--marca); }
.btn-carrito { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 9px 18px; border-radius: 2px; border: 1px solid var(--texto); cursor: pointer; transition: all .2s ease; }
.btn-carrito:hover { background: var(--texto); color: #fff; }

/* Variante transparente sobre el hero */
.sitio-header.nav-hero { position: absolute; left: 0; right: 0; background: rgba(0,0,0,.4); border-bottom-color: transparent; backdrop-filter: none; }
.sitio-header.nav-hero .nav-publico a { color: #fff; }
.sitio-header.nav-hero .btn-carrito { color: #fff; border-color: rgba(255,255,255,.7); }
.sitio-header.nav-hero .btn-carrito:hover { background: #fff; color: var(--texto); }
.sitio-header.nav-hero.solido { position: fixed; left: 0; right: 0; background: rgba(250,247,242,.96); backdrop-filter: blur(8px); border-bottom-color: var(--borde); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.sitio-header.nav-hero.solido .nav-publico a { color: var(--texto); }
.sitio-header.nav-hero.solido .btn-carrito { color: var(--texto); border-color: var(--texto); }

/* Botón principal */
.btn-hero { display: inline-block; background: var(--marca); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 34px; border-radius: 2px; border: 0; cursor: pointer; text-decoration: none; transition: background .2s ease; }
.btn-hero:hover { background: var(--marca-oscura); text-decoration: none; }
.btn-bloque { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; }

/* Hero a pantalla completa */
.carrusel { position: relative; }
.carrusel-pista { position: relative; height: clamp(480px, 90vh, 780px); overflow: hidden; background: #2a1d16; }
.carrusel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; background-size: cover; background-position: center; }
.carrusel-slide.activa { opacity: 1; }
.carrusel-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,5,.5), rgba(10,7,5,.18) 38%, rgba(10,7,5,.72)); }
.carrusel-cont { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 30px 0; }
.carrusel-cont .eb { color: #fff; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; opacity: .9; margin-bottom: 18px; }
.carrusel-cont h2 { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 18px; color: #fff; max-width: 1040px; }
.carrusel-cont p { font-size: clamp(18px, 2.3vw, 24px); margin: 0 0 30px; max-width: 620px; color: rgba(255,255,255,.92); }
.carrusel-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 3; transition: background .2s ease; }
.carrusel-flecha:hover { background: rgba(255,255,255,.32); }
.carrusel-flecha.izq { left: 26px; } .carrusel-flecha.der { right: 26px; }
.carrusel-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; gap: 9px; justify-content: center; z-index: 3; }
.carrusel-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); border: 0; cursor: pointer; transition: all var(--transicion); }
.carrusel-dot.activa { background: #fff; width: 28px; border-radius: 999px; }

/* Encabezado de sección */
.seccion-pub { max-width: 1200px; margin: 0 auto; padding: 84px 40px 0; }
.seccion-cab { text-align: center; }
.seccion-cab .eb { color: var(--marca); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.seccion-cab h2 { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); margin: 10px 0 0; color: var(--texto); }

/* Chips de categoría */
.chips { display: flex; gap: 12px; overflow-x: auto; max-width: 1200px; margin: 30px auto 0; padding: 0 40px 6px; justify-content: center; flex-wrap: wrap; }
.chip { flex: 0 0 auto; font-size: 13px; font-weight: 500; letter-spacing: .5px; padding: 9px 20px; border-radius: 2px; background: transparent; border: 1px solid var(--borde); color: var(--texto); cursor: pointer; text-decoration: none; transition: all .2s ease; }
.chip:hover, .chip.activa { background: var(--texto); color: #fff; border-color: var(--texto); text-decoration: none; }

.bloque-fav { max-width: 1200px; margin: 0 auto; padding: 84px 40px 0; }

/* Productos (fotografía protagonista) */
.menu-seccion { scroll-margin-top: 90px; }
.menu-seccion h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 26px; color: var(--texto); margin: 0 0 6px; padding-top: 10px; }
.producto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 36px; margin-top: 46px; }
.producto-card { background: transparent; border: 0; cursor: pointer; text-align: left; }
.producto-foto { position: relative; height: 240px; border-radius: 4px; overflow: hidden; background-color: #ece1d2; }
.producto-foto .foto-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.producto-card:hover .foto-img { transform: scale(1.06); }
.producto-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--marca); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; z-index: 2; }
.producto-body { padding: 16px 2px 0; }
.producto-nombre { font-family: var(--fuente-display); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--texto); margin-bottom: 6px; }
.producto-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.producto-desc { font-size: 13px; color: var(--texto-suave); flex: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.producto-precio { font-family: var(--fuente-display); font-weight: 600; font-size: 18px; color: var(--texto); white-space: nowrap; }

/* Imagen + texto */
.feature { display: grid; grid-template-columns: 1fr 1fr; margin-top: 96px; align-items: stretch; }
.feature .img { min-height: 460px; background-size: cover; background-position: center; background-color: #ece1d2; }
.feature .txt { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 70px 64px; }
.feature .txt .eb { color: var(--marca); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.feature .txt h3 { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px); margin: 14px 0 18px; color: var(--texto); line-height: 1.15; }
.feature .txt p { color: var(--texto-suave); font-size: 15px; line-height: 1.75; margin: 0 0 26px; }
.feature .txt a { color: var(--texto); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; border-bottom: 2px solid var(--marca); padding-bottom: 5px; width: fit-content; text-decoration: none; }
.feature .txt a:hover { color: var(--marca); }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } .feature .img { min-height: 300px; } .feature .txt { padding: 48px 32px; } }

/* Frase a todo el ancho */
.quote { position: relative; height: 340px; margin-top: 0; background-size: cover; background-position: center; background-color: #2a1d16; display: flex; align-items: center; justify-content: center; text-align: center; }
.quote::before { content: ""; position: absolute; inset: 0; background: rgba(10,7,5,.55); }
.quote p { position: relative; font-family: var(--fuente-display); font-style: italic; font-weight: 500; color: #fff; font-size: clamp(24px, 3.4vw, 40px); max-width: 780px; padding: 0 30px; margin: 0; }

/* Galería */
.galeria-wrap { max-width: 1280px; margin: 0 auto; padding: 84px 40px 0; }
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 165px; gap: 12px; margin-top: 46px; }
.galeria div { border-radius: 4px; background-size: cover; background-position: center; background-color: #ece1d2; overflow: hidden; }
.galeria .grande { grid-row: span 2; }
@media (max-width: 700px) { .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; } .galeria .grande { grid-column: span 2; } }

/* Carrito flotante */
.carrito-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--texto); color: #fff; transform: translateY(120%); transition: transform .3s ease; }
.carrito-bar.visible { transform: translateY(0); }
.carrito-bar-inner { max-width: 1280px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carrito-bar .total { font-family: var(--fuente-display); font-weight: 600; }

/* Modal de detalle */
.modal-fondo { position: fixed; inset: 0; background: rgba(20,12,8,.6); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-fondo.abierto { display: flex; }
.modal { position: relative; background: #fff; border-radius: 6px; max-width: 820px; width: 100%; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.modal-foto { background-size: cover; background-position: center; background-color: #ece1d2; min-height: 340px; }
.modal-cuerpo { padding: 40px; }
.modal-cuerpo h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 28px; margin: 0 0 10px; color: var(--texto); }
.modal-cuerpo .precio { font-family: var(--fuente-display); font-weight: 600; font-size: 24px; color: var(--marca); margin: 0 0 18px; }
.modal-cuerpo .desc { color: var(--texto-suave); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.modal-cerrar { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); border: 0; font-size: 20px; cursor: pointer; z-index: 2; color: var(--texto); }
.qty { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.qty button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; font-size: 20px; cursor: pointer; }
.qty span { font-weight: 600; font-size: 18px; min-width: 22px; text-align: center; }
@media (max-width: 640px) { .modal { grid-template-columns: 1fr; } .modal-foto { min-height: 220px; } }

/* Footer */
.sitio-footer { background: #1b1714; color: #a89c90; margin-top: 60px; padding: 70px 40px 30px; }
/* Cuatro columnas repartidas en todo el ancho del pie */
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.1fr; gap: 40px; align-items: start; }
.footer-logo { height: 56px; width: auto; margin-bottom: 14px; }
.footer-tag { font-family: var(--fuente-display); font-style: italic; color: #d8b15a; font-size: 19px; margin: 4px 0 0; }
.sitio-footer h4 { color: #fff; margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.sitio-footer a, .sitio-footer p, .sitio-footer span { color: #a89c90; text-decoration: none; font-size: 14px; line-height: 1.5; }
.sitio-footer .col-enlaces a, .sitio-footer .col-legal a { display: block; margin-bottom: 9px; }
/* Botón de Google Play en el pie */
.footer-app-txt { font-size: 13.5px; opacity: .85; margin: 0 0 14px; max-width: 220px; }
.footer-app-btn { display: inline-flex; align-items: center; gap: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 16px; text-decoration: none; color: #fff; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.footer-app-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.32); transform: translateY(-2px); text-decoration: none; color: #fff; }
.footer-app-btn i { font-size: 28px; color: #fff; }
.footer-app-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.footer-app-btn small { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; opacity: .8; }
.footer-app-btn strong { font-size: 15.5px; font-weight: 600; }
/* Variante "muy pronto": no es un enlace, se ve más apagado */
.footer-app-btn--pronto { cursor: default; opacity: .72; }
.footer-app-btn--pronto:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); transform: none; }
.sitio-footer a:hover { color: #fff; }
.footer-redes { display: flex; gap: 12px; margin-top: 16px; }
.footer-redes a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; margin: 0; transition: background .2s ease; }
.footer-redes a:hover { background: var(--marca); }
.footer-copy { max-width: 1200px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #8a7e73; text-align: center; }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 820px) { .sitio-header-inner { padding: 14px 20px; } .nav-publico .enlaces { display: none; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .carrusel-flecha { display: none; } .seccion-pub, .bloque-fav { padding-left: 20px; padding-right: 20px; } }



/* Páginas de contenido del sitio (Nosotros, Contacto, Carrito, Pedido) */
.pagina { max-width: 1100px; margin: 0 auto; padding: 66px 40px 0; }
.pagina--angosta { max-width: 760px; }
.pagina-cab { text-align: center; margin-bottom: 40px; }
.pagina-cab .eb { color: var(--marca); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.pagina-cab h1 { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); margin: 10px 0 0; color: var(--texto); }
.prosa { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.85; color: #5a5048; }
.pagina .tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 26px; box-shadow: none; }
.pagina .tarjeta h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 20px; }
.btn-wa { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .3px; padding: 12px 22px; border-radius: 2px; text-decoration: none; }
.btn-wa:hover { background: #1ebe5a; }
@media (max-width: 760px) { .pagina { padding: 44px 20px 0; } }

/* =================================================================
   PANEL ADMIN PRO — layout tipo Shopify (sidebar + dashboard)
   ================================================================= */
.admin-shell { display: flex; min-height: 100vh; background: #f6f6f7; }
.admin-sidebar { width: 248px; flex: 0 0 248px; background: #fff; border-right: 1px solid #e3e3e3; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.admin-sidebar .marca { padding: 14px 18px; border-bottom: 1px solid #ededed; }
.admin-sidebar .marca img { height: 42px; width: auto; display: block; }
.admin-nav { padding: 10px 12px; overflow-y: auto; flex: 1; }
.admin-nav .grupo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; padding: 14px 10px 6px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #303030; font-family: var(--fuente-texto); font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 2px; position: relative; }
.admin-nav a .ti { font-size: 18px; color: #5c5f62; }
.admin-nav a:hover { background: #f3f3f3; }
.admin-nav a.activo { background: #f1f1f1; color: #1a1a1a; font-weight: 600; }
.admin-nav a.activo::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--marca); }
.admin-nav a.activo .ti { color: var(--marca); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { height: 56px; background: #fff; border-bottom: 1px solid #e3e3e3; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
.admin-topbar .titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 16px; color: #1a1a1a; }
.admin-user { display: flex; align-items: center; gap: 12px; }
.admin-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.admin-user .nom { font-size: 14px; color: #303030; font-weight: 500; }
.admin-content { padding: 28px 32px; width: 100%; max-width: 1120px; margin: 0 auto; }

.saludo { margin-bottom: 22px; }
.saludo h1 { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; margin: 0; color: #1a1a1a; }
.saludo p { color: #6b6b6b; font-size: 14px; margin: 4px 0 0; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 16px 18px; }
.kpi .lab { display: flex; align-items: center; gap: 7px; color: #6b6b6b; font-size: 13px; font-weight: 500; }
.kpi .lab .ti { font-size: 16px; }
.kpi .val { font-family: var(--fuente-titulo); font-size: 26px; font-weight: 600; color: #1a1a1a; margin-top: 8px; line-height: 1; }
.kpi .ssub { font-size: 12px; color: #8a8a8a; margin-top: 4px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }

.panel-pro { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; margin-bottom: 20px; }
.panel-pro .cab { padding: 14px 18px; border-bottom: 1px solid #ededed; display: flex; align-items: center; justify-content: space-between; }
.panel-pro .cab h2 { font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; margin: 0; color: #1a1a1a; }
.panel-pro .cab a { font-size: 13px; color: var(--marca); font-weight: 600; text-decoration: none; }
.li-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f3f3f3; font-size: 14px; color: #303030; }
.li-item:last-child { border-bottom: 0; }
.li-item .crece { flex: 1; min-width: 0; }
.li-item .crece b { font-weight: 600; color: #1a1a1a; }
.li-item .crece .meta { color: #8a8a8a; font-size: 12px; }
.li-item .monto { font-weight: 600; color: #1a1a1a; }
.li-vacio { padding: 26px 18px; text-align: center; color: #8a8a8a; font-size: 14px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

.accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.acceso { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; text-decoration: none; color: #1a1a1a; transition: border-color .15s ease, box-shadow .15s ease; }
.acceso:hover { border-color: #c9c9c9; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.acceso .ic { width: 38px; height: 38px; border-radius: 9px; background: #f3f3f3; color: var(--marca); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.acceso .tt { font-weight: 600; font-size: 14px; }
.acceso .ss { font-size: 12px; color: #8a8a8a; }

.seccion-titulo { font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 4px 0 14px; }

.menu-btn { display: none; background: transparent; border: 0; font-size: 24px; color: #1a1a1a; cursor: pointer; padding: 0; line-height: 1; }
.admin-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 110; }
@media (max-width: 860px) {
    .menu-btn { display: inline-flex; align-items: center; }
    .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 120; transform: translateX(-100%); transition: transform .28s ease; box-shadow: 8px 0 30px rgba(0,0,0,.18); }
    .admin-sidebar.abierto { transform: translateX(0); }
    .admin-backdrop.abierto { display: block; }
    .admin-content { padding: 22px 18px; }
    .accesos { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: 1fr 1fr; }
}

/* Título de página dentro del panel */
.admin-h1 { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; color: #1a1a1a; margin: 0 0 22px; }
.admin-content .tarjeta { box-shadow: none; }

/* =================================================================
   MENÚ MÓVIL DEL SITIO (front) — botón hamburguesa + panel lateral
   ================================================================= */
.nav-toggle { display: none; background: transparent; border: 0; color: var(--texto); font-size: 27px; cursor: pointer; line-height: 1; padding: 0; }
.sitio-header.nav-hero .nav-toggle { color: #fff; }
.sitio-header.nav-hero.solido .nav-toggle { color: var(--texto); }
@media (max-width: 820px) { .nav-toggle { display: inline-flex; align-items: center; } }

.menu-movil-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.menu-movil-fondo.abierto { opacity: 1; visibility: visible; }
.menu-movil { position: fixed; top: 0; right: 0; bottom: 0; width: min(80vw, 320px); background: #fff; z-index: 100; transform: translateX(100%); transition: transform .3s ease; padding: 76px 30px 30px; display: flex; flex-direction: column; box-shadow: -12px 0 34px rgba(0,0,0,.14); }
.menu-movil.abierto { transform: translateX(0); }
.menu-movil a { color: var(--texto); font-size: 16px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; padding: 16px 0; border-bottom: 1px solid var(--borde); text-decoration: none; }
.menu-movil a:hover { color: var(--marca); }
.menu-movil-cerrar { position: absolute; top: 22px; right: 22px; background: transparent; border: 0; font-size: 27px; color: var(--texto); cursor: pointer; line-height: 1; }

/* Banda superior de páginas internas (Contacto, Carrito, Nosotros, Pedido) */
.page-hero { position: relative; height: clamp(260px, 38vh, 360px); background-size: cover; background-position: center; background-color: #2a1d16; display: flex; align-items: center; justify-content: center; text-align: center; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,5,.6), rgba(10,7,5,.32) 50%, rgba(10,7,5,.62)); }
.page-hero .inner { position: relative; padding: 56px 30px 0; }
.page-hero .eb { color: #fff; opacity: .9; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 12px; }
.page-hero h1 { font-family: var(--fuente-display); font-weight: 600; color: #fff; font-size: clamp(32px, 5vw, 52px); margin: 0; }

/* Mejor legibilidad del menú transparente sobre la foto */
.sitio-header.nav-hero .nav-publico a,
.sitio-header.nav-hero .btn-carrito,
.sitio-header.nav-hero .nav-toggle { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.sitio-header.nav-hero.solido .nav-publico a,
.sitio-header.nav-hero.solido .btn-carrito,
.sitio-header.nav-hero.solido .nav-toggle { text-shadow: none; }

/* =================================================================
   MISTER POLLO — Rediseño editorial premium (prefijo mp-)
   ================================================================= */
:root {
    --mp-rojo:       #C8211A;
    --mp-rojo-osc:   #A01812;
    --mp-dorado:     #D4A017;
    --mp-crema:      #FFFFFF;
    --mp-tinta:      #1A1410;
    --mp-tinta-suave:#6B5F55;
    --mp-borde:      rgba(26,20,16,.1);
}
.mp-hero *, .mp-favoritos *, .mp-feature *,
.mp-menu-sec *, .mp-quote *, .mp-galeria-sec *,
.mp-modal *, .mp-ticker *, .mp-carrito-float * { box-sizing: border-box; }

.mp-hero { position: relative; height: clamp(520px, 88vh, 780px); background: var(--mp-tinta); display: flex; align-items: flex-end; overflow: hidden; }
.mp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mp-hero-slides { position: absolute; inset: 0; }
.mp-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; background-size: cover; background-position: center; display: flex; align-items: flex-end; pointer-events: none; }
.mp-hero-slide.activa { opacity: 1; pointer-events: auto; }
.mp-hero-overlay { display: none; }
.mp-hero-content { position: relative; z-index: 3; padding: 0 48px 80px; max-width: 760px; }
.mp-eyebrow-hero { color: var(--mp-dorado); font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.mp-eyebrow-hero::before { content: ''; width: 28px; height: 1px; background: var(--mp-dorado); display: block; }
.mp-hero-h1 { font-family: 'Poppins', system-ui, sans-serif; font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.1; color: #fff; margin: 0 0 20px; }
.mp-hero-h1 em { font-style: italic; color: var(--mp-dorado); }
.mp-hero-desc { color: rgba(255,255,255,.85); font-size: 20px; line-height: 1.6; margin: 0 0 38px; max-width: 560px; font-weight: 300; }
.mp-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.mp-btn-p { display: inline-flex; align-items: center; gap: 8px; background: var(--mp-rojo); color: #fff; padding: 15px 36px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; border-radius: 2px; text-decoration: none; transition: background .2s ease; }
.mp-btn-p:hover { background: var(--mp-rojo-osc); text-decoration: none; }
.mp-btn-s { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; padding: 15px 36px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.4); cursor: pointer; border-radius: 2px; text-decoration: none; transition: all .2s ease; }
.mp-btn-s:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); text-decoration: none; }
.mp-btn-bloque { width: 100%; justify-content: center; }

.mp-hero-stats { position: absolute; right: 48px; bottom: 80px; z-index: 3; display: flex; flex-direction: column; gap: 22px; align-items: flex-end; }
.mp-stat { text-align: right; }
.mp-stat-n { font-family: 'Poppins', system-ui, sans-serif; font-size: 38px; font-weight: 600; color: #fff; line-height: 1; }
.mp-stat-l { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

.mp-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 20px; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.mp-flecha:hover { background: rgba(255,255,255,.28); }
.mp-flecha.izq { left: 24px; }
.mp-flecha.der { right: 24px; }
.mp-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 4; }
.mp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; cursor: pointer; transition: all .25s ease; }
.mp-dot.activa { background: #fff; width: 26px; border-radius: 999px; }

.mp-ticker { background: var(--mp-rojo); padding: 14px 0; overflow: hidden; }
.mp-ticker-inner { display: flex; gap: 48px; white-space: nowrap; animation: mp-ticker 22s linear infinite; width: max-content; }
.mp-ticker-item { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; }
.mp-ticker-item::after { content: '✦'; font-size: 8px; opacity: .65; }
@keyframes mp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mp-favoritos, .mp-menu-sec, .mp-galeria-sec { max-width: 1200px; margin: 0 auto; padding: 96px 40px 0; }
.mp-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 52px; }
.mp-eyebrow { color: var(--mp-rojo); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.mp-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--mp-rojo); }
.mp-eyebrow--dorado { color: var(--mp-dorado); }
.mp-eyebrow--dorado::before { background: var(--mp-dorado); }
.mp-h2 { font-family: 'Poppins', system-ui, sans-serif; font-size: clamp(28px, 4vw, 46px); font-weight: 600; color: var(--mp-tinta); line-height: 1.1; margin: 0; }
.mp-h2--blanco { color: #fff; margin-bottom: 22px; }
.mp-cab-link { color: var(--mp-tinta); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--mp-tinta); padding-bottom: 3px; white-space: nowrap; }
.mp-cab-link:hover { color: var(--mp-rojo); border-color: var(--mp-rojo); }

.mp-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.mp-prod-card { cursor: pointer; position: relative; background: #fff; border: 1px solid #EFE9E2; border-radius: 16px; text-align: left; display: flex; flex-direction: column; height: 100%; overflow: hidden; box-shadow: 0 4px 16px rgba(26,20,16,.07); transition: box-shadow .25s ease, transform .25s ease; }
.mp-prod-card:hover { box-shadow: 0 12px 30px rgba(26,20,16,.13); transform: translateY(-3px); }
.mp-prod-img { position: relative; height: 300px; overflow: hidden; background: #e8ddd0; }
/* Producto sin foto: muestra el logo completo y centrado sobre fondo claro */
.mp-prod-img-inner.es-logo { background-size: contain !important; background-repeat: no-repeat; background-position: center; background-color: #F7F3EE; }
.mp-menu-item-img.es-logo { background-size: contain !important; background-repeat: no-repeat; background-position: center; background-color: #F7F3EE; }
.mp-prod-card:hover .mp-prod-img-inner.es-logo { transform: none; }
.mp-prod-img-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .65s ease; }
.mp-prod-card:hover .mp-prod-img-inner { transform: scale(1.06); }
.mp-prod-badge { position: absolute; top: 14px; left: 14px; background: var(--mp-rojo); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 13px; border-radius: 2px; z-index: 2; }
.mp-prod-add { position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: none; cursor: pointer; font-size: 20px; color: var(--mp-tinta); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; box-shadow: 0 2px 12px rgba(0,0,0,.15); z-index: 3; }
.mp-prod-card:hover .mp-prod-add { opacity: 1; }
.mp-prod-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.mp-prod-nombre { font-family: 'Poppins', system-ui, sans-serif; font-size: 22px; font-weight: 600; color: var(--mp-tinta); margin-bottom: 8px; line-height: 1.15; }
.mp-prod-pie { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; padding-top: 6px; }
.mp-prod-desc { font-size: 13px; color: var(--mp-tinta-suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px; }
.mp-prod-precio { font-family: 'Poppins', system-ui, sans-serif; font-size: 22px; font-weight: 700; color: var(--mp-rojo); white-space: nowrap; }
/* Estrellas de calificación en tarjetas del inicio */
.mp-prod-rating { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.mp-prod-rating .mp-estr { font-size: 15px; line-height: 1; color: #E0E0E0; }
.mp-prod-rating .mp-estr.llena { color: #F5A623; }
.mp-prod-rating .mp-estr.media { color: #F5A623; opacity: .55; }
.mp-prod-rating .mp-estr.vacia { color: #E0E0E0; }
.mp-prod-rating-num { font-size: 13px; font-weight: 600; color: var(--mp-tinta-suave); margin-left: 5px; }

.mp-feature { display: grid; grid-template-columns: 1fr 1fr; margin-top: 96px; min-height: 560px; }
.mp-feat-img { background-size: cover; background-position: center; background-color: #e8ddd0; min-height: 460px; }
.mp-feat-txt { background: var(--mp-tinta); display: flex; flex-direction: column; justify-content: center; padding: 72px 64px; }
.mp-feat-txt p { color: rgba(255,255,255,.6); font-size: 16px; line-height: 1.85; margin: 0 0 36px; font-weight: 300; }
.mp-feat-txt a { color: var(--mp-dorado); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(212,160,23,.4); padding-bottom: 5px; width: fit-content; display: inline-block; }
.mp-feat-txt a:hover { border-color: var(--mp-dorado); text-decoration: none; }
.mp-feat-puntos { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.mp-feat-puntos li { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.8); font-size: 14px; }
.mp-feat-ico { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.28); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mp-dorado); }

.mp-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 0; }
.mp-cat { padding: 10px 20px; border: none; border-radius: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; cursor: pointer; background: #fff; color: var(--mp-tinta-suave); box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: all .18s ease; }
.mp-cat:hover { color: var(--mp-rojo); }
.mp-cat.activo { background: var(--mp-rojo); color: #fff; box-shadow: 0 4px 14px rgba(200,33,26,.28); }
.mp-menu-grupo { margin-top: 56px; }
.mp-menu-cat-titulo { font-family: 'Poppins', system-ui, sans-serif; font-size: 24px; font-weight: 600; color: var(--mp-tinta); margin: 0 0 20px; }
.mp-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.mp-menu-item { background: #fff; border: none; border-radius: 18px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,.06); transition: box-shadow .2s ease, transform .2s ease; }
.mp-menu-item:hover { box-shadow: 0 14px 32px rgba(0,0,0,.12); transform: translateY(-4px); }
.mp-menu-item-img { width: 100%; height: 170px; background: #f0eae2 center/cover no-repeat; }
.mp-menu-item-info { padding: 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mp-menu-item-nombre { font-family: 'Poppins', system-ui, sans-serif; font-size: 17px; font-weight: 600; color: var(--mp-tinta); margin-bottom: 5px; }
.mp-menu-item-desc { font-size: 12px; color: var(--mp-tinta-suave); line-height: 1.5; margin-bottom: 14px; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-menu-item-pie { display: flex; align-items: center; justify-content: space-between; }
.mp-menu-item-precio { font-family: 'Poppins', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--mp-rojo); }
.mp-menu-item-add { width: 36px; height: 36px; border-radius: 12px; border: none; background: var(--mp-rojo); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 3px 10px rgba(200,33,26,.25); transition: all .18s ease; }
.mp-menu-item-add:hover { background: var(--mp-rojo-osc); transform: scale(1.08); }
.mp-vacio { text-align: center; color: var(--mp-tinta-suave); padding: 48px 0; }

.mp-quote { position: relative; height: 380px; margin-top: 96px; background-size: cover; background-position: center; background-color: #2a1d16; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.mp-quote::before { content: ''; position: absolute; inset: 0; background: rgba(10,7,4,.72); }
.mp-quote-inner { position: relative; padding: 0 40px; max-width: 820px; }
.mp-quote-mark { font-family: 'Poppins', system-ui, sans-serif; font-size: 120px; font-weight: 700; color: var(--mp-dorado); opacity: .3; line-height: .6; display: block; margin-bottom: 14px; }
.mp-quote-txt { font-family: 'Poppins', system-ui, sans-serif; font-style: italic; font-weight: 500; color: #fff; font-size: clamp(22px, 3vw, 38px); line-height: 1.35; margin: 0; }
.mp-quote-autor { color: var(--mp-dorado); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; margin-top: 22px; }

.mp-galeria-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 10px; margin-top: 50px; }
.mp-gal-item { border-radius: 4px; background-size: cover; background-position: center; background-color: #e8ddd0; overflow: hidden; position: relative; cursor: pointer; }
.mp-gal-item.grande { grid-row: span 2; }
.mp-gal-overlay { position: absolute; inset: 0; background: rgba(10,7,4,0); transition: background .3s ease; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; }
.mp-gal-item:hover .mp-gal-overlay { background: rgba(10,7,4,.35); }

.mp-modal-fondo { position: fixed; inset: 0; background: rgba(20,12,8,.65); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.mp-modal-fondo.abierto { display: flex; }
.mp-modal { position: relative; background: #fff; border-radius: 6px; max-width: 820px; width: 100%; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.mp-modal-foto { background-size: cover; background-position: center; background-color: #e8ddd0; min-height: 340px; }
.mp-modal-cuerpo { padding: 40px; }
.mp-modal-cuerpo h3 { font-family: 'Poppins', system-ui, sans-serif; font-size: 28px; font-weight: 600; color: var(--mp-tinta); margin: 0 0 10px; }
.mp-modal-precio { font-family: 'Poppins', system-ui, sans-serif; font-size: 24px; font-weight: 600; color: var(--mp-rojo); margin: 0 0 16px; }
.mp-modal-desc { color: var(--mp-tinta-suave); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.mp-modal-cerrar { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); border: 0; font-size: 20px; cursor: pointer; z-index: 2; color: var(--mp-tinta); display: flex; align-items: center; justify-content: center; }
.mp-qty { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.mp-qty button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mp-borde); background: #fff; font-size: 20px; cursor: pointer; color: var(--mp-tinta); display: flex; align-items: center; justify-content: center; }
.mp-qty span { font-weight: 600; font-size: 18px; min-width: 22px; text-align: center; }

.mp-carrito-float { position: fixed; bottom: 28px; right: 28px; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.mp-carrito-float.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mp-carrito-btn { display: flex; align-items: center; gap: 12px; background: var(--mp-tinta); color: #fff; padding: 16px 26px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-decoration: none; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,.25); transition: background .2s ease; }
.mp-carrito-btn:hover { background: var(--mp-rojo); text-decoration: none; }
.mp-carrito-badge { background: var(--mp-rojo); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

@media (max-width: 900px) {
    .mp-hero { height: clamp(420px, 70vh, 560px); }
    .mp-hero-content { padding: 0 24px 64px; }
    .mp-hero-stats { display: none; }
    .mp-favoritos, .mp-menu-sec, .mp-galeria-sec { padding-left: 20px; padding-right: 20px; }
    .mp-prod-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .mp-feature { grid-template-columns: 1fr; }
    .mp-feat-img { min-height: 300px; }
    .mp-feat-txt { padding: 48px 32px; }
    .mp-menu-grid { grid-template-columns: 1fr 1fr; }
    .mp-sec-cab { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
    .mp-prod-grid { grid-template-columns: 1fr; }
    .mp-menu-grid { grid-template-columns: 1fr; }
    .mp-galeria-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
    .mp-galeria-grid .mp-gal-item.grande { grid-column: span 2; }
    .mp-modal { grid-template-columns: 1fr; }
    .mp-modal-foto { min-height: 220px; }
    .mp-hero { height: clamp(360px, 56vh, 460px); }
    .mp-hero-content { padding: 0 20px 40px; }
    .mp-hero-btns { flex-direction: column; }
    .mp-flecha { display: none; }
}

/* Administrador de secciones del inicio (drag & drop) */
.secciones-lista { list-style: none; margin: 0 0 22px; padding: 0; max-width: 600px; }
.seccion-fila { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.seccion-fila.arrastrando { opacity: .4; }
.seccion-agarre { color: #b3b3b3; cursor: grab; font-size: 20px; display: flex; }
.seccion-nombre { flex: 1; font-weight: 600; color: #1a1a1a; font-size: 15px; }
.seccion-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b6b6b; cursor: pointer; white-space: nowrap; }
.seccion-switch input { width: auto; }

/* Menú: barra de filtros fija + buscador */
.mp-menu-filtros { position: sticky; top: 78px; z-index: 20; background: var(--mp-crema); padding: 18px 0; margin-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mp-buscador { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.mp-buscador i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mp-tinta-suave); font-size: 18px; pointer-events: none; }
.mp-buscador input { width: 100%; padding: 14px 18px 14px 48px; border: 1.5px solid transparent; border-radius: 16px; font-size: 14.5px; font-family: inherit; background: #fff; color: var(--mp-tinta); box-shadow: 0 4px 16px rgba(0,0,0,.06); transition: box-shadow .2s ease, border-color .2s ease; }
.mp-buscador input::placeholder { color: #b3aaa0; }
.mp-buscador input:focus { outline: none; border-color: var(--mp-rojo); box-shadow: 0 6px 20px rgba(200,33,26,.12); }
.mp-sin-resultados { text-align: center; color: var(--mp-tinta-suave); padding: 48px 0; font-size: 15px; }

/* Lightbox de galería */
.mp-lightbox { position: fixed; inset: 0; background: rgba(8,5,3,.92); z-index: 300; display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.mp-lightbox.abierto { display: flex; }
.mp-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mp-lightbox-cerrar { position: absolute; top: 24px; right: 28px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mp-lightbox-cerrar:hover { background: rgba(255,255,255,.28); }
@media (max-width: 600px) { .mp-menu-filtros { top: 64px; } .mp-buscador { max-width: 100%; } }

/* Menú: botón "Cargar más" + contador */
.mp-cargar-mas-wrap { text-align: center; margin-top: 48px; }
.mp-menu-contador { font-size: 13px; color: var(--mp-tinta-suave); margin: 0 0 16px; letter-spacing: .5px; }
.mp-cargar-mas { background: transparent; color: var(--mp-tinta); border: 1px solid var(--mp-tinta); padding: 14px 40px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: all .2s ease; }
.mp-cargar-mas:hover { background: var(--mp-tinta); color: #fff; }

/* Pedidos (admin): modal de detalle + selector de estado */
.sel-estado { padding: 7px 10px; border: 1px solid #d8d8d8; border-radius: 8px; font-size: 13px; background: #fff; }
.pd-modal-fondo { position: fixed; inset: 0; background: rgba(20,12,8,.55); z-index: 400; display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.pd-modal-fondo.abierto { display: flex; }
.pd-modal { position: relative; background: #fff; border-radius: 14px; max-width: 620px; width: 100%; padding: 30px; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.pd-modal-cerrar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: #f1f1f1; border: 0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; }
.pd-modal-cerrar:hover { background: #e5e5e5; }

/* =================================================================
   COHESIÓN páginas públicas (Nosotros, Contacto, Carrito) con el inicio
   ================================================================= */
.btn-hero { background: var(--mp-rojo); letter-spacing: 2px; }
.btn-hero:hover { background: var(--mp-rojo-osc); }
.page-hero .eb { color: var(--mp-dorado); opacity: 1; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6); }
.page-hero .eb::before, .page-hero .eb::after { content: ''; width: 24px; height: 2px; background: var(--mp-dorado); display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pagina-cab .eb { color: var(--mp-rojo); }
.pagina .tarjeta h3, .pagina-cab h1, .prosa h2, .prosa h3 { color: var(--mp-tinta); }
.prosa a, .pagina a:not(.btn):not(.btn-hero):not(.btn-wa) { color: var(--mp-rojo); }

/* Novedades (tarjetas, inicio y listado) */
.mp-noticias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mp-noticia-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mp-borde); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.mp-noticia-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-3px); text-decoration: none; }
.mp-noticia-img { width: 100%; aspect-ratio: 16 / 9; background-color: #f7f3ee; background-position: center; background-repeat: no-repeat; background-size: contain; }
.mp-noticia-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.mp-noticia-fecha { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-rojo); font-weight: 600; margin-bottom: 8px; }
.mp-noticia-titulo { font-family: 'Poppins', system-ui, sans-serif; font-size: 20px; font-weight: 600; color: var(--mp-tinta); margin: 0 0 8px; line-height: 1.2; }
.mp-noticia-resumen { font-size: 14px; color: var(--mp-tinta-suave); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.mp-noticia-link { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mp-tinta); }
.mp-noticia-card:hover .mp-noticia-link { color: var(--mp-rojo); }
@media (max-width: 900px) { .mp-noticias-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mp-noticias-grid { grid-template-columns: 1fr; } }

/* WhatsApp flotante (siempre visible) */
.wa-flotante { position: fixed; left: 18px; bottom: 22px; z-index: 90; transition: bottom .25s ease; }
.wa-flotante a { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 13px 20px; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.wa-flotante a:hover { background: #1ebe5a; text-decoration: none; }
.wa-flotante .ti { font-size: 22px; }
body.con-barra .wa-flotante { bottom: 88px; }
@media (max-width: 600px) { .wa-flotante { left: 14px; bottom: 16px; } .wa-flotante a { padding: 13px 16px; font-size: 13px; } }

/* Visor de PDF embebido (carta, políticas) */
.visor-pdf { width: 100%; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; }
.visor-pdf iframe, .visor-pdf object { width: 100%; height: 80vh; border: 0; display: block; }
/* (La información legal ahora vive en su propia columna del pie) */
@media (max-width: 600px) { .visor-pdf iframe, .visor-pdf object { height: 70vh; } }

/* En móvil, dejar espacio al final del footer para que el botón flotante de WhatsApp
   no tape los enlaces de Línea ética / Política de datos */
@media (max-width: 600px) {
    .sitio-footer { padding-bottom: 96px; }
}

/* Reportes de ventas: barras horizontales y columnas (CSS puro) */
.barra { background: #ececec; border-radius: 6px; height: 10px; overflow: hidden; min-width: 60px; }
.barra .fill { height: 100%; background: var(--mp-rojo); border-radius: 6px; }
.rep-cols { display: flex; align-items: flex-end; gap: 6px; height: 180px; overflow-x: auto; padding-bottom: 4px; }
.rep-cols--mini { gap: 3px; height: 140px; }
.rep-col { flex: 1; min-width: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rep-cols--mini .rep-col { min-width: 18px; }
.rep-col-barra { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.rep-col-fill { width: 100%; background: var(--mp-rojo); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s ease; }
.rep-col-lbl { font-size: 10px; color: var(--texto-suave); margin-top: 6px; white-space: nowrap; }
@media (max-width: 860px) { .rep-2col { grid-template-columns: 1fr !important; } }

/* Hero: sombra al texto para mantener la imagen luminosa sin oscurecerla toda */
.mp-hero-h1, .mp-hero-desc { text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.mp-eyebrow-hero { text-shadow: 0 1px 10px rgba(0,0,0,.45); }

/* Aviso del costo de diferencia del domicilio (carrito) */
.aviso-domicilio { display: flex; gap: 10px; align-items: flex-start; background: #fff8e6; border: 1px solid #ffe2a8; color: #7a5b00; padding: 12px 14px; border-radius: 10px; margin-top: 14px; font-size: 13px; line-height: 1.55; }
.aviso-domicilio .ti { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }

/* Banner de pedidos nuevos (panel) */
.aviso-nuevos { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff3cd; border: 1px solid #ffe08a; color: #7a5b00; padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; animation: pulso-aviso 1.3s ease-in-out infinite; }
@keyframes pulso-aviso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.55); } 50% { box-shadow: 0 0 0 9px rgba(255,193,7,0); } }

/* Aviso emergente y resaltado de fila nueva (pedidos en tiempo real) */
.toast-nuevos { position: fixed; top: 18px; right: 18px; z-index: 500; background: #1b8a5a; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
@keyframes fila-nueva-flash { 0% { background: #fff3cd; } 100% { background: transparent; } }
.fila-nueva { animation: fila-nueva-flash 3.5s ease; }
.fila-nueva td:first-child { box-shadow: inset 3px 0 0 #1b8a5a; }

/* ====== Tabla de pedidos (panel) ====== */
.tabla-pedidos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-pedidos th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #8a8a8a; font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--borde); background: #fafafa; }
.tabla-pedidos td { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.tabla-pedidos tbody tr:hover { background: #fafafa; }
.tabla-pedidos .center { text-align: center; }
.tabla-pedidos .nowrap { white-space: nowrap; }
.ped-ref { font-weight: 700; letter-spacing: .3px; color: var(--texto); }
.ped-fact { font-size: 11.5px; color: #1b8a5a; margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.ped-fecha { font-size: 13px; color: #555; }
.ped-hora { color: #9a9a9a; font-size: 12px; }
.ped-cli { font-weight: 600; }
.ped-tel { color: #8a8a8a; font-size: 12.5px; margin-top: 2px; }
.ped-total { font-weight: 700; }
.ppago { font-size: 12px; font-weight: 700; }
.ppago--ok { color: #16A34A; }
.ppago--no { color: #DC2626; }
.ppago--pend { color: #D97706; }

/* Badges de estado (colores fuertes) */
.epill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: .2px; }
.epill--pendiente_pago { background: #D97706; }
.epill--pagado         { background: #16A34A; }
.epill--en_preparacion { background: #2563EB; }
.epill--en_camino      { background: #7C3AED; }
.epill--entregado      { background: #0D9488; }
.epill--cancelado      { background: #6B7280; }
.epill--pago_rechazado { background: #DC2626; }
.epill--reembolsado    { background: #475569; }

/* Campo de factura SIESA en el modal */
.pd-factura { background: #FAFAF7; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 4px; }
.pd-factura label { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.pd-factura input { flex: 1; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 14px; }
.pd-factura-msg { margin: 8px 0 0; font-size: 13px; color: #1b8a5a; min-height: 16px; }
.ped-fecha-modal { color: #8a8a8a; font-size: 13px; }

.tabla-pedidos .ped-id { font-weight: 700; color: #6b6b6b; font-size: 13px; }

/* =================================================================
   ANIMACIONES SUTILES DE ENTRADA (scroll reveal)
   ================================================================= */
.mp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease !important;
    will-change: opacity, transform;
}
.mp-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Tarjetas de "Lo más pedido" (inicio): más contenidas que las del menú --- */
.mp-favoritos .mp-prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 900px;   /* evita que 3 tarjetas se estiren a lo ancho de la pantalla */
}
.mp-favoritos .mp-prod-img { height: 200px; }              /* foto más baja */
.mp-favoritos .mp-prod-nombre { font-size: 16px; }
.mp-favoritos .mp-prod-desc { font-size: 13px; }
@media (max-width: 760px) {
    .mp-favoritos .mp-prod-grid { grid-template-columns: 1fr 1fr; max-width: none; }
    .mp-favoritos .mp-prod-img { height: 170px; }
}
@media (max-width: 460px) {
    .mp-favoritos .mp-prod-grid { grid-template-columns: 1fr; }
}

/* --- Páginas legales (términos, privacidad): texto justificado y legible --- */
.legal-prosa { text-align: justify; color: #33302c; line-height: 1.7; font-size: 15.5px; padding-bottom: 10px; }
.legal-prosa h2 { text-align: left; font-size: 19px; color: var(--mp-tinta, #1A1410); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #F0E4E2; }
.legal-prosa h2:first-of-type { margin-top: 18px; }
.legal-prosa p { margin: 0 0 14px; }
.legal-prosa ul { margin: 0 0 16px; padding-left: 22px; }
.legal-prosa li { margin-bottom: 7px; text-align: justify; }
.legal-prosa a { color: var(--marca, #C8211A); text-decoration: underline; }
.legal-prosa strong { color: #1A1410; }
@media (max-width: 560px) {
    .legal-prosa { text-align: left; font-size: 15px; }  /* en móvil, justificar deja huecos feos */
    .legal-prosa li { text-align: left; }
}

/* --- Texto justificado en Nosotros --- */
.prosa { text-align: justify; }
.nos-sec-cuerpo { text-align: justify; line-height: 1.8; }
@media (max-width: 560px) {
    .prosa, .nos-sec-cuerpo { text-align: left; }  /* en móvil, justificar deja huecos feos */
}