@font-face {
    font-family: "Nulshock";
    src: url("https://plasmart.cl/Nulshock-Bd.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --verde-principal: #16FF00;
    --verde-franja: #06BD12;
    --fucsia-principal: #FF00D4;
    --fucsia-franja: #D800BE;
    --whatsapp: #25D366;
    --blanco: #FFFFFF;
    --dorado: #D4A34A;
    --fondo: #000000;
    --naranja: #FF6A00;
    --gris-texto: #D8D8D8;
    --negro-suave: #090909;
    --borde-suave: rgba(255,255,255,.14);
    --alto-header: 74px;
    --alto-menu-inferior: 70px;
    --ancho-maximo: 1240px;
    --sombra-verde: 0 0 8px rgba(22,255,0,.95), 0 0 22px rgba(22,255,0,.55);
    --sombra-fucsia: 0 0 8px rgba(255,0,212,.95), 0 0 22px rgba(255,0,212,.55);
    --sombra-whatsapp: 0 0 0 6px rgba(37,211,102,.20), 0 0 18px rgba(37,211,102,.70);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--fondo); }
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--blanco);
    background: var(--fondo);
    font-family: "Arial Narrow", Arial, sans-serif;
    padding-top: var(--alto-header);
    padding-bottom: var(--alto-menu-inferior);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; font: inherit; }

.pagina { width: 100%; background: var(--fondo); }
.envoltura { width: min(var(--ancho-maximo), calc(100% - 24px)); margin-inline: auto; }

/* ENCABEZADO FLOTANTE */
.encabezado-flotante {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--alto-header);
    z-index: 1000;
    background: rgba(0,0,0,.92);
    border-bottom: 1px solid rgba(255,0,212,.85);
    box-shadow: 0 10px 30px rgba(0,0,0,.82), 0 0 16px rgba(255,0,212,.28);
    backdrop-filter: blur(8px);
}
.barra-superior {
    height: 100%;
    display: grid;
    grid-template-columns: 66px 1fr 66px;
    align-items: center;
    gap: 10px;
}
.boton-menu,
.boton-canasto-cabecera {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: var(--blanco);
    background: #050505;
    font-size: 21px;
}
.boton-menu { border: 2px solid var(--fucsia-principal); box-shadow: var(--sombra-fucsia); }
.boton-canasto-cabecera { justify-self: end; border: 2px solid var(--verde-principal); box-shadow: var(--sombra-verde); color: var(--verde-principal); position: relative; }
.contador-canasto {
    position: absolute;
    top: -9px;
    right: -9px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--fucsia-principal);
    color: var(--blanco);
    font-family: "Nulshock", Arial, sans-serif;
    font-size: 11px;
}
.logo-cabecera { justify-self: center; width: clamp(138px, 15vw, 156px); background: rgba(22,255,0,.08); padding: 8px 12px; box-shadow: 0 0 18px rgba(22,255,0,.20); }
.logo-cabecera img { width: 100%; height: auto; }

.menu-lateral {
    position: fixed;
    top: var(--alto-header);
    left: 0;
    width: min(300px, 88vw);
    height: calc(100dvh - var(--alto-header));
    z-index: 999;
    transform: translateX(-104%);
    transition: transform .25s ease;
    background: rgba(0,0,0,.96);
    border-right: 1px solid rgba(255,0,212,.65);
    box-shadow: 0 0 30px rgba(255,0,212,.25);
    padding: 22px;
}
.menu-lateral.activo { transform: translateX(0); }
.menu-lateral a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-bottom: 10px;
    border-radius: 12px;
    padding: 0 16px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: 14px;
    color: var(--blanco);
    background: #080808;
    border: 1px solid rgba(255,255,255,.10);
}
.menu-lateral a:hover { color: var(--verde-principal); border-color: var(--verde-principal); }

/* MENÚ INFERIOR */
.menu-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    height: var(--alto-menu-inferior);
    background: rgba(0,0,0,.94);
    border-top: 1px solid rgba(22,255,0,.55);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.enlace-menu-inferior {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(8px, 1vw, 11px);
    color: var(--blanco);
    text-align: center;
}
.enlace-menu-inferior i { color: var(--verde-principal); font-size: 18px; }
.enlace-menu-inferior:hover,
.enlace-menu-inferior.activo { background: rgba(255,0,212,.20); color: var(--fucsia-principal); }

/* CONTACTO */
.bloque-contacto {
    padding: clamp(20px, 4vw, 34px) 0 clamp(18px, 3vw, 28px);
    text-align: center;
}
.fila-contacto {
    display: grid;
    grid-template-columns: minmax(170px, 280px) minmax(240px, 380px) minmax(240px, 380px);
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 4vw, 54px);
}
.logo-contacto { width: clamp(170px, 21vw, 260px); justify-self: center; }
.boton-contacto {
    min-height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    color: var(--verde-principal);
    background: #050505;
    border: 4px solid var(--verde-principal);
    box-shadow: var(--sombra-verde), inset 0 0 10px rgba(22,255,0,.32);
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(15px, 1.8vw, 22px);
    white-space: nowrap;
}
.boton-contacto.instagram { color: var(--fucsia-principal); border-color: var(--fucsia-principal); box-shadow: var(--sombra-fucsia), inset 0 0 10px rgba(255,0,212,.28); }
.boton-contacto .icono-red {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--blanco);
    background: var(--whatsapp);
}
.boton-contacto.instagram .icono-red { border-radius: 8px; background: linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.direccion { margin: 22px 0 16px; color: var(--blanco); font-weight: 900; font-size: clamp(16px, 1.6vw, 20px); text-shadow: 0 0 4px rgba(255,255,255,.25); }
.horarios { margin: 0 auto; max-width: 1180px; color: #FFF200; font-weight: 900; font-size: clamp(14px, 1.45vw, 18px); line-height: 1.22; }

/* SECCIONES */
.seccion-productos { scroll-margin-top: calc(var(--alto-header) + 18px); padding: 10px 0 28px; }
.titulo-seccion {
    margin: clamp(22px, 4vw, 50px) 0 clamp(20px, 2.5vw, 34px);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--fucsia-principal);
    text-align: center;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(32px, 5.1vw, 58px);
    letter-spacing: 2px;
    line-height: .95;
    color: var(--blanco);
}
.contenedor-promociones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);
    align-items: stretch;
}

/* TARJETAS */
.tarjeta-promocion {
    position: relative;
    min-height: 335px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
    border-radius: 2px;
    isolation: isolate;
}
.tarjeta-promocion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 95%, rgba(255,255,255,.08), transparent 46%);
    pointer-events: none;
    z-index: -1;
}
.encabezado-tarjeta {
    position: relative;
    min-height: 39px;
    padding: 4px 58px 0 0;
    display: flex;
    align-items: flex-start;
}
.franja-promocion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 230px);
    max-width: 100%;
    min-height: 29px;
    padding: 4px 14px 3px;
    border-radius: 4px;
    color: var(--blanco);
    background: var(--verde-franja);
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(12px, 1.35vw, 18px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tema-fucsia .franja-promocion { background: var(--fucsia-franja); }
.tema-naranja .franja-promocion,
.tema-naranja .titulo-promocion { color: var(--naranja); }
.titulo-promocion {
    margin: 3px 0 4px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(25px, 2.75vw, 39px);
    line-height: .88;
    letter-spacing: .7px;
    color: var(--verde-principal);
    overflow-wrap: anywhere;
    max-width: 100%;
}
.tema-fucsia .titulo-promocion { color: var(--fucsia-principal); }
.titulo-promocion.blanco { color: var(--blanco) !important; }
.titulo-promocion.naranja { color: var(--naranja) !important; }
.titulo-promocion.titulo-largo { font-size: clamp(22px, 2.15vw, 31px); line-height: .92; }
.etiqueta-secundaria {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 5px;
    padding: 4px 7px 3px;
    border-radius: 5px;
    background: var(--verde-principal);
    color: #000;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: .34em;
    line-height: 1;
    transform: translateY(-.15em);
}
.subtitulo-promocion {
    margin: -2px 0 6px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(14px, 1.65vw, 22px);
    line-height: 1;
    color: var(--blanco);
}
.descripcion-promocion {
    min-height: 66px;
    max-height: 102px;
    overflow: hidden;
    color: var(--gris-texto);
    font-size: clamp(12px, 1.05vw, 14px);
    line-height: 1.22;
    font-weight: 700;
    padding-right: 2px;
}
.descripcion-promocion p { margin: 0 0 3px; }
.descripcion-promocion .cantidad { color: var(--blanco); }
.descripcion-promocion .ingredientes { color: var(--dorado); }
.zona-imagen {
    flex: 1 1 auto;
    min-height: 106px;
    margin-top: 6px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #000;
}
.imagen-producto {
    width: 100%;
    height: 100%;
    object-position: center;
    filter: saturate(1.12) contrast(1.04) brightness(.92);
}
.modo-cover .imagen-producto { object-fit: cover; }
.modo-contain .imagen-producto { object-fit: contain; }
.pie-tarjeta {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 2px 3px;
}
.precio-promocion {
    margin-left: auto;
    color: var(--blanco);
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(17px, 1.9vw, 25px);
    line-height: 1;
    text-shadow: 0 2px 0 #2355bd, 0 0 4px rgba(255,255,255,.3);
    text-align: right;
}
.boton-whatsapp-pie,
.boton-agregar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--blanco);
}
.boton-whatsapp-pie {background: #087D39;border: 4px solid #0b8e42;box-shadow: var(--sombra-whatsapp);font-size: 21px;margin-left: -5px!important;margin-bottom: -14px!important;}
.boton-agregar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.88);
    border: 3px solid var(--fucsia-principal);
    /* box-shadow: 0 0 9px rgba(255,0,212,.95), 0 0 18px rgba(255,0,212,.50); */
    color: var(--verde-principal);
    font-size: 22px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.boton-agregar::before,
.boton-agregar::after {
    content: none !important;
    display: none !important;
}
.boton-agregar i {
    position: static;
    font-size: 24px;
    color: var(--verde-principal)!important;
    /* text-shadow: 0 0 6px rgba(22,255,0,.7); */
}
.boton-agregar.agregado {
    background: rgba(0,0,0,.88);
    border-color: var(--fucsia-principal);
    /* box-shadow: 0 0 9px rgba(255,0,212,.95), 0 0 18px rgba(255,0,212,.50); */
}
.boton-agregar.agregado i {
    font-size: 25px;
}
.boton-agregar:hover { transform: scale(1.04); }
.boton-agregar:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.lista-precios {
    margin: 2px 0 6px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.16;
    color: var(--blanco);
}
.fila-precio { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted rgba(255,255,255,.20); }

/* UBICACIÓN Y NOSOTROS */
.bloque-nosotros {
    margin: 20px 0 10px;
    border: 1px solid rgba(255,0,212,.45);
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,0,212,.08), rgba(22,255,0,.05));
}
.bloque-nosotros h2 { margin: 0 0 10px; font-family: "Nulshock", Arial, sans-serif; color: var(--verde-principal); font-size: clamp(24px, 3vw, 36px); }
.bloque-nosotros p { margin: 0; font-size: 18px; line-height: 1.35; }
.bloque-ubicacion { scroll-margin-top: calc(var(--alto-header) + 18px); padding: 10px 0 34px; }
.mapa-local { width: 100%; height: clamp(250px, 35vw, 450px); border: 0; }
.boton-mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(360px, 100%);
    min-height: 54px;
    margin-top: 24px;
    padding: 0 26px;
    border: 4px solid var(--fucsia-principal);
    border-radius: 999px;
    color: var(--fucsia-principal);
    background: #050505;
    box-shadow: var(--sombra-fucsia), inset 0 0 10px rgba(255,0,212,.22);
    font-size: clamp(22px, 2.3vw, 30px);
}
.pie { padding: 18px 0 34px; color: var(--gris-texto); font-size: 13px; }

/* MODALES */
.fondo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(7px);
}
.fondo-modal.activo { display: flex; }
.modal-canasto,
.modal-opciones {
    width: min(650px, 100%);
    max-height: min(88dvh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--fucsia-principal);
    border-radius: 24px;
    background: #040404;
    box-shadow: var(--sombra-fucsia), 0 0 42px rgba(0,0,0,.95);
}
.cabecera-modal {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 14px;
}
.cabecera-modal h2 { margin: 0; font-family: "Nulshock", Arial, sans-serif; color: var(--verde-principal); font-size: clamp(25px, 4vw, 38px); }
.cerrar-modal {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--fucsia-principal);
    color: var(--blanco);
    font-size: 22px;
}
.cuerpo-canasto,
.cuerpo-opciones {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 14px;
}
.item-canasto {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--borde-suave);
    border-radius: 12px;
    background: #111;
}
.imagen-canasto {
    width: 84px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #000;
}
.nombre-canasto { font-family: "Nulshock", Arial, sans-serif; font-size: 13px; line-height: 1.15; }
.precio-canasto { color: var(--dorado); font-family: "Nulshock", Arial, sans-serif; font-size: 13px; margin-top: 4px; }
.controles-canasto { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.boton-cantidad,
.eliminar-item {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--blanco);
    font-size: 14px;
}
.boton-cantidad.menos { background: var(--fucsia-principal); }
.boton-cantidad.mas { background: var(--verde-principal); color: #000; }
.cantidad-canasto { min-width: 24px; text-align: center; font-family: "Nulshock", Arial, sans-serif; }
.eliminar-item { background: #E91515; }
.pie-modal {
    flex: 0 0 auto;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.98);
}
.total-canasto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(16px, 2.5vw, 23px);
}
.total-canasto strong { color: var(--verde-principal); font-size: 1.15em; }
.acciones-canasto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.boton-secundario,
.boton-principal {
    min-height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    font-family: "Nulshock", Arial, sans-serif;
    font-size: clamp(11px, 1.6vw, 15px);
}
.boton-secundario { background: #050505; color: var(--fucsia-principal); border: 2px solid var(--fucsia-principal); }
.boton-principal { background: #087D39; color: var(--blanco); border: 2px solid var(--whatsapp); box-shadow: 0 0 18px rgba(37,211,102,.35); }
.canasto-vacio { padding: 24px 0; color: var(--gris-texto); text-align: center; font-size: 18px; }
.producto-opciones { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.producto-opciones img { width: 110px; height: 86px; object-fit: cover; border-radius: 12px; }
.producto-opciones h3 { margin: 0; font-family: "Nulshock", Arial, sans-serif; color: var(--fucsia-principal); font-size: 18px; }
.lista-opciones { display: grid; gap: 9px; }
.boton-opcion {
    min-height: 46px;
    border-radius: 12px;
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: var(--blanco);
    background: #111;
    border: 1px solid rgba(255,255,255,.16);
    text-align: left;
}
.boton-opcion:hover { border-color: var(--verde-principal); color: var(--verde-principal); }
.boton-opcion span:first-child { font-family: "Nulshock", Arial, sans-serif; font-size: 12px; line-height: 1.15; }
.boton-opcion span:last-child { color: var(--dorado); font-family: "Nulshock", Arial, sans-serif; }
.aviso-agregado {
    position: fixed;
    left: 50%;
    bottom: calc(var(--alto-menu-inferior) + 16px);
    transform: translateX(-50%) translateY(20px);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    padding: 12px 18px;
    border-radius: 999px;
    background: #041204;
    border: 1px solid var(--verde-principal);
    color: var(--verde-principal);
    box-shadow: var(--sombra-verde);
    font-family: "Nulshock", Arial, sans-serif;
    font-size: 12px;
    transition: opacity .2s ease, transform .2s ease;
}
.aviso-agregado.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1080px) {
    .fila-contacto { grid-template-columns: 1fr; }
    .contenedor-promociones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tarjeta-promocion { min-height: 350px; }
}
@media (max-width: 640px) {
    :root { --alto-header: 68px; --alto-menu-inferior: 68px; }
    body { padding-top: var(--alto-header); }
    .barra-superior { grid-template-columns: 58px 1fr 58px; }
    .boton-menu, .boton-canasto-cabecera { width: 46px; height: 46px; }
    .logo-cabecera { width: 136px; padding: 7px 10px; }
    .bloque-contacto { padding-top: 18px; }
    .boton-contacto { width: min(370px, 100%); min-height: 46px; font-size: 16px; }
    .titulo-seccion { font-size: clamp(30px, 10vw, 44px); letter-spacing: 1px; }
    .contenedor-promociones { grid-template-columns: 1fr; gap: 28px; }
    .tarjeta-promocion { min-height: 365px; }
    .franja-promocion { font-size: 16px; min-height: 29px; }
    .titulo-promocion { font-size: 34px; }
    .titulo-promocion.titulo-largo { font-size: 28px; }
    .descripcion-promocion { font-size: 14px; max-height: 116px; }
    .menu-inferior { overflow-x: auto; grid-template-columns: repeat(7, minmax(82px, 1fr)); }
    .item-canasto { grid-template-columns: 74px 1fr; }
    .imagen-canasto { width: 74px; height: 58px; }
    .eliminar-item { grid-column: 2; justify-self: end; margin-top: -34px; }
    .acciones-canasto { grid-template-columns: 1fr; }
    .modal-canasto, .modal-opciones { max-height: 91dvh; border-radius: 18px; }
    .cabecera-modal { padding: 16px 16px 12px; }
    .cuerpo-canasto, .cuerpo-opciones { padding: 0 16px 10px; }
    .pie-modal { padding: 12px 16px 16px; }
}


/* =========================================================
   V7 - CSS separado y tarjetas con imagen detrás del texto
   Todas las capas de texto quedan por encima de la imagen.
   ========================================================= */
.tarjeta-promocion {
    min-height: 318px;
    padding: 0;
    overflow: hidden;
}

.tarjeta-promocion::before {
    z-index: 1;
    background: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 49%) 39%, rgb(0 0 0 / 0%) 67%, rgb(0 0 0 / 0%) 100%), radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .13), transparent 48%);
}

.tarjeta-promocion > :not(.zona-imagen),
.encabezado-tarjeta,
.titulo-promocion,
.subtitulo-promocion,
.descripcion-promocion,
.lista-precios,
.pie-tarjeta {
    position: relative;
    z-index: 2;
}

.zona-imagen {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    place-items: unset;
    background: #000;
}

.imagen-producto {
    width: 100%;
    height: 100%;
    object-position: center;
    filter: saturate(1.18) contrast(1.08) brightness(.80);
}

.modo-cover .imagen-producto { object-fit: cover; }
.modo-contain .imagen-producto { object-fit: contain; background: #000; }

.encabezado-tarjeta {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 4px 58px 0 0;
}

.franja-promocion {
    min-width: min(100%, 214px);
    min-height: 27px;
    font-size: clamp(11px, 1.15vw, 16px);
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.titulo-promocion {
    margin: 5px 0 4px;
    font-size: clamp(22px, 1.35vw, 34px);
    line-height: .94;
    /* text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); */
}

.titulo-promocion.titulo-largo {
    font-size: clamp(18px, 1.85vw, 27px);
    line-height: .96;
}

.subtitulo-promocion {
    font-size: clamp(12px, 1.25vw, 17px);
    line-height: 1.03;
    text-shadow: 0 2px 5px rgba(0,0,0,.9);
}

.descripcion-promocion {
    min-height: auto;
    max-height: 118px;
    overflow: hidden;
    font-size: clamp(11px, .95vw, 13px);
    line-height: 1.22;
    text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 0 2px #000;
    padding-right: 6px;
}

.lista-precios {
    font-size: clamp(12px, 1.2vw, 17px);
    text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.pie-tarjeta {
    margin-top: auto;
    min-height: 50px;
    padding: 8px 2px 4px;
    z-index: 3;
}

.precio-promocion {
    font-size: clamp(15px, 1.55vw, 22px);
    text-shadow: 0 2px 0 #2355bd, 0 0 6px #000, 0 0 4px rgba(255,255,255,.35);
}

.boton-agregar {
    z-index: 4;
}

.boton-whatsapp-pie {
    z-index: 4;
}

@media (max-width: 1080px) {
    .tarjeta-promocion { min-height: 325px; }
}

@media (max-width: 640px) {
    .boton-agregar {
        width: 46px;
        height: 46px;
        top: 7px;
        right: 7px;
        border-width: 3px;
    }
    .boton-agregar i { font-size: 20px; }
    .boton-agregar.agregado i { font-size: 22px; }

    .tarjeta-promocion { min-height: 340px; }
    .franja-promocion { font-size: 15px; }
    .titulo-promocion { font-size: 29px; }
    .titulo-promocion.titulo-largo { font-size: 24px; }
    .descripcion-promocion { font-size: 13px; max-height: 122px; }
    .precio-promocion { font-size: 22px; }
}

/* =========================================================
   Multisucursal: selector inicial y datos de cliente
   ========================================================= */
.cuerpo-sucursales {
    min-height: 100dvh;
    padding: 0;
    background: #000;
    display: grid;
    place-items: start center;
}
.pantalla-sucursales {
    width: min(320px, 100%);
    min-height: 100dvh;
    padding: 18px 12px 32px;
    background: radial-gradient(circle at 50% 0%, rgba(22,255,0,.08), transparent 38%), #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-sucursales {
    width: 185px;
    margin: 0 auto 24px;
    filter: drop-shadow(0 0 10px rgba(22,255,0,.22));
}
.lista-sucursales {
    width: 100%;
    display: grid;
    gap: 32px;
}
.boton-sucursal {
    position: relative;
    min-height: 50px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, #16ff52 0%, #11c742 42%, #019620 51%, #14e958 100%);
    border: 2px solid #0cff45;
    box-shadow: inset 0 8px 0 rgba(255,255,255,.36), inset 0 -9px 13px rgba(0,80,16,.48), 0 0 13px rgba(22,255,0,.75);
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,.55);
}
.boton-sucursal strong {
    position: absolute;
    right: -16px;
    top: -10px;
    padding: 11px 13px;
    border-radius: 15px;
    background: #df5300;
    color: #7cff00;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 0 8px rgba(255,0,212,.45);
}
.boton-instagram-sucursal {
    min-height: 48px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: linear-gradient(180deg, #ff90ec, #d800be 48%, #ff62e9);
    border: 2px solid var(--fucsia-principal);
    box-shadow: inset 0 8px 0 rgba(255,255,255,.35), 0 0 13px rgba(255,0,212,.9);
    font-size: 22px;
    font-weight: 800;
}
.boton-instagram-sucursal i { color: white; }
.datos-cliente {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.datos-cliente label {
    color: var(--gris-texto);
    font-weight: 700;
    font-size: 13px;
}
.datos-cliente input,
.datos-cliente textarea {
    width: 100%;
    margin-top: 3px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 9px 10px;
    color: #fff;
    background: #101010;
    font-family: Arial, sans-serif;
}
.datos-cliente textarea { min-height: 56px; resize: vertical; }
.datos-cliente label:nth-child(3), .datos-cliente .boton-secundario { grid-column: 1 / -1; }
.opcion-canasto { color: var(--dorado); font-size: 12px; margin-top: 3px; }
.modal-canasto .pie-modal { position: sticky; bottom: 0; }
@media (max-width: 640px) {
    .datos-cliente { grid-template-columns: 1fr; }
}

.boton-agregar.agregado {
    border-color: var(--verde-principal);
    color: var(--verde-principal)!important;
    background: black;
    /* box-shadow: var(--sombra-verde); */
}

.boton-agregar.agregado i {
    color: #000;
}