/* =====================================================================
   Tu Mascota — tienda de alimentos y accesorios para mascotas
   ---------------------------------------------------------------------
   El motor (assets/js/main.js) esconde con el atributo [hidden] todo lo
   que depende de un dato opcional. Esta regla va primera y gana siempre:
   cualquier display explícito posterior dejaría bloques vacíos a la vista.
   ===================================================================== */

[hidden] { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- Tokens */

:root {
    /* --marca la pisa el color del comercio (front/empresa) */
    --marca: #ea2484;
    --marca-oscuro: #b8165f;
    --marca-suave: #fde7f1;
    --marca-suave2: #f8cfe0;

    --sol: #ffc72c;
    --menta: #24c2b0;

    --tinta: #2b1f30;
    --tinta-media: #5f5468;
    --tinta-suave: #8b8194;

    --fondo: #ffffff;
    --crema: #fdf5f8;
    --linea: #efe6ec;
    --linea-fuerte: #e2d5dd;

    --exito: #17915f;
    --alerta: #d1453b;

    --radio-xs: 10px;
    --radio-sm: 14px;
    --radio: 20px;
    --radio-lg: 28px;
    --radio-xl: 36px;

    --sombra-sm: 0 2px 10px rgba(64, 22, 45, .06);
    --sombra: 0 12px 32px rgba(64, 22, 45, .09);
    --sombra-lg: 0 24px 60px rgba(64, 22, 45, .14);

    --ancho: 1280px;
    --gap: clamp(1rem, 2.4vw, 1.75rem);

    --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 2px;
    border-radius: 6px;
}

.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

/* Salto al contenido: sólo visible cuando llega el foco con el teclado */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--marca);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 0 0 var(--radio-sm) 0;
    font-weight: 800;
    text-decoration: none;
}
.saltar-contenido:focus { left: 0; }

/* ------------------------------------------------------------ Tipografía */

.overline {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marca);
    margin: 0 0 .5rem;
}
.overline--claro { color: rgba(255, 255, 255, .82); }

.titulo-display {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 700;
}
.titulo-display--lg { font-size: clamp(2rem, 5vw, 3.1rem); }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: var(--marca);
    text-decoration: none;
    white-space: nowrap;
}
.enlace-flecha:hover { color: var(--marca-oscuro); }

/* --------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .78rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.boton:hover { background: var(--marca-oscuro); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.boton--marca { background: var(--marca); color: #fff; }

.boton--sol { background: var(--sol); color: #3b2740; }
.boton--sol:hover { background: #f2b407; }

.boton--claro { background: #fff; color: var(--marca); }
.boton--claro:hover { background: #fff; color: var(--marca-oscuro); }

.boton--fantasma {
    background: #fff;
    color: var(--marca);
    border-color: var(--marca-suave2);
}
.boton--fantasma:hover { background: var(--marca-suave); color: var(--marca-oscuro); }

.boton--texto {
    background: transparent;
    color: var(--tinta-media);
    padding-inline: .6rem;
}
.boton--texto:hover { background: transparent; color: var(--marca); }

.boton--sm { padding: .5rem 1rem; font-size: .85rem; }
.boton--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.boton--bloque { width: 100%; }

.boton__flecha { transition: transform .18s ease; }
.boton:hover .boton__flecha { transform: translateX(3px); }

/* --------------------------------------------------------------- Campos */

.campo { display: block; }
.campo__etiqueta {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: .35rem;
}
.campo__control {
    width: 100%;
    padding: .7rem .9rem;
    border: 2px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    font: inherit;
    color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.campo__control:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 4px var(--marca-suave);
}
select.campo__control { appearance: none; background-image: none; cursor: pointer; padding-right: 2.2rem; }
textarea.campo__control { resize: vertical; }
.campo--ancho { flex: 1 1 16rem; }

.casilla {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
}
.casilla input { width: 1.1rem; height: 1.1rem; accent-color: var(--marca); }

/* =====================================================================
   Encabezado
   ===================================================================== */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--linea);
}
.cabecera.esta-fija { box-shadow: var(--sombra-sm); }

.franja { background: var(--tinta); color: #fff; font-size: .82rem; }
.franja__interior {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 36px;
    flex-wrap: wrap;
}
.franja__claim { margin: 0; font-weight: 600; }
.franja__envio { margin: 0; color: var(--sol); font-weight: 700; }
.franja__enlaces { display: flex; gap: 1.1rem; margin-left: auto; }
.franja__enlaces a { text-decoration: none; opacity: .85; font-weight: 600; }
.franja__enlaces a:hover { opacity: 1; color: var(--sol); }

.cabecera__barra { background: #fff; }
.cabecera__interior {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    padding: .85rem 0;
}

/* La marca es sólo el logo: la imagen ya trae el nombre y la bajada.
   Si el comercio sube otro logo desde /backoffice, el motor pisa el src. */
.marca {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
.marca__logo { height: clamp(46px, 5.2vw, 70px); width: auto; max-width: none; }

.buscador-barra {
    flex: 1 1 22rem;
    display: flex;
    align-items: center;
    background: var(--crema);
    border: 2px solid var(--linea);
    border-radius: 999px;
    padding: .2rem .2rem .2rem 1.1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.buscador-barra:focus-within { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.buscador-barra__entrada {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    padding: .55rem 0;
    color: var(--tinta);
}
.buscador-barra__entrada:focus { outline: none; }
.buscador-barra__boton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-weight: 800;
    padding: .6rem 1.1rem;
    cursor: pointer;
}
.buscador-barra__boton:hover { background: var(--marca-oscuro); }

.cabecera__acciones { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.accion {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .6rem;
    border-radius: var(--radio-sm);
    text-decoration: none;
    color: var(--tinta);
}
.accion:hover { background: var(--marca-suave); color: var(--marca-oscuro); }
.accion__icono { position: relative; display: flex; color: var(--marca); }
.accion__cuerpo { display: flex; flex-direction: column; line-height: 1.05; }
.accion__sobre { font-size: .68rem; color: var(--tinta-suave); font-weight: 600; }
.accion__valor { font-size: .88rem; font-weight: 800; }
.accion__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sol);
    color: #3b2740;
    font-size: .7rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.navegacion__boton {
    display: none;
    width: 44px;
    height: 42px;
    border: 2px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    cursor: pointer;
    padding: 11px 10px;
    flex-direction: column;
    justify-content: space-between;
}
.navegacion__boton span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; }

/* --------------------------------------------------------- Mega menú */

/*
   Barra de categorías: fila plana de solapas sobre blanco, con el chip
   "Menú" oscuro como ancla al árbol completo. La solapa abierta se pinta
   de marca y el panel cuelga como una tarjeta independiente con puntero,
   en el mismo lenguaje redondeado del resto del sitio.
*/

.cabecera__menu {
    background: #fff;
    border-top: 1px solid var(--linea);
    position: relative;
}
.cabecera__menu-interior {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .4rem 0;
}

.megamenu {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.megamenu__item { position: static; }

/* Filete que separa el chip "Menú" de las solapas de especie */
.megamenu__item--todas {
    margin-right: .6rem;
    padding-right: 1rem;
    border-right: 1px solid var(--linea);
}

.megamenu__disparador {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tinta);
    font-weight: 800;
    font-size: .93rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
}
.megamenu__icono { display: flex; color: var(--marca); }
.megamenu__disparador:hover .megamenu__icono,
.megamenu__item[data-abierto] > .megamenu__disparador .megamenu__icono { color: inherit; }

.megamenu__disparador:hover {
    background: var(--marca-suave);
    color: var(--marca-oscuro);
}
.megamenu__item[data-abierto] > .megamenu__disparador {
    background: var(--marca);
    color: #fff;
}

/* "Menú" es el único chip sólido oscuro: la entrada a todo el árbol */
.megamenu__disparador--todas {
    background: var(--tinta);
    color: #fff;
}
.megamenu__disparador--todas:hover { background: #483a54; color: #fff; }
.megamenu__item--todas[data-abierto] > .megamenu__disparador--todas {
    background: var(--marca);
    color: #fff;
}

.megamenu__panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + .5rem);
    width: min(100% - 2.5rem, var(--ancho));
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    padding: 1.7rem 1.9rem 1.9rem;
    z-index: 70;
    animation: mega-entra .18s ease both;
}

/* Puntero que ata la tarjeta con la barra */
.megamenu__panel::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-top: 1px solid var(--linea);
    border-left: 1px solid var(--linea);
    border-radius: 3px 0 0 0;
    transform: translateX(-50%) rotate(45deg);
}
/* Cinta de marca que remata el borde superior de la tarjeta */
 

@keyframes mega-entra {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
}

.megamenu__grilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 13.5rem);
    gap: 1.5rem 1.25rem;
    align-items: stretch;
}
.megamenu__grilla--compacta { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Separadores finos entre columnas: ordenan sin sumar peso visual */
.megamenu__grupo + .megamenu__grupo {
    border-left: 1px solid var(--linea);
    padding-left: 1.25rem;
}

.megamenu__grupo-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--fuente);
    font-size: .76rem;
    font-weight: 800;
    color: var(--tinta-suave);
    margin: 0 0 .6rem;
    text-transform: uppercase;
    letter-spacing: .11em;
}
.megamenu__grupo-titulo::before {
    content: "";
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--marca);
}
.megamenu__grupo-titulo--seguido { margin-top: 1.3rem; }
.megamenu__grupo-titulo a { text-decoration: none; color: inherit; }
.megamenu__grupo-titulo a:hover { color: var(--marca); }

.megamenu__lista li + li { margin-top: .1rem; }
.megamenu__lista a {
    display: block;
    padding: .3rem .6rem;
    margin-left: -.6rem;
    border-radius: var(--radio-xs);
    font-size: .93rem;
    font-weight: 600;
    color: var(--tinta-media);
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
.megamenu__lista a:hover {
    background: var(--marca-suave);
    color: var(--marca-oscuro);
    transform: translateX(3px);
}

.megamenu__promo {
    grid-column: 5;
    grid-row: 1 / -1;
    display: block;
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    text-decoration: none;
    background: var(--marca-suave);
    align-self: stretch;
    min-height: 200px;
}
.megamenu__promo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.megamenu__promo-texto {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.4rem 1rem .9rem;
    background: linear-gradient(to top, rgba(43, 31, 48, .92), rgba(43, 31, 48, 0));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.megamenu__promo-texto b { font-family: var(--fuente-display); font-size: 1.05rem; }
.megamenu__promo-texto span { font-size: .82rem; opacity: .9; }

/* Menú de páginas: píldoras en claro alineadas con las solapas de
   categorías; la página activa se marca sólida con el color de marca. */
.navegacion { margin-left: auto; }
.navegacion__lista { display: flex; gap: .15rem; }
.navegacion__lista a {
    display: block;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 800;
    color: var(--tinta-media);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.navegacion__lista a:hover { background: var(--marca-suave); color: var(--marca-oscuro); }
.navegacion__lista a[aria-current="page"] {
    background: var(--marca);
    color: #fff;
}

/* =====================================================================
   Home — slider de promociones
   ===================================================================== */

.hero { padding: clamp(1rem, 2vw, 1.75rem) 0 0; }

.slider {
    position: relative;
    border-radius: var(--radio-xl);
    overflow: hidden;
    background: var(--crema);
}
.slider__pista { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }

.slide {
    position: relative;
    flex: 0 0 100%;
    min-height: clamp(320px, 40vw, 460px);
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(24, 17, 23, .76) 0%, rgba(24, 17, 23, .46) 34%, rgba(24, 17, 23, 0) 61%);
    pointer-events: none;
}
.slide__arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.slide__enlace { position: absolute; inset: 0; z-index: 2; }
.slide__texto {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    /* El padding lateral deja libre el carril de las flechas del carrusel */
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
    color: #fff;
}
.slide__eyebrow {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .22);
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .8rem;
    backdrop-filter: blur(2px);
}
.slide__titulo {
    font-size: clamp(1.7rem, 4vw, 3rem);
    margin-bottom: .6rem;
    text-shadow: 0 2px 18px rgba(43, 31, 48, .28);
}
.slide__bajada { font-size: 1.03rem; margin-bottom: 1.3rem; max-width: 28rem; }
.slide__oferta {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin: -.35rem 0 1.15rem;
    line-height: 1;
}
.slide__oferta strong { font-size: clamp(1.65rem, 3vw, 2.35rem); color: var(--sol); }
.slide__oferta span { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.slide--delko-adult::after { background: linear-gradient(90deg, rgba(88, 5, 42, .7) 0%, rgba(117, 10, 55, .38) 38%, rgba(117, 10, 55, 0) 62%); }
.slide--delko-kitten::after { background: linear-gradient(90deg, rgba(31, 9, 67, .74) 0%, rgba(43, 16, 83, .42) 38%, rgba(43, 16, 83, 0) 62%); }

.slider__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--tinta);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
}
.slider__flecha:hover { background: #fff; color: var(--marca); }
.slider__flecha--anterior { left: 1rem; }
.slider__flecha--siguiente { right: 1rem; }

.slider__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .45rem;
}
.slider__punto {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    padding: 0;
    transition: width .2s ease, background-color .2s ease;
}
.slider__punto[aria-current="true"] { width: 28px; background: #fff; }

/* ------------------------------------------------- Prefiltro perros/gatos */

.prefiltro { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.prefiltro__encabezado { text-align: center; margin-bottom: 1.75rem; }
.prefiltro__encabezado .overline { text-align: center; }

.prefiltro__cajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--gap);
}

.especie {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 210px;
    padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
    border-radius: var(--radio-lg);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.especie:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.especie--perro { background: linear-gradient(120deg, var(--marca-suave), #ffeaf3); }
.especie--gato { background: linear-gradient(120deg, #e9f2ff, #f2f5ff); }

.especie__texto { display: flex; flex-direction: column; gap: .18rem; position: relative; z-index: 1; }
.especie__eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.especie__titulo { font-family: var(--fuente-display); font-size: clamp(2rem, 4vw, 2.7rem); color: var(--tinta); line-height: 1; }
.especie__bajada { color: var(--tinta-media); max-width: 16rem; font-size: .95rem; }
.especie__cta { margin-top: .7rem; font-weight: 800; color: var(--marca); display: inline-flex; gap: .35rem; }

.especie__arte {
    width: clamp(130px, 22vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    transition: transform .25s ease;
}
.especie:hover .especie__arte { transform: rotate(-4deg) scale(1.04); }

.buscador-home {
    margin-top: var(--gap);
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--sombra-sm);
}
.buscador-home__campos { display: flex; gap: 1rem; flex: 1 1 24rem; flex-wrap: wrap; }
.buscador-home .boton { flex: 0 0 auto; }

.prefiltro__otras {
    margin-top: var(--gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
}
.prefiltro__otras a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .9rem;
    background: var(--crema);
    border: 2px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: var(--tinta);
    transition: border-color .15s ease, background-color .15s ease;
}
.prefiltro__otras a:hover { border-color: var(--marca-suave2); background: #fff; color: var(--marca); }
.prefiltro__otras img { width: 40px; height: 40px; border-radius: 999px; }

/* ------------------------------------------------------------- Secciones */

.seccion { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.seccion--crema { background: var(--crema); }

.seccion__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.seccion__encabezado h2 { margin: 0; }

/* Rubros ilustrados */
.rubros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: var(--gap);
}
.rubro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 1.25rem 1rem 1.4rem;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rubro:hover { transform: translateY(-4px); border-color: var(--marca-suave2); box-shadow: var(--sombra); }
.rubro img { width: 92px; height: 92px; margin-bottom: .4rem; }
.rubro strong { font-family: var(--fuente-display); font-size: 1.08rem; color: var(--tinta); }
.rubro span { font-size: .84rem; color: var(--tinta-suave); }

/* Chips de categorías (los pinta el motor) */
.categorias { display: flex; flex-wrap: wrap; gap: .6rem; }
.categoria-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.05rem;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    color: var(--tinta);
    transition: border-color .15s ease, color .15s ease;
}
.categoria-chip:hover { border-color: var(--marca); color: var(--marca); }
.categoria-chip__count {
    background: var(--marca-suave);
    color: var(--marca-oscuro);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .76rem;
    font-weight: 800;
}

/* =====================================================================
   Tarjeta de producto (clases emitidas por el motor)
   ===================================================================== */

.riel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--gap);
}
.riel--cuatro { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: var(--gap);
}

.tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: var(--marca-suave2); }

.tarjeta__enlace { display: block; text-decoration: none; color: inherit; flex: 1; }

.tarjeta__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 199, 44, .16), transparent 55%),
        var(--crema);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tarjeta__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .25s ease;
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.05); }
.tarjeta__sinfoto {
    font-size: .82rem;
    font-weight: 700;
    color: var(--tinta-suave);
}

.tarjeta__cuerpo { padding: .9rem 1.05rem .4rem; display: flex; flex-direction: column; gap: .16rem; }
.tarjeta__categoria {
    margin: 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--marca);
}
.tarjeta__titulo {
    margin: 0;
    font-family: var(--fuente);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tarjeta__marca { margin: 0; font-size: .82rem; color: var(--tinta-suave); }
.tarjeta__precio {
    margin: .35rem 0 0;
    font-family: var(--fuente-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tinta);
}
.tarjeta__precio--consultar { font-size: 1rem; color: var(--tinta-media); }

.tarjeta__pie { padding: .6rem 1.05rem 1.05rem; margin-top: auto; }
.tarjeta__pie .boton { width: 100%; }
.tarjeta__agotado {
    display: block;
    text-align: center;
    padding: .5rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--tinta-suave);
    font-weight: 800;
    font-size: .85rem;
}

.etiquetas { position: absolute; top: .7rem; left: .7rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.etiqueta {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    background: var(--crema);
    color: var(--tinta-media);
}
.etiqueta--marca { background: var(--marca); color: #fff; }
.etiqueta--tenue { background: rgba(43, 31, 48, .78); color: #fff; }

/* Estados: carga, vacío, aviso flotante */
.esqueleto { pointer-events: none; border-color: var(--linea); }
.esqueleto__bloque {
    background: linear-gradient(90deg, var(--crema), #f3e8ee, var(--crema));
    background-size: 200% 100%;
    animation: brillo 1.3s linear infinite;
    border-radius: var(--radio-sm);
}
.esqueleto .tarjeta__media { border-radius: 0; }
.esqueleto__linea { height: 12px; margin: .55rem 1.05rem; }
.esqueleto__linea--corta { width: 55%; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.aviso {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--crema);
    border: 2px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    color: var(--tinta-media);
}
.aviso__titulo { font-family: var(--fuente-display); font-size: 1.2rem; color: var(--tinta); margin-bottom: .3rem; }
.aviso .boton { margin-top: .9rem; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--tinta);
    color: #fff;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: var(--sombra-lg);
    animation: subir .25s ease;
}
@keyframes subir { from { opacity: 0; transform: translate(-50%, 12px); } }

/* =====================================================================
   Banda peluquería, promo del día, beneficios y llamada
   ===================================================================== */

.banda { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.banda__interior {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    background: var(--crema);
    border-radius: var(--radio-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.banda__foto { border-radius: var(--radio-lg); width: 100%; }
.banda__lista { margin: 1rem 0 1.4rem; display: grid; gap: .5rem; }
.banda__lista li { position: relative; padding-left: 1.6rem; color: var(--tinta-media); }
.banda__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--marca);
}
.banda__acciones { display: flex; gap: .75rem; flex-wrap: wrap; }

.promo-hoy { background: var(--tinta); color: #fff; }
.promo-hoy__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: clamp(2rem, 4vw, 3rem) 0;
}
.promo-hoy__texto { max-width: 42rem; }
.promo-hoy__texto p { color: rgba(255, 255, 255, .82); }
.promo-hoy__dia {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-weight: 700;
    color: #fff;
}
.promo-hoy__dia b { color: var(--sol); text-transform: capitalize; }

.beneficios { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.beneficios__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--gap);
}
.beneficio {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.4rem;
}
.beneficio__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-sm);
    background: var(--marca-suave);
    color: var(--marca);
    margin-bottom: .8rem;
}
.beneficio h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.beneficio p { color: var(--tinta-media); font-size: .93rem; margin: 0; }

.llamada { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.llamada__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--marca-suave), #fff6fa);
    border-radius: var(--radio-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.llamada__interior > div:first-child { max-width: 38rem; }
.llamada__interior p { color: var(--tinta-media); margin: 0; }
.llamada__acciones { display: flex; gap: .75rem; flex-wrap: wrap; }
.llamada--suave .llamada__interior { background: var(--crema); }

/* =====================================================================
   Páginas internas
   ===================================================================== */

.pagina { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.pagina__encabezado { margin-bottom: 1.5rem; }
.pagina__encabezado h1 { margin: 0; }

.pagina-encabezado {
    background: var(--crema);
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    text-align: center;
}
.pagina-encabezado h1 { margin: 0 0 .5rem; }
.pagina-encabezado__bajada { max-width: 46rem; margin-inline: auto; color: var(--tinta-media); }
.pagina-encabezado--promos { background: linear-gradient(120deg, var(--marca-suave), #fff6fa); }

/* Pasos del checkout */
.pasos { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.pasos__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem .45rem .5rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--tinta-suave);
    font-weight: 700;
    font-size: .88rem;
}
.pasos__item span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--tinta-suave);
    font-size: .78rem;
    font-weight: 800;
}
.pasos__item--activo { background: var(--marca-suave); color: var(--marca-oscuro); }
.pasos__item--activo span { background: var(--marca); color: #fff; }
.pasos__item--hecho { color: var(--exito); }
.pasos__item--hecho span { background: var(--exito); color: #fff; }

/* ----------------------------------------------------------- Catálogo */

.catalogo { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.catalogo__grilla {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

.catalogo__abrir-filtros {
    display: none;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1.1rem;
    border: 2px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.filtros {
    position: sticky;
    top: 8.5rem;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.25rem;
    display: grid;
    gap: 1.15rem;
}
.filtros__encabezado { border-bottom: 1px solid var(--linea); padding-bottom: .9rem; }
.filtros__titulo { font-size: 1.1rem; margin: 0 0 .25rem; }
.filtros__ayuda { font-size: .84rem; color: var(--tinta-suave); margin: 0; }
.filtros__grupo { display: grid; gap: .8rem; }
.filtros__subtitulo { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin: 0; }
.filtros__rango { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.filtros__pie { display: grid; gap: .5rem; }

.catalogo__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.catalogo__resumen { margin: 0; font-weight: 700; color: var(--tinta-media); }

.catalogo__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.catalogo__chips:empty { margin-bottom: 0; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem .35rem .9rem;
    background: var(--marca-suave);
    color: var(--marca-oscuro);
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
}
.chip button {
    border: 0;
    background: rgba(255, 255, 255, .7);
    color: var(--marca-oscuro);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.chip button:hover { background: #fff; }

.paginacion { display: flex; justify-content: center; gap: .35rem; margin-top: 2rem; flex-wrap: wrap; }
.paginacion button {
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}
.paginacion button:hover:not([disabled]) { border-color: var(--marca); color: var(--marca); }
.paginacion button[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginacion button[disabled] { opacity: .4; cursor: not-allowed; }
.paginacion__salto { display: grid; place-items: center; min-width: 24px; color: var(--tinta-suave); }

/* ----------------------------------------------------- Ficha de producto */

.ficha { padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem); }
.ficha__estado { color: var(--tinta-media); font-weight: 700; }
.ficha__volver { display: inline-block; margin-bottom: 1.25rem; font-weight: 700; color: var(--marca); text-decoration: none; }

.ficha__superior {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.galeria__item {
    position: relative;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    background: var(--crema);
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.galeria__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.galeria__item img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.galeria__item:hover { border-color: var(--marca-suave2); }
.galeria__sinfoto {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--crema);
    border: 2px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    color: var(--tinta-suave);
    font-weight: 700;
}
.galeria__mas {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(43, 31, 48, .78);
    color: #fff;
    padding: .35rem;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}

.ficha__resumen { display: grid; gap: .5rem; }
.ficha__marca { margin: 0; font-size: .84rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha__nombre { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .3rem; }

.ficha__accion {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.25rem;
    display: grid;
    gap: .8rem;
}
.ficha__precio { margin: 0; }
.ficha__precio dt { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha__precio dd { margin: 0; font-family: var(--fuente-display); font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; color: var(--marca); }
.ficha__stock { margin: 0; font-weight: 700; color: var(--exito); }
.ficha__stock--agotado { color: var(--alerta); }
.ficha__compra { display: grid; gap: .7rem; }
.campo--cantidad .campo__control { max-width: 7rem; }
.ficha__referencia { margin: 0; font-size: .82rem; color: var(--tinta-suave); }

.ficha__garantias { display: grid; gap: .6rem; margin-top: .3rem; }
.ficha__garantias li { display: flex; gap: .6rem; align-items: center; font-size: .9rem; color: var(--tinta-media); }
.ficha__garantias svg { color: var(--marca); flex: 0 0 auto; }
.ficha__garantias a { color: var(--marca); font-weight: 700; }

.ficha__cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(1.75rem, 4vw, 3rem);
}
.ficha__titulo-seccion { font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.ficha__texto { white-space: pre-line; color: var(--tinta-media); }

.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; }
.lista-datos dt { font-weight: 800; color: var(--tinta-suave); font-size: .86rem; }
.lista-datos dd { margin: 0; color: var(--tinta-media); font-size: .93rem; }

.pastillas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.pastillas li a, .pastillas li {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--tinta-media);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 700;
}
.pastillas li a:hover { background: var(--marca-suave); color: var(--marca-oscuro); }

.ficha__extras, .ficha__relacionadas { margin-top: clamp(1.75rem, 4vw, 3rem); }

/* Visor de imágenes */
.visor {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(28, 18, 32, .92);
    display: grid;
    place-items: center;
    padding: 2.5rem;
}
.visor img { max-width: min(94vw, 1100px); max-height: 82vh; object-fit: contain; border-radius: var(--radio); background: #fff; }
.visor__pie { color: rgba(255, 255, 255, .75); margin: .8rem 0 0; font-weight: 700; }
.visor__boton {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.visor__boton:hover { background: rgba(255, 255, 255, .28); }
.visor__boton[data-dir="anterior"] { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.visor__boton[data-dir="siguiente"] { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.visor__boton[data-dir="cerrar"] { right: 1.5rem; top: 1.5rem; }

/* ------------------------------------------------------------- Carrito */

.carrito__estado { color: var(--tinta-media); font-weight: 700; }

.carrito__vacio {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--crema);
    border-radius: var(--radio-xl);
}
.carrito__vacio img { width: 150px; margin: 0 auto 1rem; }
.carrito__vacio p { color: var(--tinta-media); max-width: 34rem; margin-inline: auto; }
.carrito__vacio-acciones { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }

.carrito {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
}
.carrito__lista-caja {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: .5rem 1.1rem;
}
.carrito__lista li + li { border-top: 1px solid var(--linea); }

.carrito-linea {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
}
.carrito-linea__media {
    width: 84px;
    height: 84px;
    border-radius: var(--radio-sm);
    background: var(--crema);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.carrito-linea__media img { width: 100%; height: 100%; object-fit: contain; padding: .4rem; }
.carrito-linea__sinfoto { font-size: .7rem; color: var(--tinta-suave); text-align: center; }
.carrito-linea__cuerpo { display: grid; gap: .2rem; }
.carrito-linea__titulo { font-weight: 800; color: var(--tinta); text-decoration: none; }
.carrito-linea__titulo:hover { color: var(--marca); }
.carrito-linea__detalle { font-size: .84rem; color: var(--tinta-suave); }
.carrito-linea__precio { font-size: .88rem; color: var(--tinta-media); }
.carrito-linea__aviso { font-size: .82rem; color: var(--alerta); font-weight: 700; }

.carrito-linea__controles { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; }
.carrito-linea__boton {
    width: 30px;
    height: 30px;
    border: 2px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}
.carrito-linea__boton:hover { border-color: var(--marca); color: var(--marca); }
.carrito-linea__cantidad {
    width: 3rem;
    text-align: center;
    border: 2px solid var(--linea);
    border-radius: var(--radio-xs);
    padding: .3rem;
    font: inherit;
    font-weight: 700;
}
.carrito-linea__quitar {
    border: 0;
    background: transparent;
    color: var(--tinta-suave);
    text-decoration: underline;
    cursor: pointer;
    font-size: .84rem;
    margin-left: .3rem;
}
.carrito-linea__quitar:hover { color: var(--alerta); }
.carrito-linea__subtotal {
    font-family: var(--fuente-display);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.carrito__resumen {
    position: sticky;
    top: 8.5rem;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.25rem;
    display: grid;
    gap: .7rem;
}
.carrito__fila { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.carrito__fila b { font-family: var(--fuente-display); font-size: 1.4rem; }
.carrito__envio { margin: 0; font-size: .86rem; color: var(--exito); font-weight: 700; }
.carrito__nota { margin: 0; font-size: .84rem; color: var(--tinta-suave); }
.carrito__promos { margin: 0; font-size: .86rem; text-align: center; }
.carrito__promos a { color: var(--marca); font-weight: 700; }

/* ------------------------------------------------------------ Checkout */

.checkout__estado { color: var(--tinta-media); font-weight: 700; }

.acceso { display: grid; place-items: center; }
.acceso__caja {
    width: min(100%, 34rem);
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    gap: .8rem;
}
.acceso__caja h2 { margin: 0; }
.acceso__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    background: var(--crema);
    border-radius: 999px;
    padding: .25rem;
}
.acceso__tab {
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: .55rem;
    font-weight: 800;
    color: var(--tinta-media);
    cursor: pointer;
}
.acceso__tab[aria-selected="true"] { background: #fff; color: var(--marca); box-shadow: var(--sombra-sm); }
.acceso__panel { display: grid; gap: .8rem; }
.acceso__estado { margin: 0; font-size: .88rem; color: var(--alerta); font-weight: 700; }
.acceso__pie { margin: 0; font-size: .85rem; color: var(--tinta-suave); text-align: center; }
.acceso--solo { place-items: stretch; }

.checkout { display: grid; place-items: center; }
.checkout__caja {
    width: min(100%, 40rem);
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    gap: 1rem;
}
.checkout__campos { display: grid; gap: .9rem; }
.checkout__leyenda { margin: 0; font-size: .86rem; color: var(--tinta-suave); }
.checkout__resumen-caja {
    background: var(--crema);
    border-radius: var(--radio);
    padding: 1.1rem;
    display: grid;
    gap: .5rem;
}
.resumen { display: grid; gap: .4rem; }
.resumen-linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.resumen-linea__nombre { color: var(--tinta-media); }
.resumen-linea__monto { font-weight: 800; white-space: nowrap; }
.checkout__fila { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; padding-top: .4rem; border-top: 1px solid var(--linea-fuerte); }
.checkout__fila--total b { font-family: var(--fuente-display); font-size: 1.5rem; color: var(--marca); }
.checkout__pago { margin: 0; font-size: .84rem; color: var(--tinta-suave); text-align: center; }

/* --------------------------------------------------------- Mi cuenta */

.cuenta-panel { display: grid; gap: 1.25rem; }
.cuenta-panel__cabeza {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--crema);
    border-radius: var(--radio-lg);
    padding: 1.1rem 1.4rem;
    flex-wrap: wrap;
}
.cuenta-panel__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-family: var(--fuente-display);
    font-size: 1.4rem;
    font-weight: 700;
}
.cuenta-panel__quien { display: grid; }
.cuenta-panel__nombre { font-size: 1.15rem; }
.cuenta-panel__email { font-size: .88rem; color: var(--tinta-suave); }
.cuenta-panel__cabeza .boton { margin-left: auto; }

.cuenta-panel__tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cuenta-panel__tab {
    border: 2px solid var(--linea);
    background: #fff;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 800;
    color: var(--tinta-media);
    cursor: pointer;
}
.cuenta-panel__tab:hover { border-color: var(--marca-suave2); color: var(--marca); }
.cuenta-panel__tab.is-activo { background: var(--marca); border-color: var(--marca); color: #fff; }

.panel {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.4rem;
}
.panel__titulo { font-family: var(--fuente-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 .2rem; }
.panel__bajada { color: var(--tinta-suave); font-size: .9rem; }
.cuenta-panel__datos form { display: grid; gap: .8rem; max-width: 30rem; }
.cuenta-panel__ayuda { display: grid; gap: .5rem; }
.cuenta-panel__ayuda a { color: var(--marca); font-weight: 700; }

.cuenta-orden {
    border: 2px solid var(--linea);
    border-radius: var(--radio);
    padding: 1rem 1.1rem;
    display: grid;
    gap: .6rem;
}
.cuenta-orden + .cuenta-orden { margin-top: .8rem; }
.cuenta-orden__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cuenta-orden__cabeza > div { display: grid; }
.cuenta-orden__fecha { font-size: .84rem; color: var(--tinta-suave); }
.cuenta-orden__estado {
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--tinta-media);
    font-size: .8rem;
    font-weight: 800;
}
.cuenta-orden__estado--exito { background: rgba(23, 145, 95, .12); color: var(--exito); }
.cuenta-orden__estado--alerta { background: rgba(209, 69, 59, .12); color: var(--alerta); }
.cuenta-orden__items { display: grid; gap: .3rem; }
.cuenta-orden__item { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--tinta-media); }
.cuenta-orden__total { display: flex; justify-content: space-between; padding-top: .5rem; border-top: 1px solid var(--linea); font-weight: 800; }
.cuenta-orden__total b { font-family: var(--fuente-display); font-size: 1.2rem; color: var(--marca); }

/* Página /ingresar */
.pagina--acceso { padding-top: 0; }
.ingresar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.ingresar__arte {
    background: linear-gradient(140deg, var(--marca), var(--marca-oscuro));
    color: #fff;
    border-radius: var(--radio-xl);
    padding: clamp(1.75rem, 4vw, 3rem);
}
.ingresar__arte img { width: 130px; margin-bottom: 1rem; }
.ingresar__arte h1 { color: #fff; }
.ingresar__lista { display: grid; gap: .55rem; margin-top: 1.2rem; }
.ingresar__lista li { position: relative; padding-left: 1.6rem; color: rgba(255, 255, 255, .88); }
.ingresar__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: var(--sol);
}

/* ---------------------------------------------------------- Peluquería */

.pelu-hero { background: var(--crema); padding: clamp(2rem, 5vw, 3.5rem) 0; }
.pelu-hero__interior {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.pelu-hero__bajada { color: var(--tinta-media); font-size: 1.03rem; max-width: 34rem; }
.pelu-hero__acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .8rem; }
.pelu-hero__nota { font-size: .88rem; color: var(--tinta-suave); max-width: 32rem; }
.pelu-hero__datos { display: grid; gap: .45rem; margin-top: 1rem; }
.pelu-hero__datos li { font-size: .92rem; color: var(--tinta-media); }
.pelu-hero__datos b { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.pelu-hero__arte img { border-radius: var(--radio-xl); box-shadow: var(--sombra); }

.servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gap);
}
.servicio {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.35rem;
}
.servicio__icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radio-sm);
    background: var(--marca-suave);
    color: var(--marca);
    margin-bottom: .7rem;
}
.servicio h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.servicio p { margin: 0; font-size: .92rem; color: var(--tinta-media); }
.servicios__nota { margin-top: 1.5rem; font-size: .9rem; color: var(--tinta-suave); }

.galeria-pelu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gap);
}
.galeria-pelu__item {
    margin: 0;
    border-radius: var(--radio-lg);
    overflow: hidden;
    cursor: zoom-in;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
.galeria-pelu__item:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.galeria-pelu__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria-pelu__nota { margin-top: 1rem; font-size: .84rem; color: var(--tinta-suave); }

.pelu-turno {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.pelu-turno__lista { display: grid; gap: 1rem; counter-reset: paso; margin-top: 1rem; }
.pelu-turno__lista li {
    counter-increment: paso;
    position: relative;
    padding-left: 3rem;
    display: grid;
    gap: .1rem;
}
.pelu-turno__lista li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-family: var(--fuente-display);
    font-weight: 700;
}
.pelu-turno__lista b { font-size: 1.05rem; }
.pelu-turno__lista span { color: var(--tinta-media); font-size: .93rem; }
.pelu-turno__caja {
    background: var(--crema);
    border-radius: var(--radio-lg);
    padding: 1.4rem;
}
.pelu-turno__canales { display: grid; gap: .6rem; margin-top: 1rem; }

/* ------------------------------------------------ Promociones bancarias */

.promos { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.promos__hoy {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin: 1rem 0 0;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    box-shadow: var(--sombra-sm);
}
.promos__hoy b { color: var(--marca); text-transform: capitalize; }

.promos__dias { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.promos__dia {
    border: 2px solid var(--linea);
    background: #fff;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 800;
    color: var(--tinta-media);
    cursor: pointer;
}
.promos__dia:hover { border-color: var(--marca-suave2); color: var(--marca); }
.promos__dia[aria-selected="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.promos__dia[data-promo-hoy-marca]::after {
    content: "hoy";
    margin-left: .4rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--sol);
    color: #3b2740;
    border-radius: 999px;
    padding: .05rem .4rem;
}

.promos__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--gap);
}

.promo {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 1.3rem;
    display: grid;
    gap: .7rem;
    align-content: start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.promo:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--marca-suave2); }
.promo--siempre { background: linear-gradient(140deg, var(--marca-suave), #fff); }

/* El día va arriba como etiqueta: si compartiera fila con el banco, un
   nombre largo ("Todas las tarjetas bancarias") quedaría en una columna
   de tres palabras por línea. */
.promo__cabeza { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .45rem; }
.promo__banco { font-family: var(--fuente-display); font-size: 1.12rem; font-weight: 700; color: var(--tinta); line-height: 1.2; }
.promo__dia-chip {
    flex: 0 0 auto;
    background: var(--crema);
    color: var(--tinta-media);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.promo__beneficio {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--marca);
}
.promo__beneficio span { display: block; font-family: var(--fuente); font-size: .92rem; font-weight: 700; color: var(--tinta-media); }
.promo__datos { display: grid; gap: .4rem; }
.promo__datos li { font-size: .88rem; color: var(--tinta-media); }
.promo__datos b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }

.promos__vacio {
    margin: 1.5rem 0 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    background: var(--crema);
    border: 2px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    color: var(--tinta-media);
    font-weight: 700;
}

.promos__legal {
    margin-top: clamp(2rem, 4vw, 3rem);
    background: var(--crema);
    border-radius: var(--radio-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.promos__legal-titulo { font-size: 1.1rem; }
.promos__legal ul { display: grid; gap: .5rem; }
.promos__legal li { position: relative; padding-left: 1.3rem; font-size: .9rem; color: var(--tinta-media); }
.promos__legal li::before { content: "•"; position: absolute; left: .3rem; color: var(--marca); font-weight: 800; }

/* ------------------------------------------------------------- Contacto */

.contacto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--gap);
}
.contacto__canal {
    display: grid;
    gap: .6rem;
    padding: 1.4rem;
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio-lg);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.contacto__canal:hover { transform: translateY(-4px); border-color: var(--marca-suave2); box-shadow: var(--sombra); }
.contacto__canal--principal { background: linear-gradient(140deg, var(--marca-suave), #fff); }
.contacto__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-sm);
    background: var(--marca-suave);
    color: var(--marca);
}
.contacto__cuerpo { display: grid; }
.contacto__cuerpo b { font-family: var(--fuente-display); font-size: 1.1rem; }
.contacto__cuerpo span { color: var(--tinta-media); font-size: .93rem; }

.contacto__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
}
.contacto__dato { background: var(--crema); border-radius: var(--radio-lg); padding: 1.2rem; }
.contacto__dato p { margin: 0; color: var(--tinta-media); }
.contacto__redes { display: flex; gap: .8rem; }
.contacto__redes a { color: var(--marca); font-weight: 700; }

.faq { display: grid; gap: .7rem; max-width: 52rem; }
.faq__item {
    background: #fff;
    border: 2px solid var(--linea);
    border-radius: var(--radio);
    padding: .9rem 1.2rem;
}
.faq__item summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--marca); font-size: 1.3rem; line-height: 1; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: .7rem 0 0; color: var(--tinta-media); font-size: .95rem; }

/* =====================================================================
   Pie
   ===================================================================== */

.pie { background: var(--tinta); color: rgba(255, 255, 255, .82); margin-top: clamp(2rem, 5vw, 4rem); }

.pie__cinta { background: var(--marca); color: #fff; }
.pie__cinta-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.pie__cinta-texto { max-width: 40rem; }
.pie__cinta-texto h2 { color: #fff; margin-bottom: .3rem; }
.pie__cinta-texto p { color: rgba(255, 255, 255, .88); margin: 0; }

.pie__grilla {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2rem, 4vw, 3rem) 0;
}
/* El arte del logo tiene fondo blanco sólido: sobre el pie oscuro va en
   una placa redondeada, y el nombre ya viaja dentro de la imagen. */
.pie__logo-placa {
    display: inline-block;  
    padding: .5rem 0;
    margin-bottom: .8rem;
}
.pie__logo { display: block; height: clamp(38px, 4vw, 50px); width: auto; margin: 0; }
.pie__marca p { font-size: .93rem; }
.pie__redes { display: flex; gap: 1rem; margin-top: .9rem; }
.pie__redes a { color: #fff; font-weight: 700; text-decoration: none; font-size: .9rem; }
.pie__redes a:hover { color: var(--sol); }

.pie__titulo { font-family: var(--fuente-display); font-size: 1.05rem; color: #fff; margin: 0 0 .6rem; }
.pie__columna ul { display: grid; gap: .4rem; }
.pie__columna a { text-decoration: none; font-size: .93rem; }
.pie__columna a:hover { color: var(--sol); }
.pie__contacto { display: grid; gap: .4rem; font-size: .93rem; }

.pie__legal { border-top: 1px solid rgba(255, 255, 255, .12); }
.pie__legal-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
}

/* Firma del desarrollador: discreta, gana presencia al pasar el mouse */
.pie__firma {
    display: inline-flex;
    align-items: center;
    opacity: .75;
    transition: opacity .15s ease;
    width: 78px;
}
.pie__firma:hover { opacity: 1; }
.pie__firma img { height: 26px; width: auto; display: block; }

/* =====================================================================
   Aparición al hacer scroll (la clase la agrega el motor)
   ===================================================================== */

.aparece { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.aparece.es-visible { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1100px) {
    .megamenu__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .megamenu__promo { display: none; }
    .catalogo__grilla { grid-template-columns: 1fr; }
    .filtros { position: static; }
    .carrito { grid-template-columns: 1fr; }
    .carrito__resumen { position: static; }
    .ingresar { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .franja__claim { display: none; }
    .cabecera__interior { flex-wrap: wrap; }
    .buscador-barra { order: 3; flex: 1 1 100%; }
    .navegacion__boton { display: flex; }

    .cabecera__menu { display: none; }
    /* El cajón abierto puede superar la altura del viewport (header sticky):
       se recorre adentro, con el botón hamburguesa siempre a la vista. */
    .cabecera.tiene-menu-abierto .cabecera__menu {
        display: block;
        max-height: calc(100vh - 14.5rem);
        max-height: calc(100dvh - 14.5rem);
        overflow-y: auto;
    }
    .cabecera__menu-interior { flex-direction: column; align-items: stretch; padding-bottom: 1rem; }

    /* En el cajón móvil las solapas no aplican: el menú se lee como una
       lista plegable sobre el fondo del propio cajón. */
    .megamenu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .megamenu__item { border-bottom: 1px solid var(--linea); }
    .megamenu__item--todas { display: none; }
    .megamenu__disparador,
    .megamenu__disparador--todas {
        width: 100%;
        justify-content: flex-start;
        border-radius: 0;
        background: transparent;
        color: var(--tinta);
        padding: .85rem .2rem;
    }
    .megamenu__disparador:hover,
    .megamenu__item[data-abierto] > .megamenu__disparador {
        background: transparent;
        color: var(--marca);
    }
    .megamenu__panel {
        position: static;
        transform: none;
        width: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 1rem;
    }
    .megamenu__panel::before, .megamenu__panel::after { display: none; }
    .megamenu__grilla { width: 100%; grid-template-columns: 1fr; gap: 1rem; padding-left: .8rem; }
    .megamenu__grupo + .megamenu__grupo { border-left: 0; padding-left: 0; }

    .navegacion { margin-left: 0; }
    .navegacion__lista { flex-direction: column; }
    .navegacion__lista a { padding: .6rem .2rem; border-bottom: 0; }
    /* En la lista apilada la página activa se marca en suave, no sólida */
    .navegacion__lista a[aria-current="page"] {
        background: var(--marca-suave);
        color: var(--marca-oscuro);
    }

    .ficha__superior { grid-template-columns: 1fr; }
    .banda__interior { grid-template-columns: 1fr; }
    .pelu-hero__interior { grid-template-columns: 1fr; }
    .pelu-turno { grid-template-columns: 1fr; }
    .catalogo__abrir-filtros { display: flex; }
    .filtros { display: none; }
    .filtros[data-abierto] { display: grid; }

    /* El pie a cuatro columnas en pantalla chica deja una palabra por línea */
    .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .contenedor { width: min(100% - 1.75rem, var(--ancho)); }
    .grilla, .riel, .riel--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .tarjeta__cuerpo { padding: .7rem .8rem .3rem; }
    .tarjeta__pie { padding: .5rem .8rem .8rem; }
    .tarjeta__titulo { font-size: .9rem; }
    .tarjeta__precio { font-size: 1.15rem; }
    .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .especie { min-height: 165px; padding: 1.25rem; }
    .slide { min-height: 430px; align-items: end; }
    .slide::after,
    .slide--delko-adult::after,
    .slide--delko-kitten::after { background: linear-gradient(0deg, rgba(25, 17, 24, .93) 0%, rgba(25, 17, 24, .72) 54%, rgba(25, 17, 24, .08) 100%); }
    .slide__arte { object-position: 68% center; }
    .slide__texto { max-width: 31rem; padding: 7rem 1.3rem 3rem; }
    .slide__titulo { font-size: clamp(1.55rem, 7vw, 2rem); }
    .slide__bajada { font-size: .92rem; margin-bottom: 1rem; }
    .slide__oferta { margin-bottom: 1rem; }
    /* En pantalla chica sobran los puntos y el deslizar con el dedo: las
       flechas sólo taparían el texto de la promoción. */
    .slider__flecha { display: none; }
    .galeria { grid-template-columns: 1fr; }
    .galeria__item:first-child { aspect-ratio: 1 / 1; }
    .carrito-linea { grid-template-columns: 64px minmax(0, 1fr); }
    .carrito-linea__media { width: 64px; height: 64px; }
    .carrito-linea__subtotal { grid-column: 2; text-align: left; }
    .promo__beneficio { font-size: 2rem; }
    .pie__grilla { grid-template-columns: 1fr; }
    .pie__legal-interior { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .aparece { opacity: 1; transform: none; }
}