@font-face{font-family:'Catherine Fearon';src:url('../fonts/CatherineFearon.woff2') format('woff2');font-display:swap;}
:root{
/* Paleta Sal Solcito · verde tomado del logo oficial (#6F7521) */
--crema:#FBF8E2; --crema-suave:#FBF8E2; --blanco:#FFFDF6;
--amarillo-tira:#FDF18D; --amarillo-suave:#FBF29A;
--oliva:#6F7521; --oliva-oscuro:#4C5114;
--salvia:#CDCF9F; --salvia-suave:#E2E3C6;
--ciruela:#5C3639; --lila:#DEC9E5; --lila-suave:#EBDDEF;
--naranja:#E0952F; --rosado:#EFC3C9; --guinda:#9E5560;
--gris-img:#C8C5B6; --gris-img-2:#BDBAA9;
--tinta:#23221A; --tinta-suave:#55534A;
--display:'Catherine Fearon','Italiana',serif;
--sans:'Source Sans 3',system-ui,sans-serif;
--script:'Alex Brush',cursive;
/* Flor Salsolcito (flor_salsolcito.svg) como máscara de recorte, y su versión vertical */
--flor-svg:url("data:image/svg+xml,");
--flor-svg-v:url("data:image/svg+xml,");
--radio-card:14px; /* SOLO cards de producto */
--transicion:.45s cubic-bezier(.22,.61,.36,1);
--gutter:clamp(18px,3.5vw,56px); /* margen lateral responsivo */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--crema);color:var(--tinta);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--sans);font-size:1rem;color:var(--tinta);border-radius:0}
h1,h2,h3,h4,h5,h6{font-weight:400} /* Catherine Fearon nunca se engrosa: el peso se declara explícito donde se necesita */
:focus-visible{outline:2px solid var(--oliva);outline-offset:3px}
/* ---------- Sistema full-width / full-bleed ----------
.contenedor ya NO limita el ancho: solo protege la legibilidad
con gutters responsivos. Los fondos siempre van de borde a borde. */
.contenedor{width:100%;padding-inline:var(--gutter)}
.texto-legible{max-width:68ch}
.display{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.01em}
.script{font-family:var(--script);font-weight:400}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.oculto{display:none!important}
/* ---------- Placeholders de imagen: SIEMPRE rectangulares ---------- */
.ph{
background:var(--gris-img);border-radius:0;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;
}
.ph::after{
content:attr(data-img);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(35,34,26,.42);text-align:center;padding:0 1rem;
}
.ph.alt{background:var(--gris-img-2)}
.ph.video::after{content:attr(data-img);font-weight:700;color:rgba(35,34,26,.55)}
/* Imágenes reales de Cloudinary: ocupan el contenedor igual que el placeholder */
.ph-img{
width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
}
/* Contenedores .media: dan altura por aspect-ratio; la imagen los llena en flujo normal */
.media{position:relative;overflow:hidden;display:block}
.media > .ph-img{position:absolute;inset:0;width:100%;height:100%}
/* Cards de producto: dos imágenes superpuestas (principal + hover) */
.card-prod-media{position:relative}
.card-prod-media > .ph-img{position:absolute;inset:0;transition:opacity .6s ease}
.card-prod-media > .ph-img.hover2{opacity:0}
.card-prod:hover > .card-prod-media > .ph-img.hover2,.card-prod:hover .ph-img.hover2{opacity:1}
.galeria-principal{position:relative}
.galeria-principal > .ph-img{position:absolute;inset:0;transition:transform .5s ease}
.galeria-principal:hover > .ph-img{transform:scale(1.4)}
.card-cat .ph-img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.card-cat:hover .ph-img{transform:scale(1.045)}
/* ---------- Botones: rectangulares, editoriales ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:1rem 2.2rem;font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
border-radius:0;border:1px solid transparent;position:relative;
transition:background var(--transicion),color var(--transicion),border-color var(--transicion),letter-spacing var(--transicion);
}
.btn:hover{letter-spacing:.28em}
.btn:active{transform:translateY(1px)}
.btn-lila{background:var(--lila);color:var(--tinta);border-color:var(--tinta)}
.btn-lila:hover{background:var(--lila-suave)}
/* btn-oliva quedó como alias de lila: todos los CTA son lila (verde eliminado) */
.btn-oliva{background:var(--lila);color:var(--tinta);border-color:var(--tinta)}
.btn-oliva:hover{background:var(--lila-suave)}
/* Caja amarilla · para CTA destacados especiales cuando quieras variar */
.btn-amarillo{background:#EAD98A;color:var(--tinta);border-color:var(--tinta)}
.btn-amarillo:hover{background:#F2E6A6}
.btn-linea{background:transparent;border-color:var(--tinta);color:var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:var(--crema)}
.btn-crema{background:var(--crema);color:var(--tinta);border-color:var(--crema)}
.btn[disabled]{opacity:.5;pointer-events:none}
/* ---------- Header (full-width) ---------- */
header{
position:fixed;inset:0 0 auto 0;z-index:200;background:var(--crema);
transition:background var(--transicion),box-shadow var(--transicion);
}
header.sobre-hero{background:transparent}
header.sobre-hero .nav-link,header.sobre-hero .util-link{color:var(--crema)}
header.sobre-hero .logo{color:var(--crema)}
header.compacto{box-shadow:0 3px 20px rgba(35,34,26,.08)}
.header-inner{
width:100%;padding-inline:var(--gutter);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.util-izq{display:flex;gap:2.2rem;padding:1.05rem 0 .35rem}
.util-der{display:flex;gap:2.2rem;justify-content:flex-end;padding:1.05rem 0 .35rem}
header.compacto .util-izq,header.compacto .util-der{padding:.5rem 0 .15rem}
.util-link{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oliva-oscuro);transition:opacity .3s;display:inline-flex;align-items:center;gap:.4rem}
.util-link:hover{opacity:.6}
.util-link svg{width:1rem;height:1rem;flex-shrink:0}
/* icono-carrito.svg es ancho (viewBox 220×152): al 1rem×1rem cuadrado del
resto de íconos, "meet" lo encoge para que quepa y se ve chico. Le damos
su propia caja, respetando su proporción real, más grande que el resto
porque es la acción principal del header. */
#btnCarrito svg{width:1.7rem;height:1.17rem}
.logo{grid-column:2;grid-row:1 / span 2;justify-self:center;padding:.5rem 0;color:var(--oliva);transition:color var(--transicion)}
.logo svg{width:60px;height:60px;transition:width var(--transicion),height var(--transicion)}
header.compacto .logo svg{width:42px;height:42px}
.nav-row{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-grupo{display:flex;gap:clamp(1rem,2.4vw,2.6rem);padding:.35rem 0 .95rem}
.nav-grupo.izq{justify-content:flex-start}
.nav-grupo.der{justify-content:flex-end}
header.compacto .nav-grupo{padding:.15rem 0 .55rem}
.nav-link{
font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oliva-oscuro);
display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;position:relative;
}
.nav-link::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{transform:scaleX(1)}
.caret{font-size:.6rem;transition:transform .3s}
.nav-link[aria-expanded="true"] .caret{transform:rotate(180deg)}
.badge-carrito{
background:var(--ciruela);color:var(--crema);font-size:.62rem;font-weight:700;
min-width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
transform:translateY(-1px);
}
/* ---------- Mega menú ---------- */
.mega{
position:absolute;left:0;right:0;top:100%;background:var(--crema-suave);
border-top:1px solid rgba(111,117,33,.18);box-shadow:0 30px 60px rgba(35,34,26,.14);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .35s,transform .35s,visibility .35s;
max-height:calc(100vh - 130px);overflow:auto;
}
.mega.abierto{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{width:100%;padding:2.6rem var(--gutter) 3rem;display:grid;grid-template-columns:auto 1fr;gap:3.5rem}
.mega-titulo{font-family:var(--display);font-size:clamp(2.8rem,4.6vw,4.2rem);line-height:1}
.mega-cols{display:flex;gap:clamp(2rem,5vw,5rem);flex-wrap:wrap}
.mega-col h4{font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1rem}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.mega-col a{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);transition:color .3s,padding-left .3s}
.mega-col a:hover{color:var(--oliva);padding-left:.4rem}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero .ph-hero{position:absolute;inset:0;background:linear-gradient(160deg,#5d6b4a 0%,#42502f 45%,#31402a 100%)}
/* Carrusel del hero: slides superpuestos que se funden */
.hero-carrusel{position:absolute;inset:0}
.hero-slide{
position:absolute;inset:0;background-size:cover;background-position:center;
background-image:var(--bg-desktop);
opacity:0;transition:opacity 1.4s ease-in-out;
}
/* En móvil cada slide usa su foto editada para vertical; si la foto móvil
aún no está subida (404), la de desktop se ve por debajo como respaldo */
@media (max-width:860px){
.hero-slide{background-image:var(--bg-movil,var(--bg-desktop)),var(--bg-desktop)}
}
.hero-slide.activo{opacity:1}
.hero-carrusel .ph-hero{opacity:1}
.hero .ph-hero::after{
content:'Imagen 01 · home-hero.jpg · 1920 × 1080';position:absolute;top:140px;right:24px;
font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,232,.45);
}
.hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,34,26,.34) 0%,rgba(35,34,26,.08) 40%,rgba(35,34,26,.5) 100%)}
.marca-gigante{
position:absolute;top:48%;left:50%;transform:translate(-50%,-60%);width:min(88%,1100px);text-align:center;pointer-events:none;
color:rgba(160,168,60,.9);
mix-blend-mode:screen;line-height:1;
}
.marca-gigante svg{width:100%;height:auto;display:block;color:inherit}
.marca-gigante svg use{color:inherit}
.hero-contenido{position:relative;z-index:2;width:100%;padding:0 var(--gutter) clamp(2.5rem,6vh,5rem)}
.hero-titulo{font-family:var(--display);font-size:clamp(2.6rem,6.2vw,5.6rem);color:var(--crema);line-height:.87;max-width:12ch}
.hero-sub{margin-top:1.4rem;max-width:52ch;color:var(--crema)}
.hero-sub .eyebrow{display:block;margin-bottom:.6rem}
.hero-cta{margin-top:1.8rem}
.hero-firma{position:absolute;right:var(--gutter);bottom:clamp(2rem,5vh,3.4rem);font-family:var(--script);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--crema);z-index:2}
/* Móvil: la firma sube a la esquina superior derecha para no tapar el CTA */
@media (max-width:860px){
.hero-firma{top:76px;bottom:auto;font-size:1.35rem;opacity:.92}
}
/* ---------- Secciones ---------- */
section{padding:clamp(3.5rem,8vh,6.5rem) 0}
.seccion-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap}
.titulo-seccion{font-family:var(--display);font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.02}
.sub-seccion{max-width:46ch;color:var(--tinta-suave)}
.firma-seccion{font-family:var(--script);font-size:1.6rem;color:var(--tinta-suave)}
.temporada{background:#E2E3C6}
.temporada .grid2{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.temporada .display-xl{font-family:var(--script);font-size:clamp(3.4rem,8vw,6.4rem);line-height:.9;margin-left:-.06em}
.temporada .media{aspect-ratio:4/5}
.grid-categorias{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.card-cat{position:relative;overflow:hidden;display:block}
.card-cat .media{aspect-ratio:3/4;overflow:hidden}
.card-cat .ph{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.card-cat:hover .ph{transform:scale(1.045)}
.card-cat-info{position:absolute;inset:auto 0 0 0;padding:1.4rem;background:linear-gradient(180deg,transparent,rgba(35,34,26,.55))}
.card-cat-info h3{font-family:var(--display);font-size:1.9rem;color:var(--crema)}
.card-cat-info p{font-size:.85rem;color:rgba(250,248,232,.9);max-width:26ch}
/* ---------- Tiras animadas (marquee) ---------- */
.tira{overflow:hidden;white-space:nowrap;padding:.7rem 0;position:relative}
.tira-inner{display:inline-flex;gap:0;animation:tira-desliza 32s linear infinite;will-change:transform}
.tira span{display:inline-block;padding-right:3.2rem;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
@keyframes tira-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tira-ciruela{background:#C8CFAC}
.tira-ciruela span{color:var(--ciruela)}
.tira-amarilla{background:var(--amarillo-tira)}
.tira-amarilla span{color:var(--ciruela)}
/* ---------- Accesos rápidos estilo highlights ---------- */
.accesos{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.acceso{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
aspect-ratio:1/1;max-height:340px;padding:1.6rem;text-align:center;position:relative;overflow:hidden;
transition:filter var(--transicion);
}
.acceso:hover{filter:brightness(1.04)}
/* El icono es una imagen PNG (estilo Salsolcito) que va encima de cada cuadrado */
.acceso-media{width:clamp(90px,11vw,160px);aspect-ratio:1/1;position:relative;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.acceso:hover .acceso-media{transform:translateY(-6px) rotate(-2deg)}
.acceso-media .ph-img{object-fit:contain} /* el PNG transparente se ve completo, sin recortes */
.acceso .acceso-t{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1;color:var(--ciruela)}
.acceso-amarillo{} /* feria · sin fondo de color, el ícono ya trae su propio tratamiento */
.acceso-lila{} /* promo y hecho a mano */
.acceso-verde{} /* nuevo */
@media (max-width:860px){.accesos{grid-template-columns:repeat(2,1fr)}}
/* ---------- Ornamentos florales en esquinas (aspecto artesanal / vintage) ---------- */
.con-ornamentos{position:relative;overflow:hidden}
.orn{position:absolute;width:clamp(90px,12vw,220px);height:auto;color:var(--salvia-suave);pointer-events:none;z-index:0}
.orn svg{width:100%;height:auto;display:block}
/* Ornamentos superiores: 100px de margen arriba · inferiores: 100px abajo */
.orn-tl{top:100px;left:-6px}
.orn-tr{top:100px;right:-6px;transform:scaleX(-1)}
.orn-bl{bottom:100px;left:-6px;transform:scaleY(-1)}
.orn-br{bottom:100px;right:-6px;transform:scale(-1,-1)}
.con-ornamentos > .contenedor,.con-ornamentos > *:not(.orn){position:relative;z-index:1}
/* El contenido de "te ayudamos a encontrar ese detalle especial" respira 100px arriba */
.con-ornamentos > .contenedor{margin-top:100px}
/* ---------- Flores de "nosotras": máscara de recorte sobre imagen estática ----------
La máscara (flor_salsolcito.svg) se mueve con el viento; la foto queda quieta,
así el marco floral revela un poquito de más arriba y de más abajo. */
.flor-mask{
width:100%;max-width:560px;aspect-ratio:710/551;margin-bottom:1.6rem;position:relative;overflow:visible;z-index:1;
-webkit-mask-image:var(--flor-svg);mask-image:var(--flor-svg);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center;mask-position:center;
animation:mask-viento 7s ease-in-out infinite;
}
.flor-mask img,.flor-mask .ph{width:100%;height:130%;object-fit:cover;position:absolute;top:-15%;left:0;animation:foto-quieta 7s ease-in-out infinite}
/* La máscara gira con el viento; la foto se contra-mueve para quedarse quieta */
@keyframes mask-viento{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-9px)}}
@keyframes foto-quieta{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(9px)}}
/* Las 3 flores miden y pesan igual — solo cambian rotación/espejo y el
momento de la animación, para que no se vean como una sola copiada. */
.grid3 .valor:nth-child(2) .flor-mask{transform:scaleX(-1) rotate(6deg);animation-delay:1.2s}
.grid3 .valor:nth-child(2) .flor-mask img,.grid3 .valor:nth-child(2) .flor-mask .ph{animation-delay:1.2s}
.grid3 .valor:nth-child(3) .flor-mask{transform:rotate(-5deg);animation-delay:2.4s}
.grid3 .valor:nth-child(3) .flor-mask img,.grid3 .valor:nth-child(3) .flor-mask .ph{animation-delay:2.4s}
/* ---------- Secciones full screen: mismo alto que el header/hero ---------- */
.pantalla-completa{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
/* ---------- Home: tarjetas apiladas al hacer scroll (ver js/router.js → iniciarStackCards) ----------
Cada sección se fija arriba y la siguiente la va cubriendo — por eso TODAS
necesitan fondo opaco propio, si no se transparentaría la de abajo.
Un poco más altas que la pantalla (108svh) para que respire la transición. */
.stack-card{position:sticky;top:0;min-height:108svh}
/* El hero es la excepción: su contenido va pegado abajo (align-items:flex-end)
DENTRO de la caja. Si la caja mide 108svh, ese contenido queda en el 8%
que sobra — fuera de lo que se alcanza a ver mientras el hero está fijo
en pantalla. Por eso el hero se queda exacto al 100% de la pantalla. */
.hero.stack-card{min-height:100svh}
.con-ornamentos{background:var(--crema)}
.destacados{background:var(--blanco)}
.experience{background:var(--amarillo-suave)}
/* Categorías/experience tienen grillas de varias filas: su contenido mide
más que una pantalla de alto (en cualquier tamaño, no solo mobile).
position:sticky fija la tarjeta pero NO deja hacer scroll DENTRO de
ella — lo que sobra de una pantalla queda cortado para siempre mientras
está pegada. Por eso estas 2 NO se apilan — quedan en flujo normal y la
siguiente tarjeta pegajosa las cubre igual al alcanzarlas (el orden del
HTML ya hace que lo de después se pinte encima; no hace falta que ellas
también estén sticky para lograr el efecto). Así se ve completo TODO su
contenido, sin cortar botones ni imágenes, en cualquier tamaño de
pantalla. (destacados ya no está acá: con solo 3 productos —una fila—
su contenido sí cabe en una pantalla, y se apila igual que las demás). */
.con-ornamentos.stack-card, .experience.stack-card{
position:relative;min-height:auto; /* relative, no static: con-ornamentos necesita
seguir siendo contexto de posición para sus
ornamentos florales (position:absolute) */
}
/* La tira "un regalo de mí, para ti" es angosta — si fuera 108svh como el
resto, dejaría un salto enorme entre tarjetas. Igual necesita ser
.stack-card (sticky) para no deslizarse ENCIMA de la tarjeta anterior. */
.tira.stack-card{min-height:0}
/* Los accesos ahora viven adentro de con-ornamentos (ya no son su propia
tarjeta) — solo un poco de aire antes del título. */
.con-ornamentos .accesos{margin-bottom:2rem}
/* La tira de avisos ahora vive dentro del header (index.html) — se
muestra/rellena solo en el home, ver aplicarTiraHeader() en router.js.
Empieza invisible (mientras el header está transparente, sobre el hero)
y aparece con un fundido justo cuando el header se pone crema/compacto. */
#tiraHeader[hidden]{display:none}
#tiraHeader{opacity:0;transition:opacity .35s ease}
header.compacto #tiraHeader{opacity:1}
.nosotras-banda{background:var(--ciruela);color:var(--crema);padding-top:clamp(4rem,9vh,7rem)}
.display-desborde{font-family:var(--display);font-size:clamp(4rem,12vw,10rem);color:var(--lila);line-height:.8;margin-bottom:-.28em;position:relative;z-index:2;pointer-events:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card-editorial .media{aspect-ratio:4/3;margin-bottom:1.1rem}
.card-editorial h4{font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
.card-editorial p{font-size:.9rem;color:rgba(250,248,232,.82)}
.valores{background:var(--lila)}
.flor{width:clamp(150px,16vw,220px);height:auto;margin-bottom:1.6rem;color:var(--ciruela);animation:flotar 7s ease-in-out infinite}
.grid3 .valor:nth-child(2) .flor{animation-delay:1.2s}
.grid3 .valor:nth-child(3) .flor{animation-delay:2.4s}
@keyframes flotar{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
.valor h4{font-weight:700;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7rem}
.valor p{font-size:.92rem;color:rgba(35,34,26,.75);max-width:34ch}
.valor .btn{margin-top:1.3rem}
/* ---------- Grilla de productos: 1 / 2 / 3 columnas (máx. 3 SIEMPRE) ---------- */
.grid-productos{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.slot-2{grid-column:span 2}
.slot-3{grid-column:1 / -1}
.slot-editorial{display:grid;align-content:center;gap:1rem;padding:clamp(1.4rem,3vw,2.4rem);background:var(--crema-suave);border:1px solid rgba(35,34,26,.12)}
.slot-editorial p{font-size:.92rem;color:var(--tinta-suave);max-width:40ch}
.slot-video{position:relative;min-height:320px}
/* ---------- Card de producto (ÚNICO elemento con radio 14px) ---------- */
.card-prod{
background:var(--crema);border-radius:var(--radio-card);overflow:hidden;
border:1px solid rgba(35,34,26,.18);margin:-.5px;display:flex;flex-direction:column;position:relative;
transition:border-color var(--transicion);
}
.card-prod:hover{border-color:rgba(35,34,26,.35)}
.card-prod-media{position:relative;aspect-ratio:1/1.05;overflow:hidden}
.card-prod-media .ph{position:absolute;inset:0;transition:opacity .6s ease}
.card-prod-media .ph.hover2{opacity:0}
.card-prod:hover .ph.hover2{opacity:1}
.fav{
position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;
background:rgba(250,248,232,.9);display:flex;align-items:center;justify-content:center;
font-size:1rem;transition:transform .3s,background .3s;color:var(--ciruela);
}
.fav:hover{transform:scale(1.12)}
.fav.activo{background:var(--lila)}
.badge-prod{
position:absolute;top:12px;left:12px;z-index:3;background:var(--ciruela);color:var(--crema);
font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.32rem .7rem;
}
.card-prod-info{padding:1rem 1.1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.card-prod-info h3{font-family:var(--script);font-size:1.5rem;line-height:1;font-weight:400}
.card-prod-info .desc{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.4rem}
.precio{font-size:.85rem;font-weight:700;white-space:nowrap}
.swatches{display:flex;gap:.35rem;margin-top:.55rem}
.swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(35,34,26,.25);padding:0}
.swatches-sel{gap:.55rem}
.swatches-sel .swatch{width:22px;height:22px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 0 0 0 var(--ciruela)}
.swatches-sel .swatch:hover{transform:scale(1.1)}
.swatches-sel .swatch.activo{box-shadow:0 0 0 2px var(--crema),0 0 0 3.5px var(--ciruela)}
/* ---------- Categoría: cabecera editorial de lujo ---------- */
.cat-banda{width:100%;height:clamp(220px,32vh,380px)}
.cat-cabecera{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:end;padding:clamp(2rem,5vh,3.4rem) var(--gutter)}
.cat-cabecera h1{font-family:var(--display);font-size:clamp(3.4rem,8.2vw,6.6rem);line-height:.95}
.cat-cabecera .script{font-size:1.5rem;color:var(--oliva-oscuro);display:block;margin-top:.6rem}
.cat-cabecera .desc{color:var(--tinta-suave);max-width:46ch;justify-self:end;align-self:end}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap;padding-inline:var(--gutter)}
.filtros{display:flex;gap:.7rem;flex-wrap:wrap}
.filtro-select{padding:.7rem 1.1rem;border:1px solid rgba(35,34,26,.45);background:var(--crema);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-radius:0;color:var(--tinta)}
.resultado-num{font-size:.8rem;color:var(--tinta-suave)}
.vacio-cat{padding:4rem var(--gutter);text-align:center;color:var(--tinta-suave)}
.breadcrumb{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);display:flex;gap:.5rem;flex-wrap:wrap;padding:1.2rem var(--gutter) 0}
.breadcrumb a:hover{color:var(--oliva)}
/* ---------- Producto ---------- */
.pagina{padding-top:128px;min-height:70vh}
.prod-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);padding-inline:var(--gutter)}
.galeria-principal{aspect-ratio:4/4.6;position:relative;overflow:hidden;cursor:zoom-in}
.galeria-principal .ph{position:absolute;inset:0;transition:transform .5s ease}
.galeria-principal:hover .ph{transform:scale(1.4)}
.galeria-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:.8rem}
.galeria-thumbs .thumb{aspect-ratio:1/1;cursor:pointer;border:2px solid transparent;transition:border .3s}
.galeria-thumbs .thumb.activo{border-color:var(--oliva)}
.prod-info .script-nombre{font-family:var(--script);font-size:clamp(2.9rem,5.4vw,4rem);line-height:1}
.prod-info .prod-sub{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.4rem}
.prod-precio{font-size:1.5rem;font-weight:700;margin:1.4rem 0 .4rem}
.prod-stock{font-size:.8rem;color:var(--oliva);letter-spacing:.08em}
.prod-stock.bajo{color:var(--ciruela)}
.estrellas{color:var(--naranja);letter-spacing:.15em;font-size:.9rem}
.link-reviews{font-size:.78rem;text-decoration:underline;color:var(--tinta-suave)}
.selector-cantidad{display:inline-flex;align-items:center;border:1px solid rgba(35,34,26,.3);margin:1.4rem 0}
.selector-cantidad button{width:44px;height:44px;font-size:1.2rem;transition:background .3s}
.selector-cantidad button:hover{background:var(--lila-suave)}
.selector-cantidad span{min-width:44px;text-align:center;font-weight:700}
.prod-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.prod-cta .btn{flex:1;min-width:200px}
.acordeones{margin-top:2.4rem;border-top:1px solid rgba(35,34,26,.18)}
.acordeon{border-bottom:1px solid rgba(35,34,26,.18)}
.acordeon-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:color .3s}
.acordeon-btn:hover{color:var(--oliva)}
.acordeon-btn .signo{font-size:1.1rem;transition:transform .35s}
.acordeon.abierto .signo{transform:rotate(45deg)}
.acordeon-cuerpo{max-height:0;overflow:hidden;transition:max-height .5s ease}
.acordeon-cuerpo-inner{padding:0 0 1.4rem;font-size:.92rem;color:var(--tinta-suave);white-space:pre-line}
.relacionados{margin-top:clamp(3rem,7vh,5rem);padding-inline:var(--gutter)}
/* ---------- Reviews ---------- */
.reviews{margin-top:clamp(3rem,7vh,5rem);padding:clamp(3rem,6vh,4.5rem) var(--gutter);background:var(--crema-suave);border-top:1px solid rgba(35,34,26,.12)}
.reviews-cab{text-align:center;margin-bottom:2.4rem}
.reviews-cab .display{font-size:clamp(2rem,4vw,3rem)}
.reviews-cab .nota{font-size:1.4rem;font-weight:700;margin-top:.4rem}
.reviews-cab .base{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.3rem}
.reviews-toolbar{display:flex;justify-content:flex-end;border-bottom:1px solid rgba(35,34,26,.2);padding-bottom:.8rem;margin-bottom:.4rem}
.review{display:grid;grid-template-columns:180px 1fr auto;gap:1.4rem;padding:1.3rem 0;border-bottom:1px solid rgba(35,34,26,.12);align-items:start}
.review .quien strong{display:block;font-size:.9rem}
.review .quien .verif{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva)}
.review .cuerpo h4{font-weight:600;font-size:.9rem;margin:.2rem 0}
.review .cuerpo p{font-size:.9rem;color:var(--tinta-suave)}
.review .fecha{font-size:.78rem;color:var(--tinta-suave);white-space:nowrap}
/* ---------- Programa de puntos: "Un regalo de mi, para ti" ---------- */
.regalo-para-ti{
/* sin position aquí: .stack-card ya pone sticky, y sticky también sirve
de contexto de posición para los .mono (position:absolute) y el
::after (el degradado) de adentro */
overflow:hidden;padding:clamp(4rem,10vh,7rem) var(--gutter);
background-color:var(--lila-suave); /* respaldo mientras no subas la foto */
background-image:var(--bg-regalo);background-size:cover;background-position:center;
}
/* El degradado animado de siempre, ahora como capa ENCIMA de la foto de
fondo (no reemplazándola) — con mix-blend-mode:overlay en vez de opacity
baja, así el degradado tiñe la foto con su color en vez de taparla; la
foto de fondo en sí queda siempre al 100%, sin opacity propia. */
.regalo-para-ti::after{
content:'';position:absolute;inset:0;z-index:0;opacity:.8;mix-blend-mode:overlay;
background:linear-gradient(118deg,var(--naranja) 0%,#EDB27A 18%,var(--rosado) 38%,var(--lila) 58%,#C7CBE3 66%,var(--rosado) 78%,var(--guinda) 100%);
background-size:280% 280%;animation:degradado 16s ease-in-out infinite;
}
@keyframes degradado{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
.mono{position:absolute;color:var(--amarillo-suave);pointer-events:none;z-index:1;opacity:.85}
.mono svg{width:100%;height:auto;display:block}
.regalo-card{
position:relative;z-index:2; /* por encima de los moños: el texto siempre legible */
max-width:850px;margin-inline:auto;background:var(--crema);border-radius:var(--radio-card);
padding:clamp(2.2rem,5vw,3.6rem) clamp(2rem,5vw,3.4rem);box-shadow:0 30px 80px rgba(90,50,60,.25);text-align:left;
}
.regalo-card .display{font-size:clamp(3.4rem,8.5vw,6rem);line-height:.9}
.regalo-card .script{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--tinta);display:block;text-align:right;margin:-.32em 8% 0 0}
.regalo-card p{font-size:.95rem;color:var(--tinta);margin:1.2rem 0 .9rem;max-width:64ch}
.regalo-card .eyebrow{color:var(--tinta);display:block;margin-bottom:1.2rem}
.regalo-card .btn{width:100%;justify-content:center}
/* Dashboard de puntos (Cuenta) */
.tabs{display:flex;gap:0;border:1px solid rgba(35,34,26,.3);width:fit-content;margin-bottom:1.6rem}
.tab{padding:.8rem 1.8rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background .3s}
.tab.activo{background:var(--tinta);color:var(--crema)}
.panel{background:var(--crema-suave);border:1px solid rgba(35,34,26,.12);padding:clamp(1.4rem,3vw,2.2rem)}
.panel h3{font-family:var(--display);font-size:1.7rem;margin-bottom:1.2rem}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem;font-weight:700}
.campo input,.campo select,.campo textarea{width:100%;padding:.85rem 1.1rem;border:1px solid rgba(35,34,26,.28);background:var(--blanco)}
.campo textarea{min-height:90px;resize:vertical}
.grid-2c{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.nota-form{font-size:.8rem;color:var(--tinta-suave);margin-top:.8rem}
.anio-card{
border:1px solid rgba(35,34,26,.2);background:var(--crema-suave);overflow:hidden;margin-bottom:1.6rem;
}
.anio-cab{
padding:1.6rem clamp(1.2rem,3vw,2rem);color:var(--crema);
background:linear-gradient(118deg,var(--naranja),var(--rosado) 45%,var(--guinda));
background-size:220% 220%;animation:degradado 16s ease-in-out infinite;
display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;
}
.anio-cab .display{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--crema)}
.anio-cab .dias{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-align:right}
.anio-cuerpo{padding:clamp(1.4rem,3vw,2rem)}
.puntos-grande{font-family:var(--display);font-size:clamp(2.6rem,6vw,4rem);line-height:1}
.puntos-grande small{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);display:block;margin-top:.2rem}
.barra-wrap{margin:1.8rem 0 .4rem;position:relative}
.barra{height:10px;background:rgba(35,34,26,.12);position:relative;overflow:visible}
.barra-fill{
height:100%;width:0;background:linear-gradient(90deg,var(--naranja),var(--guinda));
transition:width 1.4s cubic-bezier(.22,.61,.36,1);position:relative;
}
.barra-fill::after{content:'☀';position:absolute;right:-11px;top:50%;transform:translateY(-52%);font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(35,34,26,.3))}
.hitos{display:flex;justify-content:space-between;margin-top:1rem}
.hito{text-align:center;flex:1;position:relative;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.hito::before{content:'';position:absolute;top:-1.55rem;left:50%;width:1px;height:10px;background:rgba(35,34,26,.35)}
.hito strong{display:block;color:var(--tinta);font-size:.72rem}
.hito.logrado strong{color:var(--guinda)}
.hito .script{font-size:1.1rem;letter-spacing:0;text-transform:none;display:block;color:inherit}
.mision{display:flex;gap:1rem;align-items:start;padding:1rem 0;border-bottom:1px dashed rgba(35,34,26,.2)}
.mision:last-child{border-bottom:none}
.mision .pts{font-weight:700;color:var(--guinda);white-space:nowrap;font-size:.85rem}
.mision p{font-size:.9rem;color:var(--tinta-suave)}
.mision h5{font-weight:700;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
.nivel-fila{display:grid;grid-template-columns:44px auto 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(35,34,26,.12);align-items:center}
.nivel-fila .insignia-nivel{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0}
.nivel-fila .insignia-nivel .ph,.nivel-fila .insignia-nivel .ph-img{width:44px;height:44px;font-size:.42rem}
.nivel-fila .script{font-size:1.5rem;color:var(--guinda);min-width:7rem}
.nivel-fila p{font-size:.88rem;color:var(--tinta-suave)}
.nivel-fila .rango{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);display:block}
/* ---------- Modal Dedicatoria (etiqueta + lazos SVG, fiel al diseño) ---------- */
/* El velo usa margin:auto en el hijo (no align-items:center): así el modal
nunca queda con el tope recortado y se puede scrollear completo en móvil */
.modal-velo{position:fixed;inset:0;background:rgba(104,106,86,.94);z-index:350;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;display:flex;padding:1rem;overflow:auto}
.modal-velo.abierto{opacity:1;visibility:visible}
.modal-ded{
position:relative;width:min(660px,94vw);margin:auto;
background:var(--crema);display:grid;grid-template-columns:46px 1fr;
transform:translateY(20px);transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
/* Desktop: la tarjeta crema va un poco a la izquierda y la etiqueta —del mismo
tamaño— se sobrepone un poquitito sobre ella; el CONJUNTO queda centrado.
El contenido de la tarjeta scrollea por dentro (nunca se recorta) y un
indicador invita a bajar. */
@media (min-width:1181px){
.modal-ded{
--etq-w:clamp(400px,34vw,560px); /* ancho de la etiqueta */
--etq-solape:clamp(28px,3vw,60px); /* cuánto se sobrepone sobre la tarjeta */
--etq-fuera:calc(var(--etq-w) - var(--etq-solape));
transform:translate(calc(var(--etq-fuera)/-2),20px);
}
.modal-velo.abierto .modal-ded{transform:translate(calc(var(--etq-fuera)/-2),0)}
.ded-main{max-height:min(84vh,720px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
.ded-scrollhint{
position:sticky;bottom:0;display:flex;justify-content:center;pointer-events:none;
margin-top:.4rem;
}
.ded-scrollhint span{
font-size:1.1rem;line-height:1;color:var(--ciruela);background:var(--crema);
padding:.1rem .8rem;border:1px solid rgba(35,34,26,.25);border-radius:99px;
animation:hint-baja 1.6s ease-in-out infinite;
}
@keyframes hint-baja{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(5px);opacity:.5}}
@media (max-width:1180px){.ded-scrollhint{display:none}}
.modal-velo.abierto .modal-ded{transform:translateY(0)}
.ded-izq{border-right:1.5px solid var(--tinta);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.4rem;padding-top:1.2rem}
.ded-x{font-family:var(--display);font-size:1.6rem;line-height:1;transition:transform .3s;background:none;border:none;cursor:pointer;color:inherit}
.ded-x:hover{transform:rotate(90deg)}
.ded-omitir{
writing-mode:vertical-rl;background:none;border:none;padding:0;cursor:pointer;
font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
transition:color .2s;white-space:nowrap;
}
.ded-omitir:hover{color:var(--tinta)}
.ded-main{padding:clamp(1.4rem,3.4vw,2.4rem)}
.ded-titulo{font-family:var(--display);font-size:clamp(3rem,7vw,4.6rem);line-height:.9}
.ded-sub{font-family:var(--script);font-size:clamp(1.3rem,2.6vw,1.8rem);display:block;text-align:right;margin:-.3em .2em .1em 0}
.ded-opciones{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:1.3rem}
.ded-op{border:1px solid rgba(35,34,26,.55);cursor:pointer;position:relative;background:var(--crema);transition:background .3s;overflow:hidden}
.entrega-opts{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.quien-recibe-opts{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:.3rem}
.quien-op{display:block}
.quien-op input{position:absolute;opacity:0;pointer-events:none}
.quien-op:has(input:checked){background:var(--lila-suave)}
.quien-op:has(input:checked) .ded-op-info h4{color:var(--ciruela)}
.quien-op .ded-op-info{padding:.85rem .9rem;text-align:center}
@media (max-width:420px){
.entrega-opts,.quien-recibe-opts{grid-template-columns:1fr}
.ded-tag{font-size:.56rem;padding:.26rem .5rem}
}
.ded-op .ded-media{aspect-ratio:16/6;background:var(--gris-img);position:relative}
.ded-op .ded-media::after{content:attr(data-img);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(35,34,26,.4)}
.ded-op.activa{background:var(--lila-suave)}
.ded-op.activa .ded-media{outline:1.5px solid var(--tinta);outline-offset:-1.5px}
.ded-op-info{padding:.7rem .9rem .9rem}
.ded-op-info h4{font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* Logos de método de pago (Visa/Mastercard/Yape) — chiquitos, en línea con el nombre */
.logos-pago{display:inline-flex;gap:.4rem}
.logo-pago{display:inline-block;width:34px;height:22px;flex-shrink:0}
.logo-pago .ph-img{object-fit:contain}
.logo-pago .ph::after{font-size:.42rem;letter-spacing:.05em;padding:0 .2rem}
.ded-op-info p{font-size:.76rem;color:var(--tinta-suave);margin-top:.25rem;line-height:1.4}
.ded-tag{position:absolute;top:-1px;right:-1px;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--crema);padding:.3rem .7rem;z-index:2}
.ded-tag.gratis{background:var(--oliva)}
.ded-tag.pago{background:var(--ciruela)}
.ded-escribe{margin-top:1.3rem}
.ded-escribe label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem}
.lineado{
width:100%;border:1px solid rgba(35,34,26,.3);background:#FFFEF8;resize:vertical;min-height:104px;
padding:.4rem .9rem;line-height:26px;font-size:.95rem;
background-image:repeating-linear-gradient(transparent,transparent 25px,rgba(35,34,26,.22) 25px,rgba(35,34,26,.22) 26px);
background-attachment:local;
}
.ded-acciones{display:flex;gap:.9rem;margin-top:1.4rem;flex-wrap:wrap}
.ded-acciones .btn{flex:1;min-width:170px}
/* Etiqueta colgante: SVG oficial de Salsolcito + contenido interactivo superpuesto */
.etiqueta-wrap{
position:absolute;top:clamp(-120px,-8vw,-60px);right:clamp(-500px,-31vw,-280px);
width:clamp(360px,31vw,480px);aspect-ratio:710/815;z-index:3;
}
.etiqueta-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 30px 56px rgba(35,34,26,.35))}
.etiqueta-contenido{
position:absolute;left:4%;top:24%;width:58%;height:66%;transform:rotate(-13deg);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,20px);padding:8px;
}
.etq-selecciona{font-family:var(--script);font-size:clamp(2rem,2.8vw,2.8rem);color:var(--tinta);line-height:1}
.etq-circulos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,18px);justify-items:center}
.etq-circulo{width:clamp(52px,4.4vw,68px);height:clamp(52px,4.4vw,68px);border-radius:50%;background:var(--gris-img);border:2.5px solid transparent;cursor:pointer;transition:transform .25s,border-color .25s;font-size:.62rem;letter-spacing:.06em;color:rgba(35,34,26,.5);display:flex;align-items:center;justify-content:center}
.etq-circulo:hover{transform:scale(1.1)}
.etq-circulo.activo{border-color:var(--guinda);background:var(--gris-img-2)}
.etq-preview{position:relative;width:86%;aspect-ratio:1/1;background:var(--gris-img);display:flex;align-items:center;justify-content:center;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,34,26,.5);text-align:center;padding:.4rem}
.etq-lupa{position:absolute;bottom:10px;right:10px;background:var(--crema);width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;border:1px solid rgba(35,34,26,.3)}
.etq-grande{width:96%;height:100%;background:var(--gris-img);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,34,26,.5);text-align:center;padding:.8rem;position:relative}
.etq-x{position:absolute;top:4px;right:8px;font-family:var(--display);font-size:1.3rem;cursor:pointer;z-index:4}
.etq-par{width:92%;flex:1;border-radius:14px;background:var(--gris-img);display:flex;align-items:center;justify-content:center;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,34,26,.5);text-align:center;padding:.5rem}
@media (max-width:1180px){
.modal-ded{margin:auto;grid-template-columns:40px 1fr;width:min(660px,94vw)}
/* La etiqueta ocupa un gran espacio al centro para que se aprecie bien */
.etiqueta-wrap{position:relative;top:0;right:0;width:min(460px,88vw);height:auto;aspect-ratio:710/815;margin:1.4rem auto .8rem;order:3}
.modal-ded{display:flex;flex-direction:column}
.ded-izq{border-right:none;border-bottom:1.5px solid var(--tinta);flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 1rem;position:sticky;top:0;background:var(--crema);z-index:4}
.ded-omitir{writing-mode:horizontal-tb}
}
/* Desktop: etiqueta del mismo tamaño que la tarjeta, centrada verticalmente
y sobrepuesta un poquitito sobre el recuadro crema */
@media (min-width:1181px){
.etiqueta-wrap{
width:var(--etq-w);right:calc(-1*var(--etq-fuera));
top:50%;transform:translateY(-50%);
}
}
/* ---------- Modal Bienvenida (popup de descuento, primera visita) ---------- */
.modal-bienvenida{
position:relative;width:min(440px,92vw);margin:auto;background:var(--crema);
padding:clamp(1.8rem,4vw,2.6rem);text-align:center;
transform:translateY(20px);transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.modal-velo.abierto .modal-bienvenida{transform:translateY(0)}
.mb-x{position:absolute;top:.8rem;right:1rem;font-family:var(--display);font-size:1.6rem;line-height:1;cursor:pointer;transition:transform .3s}
.mb-x:hover{transform:rotate(90deg)}
.mb-eyebrow{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oliva-oscuro)}
.mb-titulo{font-family:var(--display);font-size:clamp(2.2rem,6vw,3rem);line-height:1;margin:.5rem 0 .8rem}
.mb-texto{color:var(--tinta-suave);max-width:34ch;margin-inline:auto}
.mb-acciones{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
.mb-form{display:flex;gap:.5rem;margin-top:1.4rem}
.mb-form input{flex:1;padding:.85rem 1.1rem;border:1px solid rgba(35,34,26,.28);background:var(--blanco)}
.mb-nota{font-size:.74rem;color:var(--tinta-suave);margin-top:.8rem}
/* ---------- Drawer carrito ---------- */
.velo{position:fixed;inset:0;background:rgba(35,34,26,.45);z-index:300;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.velo.abierto{opacity:1;visibility:visible}
.drawer{
position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:310;background:var(--crema);
box-shadow:-20px 0 60px rgba(35,34,26,.2);transform:translateX(100%);
transition:transform .5s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;
}
.drawer.abierto{transform:translateX(0)}
.drawer-cab{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 1.6rem;border-bottom:1px solid rgba(35,34,26,.14)}
.drawer-cab h3{font-family:var(--display);font-size:1.8rem}
.cerrar-drawer{font-size:1.5rem;line-height:1;transition:transform .3s}
.cerrar-drawer:hover{transform:rotate(90deg)}
.drawer-items{flex:1;overflow:auto;padding:1.2rem 1.6rem;display:flex;flex-direction:column;gap:1.2rem}
.item-carrito{display:grid;grid-template-columns:78px 1fr auto;gap:1rem;align-items:start}
.item-carrito .media{aspect-ratio:1/1}
.item-carrito h4{font-family:var(--script);font-size:1.3rem;line-height:1}
.item-carrito .meta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.item-carrito .meta-tarjeta{font-size:.7rem;color:var(--guinda);margin-top:.2rem}
.item-ctl{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.item-ctl button{width:24px;height:24px;border:1px solid rgba(35,34,26,.3);font-size:.9rem;transition:background .3s}
.item-ctl button:hover{background:var(--lila-suave)}
.quitar{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ciruela);margin-top:.3rem;text-decoration:underline}
.drawer-pie{padding:1.3rem 1.6rem 1.6rem;border-top:1px solid rgba(35,34,26,.14);background:var(--crema-suave)}
.linea-total{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.4rem;gap:1rem}
.linea-total.grande{font-size:1.05rem;font-weight:700;margin:.6rem 0 1rem}
.drawer-vacio{text-align:center;padding:3rem 1.6rem;color:var(--tinta-suave)}
.drawer-vacio .script{font-size:2rem;display:block;margin-bottom:.6rem;color:var(--tinta)}
.cross-drawer{padding:1rem 1.6rem;border-top:1px dashed rgba(35,34,26,.2)}
.cross-drawer h5{font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem}
.cross-mini{display:flex;gap:.8rem;overflow:auto}
.cross-mini .mini{min-width:120px;font-size:.72rem}
.cross-mini .media{aspect-ratio:1/1;margin-bottom:.4rem}
/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;padding-inline:var(--gutter)}
.ck-pasos{display:flex;gap:1.6rem;margin-bottom:1.8rem}
.ck-paso{
width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--script);font-size:1.3rem;background:var(--lila-suave);color:var(--tinta-suave);
transition:background .3s,color .3s;cursor:pointer;
}
.ck-paso.activo{background:var(--lila);color:var(--tinta)}
/* Panel "tu pedido": patrón botánico de fondo (Imagen 165) — mientras no
esté subida, se ve el color de respaldo, sin romper nada. */
.ck-resumen{background-color:var(--lila-suave);background-repeat:repeat;background-size:140px;background-image:url('../img/checkout-patron-fondo.png')}
.ck-resumen > div{background:var(--crema);padding:1.4rem;border:1px solid rgba(35,34,26,.14)}
.nota-seguridad{background:var(--lila-suave);border:1px dashed var(--ciruela);padding:1rem 1.2rem;font-size:.85rem;color:var(--tinta-suave);margin-bottom:1.4rem}
/* ---------- Confirmación ---------- */
.confirmacion{min-height:80vh;display:flex;align-items:center;text-align:center;background:var(--salvia-suave)}
.confirmacion .script-xl{font-family:var(--script);font-size:clamp(3rem,8vw,5.5rem);color:var(--oliva-oscuro);display:block;line-height:1}
.confirmacion .display{font-size:clamp(2rem,4.5vw,3.2rem);margin:1.2rem 0 .8rem}
.confirmacion p{max-width:46ch;margin:0 auto;color:var(--tinta-suave)}
.puntos-ganados{
display:block;width:fit-content;margin-top:1.4rem;padding:.9rem 1.6rem;background:var(--crema);
border:1px dashed var(--guinda);color:var(--guinda);font-weight:700;letter-spacing:.08em;
}
/* ---------- Búsqueda ---------- */
.busqueda-panel{
position:fixed;inset:0 0 auto 0;z-index:320;background:var(--crema);padding:2rem var(--gutter) 2.4rem;
transform:translateY(-100%);transition:transform .5s cubic-bezier(.22,.61,.36,1);box-shadow:0 20px 60px rgba(35,34,26,.18);
}
.busqueda-panel.abierto{transform:translateY(0)}
.busqueda-inner{max-width:760px;margin:0 auto}
.busqueda-inner input{width:100%;font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);border:none;border-bottom:2px solid var(--oliva);background:transparent;padding:.4rem 0}
.busqueda-inner input:focus{outline:none}
.sugerencias{margin-top:1.4rem;display:flex;flex-direction:column;gap:.4rem;max-height:50vh;overflow:auto}
.sugerencia{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;transition:background .25s;font-size:.95rem;align-items:baseline}
.sugerencia:hover{background:var(--lila-suave)}
.sugerencia .tipo{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)}
/* ---------- Toast ---------- */
.toast{
position:fixed;bottom:24px;left:50%;transform:translate(-50%,150%);z-index:400;
background:var(--tinta);color:var(--crema);padding:.9rem 1.6rem;font-size:.85rem;letter-spacing:.06em;
transition:transform .5s cubic-bezier(.22,.61,.36,1);display:flex;gap:.7rem;align-items:center;max-width:90vw;
}
.toast.visible{transform:translate(-50%,0)}
.toast .script{color:var(--lila);font-size:1.2rem}
/* ---------- Newsletter ---------- */
.newsletter{background:var(--salvia-suave)}
.newsletter-inner{max-width:640px;margin:0 auto;text-align:center;padding-inline:var(--gutter)}
.newsletter form{display:flex;gap:.8rem;margin-top:1.8rem}
.newsletter input{flex:1;padding:.95rem 1.3rem;border:1px solid rgba(35,34,26,.3);background:var(--blanco)}
/* ---------- Footer: carta / postal romántica ---------- */
.footer-separador{height:clamp(3.5rem,9vh,7rem);background:var(--crema);display:flex;align-items:center;justify-content:center}
.footer-separador::before{content:'✿ ─── ☀ ─── ✿';letter-spacing:.5em;color:var(--oliva);font-size:.8rem;opacity:.7}
footer{background:var(--oliva-oscuro);color:var(--crema);padding:clamp(3rem,7vh,5rem) var(--gutter) 2rem;position:relative}
/* Fila superior: el logo (salsolcito-footer.png) ocupa 3/4 del ancho
y el sello "PERÚ · CON CARIÑO" ocupa el 1/4 restante */
.footer-top{
display:grid;grid-template-columns:3fr 1fr;gap:clamp(1.5rem,4vw,3rem);
align-items:center;margin-bottom:clamp(2rem,5vh,3.2rem);
}
.footer-logo{width:100%;height:auto;display:block}
/* Si el PNG aún no está subido, se muestra el wordmark en Alex Brush (nunca Italiana) */
.footer-logo-fallback{font-family:var(--script);font-size:clamp(3.4rem,9vw,7.5rem);line-height:1;color:#B8BF4E}
.estampilla{
border:1.5px dashed rgba(250,248,232,.5);padding:clamp(.7rem,1.4vw,1.2rem);color:var(--salvia);
transform:rotate(3deg);justify-self:center;width:fit-content;
}
.estampilla svg{width:clamp(44px,4.5vw,68px);height:clamp(44px,4.5vw,68px)}
.estampilla small{display:block;text-align:center;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.3rem;color:rgba(250,248,232,.6)}
/* Carta en Alex Brush, en grande */
.footer-carta,.footer-marca p.footer-carta{
font-family:var(--script);font-size:clamp(1.9rem,3.4vw,2.8rem);
line-height:1.2;color:var(--lila);margin-bottom:1.4rem;max-width:24ch;
}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}
.footer-marca p{font-size:.9rem;color:rgba(250,248,232,.75);max-width:30ch}
.footer-contacto{margin-top:.6rem !important}
.footer-contacto a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-contacto a:hover{color:var(--lila)}
.reclamo-link svg{width:56px;height:auto;flex-shrink:0;color:var(--salvia)}
footer h5{font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.1rem;color:var(--salvia)}
footer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
footer ul a{font-size:.88rem;color:rgba(250,248,232,.8);transition:color .3s,padding-left .3s}
footer ul a:hover{color:var(--lila);padding-left:.3rem}
.reclamo-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.8rem;color:var(--crema);border:1px solid rgba(250,248,232,.4);padding:.55rem 1rem;transition:background .3s}
.reclamo-link:hover{background:rgba(250,248,232,.12)}
.footer-legal{margin-top:2.4rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.05em;color:rgba(250,248,232,.65)}
.footer-legal a:hover{color:var(--crema)}
.footer-firma{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid rgba(250,248,232,.18);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-firma .script{font-size:1.7rem;color:var(--lila)}
.footer-firma small{font-size:.75rem;color:rgba(250,248,232,.55)}
/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.visto{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}
/* ---------- Sticky CTA móvil ---------- */
.sticky-cta{
position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--crema);
border-top:1px solid rgba(35,34,26,.15);padding:.8rem var(--gutter);
display:none;gap:1rem;align-items:center;justify-content:space-between;
transform:translateY(110%);transition:transform .4s;
}
.sticky-cta.visible{transform:translateY(0)}
/* ---------- Menú móvil ---------- */
.hamburguesa{display:none;font-size:1.5rem;padding:.4rem .6rem}
.menu-movil{
position:fixed;inset:0;z-index:340;background:var(--crema);padding:4.5rem var(--gutter) 3rem;
transform:translateX(-100%);transition:transform .5s cubic-bezier(.22,.61,.36,1);overflow:auto;
}
.menu-movil.abierto{transform:translateX(0)}
.menu-movil .cerrar-drawer{position:absolute;top:1.3rem;right:var(--gutter)}
.menu-movil nav{display:flex;flex-direction:column}
.menu-movil .m-link{font-family:var(--display);font-size:1.9rem;padding:.6rem 0;text-align:left;border-bottom:1px solid rgba(35,34,26,.12);width:100%}
.menu-movil .m-sub{display:none;padding:.6rem 0 1rem;flex-direction:column;gap:.7rem}
.menu-movil .m-sub.abierto{display:flex}
.menu-movil .m-sub a{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.menu-movil .m-util{display:flex;gap:1.4rem;margin-top:1.6rem;flex-wrap:wrap}
/* =====================================================================
RESPONSIVE — cada breakpoint replantea el layout (no solo lo encoge)
===================================================================== */
/* Laptop */
@media (max-width:1180px){
.footer-grid{grid-template-columns:1fr 1fr;row-gap:2.4rem}
.mega-inner{grid-template-columns:1fr;gap:1.6rem}
}
/* Tablet: grilla de 2 columnas */
@media (max-width:1023px){
/* Con 2 columnas, 3 productos pasan a 2 filas (y a 3 en mobile, 1 columna)
— vuelve a ser demasiado alto para vivir pegado sin cortarse, mismo
motivo que con-ornamentos/experience (ver arriba). Mismo caso para
.valores: acá el grid3 pasa a 2 columnas (la 3ra flor sola, de ancho
completo, ver más abajo) — con flores grandes, ya no cabe en 108svh. */
.destacados.stack-card,.valores.stack-card,.nosotras-banda.stack-card{position:relative;min-height:auto}
.grid-productos{grid-template-columns:repeat(2,1fr)}
.slot-2,.slot-3{grid-column:1 / -1}
.grid-categorias{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:1fr 1fr}
.grid3 > :last-child{grid-column:1 / -1}
.prod-grid,.checkout-grid{grid-template-columns:1fr}
.cat-cabecera{grid-template-columns:1fr;align-items:start}
.cat-cabecera .desc{justify-self:start}
.review{grid-template-columns:1fr;gap:.4rem}
.review .fecha{order:-1}
}
/* Móvil grande / tablet chica: navegación propia */
@media (max-width:860px){
.nav-row,.util-izq{display:none}
.util-der .util-link:not(#btnCarrito){display:none}
.hamburguesa{display:block;grid-column:1;justify-self:start}
.header-inner{grid-template-columns:auto 1fr auto;align-items:center}
.logo{grid-row:1;grid-column:2;padding:.7rem 0}
.logo svg{width:46px;height:46px}
.util-der{grid-row:1;grid-column:3;padding:0}
#btnCarrito svg{width:2rem;height:1.38rem}
.temporada .grid2,.experience-grid{grid-template-columns:1fr!important}
.marca-gigante{width:min(92%,600px)}
.newsletter form{flex-direction:column}
.sticky-cta{display:flex}
.opciones-tarjeta{grid-template-columns:1fr}
.disenos-grid{grid-template-columns:repeat(2,1fr)}
.grid-2c{grid-template-columns:1fr}
.estampilla{justify-self:end}
.pagina{padding-top:78px}
.cat-banda{height:clamp(160px,26vh,240px)}
.hitos{flex-wrap:wrap;gap:.6rem}
#tiraHeader span{font-size:.6rem}
}
/* Móvil: 1 columna */
@media (max-width:639px){
.grid-productos{grid-template-columns:1fr}
.grid-categorias{grid-template-columns:1fr}
.grid3{grid-template-columns:1fr}
/* Con las 3 flores apiladas en una columna (y ahora más grandes), el
contenido de .valores ya no cabe en una pantalla — sticky lo cortaría
antes de que se alcance a ver la última (imagen + CTA). Mismo
resguardo que ya usan con-ornamentos/destacados/experience. */
.valores.stack-card,.nosotras-banda.stack-card{position:relative;min-height:auto}
.footer-grid{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr;justify-items:start}
.footer-top .estampilla{justify-self:start}
.hero-titulo{font-size:2.4rem}
.tabs{width:100%}
.tab{flex:1;text-align:center;padding:.8rem .6rem}
.prod-cta .btn{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.regalo-para-ti,.anio-cab{animation:none}
}