/* ==========================================================================
SENSEBEN — Hoja de estilos del prototipo
Paleta derivada del mockup de referencia (rose / nude / plum)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
/* Paleta de marca */
--color-primary: #C2295C; /* rosa/magenta profundo — acentos y CTAs */
--color-primary-dark: #9E1E49;
--color-rose: #D98A82; /* rosa coral medio */
--color-rose-soft: #F5E3DE; /* rosa muy suave — fondos de sección */
--color-nude: #E7D6C1; /* beige cálido */
--color-plum: #4A2A3A; /* ciruela oscuro — texto de énfasis */
--color-sale: #E0532E; /* coral — badges de oferta */
--bg: #FFFCFB;
--bg-muted: #F8F4F2;
--fg: #241B21;
--fg-muted: #7D6E74;
--border: #EAE2DF;
--white: #FFFFFF;
--font-display: 'Playfair Display', serif;
--font-sans: 'Inter', sans-serif;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-card: 0 2px 14px rgba(74,42,58,0.08);
--shadow-hover: 0 10px 30px rgba(194,41,92,0.16);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family: var(--font-sans);
background: var(--bg);
color: var(--fg);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{
font-family: var(--font-display);
letter-spacing:-0.01em;
color: var(--color-plum);
}
.container{
max-width:1240px;
margin:0 auto;
padding:0 24px;
}
/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible{
outline:2px solid var(--color-primary);
outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; }
}
/* ============ TOPBAR ============ */
.topbar{
background: var(--color-plum);
color: #F5E9EC;
font-size:13px;
text-align:center;
padding:8px 16px;
letter-spacing:0.02em;
}
/* ============ HEADER ============ */
.site-header{
position:sticky; top:0; z-index:50;
background: rgba(255,252,251,0.92);
backdrop-filter: blur(8px);
border-bottom:1px solid var(--border);
}
.header-main{
display:flex; align-items:center; gap:28px;
padding:16px 24px;
}
.logo{
font-family:var(--font-display);
font-size:26px; font-weight:700;
color: var(--color-primary);
white-space:nowrap;
}
.logo span{ color:var(--color-plum); font-weight:500; font-size:14px; letter-spacing:0.18em; display:block; margin-top:-4px; }
.search-bar{
position:relative;
flex:1;
display:flex; align-items:center;
background: var(--bg-muted);
border:1px solid var(--border);
border-radius: 999px;
padding:10px 18px;
max-width:560px;
transition:border-color .2s, box-shadow .2s;
}
.search-bar:focus-within{
border-color:var(--color-primary);
box-shadow:0 0 0 3px rgba(194,41,92,0.15);
}
.search-bar input{
border:none; background:none; flex:1;
font-family:inherit; font-size:14px; color:var(--fg);
}
.search-bar input:focus-visible{ outline:none; } /* el resplandor de arriba ya cumple ese rol, sin romper la forma */
.search-bar input::placeholder{ color:var(--fg-muted); }
.search-bar svg{ flex-shrink:0; color:var(--fg-muted); }
/* ============ BUSCADOR EN VIVO (dropdown de dos columnas) ============ */
.search-dropdown{
position:absolute; top:calc(100% + 10px); left:0;
width:min(680px, 85vw);
background:#fff;
border-radius:var(--radius-md);
box-shadow:0 20px 50px rgba(36,27,33,0.18);
display:none;
overflow:hidden;
z-index:80;
}
.search-dropdown.abierto{ display:flex; }
.search-col-resultados{
width:340px; flex-shrink:0;
max-height:460px; overflow-y:auto;
padding:16px 0;
border-right:1px solid var(--border);
}
.search-col-preview{
flex:1;
padding:20px;
max-height:460px; overflow-y:auto;
}
.search-grupo-titulo{
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
color:var(--fg-muted);
padding:6px 20px;
}
.search-item{
display:flex; align-items:center; gap:10px;
padding:10px 20px;
cursor:pointer;
transition:background .15s;
}
.search-item:hover, .search-item.activo{ background:var(--bg-muted); }
.search-item-icono{ color:var(--fg-muted); flex-shrink:0; }
.search-item img{
width:36px; height:36px; object-fit:cover;
border-radius:6px; flex-shrink:0;
background:var(--bg-muted);
}
.search-item-texto{ min-width:0; }
.search-item-nombre{ font-size:13.5px; font-weight:500; color:var(--fg); display:block; line-height:1.3; }
.search-item-sku{ font-size:11px; color:var(--fg-muted); }
.search-sin-resultados{ padding:30px 20px; text-align:center; color:var(--fg-muted); font-size:13.5px; }
/* ---- Preview derecha: categoría ---- */
.search-preview-cat h4{ font-size:16px; margin-bottom:14px; }
.search-preview-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.search-preview-grid img{
width:100%; aspect-ratio:1/1; object-fit:cover;
border-radius:var(--radius-sm); margin-bottom:6px;
background:var(--bg-muted);
}
.search-preview-grid span{ font-size:11.5px; color:var(--fg); display:block; line-height:1.3; }
.search-ver-categoria{
display:block; text-align:center;
padding:11px; background:var(--color-plum); color:#fff;
border-radius:999px; font-size:13px; font-weight:600;
}
.search-ver-categoria:hover{ background:var(--color-primary); }
/* ---- Preview derecha: producto ---- */
.search-preview-prod img{
width:100%; aspect-ratio:4/3; object-fit:cover;
border-radius:var(--radius-sm); margin-bottom:14px;
background:var(--bg-muted);
}
.search-preview-prod h4{ font-size:16px; margin-bottom:8px; }
.search-preview-prod p{ font-size:13px; color:var(--fg-muted); line-height:1.6; margin-bottom:16px; }
.search-preview-prod .precio-preview{ font-size:16px; font-weight:700; color:var(--color-primary); margin-bottom:14px; display:block; }
.search-ver-producto{
display:block; text-align:center;
padding:11px; background:var(--color-primary); color:#fff;
border-radius:999px; font-size:13px; font-weight:600;
}
.search-ver-producto:hover{ background:var(--color-primary-dark); }
@media (max-width: 900px){
.search-dropdown{ width:92vw; }
.search-col-resultados{ width:220px; }
}
@media (max-width: 640px){
.search-dropdown{ flex-direction:column; width:90vw; }
.search-col-resultados{ width:100%; max-height:220px; border-right:none; border-bottom:1px solid var(--border); }
.search-col-preview{ max-height:260px; }
}
.header-actions{
display:flex; align-items:center; gap:20px;
margin-left:auto;
}
.icon-btn{
position:relative;
display:flex; align-items:center; justify-content:center;
width:40px; height:40px;
border-radius:50%;
color:var(--color-plum);
transition: background .2s;
}
.icon-btn:hover{ background: var(--color-rose-soft); }
.cart-count{
position:absolute; top:-2px; right:-2px;
background:var(--color-primary); color:#fff;
font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.menu-toggle{ display:none; }
/* Nav de categorías */
.categories-nav{
border-top:1px solid var(--border);
}
.categories-nav ul{
display:flex; gap:8px;
padding:0 24px;
max-width:1240px; margin:0 auto;
}
.categories-nav a{
display:inline-block;
padding:13px 16px;
font-size:14px; font-weight:500;
color: var(--fg);
white-space:nowrap;
border-bottom:2px solid transparent;
transition: color .2s, border-color .2s;
}
.categories-nav a:hover, .categories-nav a.active{
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.categories-nav a.destacado{ color:var(--color-sale); font-weight:600; }
/* ============ HERO (Editorial Product Gallery: dock + crossfade) ============
Reemplaza el hero-track deslizante anterior. Slides en position:absolute
con crossfade + zoom sutil de foto; navegación por dock de miniaturas
(abajo-izquierda) en vez de dots. JS en assets/js/hero.js (separado de
main.js). Usa las mismas 3 colecciones reales de las promo-cards. */
.hero{
position:relative;
height:560px;
max-height:78vh;
overflow:hidden;
background:var(--color-plum);
}
.hero-slide{
position:absolute; inset:0;
display:grid; grid-template-columns:1.1fr 0.9fr;
align-items:center;
opacity:0; visibility:hidden;
transition:opacity .7s ease;
padding:0 40px;
max-width:1240px; margin:0 auto; left:0; right:0;
}
.hero-slide.activa{ opacity:1; visibility:visible; z-index:2; }
.hero-foto{
position:relative;
height:78%;
border-radius:var(--radius-md);
overflow:hidden;
transform:scale(1.04);
transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.hero-slide.activa .hero-foto{ transform:scale(1); }
.hero-foto img{ width:100%; height:100%; object-fit:cover; }
.hero-foto .grad{ position:absolute; inset:0; }
.hero-foto .grad::after{
content:'';
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
.hero-copy{
color:#fff;
padding-left:48px;
opacity:0;
transform:translateY(16px);
transition:opacity .6s ease .15s, transform .6s ease .15s;
}
.hero-slide.activa .hero-copy{ opacity:1; transform:translateY(0); }
.hero-copy .eyebrow{
display:inline-block;
font-size:11.5px; text-transform:uppercase; letter-spacing:.14em;
color:var(--color-rose-soft);
border:1px solid rgba(255,255,255,.3);
border-radius:100px;
padding:6px 14px;
margin-bottom:20px;
}
.hero-copy h1{
font-size:38px; line-height:1.15; margin-bottom:16px; color:#fff;
font-style:italic; font-weight:500;
}
.hero-copy p{
font-size:14.5px; color:rgba(255,255,255,.75); line-height:1.7;
max-width:340px; margin-bottom:0;
}
.hero-meta{
display:flex; gap:26px;
margin:20px 0 26px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta div{ display:flex; flex-direction:column; gap:4px; }
.hero-meta span.label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55); }
.hero-meta span.valor{ font-size:13.5px; font-weight:500; color:#fff; }
/* Contador arriba a la derecha */
.hero-contador{
position:absolute; top:24px; right:40px; z-index:3;
color:rgba(255,255,255,.6); font-size:12.5px; letter-spacing:.05em;
}
.hero-contador strong{ color:#fff; font-weight:600; }
/* Dock de miniaturas (navegación) */
.hero-dock{
position:absolute; left:40px; bottom:24px; z-index:3;
display:flex; gap:10px;
}
.dock-item{
position:relative;
width:56px; height:56px;
border-radius:8px;
overflow:hidden;
cursor:pointer;
border:2px solid transparent;
transition:border-color .25s ease, transform .25s ease;
flex-shrink:0;
}
.dock-item .grad{ position:absolute; inset:0; }
.dock-item::before{
content:'';
position:absolute; inset:0;
background:rgba(36,20,28,.35);
transition:background .25s ease;
}
.dock-item:hover::before{ background:rgba(36,20,28,.1); }
.dock-item.activo{ border-color:#fff; transform:translateY(-4px); }
.dock-item.activo::before{ background:rgba(36,20,28,0); }
.dock-label{
position:absolute; bottom:5px; left:5px; right:5px; z-index:2;
font-size:8.5px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.02em;
line-height:1.2;
}
.hero-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:16px;
transition:background .2s ease;
}
.hero-arrow:hover{ background:rgba(255,255,255,.25); }
.hero-arrow.prev{ left:20px; }
.hero-arrow.next{ right:20px; }
/* ============ SECTION HEADINGS ============ */
.section{ padding:64px 0; }
.section-head{
display:flex; align-items:baseline; justify-content:space-between;
margin-bottom:32px;
gap:16px; flex-wrap:wrap;
}
.section-head h2{ font-size:30px; }
.section-head .eyebrow-sm{
display:block; font-size:13px; font-weight:600; letter-spacing:0.1em;
text-transform:uppercase; color:var(--color-rose); margin-bottom:6px;
}
.section-link{
font-size:14px; font-weight:600; color:var(--color-primary);
border-bottom:1px solid var(--color-primary);
padding-bottom:2px;
}
/* ============ CATEGORY GRID ============ */
.category-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;
}
.category-card{
text-align:center;
padding:28px 12px;
background:var(--bg-muted);
border-radius:var(--radius-md);
transition: transform .25s, box-shadow .25s;
}
.category-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.category-icon{
width:56px; height:56px; margin:0 auto 14px;
border-radius:50%;
background:#fff;
display:flex; align-items:center; justify-content:center;
color:var(--color-primary);
}
.category-card span{ font-size:14px; font-weight:600; color:var(--color-plum); }
/* ============ PROMO BANNERS (colecciones destacadas del home) ============
Prototipo 3 elegido: editorial hover-reveal. Por ahora usa fondo con
degradado (placeholder) igual que las tarjetas del mega menú, en vez
de foto real — cuando haya fotografía de producto, se agrega un ![]()
dentro de .promo-foto con object-fit:cover por encima del degradado. */
.promo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.promo-card{
position:relative;
display:block;
border-radius:var(--radius-lg);
overflow:hidden;
aspect-ratio:3/4;
color:#fff;
}
.promo-foto{
position:absolute; inset:0;
background:linear-gradient(155deg, #E7A9BC, var(--color-primary) 60%);
}
.promo-card:nth-child(2) .promo-foto{ background:linear-gradient(155deg, #8a4a5f, var(--color-plum) 65%); }
.promo-card:nth-child(3) .promo-foto{ background:linear-gradient(155deg, var(--color-primary), #7a2947 70%); }
.promo-foto::after{
content:'';
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
.promo-tag{
position:absolute; top:20px; left:20px; z-index:2;
font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
color:#fff; opacity:.9;
}
.promo-titulo{
position:absolute; left:20px; right:20px; bottom:24px; z-index:2;
font-family:var(--font-display); font-style:italic; font-weight:500;
font-size:24px; line-height:1.2; color:#fff;
transition:opacity .25s ease;
}
.promo-reveal{
position:absolute; inset:0; z-index:3;
background:rgba(36,20,28,.62);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:flex; flex-direction:column; justify-content:flex-end;
padding:24px;
opacity:0;
transform:translateY(10px);
transition:opacity .3s ease, transform .3s ease;
}
.promo-card:hover .promo-reveal{ opacity:1; transform:translateY(0); }
.promo-card:hover .promo-titulo{ opacity:0; }
.promo-reveal p{ font-size:17px; opacity:.9; line-height:1.55; margin-bottom:16px; color:#fff; }
.promo-cta{
display:inline-flex; align-items:center; gap:8px;
font-size:12.5px; font-weight:600; letter-spacing:.02em;
color:var(--color-plum); background:#fff;
padding:10px 18px; border-radius:100px;
width:fit-content;
transition:background .2s ease, color .2s ease;
}
.promo-cta:hover{ background:var(--color-primary); color:#fff; }
/* ============ PRODUCT GRID / CARD ============ */
.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.product-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
transition: transform .25s, box-shadow .25s;
display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.product-media{ position:relative; aspect-ratio:1/1; background:var(--bg-muted); }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-badge{
position:absolute; top:12px; left:12px;
background:var(--color-sale); color:#fff;
font-size:11px; font-weight:700;
padding:4px 10px; border-radius:999px;
}
.product-badge.nuevo{ background:var(--color-plum); }
.product-badge.bestseller{ background:var(--color-primary); }
.product-fav{
position:absolute; top:10px; right:10px;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9);
display:flex; align-items:center; justify-content:center;
color:var(--color-plum);
transition:background .2s, color .2s;
}
.product-fav:hover{ background:#fff; }
.product-fav.activo{ color:var(--color-primary); }
.product-fav.activo svg{ fill:var(--color-primary); }
/* ============ BOTÓN "ANTES / DESPUÉS" en la tarjeta (solo Skincare) ============ */
.product-antes-despues{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px;
background:rgba(36,27,33,.72);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
color:#fff;
font-size:12.5px; font-weight:600; letter-spacing:.02em;
opacity:0;
visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
.product-card:hover .product-antes-despues{ opacity:1; visibility:visible; }
.product-antes-despues:hover{ background:rgba(194,41,92,.85); }
/* Versión permanente (siempre visible, sin hover) para la ficha de
producto — ahí no hay "tarjeta" sobre la que hacer hover, así que el
ícono debe verse fijo sobre la imagen principal. */
.pdp-antes-despues{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px;
background:rgba(36,27,33,.72);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
color:#fff;
font-size:13px; font-weight:600; letter-spacing:.02em;
border:none; cursor:pointer;
transition:background .2s ease;
}
.pdp-antes-despues:hover{ background:rgba(194,41,92,.85); }
/* ============ MODAL ANTES / DESPUÉS ============ */
.antes-despues-overlay{
position:fixed; inset:0;
background:rgba(36,27,33,.55);
opacity:0; visibility:hidden;
transition:opacity .3s;
z-index:95;
}
.antes-despues-overlay.abierto{ opacity:1; visibility:visible; }
.antes-despues-modal{
position:fixed; top:50%; left:50%;
transform:translate(-50%,-50%) scale(.96);
width:min(520px, 92vw);
opacity:0; visibility:hidden;
transition:opacity .3s ease, transform .3s ease;
z-index:96;
}
.antes-despues-modal.abierto{
opacity:1; visibility:visible;
transform:translate(-50%,-50%) scale(1);
}
.antes-despues-panel{
background:#fff;
border-radius:var(--radius-md);
padding:28px;
box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
position:relative;
}
.antes-despues-cerrar{
position:absolute; top:16px; right:16px; z-index:3;
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted); font-size:16px;
transition:background .2s;
}
.antes-despues-cerrar:hover{ background:var(--bg-muted); }
.antes-despues-titulo{ font-size:20px; margin-bottom:4px; padding-right:32px; }
.antes-despues-nota{ font-size:12.5px; color:var(--fg-muted); margin-bottom:18px; }
.ad-slider{
position:relative;
width:100%; aspect-ratio:4/5;
min-height:340px; /* respaldo: si aspect-ratio no calcula el alto por algún motivo, esto igual reserva espacio */
background:var(--bg-muted);
border-radius:var(--radius-sm);
overflow:hidden;
cursor:ew-resize;
user-select:none;
}
.ad-img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
pointer-events:none;
-webkit-user-drag:none;
}
/* La foto "antes" ocupa EXACTAMENTE el mismo espacio que "después"
(mismo width/height/object-fit) — la diferencia es solo un clip-path
que revela la parte izquierda. Así ambas calzan pixel por pixel al
arrastrar, en vez de desalinearse como con el truco de ancho%. */
.ad-antes{ clip-path: inset(0 50% 0 0); /* JS actualiza el inset derecho al arrastrar */ }
.ad-label{
position:absolute; top:14px; z-index:2;
font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
color:#fff; background:rgba(36,27,33,.55);
padding:5px 12px; border-radius:100px;
}
.ad-label-antes{ left:14px; }
.ad-label-despues{ right:14px; }
.ad-handle{
position:absolute; top:0; bottom:0; left:50%; /* JS actualiza este left % */
width:0; z-index:3;
display:flex; align-items:center; justify-content:center;
transform:translateX(-50%);
}
.ad-handle::before{
content:'';
position:absolute; top:0; bottom:0; left:50%;
width:3px; background:#fff;
transform:translateX(-50%);
box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.ad-handle-flechas{
position:relative; z-index:1;
width:38px; height:38px; border-radius:50%;
background:#fff; box-shadow:var(--shadow-hover);
display:flex; align-items:center; justify-content:center;
font-size:13px; color:var(--color-plum); font-weight:700;
letter-spacing:-2px;
}
.product-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:12.5px; font-weight:700; color:var(--fg); text-transform:none; letter-spacing:0; }
.product-name{ font-size:13.5px; font-weight:400; color:var(--fg-muted); line-height:1.35; min-height:36px; }
.product-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.price-now{ font-size:18px; font-weight:700; color:var(--color-primary); }
.price-before{ font-size:13px; color:var(--fg-muted); text-decoration:line-through; }
.btn-add{
margin-top:10px;
width:100%;
padding:10px;
background:#fff;
color:var(--color-primary);
border:1.5px solid var(--color-primary);
border-radius:999px;
font-size:13px; font-weight:600;
text-align:center;
display:flex; align-items:center; justify-content:center; gap:6px;
transition: background .2s, color .2s;
}
.btn-add svg{ flex-shrink:0; }
.btn-add:hover{ background:var(--color-primary); color:#fff; }
/* ============ CARRUSEL INFINITO (productos destacados) ============
Loop sin fin: el track trae el mismo set de productos pintado 2 veces
(ver index.php) — como ambas mitades son idénticas, el salto de vuelta
es invisible. A diferencia de la v1, el movimiento ahora lo controla
JS (assets/js/destacados-carrusel.js) en vez de @keyframes, para poder
mover manualmente con las flechas y marcar el dot activo. Respeta
prefers-reduced-motion vía guard en el propio JS (no solo CSS). */
.destacados-carrusel{
position:relative;
overflow:hidden;
padding:8px 0 20px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.destacados-track{
display:flex;
width:max-content;
gap:24px;
/* SIN will-change:transform a propósito: esa propiedad crea un
"containing block" para cualquier descendiente position:fixed
(como el modal Antes/Después embebido en cada tarjeta), lo que
atrapaba el modal dentro del carrusel en vez de centrarlo en
toda la pantalla. El movimiento del carrusel (JS, cada frame)
funciona igual de bien sin esta propiedad. */
}
.destacados-track .product-card{
flex:0 0 270px;
width:270px;
}
.destacados-arrow{
position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:4;
width:44px; height:44px; border-radius:50%;
background:#fff; box-shadow:var(--shadow-card);
border:1px solid var(--border);
color:var(--color-plum);
display:flex; align-items:center; justify-content:center;
font-size:16px;
transition:background .2s ease, color .2s ease;
}
.destacados-arrow:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.destacados-arrow.prev{ left:4px; }
.destacados-arrow.next{ right:4px; }
.destacados-dots{
display:flex; align-items:center; justify-content:center;
gap:8px;
margin-top:4px;
}
.destacados-dot{
width:8px; height:8px; border-radius:50%;
background:var(--border);
transition:all .3s ease;
cursor:pointer;
}
.destacados-dot:hover{ background:var(--color-rose); }
.destacados-dot.activo{ background:var(--color-primary); width:22px; border-radius:4px; }
@media (max-width:640px){
.destacados-arrow{ display:none; }
}
/* ============ BENEFITS ============ */
.benefits-section{ background:var(--color-plum); color:#fff; }
.benefits-section h2, .benefits-section .eyebrow-sm{ color:#fff; }
.benefits-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.benefit-item{ text-align:center; padding:0 12px; }
.benefit-icon{
width:52px; height:52px; margin:0 auto 14px;
border-radius:50%;
background:rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center;
}
.benefit-item h4{ color:#fff; font-size:16px; margin-bottom:4px; }
.benefit-item p{ font-size:13px; color:#E7CFD8; }
/* ============ MARCAS (tarjetas numeradas, estilo sección "Clientes" de grocva.com) ============
Placeholder: sin logos reales todavía, así que el "logo" es un
monograma con la inicial de la marca sobre degradado. Cuando lleguen
los logos reales, se reemplaza .marca-logo-placeholder por un ![]()
. */
.marcas-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.marca-card{
position:relative;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:28px 24px 24px;
display:flex; flex-direction:column; gap:16px;
transition:transform .25s ease, box-shadow .25s ease;
}
.marca-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.marca-num{
font-family:var(--font-display); font-style:italic; font-weight:500;
font-size:13px; color:var(--color-rose);
}
.marca-logo-placeholder{
width:100%; height:96px;
border-radius:var(--radius-sm);
display:flex; align-items:center; justify-content:center;
background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 70%);
}
.marca-card:nth-child(3n+2) .marca-logo-placeholder{ background:linear-gradient(155deg, var(--color-primary-dark), var(--color-plum) 75%); }
.marca-card:nth-child(3n) .marca-logo-placeholder{ background:linear-gradient(155deg, var(--color-primary), var(--color-rose) 80%); }
.marca-logo-placeholder span{
font-family:var(--font-display); font-style:italic; font-weight:600;
font-size:34px; color:#fff;
}
.marca-nombre{ font-size:16px; font-weight:600; color:var(--color-plum); }
.marca-badge{
display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:600; color:var(--fg-muted);
width:fit-content;
}
.marca-badge svg{ color:var(--color-primary); flex-shrink:0; }
/* ============ TESTIMONIOS (grid con lightbox) ============
Prototipo 3 elegido: mosaico de fotos con tabs de filtro por
categoría, clic abre un lightbox compartido (uno solo por página,
no uno por tarjeta) con navegación prev/next en loop infinito.
Hover con sombra neumórfica (negra + brillo blanco) en vez de
inclinar/escalar la tarjeta — así no se deforma la foto.
JS en assets/js/testimonios.js. */
.testi-header{ text-align:center; margin-bottom:32px; }
.testi-header h2{ font-family:var(--font-display); font-size:32px; color:var(--color-plum); margin-bottom:20px; }
.testi-filtros{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.testi-filtro{
padding:9px 18px; border-radius:100px;
border:1px solid var(--border); background:#fff; color:var(--fg-muted);
font-size:13px; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.testi-filtro:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.testi-filtro.activo{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px; }
.testi-tile{
position:relative; aspect-ratio:1/1; border-radius:var(--radius-md);
overflow:hidden; cursor:pointer;
transition:transform .3s ease, box-shadow .3s ease;
}
.testi-tile:hover{
transform:translateY(-6px);
box-shadow: 18px 18px 35px rgba(0,0,0,.75), -14px -14px 30px rgba(255,255,255,.6);
}
.testi-tile.oculta{ display:none; }
.testi-foto{ position:absolute; inset:0; transition:transform .4s ease; }
.testi-tile:hover .testi-foto{ transform:scale(1.08); }
.testi-foto::after{
content:'';
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
.testi-tile::before{
content:'';
position:absolute; inset:0; z-index:1;
background:rgba(36,20,28,0);
transition:background .25s ease;
}
.testi-tile:hover::before{ background:rgba(36,20,28,.25); }
.testi-lupa{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
z-index:2; width:40px; height:40px; border-radius:50%;
background:#fff; display:flex; align-items:center; justify-content:center;
color:var(--color-plum); font-size:16px;
opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.testi-tile:hover .testi-lupa{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.testi-mini-cat{
position:absolute; bottom:10px; left:10px; z-index:2;
font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:#fff; background:rgba(36,20,28,.55); padding:4px 9px; border-radius:100px;
}
/* ---- Lightbox de testimonios ---- */
.lightbox-overlay{
position:fixed; inset:0; background:rgba(36,20,28,.75);
opacity:0; visibility:hidden; transition:opacity .3s; z-index:95;
}
.lightbox-overlay.abierto{ opacity:1; visibility:visible; }
.lightbox{
position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
width:min(720px, 92vw);
opacity:0; visibility:hidden;
transition:opacity .3s ease, transform .3s ease;
z-index:96;
}
.lightbox.abierto{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.lightbox-caja{
display:grid; grid-template-columns:1fr 1fr;
background:#fff; border-radius:var(--radius-lg); overflow:hidden;
box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
}
.lightbox-foto{ position:relative; }
.lightbox-foto::after{
content:'';
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
.lightbox-info{ padding:32px; display:flex; flex-direction:column; gap:14px; position:relative; }
.lightbox-cerrar{
position:absolute; top:14px; right:14px;
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted); font-size:16px; border:none; background:none; cursor:pointer;
}
.lightbox-cerrar:hover{ background:var(--bg-muted); }
.lightbox-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:97;
width:44px; height:44px; border-radius:50%;
background:#fff; box-shadow:0 10px 30px rgba(74,42,58,.2);
border:none; color:var(--color-plum); font-size:18px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:background .2s ease, color .2s ease;
}
.lightbox-arrow:hover{ background:var(--color-primary); color:#fff; }
.lightbox-arrow.prev{ left:-22px; }
.lightbox-arrow.next{ right:-22px; }
.lightbox-cat{
display:inline-flex; width:fit-content;
font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
color:var(--color-primary); background:var(--color-rose-soft);
padding:4px 10px; border-radius:100px;
}
.lightbox-estrellas{ color:var(--color-primary); font-size:14px; }
.lightbox-quote{
font-family:var(--font-display); font-style:italic; font-weight:500;
font-size:19px; line-height:1.5; color:var(--fg);
}
.lightbox-autor{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); margin-top:auto; }
.lightbox-avatar{
width:40px; height:40px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-style:italic; font-weight:600; font-size:16px; color:#fff;
background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 70%);
}
.lightbox-autor-texto strong{ display:block; font-size:14px; color:var(--color-plum); }
.lightbox-autor-texto span{ font-size:12px; color:var(--fg-muted); }
@media (max-width:760px){
.testi-grid{ grid-template-columns:repeat(2,1fr); }
.lightbox-caja{ grid-template-columns:1fr; }
.lightbox-foto{ aspect-ratio:4/3; }
.lightbox-arrow.prev{ left:8px; }
.lightbox-arrow.next{ right:8px; }
}
/* ============ PUNTOS DE VENTA (directorio agrupado por departamento + modal con mapa real) ============
Directorio de distribuidores/minoristas autorizados, agrupado por
departamento (Lima > Arequipa > La Libertad > Piura > Cusco, según
ranking de importancia acordado — solo 5 de 24 por ahora). Al elegir
un departamento (selector o clic en su nombre) se abre un modal con
el mapa SVG real del cliente (ese departamento resaltado) + sus
puntos de venta. JS en assets/js/puntos-de-venta.js. */
.pv-titulo{ font-size:34px; margin:10px 0 14px; line-height:1.2; }
.pv-titulo em{ font-style:italic; color:var(--color-primary); }
.pv-subtexto{ color:var(--fg-muted); font-size:14.5px; line-height:1.6; max-width:560px; }
/* ---- Selector "Ver mapa de" ---- */
.pv-filtro-row{
display:flex; align-items:center; gap:12px;
margin-bottom:36px;
}
.pv-filtro-row label{ font-size:13.5px; font-weight:600; color:var(--fg-muted); }
.pv-filtro-row select{
font-family:inherit; font-size:13.5px; font-weight:600;
padding:10px 36px 10px 16px;
border:1px solid var(--border); border-radius:999px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A2A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
color:var(--fg); appearance:none; -webkit-appearance:none; cursor:pointer;
}
.pv-filtro-row select:hover{ border-color:var(--color-primary); }
/* ---- Grupo por departamento ---- */
.pv-grupo-depto{ margin-bottom:36px; }
.pv-grupo-depto:last-child{ margin-bottom:0; }
.pv-depto-nombre{
display:flex; align-items:center; gap:10px;
width:100%;
background:none; border:none; text-align:left; cursor:pointer;
padding:0 0 14px; margin-bottom:18px;
border-bottom:1px solid var(--border);
font-family:var(--font-display); font-style:italic; font-weight:600;
font-size:20px; color:var(--color-plum);
}
.pv-depto-dot{
width:9px; height:9px; border-radius:50%;
background:var(--color-primary); flex-shrink:0;
}
.pv-depto-ver-mapa{
margin-left:auto;
font-family:var(--font-sans); font-style:normal; font-weight:600;
font-size:12.5px; color:var(--color-primary);
}
.pv-depto-nombre:hover .pv-depto-ver-mapa{ color:var(--color-primary-dark); }
.pv-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pv-card{
display:flex; align-items:flex-start; gap:14px;
background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
padding:20px; position:relative;
transition:transform .2s ease, box-shadow .2s ease;
}
.pv-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.pv-card-icono{
width:42px; height:42px; border-radius:50%; flex-shrink:0;
background:var(--color-rose-soft);
display:flex; align-items:center; justify-content:center; font-size:19px;
}
.pv-card-texto{ display:flex; flex-direction:column; gap:2px; }
.pv-card-texto strong{ font-size:14.5px; color:var(--color-plum); }
.pv-card-ciudad{ font-size:12.5px; color:var(--fg-muted); }
.pv-card-linea{ font-size:11.5px; color:var(--color-rose); font-weight:600; margin-top:4px; }
.pv-card-badge{
position:absolute; top:14px; right:14px;
font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
color:var(--color-primary); background:var(--color-rose-soft);
padding:4px 9px; border-radius:100px;
}
/* ---- Modal: mapa real del departamento + su listado ---- */
.pv-modal-overlay{
position:fixed; inset:0; background:rgba(36,27,33,.6);
opacity:0; visibility:hidden; transition:opacity .3s; z-index:95;
}
.pv-modal-overlay.abierto{ opacity:1; visibility:visible; }
.pv-modal{
position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
width:min(760px, 92vw);
max-height:88vh;
opacity:0; visibility:hidden;
transition:opacity .3s ease, transform .3s ease;
z-index:96;
}
.pv-modal.abierto{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.pv-modal-panel{
display:grid; grid-template-columns:1fr 1.1fr;
background:#fff; border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
max-height:88vh;
}
.pv-modal-mapa{
background:var(--bg-muted);
display:flex; align-items:center; justify-content:center;
padding:24px;
}
.pv-modal-mapa img{ width:100%; height:auto; max-height:70vh; object-fit:contain; }
.pv-modal-info{
padding:28px; position:relative;
overflow-y:auto; max-height:88vh;
}
.pv-modal-info h3{
font-size:24px; margin:6px 0 20px;
}
.pv-modal-cerrar{
position:absolute; top:14px; right:14px; z-index:3;
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted); font-size:16px; border:none; background:none; cursor:pointer;
}
.pv-modal-cerrar:hover{ background:var(--bg-muted); }
.pv-modal-lista{ display:flex; flex-direction:column; gap:12px; }
.pv-modal-lista .pv-card{ padding:16px; }
@media (max-width:760px){
.pv-lista{ grid-template-columns:1fr; }
.pv-modal-panel{ grid-template-columns:1fr; overflow-y:auto; }
.pv-modal-mapa{ padding:16px; }
.pv-modal-info{ max-height:none; overflow-y:visible; }
}
/* ============ LIBRO DE RECLAMACIONES ============
Obligatorio por ley (Ley 29571 + D.S. 011-2011-PCM). Reutiliza look
de tarjeta/formulario ya establecido en el sitio (mismos radios,
bordes, colores) en vez de inventar un sistema visual aparte.
JS en assets/js/libro-reclamaciones.js. */
.lr-wrap{ max-width:820px; }
.lr-header{
background:linear-gradient(155deg, var(--color-rose-soft), #fff 70%);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:32px 36px;
margin-bottom:28px;
border-bottom:4px solid var(--color-primary);
}
.lr-header-logo{
font-family:var(--font-display); font-size:24px; font-style:italic; font-weight:600;
color:var(--color-primary);
}
.lr-header-divider{ height:1px; background:var(--border); margin:16px 0 20px; }
.lr-header h1{ font-size:24px; color:var(--color-plum); margin-bottom:14px; }
.lr-header p{ font-size:13.5px; color:var(--fg-muted); line-height:1.6; }
.lr-card{
background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
padding:28px; margin-bottom:20px;
}
.lr-card-titulo{
font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
color:var(--fg); margin-bottom:20px;
padding-left:14px; border-left:3px solid var(--color-primary);
}
.lr-row{ display:flex; gap:16px; }
.lr-row .lr-field{ flex:1; }
.lr-field{ margin-bottom:18px; }
.lr-field:last-child{ margin-bottom:0; }
.lr-field-sm{ max-width:160px; }
.lr-field label{
display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:6px;
}
.lr-field input, .lr-field select, .lr-field textarea{
width:100%; padding:11px 14px;
border:1px solid var(--border); border-radius:var(--radius-sm);
font-family:inherit; font-size:14px; color:var(--fg);
background:var(--bg-muted);
}
.lr-field input:focus, .lr-field select:focus, .lr-field textarea:focus{
border-color:var(--color-primary); outline:none; background:#fff;
}
.lr-field textarea{ resize:vertical; }
.lr-nota{ display:block; font-size:11.5px; color:var(--fg-muted); margin-top:6px; }
.lr-definiciones{ font-size:13px; color:var(--fg-muted); line-height:1.7; margin-bottom:22px; }
.lr-observaciones-nota{
background:var(--bg-muted); border-radius:var(--radius-sm);
padding:16px; font-size:13px; color:var(--fg-muted); font-style:italic;
}
/* ---- Zona de evidencia (drag & drop visual) ---- */
.lr-dropzone{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
border:1.5px dashed var(--color-rose);
border-radius:var(--radius-md);
padding:36px 20px;
cursor:pointer;
text-align:center;
transition:border-color .2s ease, background .2s ease;
}
.lr-dropzone:hover, .lr-dropzone.arrastrando{
border-color:var(--color-primary); background:var(--color-rose-soft);
}
.lr-dropzone-icono{
width:48px; height:48px; border-radius:50%;
background:var(--color-rose-soft);
display:flex; align-items:center; justify-content:center; font-size:20px;
}
.lr-dropzone-texto{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary); }
.lr-archivos-lista{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.lr-archivos-lista li{
display:flex; align-items:center; justify-content:space-between; gap:10px;
font-size:13px; color:var(--fg); background:var(--bg-muted);
padding:8px 14px; border-radius:var(--radius-sm);
}
.lr-archivos-lista button{
color:var(--color-sale); font-size:16px; line-height:1; background:none; border:none; cursor:pointer;
}
/* ---- Importante (texto legal) ---- */
.lr-legal{ font-size:12.5px; color:var(--fg-muted); line-height:1.7; margin-bottom:16px; }
.lr-legal:last-of-type{ margin-bottom:20px; }
.lr-check{
display:flex; align-items:flex-start; gap:10px;
font-size:13px; color:var(--fg); cursor:pointer; line-height:1.5;
}
.lr-check input{ width:16px; height:16px; margin-top:2px; accent-color:var(--color-primary); flex-shrink:0; }
/* ---- Acciones ---- */
.lr-error{
background:#FDECEA; border:1px solid #F5A9A0;
color:#B3261E; font-size:13px;
padding:12px 16px; border-radius:var(--radius-sm);
margin-bottom:20px;
}
.lr-acciones{
display:flex; align-items:center; gap:20px;
margin-top:8px;
}
.lr-btn-enviar{
padding:14px 36px;
background:var(--color-primary); color:#fff;
border:none; border-radius:999px;
font-size:14px; font-weight:700; cursor:pointer;
transition:background .2s ease;
}
.lr-btn-enviar:hover{ background:var(--color-primary-dark); }
.lr-btn-borrar{
background:none; border:none; cursor:pointer;
font-size:13px; font-weight:600; color:var(--color-sale);
}
.lr-btn-borrar:hover{ text-decoration:underline; }
/* ---- Confirmación tras enviar ---- */
.lr-confirmacion{
text-align:center; padding:60px 24px;
background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
}
.lr-confirmacion-icono{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background:var(--color-rose-soft); color:var(--color-primary);
font-size:26px; font-weight:700; margin-bottom:20px;
}
.lr-confirmacion h2{ font-size:22px; color:var(--color-plum); margin-bottom:14px; }
.lr-confirmacion p{ font-size:14px; color:var(--fg-muted); line-height:1.7; max-width:420px; margin:0 auto 6px; }
.lr-confirmacion strong{ color:var(--color-primary); }
.lr-confirmacion-nota{ font-size:11.5px; color:var(--fg-muted); margin-top:16px; }
@media (max-width:640px){
.lr-row{ flex-direction:column; gap:0; }
.lr-header{ padding:24px; }
.lr-card{ padding:20px; }
}
/* ============ BLOG ============
Listado (blog.php) + entrada individual (blog-post.php), estilo
WordPress: tabs de categoría, grid de tarjetas, página de post con
contenido + relacionados. Reusa .plp-vacio, .plp-paginacion,
.pagina-link ya existentes en el sitio. */
.blog-titulo-pagina{ font-size:30px; }
.blog-buscador{
position:relative;
display:flex; align-items:center; gap:10px;
max-width:420px;
background:var(--bg-muted);
border:1px solid var(--border);
border-radius:999px;
padding:11px 18px;
margin-bottom:20px;
transition:border-color .2s ease, box-shadow .2s ease;
}
.blog-buscador:focus-within{
border-color:var(--color-primary);
box-shadow:0 0 0 3px rgba(194,41,92,.15);
}
.blog-buscador svg{ flex-shrink:0; color:var(--fg-muted); }
.blog-buscador input{
border:none; background:none; flex:1;
font-family:inherit; font-size:14px; color:var(--fg);
}
.blog-buscador input:focus{ outline:none; }
.blog-buscador input::placeholder{ color:var(--fg-muted); }
.blog-buscador-limpiar{
flex-shrink:0; width:22px; height:22px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted); font-size:12px;
transition:background .2s ease, color .2s ease;
}
.blog-buscador-limpiar:hover{ background:var(--border); color:var(--color-sale); }
.blog-resultados-nota{ font-size:13.5px; color:var(--fg-muted); margin-bottom:24px; }
.blog-resultados-nota strong{ color:var(--color-plum); }
.blog-filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.blog-filtro{
padding:9px 18px; border-radius:100px;
border:1px solid var(--border); background:#fff; color:var(--fg-muted);
font-size:13px; font-weight:600; transition:all .2s ease;
}
.blog-filtro:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.blog-filtro.activo{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
display:block;
background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.blog-card-foto{
position:relative; aspect-ratio:4/3; overflow:hidden;
}
.blog-card-foto img{ width:100%; height:100%; object-fit:cover; }
.blog-card-cat{
position:absolute; top:14px; left:14px; z-index:2;
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:#fff; background:rgba(36,20,28,.55); padding:5px 12px; border-radius:100px;
}
.blog-card-body{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.blog-card-fecha{ font-size:11.5px; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.03em; }
.blog-card-body h3{
font-family:var(--font-display); font-size:18px; color:var(--color-plum); line-height:1.3;
}
.blog-card-body p{ font-size:13.5px; color:var(--fg-muted); line-height:1.55; }
.blog-card-leer{ font-size:13px; font-weight:600; color:var(--color-primary); margin-top:4px; }
/* ---- Página de entrada individual ---- */
.blog-post-grid{
display:grid;
grid-template-columns:1fr 300px;
gap:48px;
align-items:start;
}
.blog-post-col-principal{ max-width:720px; }
/* ---- Sidebar: asistencia WhatsApp + recientes + categorías ---- */
.blog-sidebar{
display:flex; flex-direction:column; gap:20px;
position:sticky; top:90px;
}
.blog-sidebar-card{
background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
padding:22px;
}
.blog-sidebar-titulo{
display:block; font-size:14px; font-weight:700; color:var(--color-plum);
margin-bottom:16px;
}
.blog-sidebar-whatsapp{
transition:transform .3s ease, box-shadow .3s ease;
}
.blog-sidebar-whatsapp:hover{
transform:translateY(-6px);
box-shadow: 10px 10px 20px rgba(0,0,0,.35), -8px -8px 16px rgba(255,255,255,.5);
}
.blog-whatsapp-btn{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%; padding:13px;
background:#25D366; color:#fff;
border-radius:999px;
font-size:13.5px; font-weight:700;
transition:background .2s ease;
}
.blog-whatsapp-btn:hover{ background:#1ebd5a; }
.blog-sidebar-lista{ display:flex; flex-direction:column; gap:12px; }
.blog-sidebar-lista li{ padding-bottom:12px; border-bottom:1px solid var(--border); }
.blog-sidebar-lista li:last-child{ padding-bottom:0; border-bottom:none; }
.blog-sidebar-lista a{
font-size:13.5px; color:var(--fg-muted); line-height:1.4;
transition:color .2s ease;
}
.blog-sidebar-lista a:hover{ color:var(--color-primary); }
/* ---- Carrusel infinito de blog (home) — mismo mecanismo que
.destacados-carrusel, con clases propias para no acoplarse a él.
JS en assets/js/blog-carrusel.js. ---- */
.blog-carrusel{
position:relative;
overflow:hidden;
padding:8px 0 20px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.blog-track{
display:flex;
width:max-content;
gap:24px;
}
.blog-track .blog-track-card{
flex:0 0 300px;
width:300px;
}
.blog-carrusel-arrow{
position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:4;
width:44px; height:44px; border-radius:50%;
background:#fff; box-shadow:var(--shadow-card);
border:1px solid var(--border);
color:var(--color-plum);
display:flex; align-items:center; justify-content:center;
font-size:16px;
transition:background .2s ease, color .2s ease;
}
.blog-carrusel-arrow:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.blog-carrusel-arrow.prev{ left:4px; }
.blog-carrusel-arrow.next{ right:4px; }
.blog-carrusel-dots{
display:flex; align-items:center; justify-content:center;
gap:8px;
margin-top:4px;
}
.blog-carrusel-dot{
width:8px; height:8px; border-radius:50%;
background:var(--border);
transition:all .3s ease;
cursor:pointer;
}
.blog-carrusel-dot:hover{ background:var(--color-rose); }
.blog-carrusel-dot.activo{ background:var(--color-primary); width:22px; border-radius:4px; }
@media (max-width:640px){
.blog-carrusel-arrow{ display:none; }
}
@media (max-width:900px){
.blog-post-grid{ grid-template-columns:1fr; }
.blog-post-col-principal{ max-width:none; }
.blog-sidebar{ position:static; }
}
.blog-post-cabecera{ text-align:center; margin-bottom:28px; }
.blog-post-cat{
display:inline-flex; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:var(--color-primary); background:var(--color-rose-soft);
padding:5px 14px; border-radius:100px; margin-bottom:16px;
}
.blog-post-cabecera h1{ font-size:32px; line-height:1.25; margin-bottom:14px; }
.blog-post-meta{ font-size:13px; color:var(--fg-muted); }
.blog-post-meta-sep{ margin:0 6px; }
.blog-post-foto{
position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg);
overflow:hidden; margin-bottom:32px;
}
.blog-post-foto img{ width:100%; height:100%; object-fit:cover; }
.blog-post-contenido{ font-size:15.5px; color:var(--fg); line-height:1.8; }
.blog-post-contenido p{ margin-bottom:20px; }
.blog-post-contenido p:last-child{ margin-bottom:0; }
.blog-post-volver{
display:inline-block; margin-top:32px;
font-size:13.5px; font-weight:600; color:var(--color-primary);
}
.blog-post-volver:hover{ color:var(--color-primary-dark); }
@media (max-width:900px){
.blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
.blog-grid{ grid-template-columns:1fr; }
.blog-post-cabecera h1{ font-size:24px; }
}
/* ============ FOOTER ============ */
.site-footer{
background:#F8F2F0;
border-top:1px solid var(--border);
padding:56px 0 24px;
font-size:14px;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr repeat(3,1fr);
gap:32px;
margin-bottom:40px;
}
.footer-col h5{
font-family:var(--font-sans);
font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
color:var(--color-plum); margin-bottom:16px;
}
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:var(--fg-muted); transition:color .2s; }
.footer-libro-reclamaciones{ display:inline-flex; align-items:center; gap:6px; }
.footer-col a:hover{ color:var(--color-primary); }
.footer-brand p{ color:var(--fg-muted); margin:14px 0 18px; max-width:280px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
width:36px; height:36px; border-radius:50%;
background:#fff; border:1px solid var(--border);
display:flex; align-items:center; justify-content:center;
color:var(--color-plum);
}
.footer-social a:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.footer-bottom{
border-top:1px solid var(--border);
padding-top:20px;
display:flex; justify-content:space-between; align-items:center;
flex-wrap:wrap; gap:12px;
color:var(--fg-muted); font-size:13px;
}
.payment-icons{ display:flex; gap:8px; }
.payment-icons span{
padding:4px 10px; border:1px solid var(--border); border-radius:6px;
font-size:11px; font-weight:600; color:var(--fg-muted);
}
/* ============ BREADCRUMB ============ */
.breadcrumb{
font-size:13px; color:var(--fg-muted);
margin-bottom:8px;
}
.breadcrumb a{ color:var(--fg-muted); }
.breadcrumb a:hover{ color:var(--color-primary); }
.breadcrumb span{ margin:0 6px; }
/* ============ PLP (página de categoría) ============ */
.plp-layout{
display:grid;
grid-template-columns:250px 1fr;
gap:36px;
padding-bottom:64px;
}
.plp-sidebar-title{
font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
margin-bottom:8px;
color:var(--fg);
font-family:var(--font-sans);
}
.filtro-grupo{
border-bottom:1px solid var(--border);
padding:16px 0;
}
.filtro-grupo:first-of-type{ border-top:1px solid var(--border); }
.filtro-grupo summary{
cursor:pointer;
font-size:14px; font-weight:500;
color:var(--fg);
list-style:none;
display:flex; align-items:center; justify-content:space-between;
transition:color .2s;
}
.filtro-grupo summary:hover{ color:var(--color-primary); }
.filtro-grupo summary::-webkit-details-marker{ display:none; }
.filtro-grupo summary::after{
content:'';
width:8px; height:8px;
border-right:1.5px solid var(--fg-muted);
border-bottom:1.5px solid var(--fg-muted);
transform:rotate(45deg);
transition: transform .25s;
flex-shrink:0;
margin-left:8px;
}
.filtro-grupo[open] summary::after{ transform:rotate(-135deg); }
.filtro-opciones{
display:flex; flex-direction:column; gap:12px;
margin-top:14px;
}
.filtro-check{
display:flex; align-items:center; gap:9px;
font-size:13.5px; color:var(--fg);
cursor:pointer;
}
.filtro-check input{
accent-color:var(--color-primary);
width:16px; height:16px;
border-radius:3px;
}
.filtro-limpiar{
display:inline-flex; align-items:center; gap:4px;
margin-top:18px;
font-size:13px; font-weight:600;
color:var(--color-sale);
}
.plp-head{
display:flex; align-items:flex-start; justify-content:space-between;
flex-wrap:wrap; gap:16px;
margin-bottom:28px;
padding-bottom:0;
border-bottom:none;
}
.plp-title{
font-size:26px; font-weight:700;
text-transform:uppercase; letter-spacing:0.01em;
font-family:var(--font-sans);
color:var(--fg);
margin-bottom:6px;
}
.plp-count{ font-size:13px; color:var(--fg-muted); }
.plp-orden{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.plp-orden label{ font-size:13px; color:var(--fg-muted); white-space:nowrap; font-weight:500; }
.plp-orden select{
font-family:inherit; font-size:13px; font-weight:600;
padding:10px 36px 10px 16px;
border:1px solid var(--border);
border-radius:999px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A2A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
color:var(--fg);
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.plp-orden select:hover{ border-color:var(--color-primary); }
.plp-vacio{
text-align:center;
padding:60px 20px;
color:var(--fg-muted);
}
.plp-grid{ grid-template-columns:repeat(3,1fr); }
.plp-mostrando{
font-size:13px; color:var(--fg-muted);
margin-bottom:18px;
}
/* Paginación (catalogo.php) */
.plp-paginacion{
display:flex; align-items:center; justify-content:center;
gap:8px; flex-wrap:wrap;
padding:40px 0 64px;
}
.pagina-link{
display:flex; align-items:center; justify-content:center;
min-width:40px; height:40px;
padding:0 12px;
border:1px solid var(--border);
border-radius:999px;
font-size:13.5px; font-weight:600; color:var(--fg-muted);
transition:all .2s ease;
}
.pagina-link:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.pagina-link.activa{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.pagina-link.pagina-flecha{ min-width:40px; width:40px; padding:0; font-size:16px; }
.pagina-puntos{
display:flex; align-items:center; justify-content:center;
min-width:24px; height:40px;
color:var(--fg-muted); font-size:13.5px;
}
/* ============ PDP (ficha de producto) ============ */
.pdp-layout{
display:grid;
grid-template-columns:100px 1fr 420px;
gap:28px;
padding:24px 24px 48px;
}
.pdp-gallery{ display:contents; }
.pdp-thumbs{
display:flex; flex-direction:column; gap:12px;
}
.pdp-thumb{
width:100px; height:100px;
border:1.5px solid var(--border);
border-radius:var(--radius-sm);
overflow:hidden;
padding:0;
transition:border-color .2s;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.active,
.pdp-thumb:hover{ border-color:var(--color-primary); }
.pdp-main-image{
position:relative;
aspect-ratio:1/1;
background:var(--bg-muted);
border-radius:var(--radius-md);
overflow:hidden;
}
.pdp-main-image img{ width:100%; height:100%; object-fit:cover; }
.pdp-info{ display:flex; flex-direction:column; }
.pdp-cat{ font-size:12.5px; font-weight:700; color:var(--color-rose); text-transform:uppercase; letter-spacing:0.05em; }
.pdp-title{ font-size:26px; margin:8px 0 4px; line-height:1.2; }
.pdp-sku{ font-size:12px; color:var(--fg-muted); }
.pdp-price-row{ display:flex; align-items:baseline; gap:10px; margin:18px 0; }
.pdp-qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.qty-selector{
display:flex; align-items:center;
border:1px solid var(--border);
border-radius:999px;
overflow:hidden;
}
.qty-selector button{
width:36px; height:40px;
font-size:16px; color:var(--color-plum);
transition:background .2s;
}
.qty-selector button:hover{ background:var(--bg-muted); }
.qty-selector input{
width:44px; text-align:center;
border:none; font-family:inherit; font-size:14px;
-moz-appearance:textfield;
}
.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.btn-comprar{
flex:1;
padding:12px 20px;
background:var(--color-primary);
color:#fff;
border-radius:999px;
font-size:14px; font-weight:700;
text-align:center;
transition:background .2s;
}
.btn-comprar:hover{ background:var(--color-primary-dark); }
.pdp-trust{
margin-top:24px;
display:flex; flex-direction:column; gap:14px;
padding-top:24px;
border-top:1px solid var(--border);
}
.pdp-trust-item{ display:flex; align-items:flex-start; gap:12px; color:var(--color-plum); }
.pdp-trust-item div{ display:flex; flex-direction:column; }
.pdp-trust-item strong{ font-size:13.5px; }
.pdp-trust-item span{ font-size:12.5px; color:var(--fg-muted); }
/* ---- Acordeones de detalle (reutiliza .filtro-grupo pero a ancho completo) ---- */
.pdp-accordions{ max-width:900px; padding-bottom:48px; }
.pdp-detalle summary{ font-size:15px; font-weight:700; color:var(--color-plum); }
.pdp-detalle summary::after{ border-color:var(--color-plum); }
.pdp-detalle-texto{
margin-top:14px;
font-size:14px; line-height:1.7;
color:var(--fg-muted);
}
/* ============ CARRITO (drawer lateral) ============ */
.cart-overlay{
position:fixed; inset:0;
background:rgba(36,27,33,0.45);
opacity:0; visibility:hidden;
transition:opacity .3s;
z-index:90;
}
.cart-overlay.abierto{ opacity:1; visibility:visible; }
/* ---- Contenedor único: envuelve sugerencias + carrito, un solo movimiento y un solo cierre ---- */
.cart-unidad{
position:fixed; top:0; right:0; bottom:0;
display:flex;
z-index:91;
transform:translateX(100%);
transition:transform .35s cubic-bezier(.65,0,.35,1);
box-shadow:-8px 0 30px rgba(0,0,0,0.12);
}
.cart-unidad.abierto{ transform:translateX(0); }
/* ---- Sección interna: Carrito (aquí vive la única X que cierra todo) ---- */
.cart-seccion{
width:380px; max-width:100vw;
flex-shrink:0;
background:#fff;
display:flex; flex-direction:column;
}
.cart-drawer-head{
display:flex; align-items:center; justify-content:space-between;
padding:20px 24px;
border-bottom:1px solid var(--border);
}
.cart-drawer-head h3{ font-size:20px; }
.cart-drawer-close{
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted); font-size:16px;
transition:background .2s;
}
.cart-drawer-close:hover{ background:var(--bg-muted); }
.cart-drawer-body{
flex:1; overflow-y:auto;
padding:16px 24px;
}
.cart-item{
display:flex; gap:14px;
padding:16px 0;
border-bottom:1px solid var(--border);
}
.cart-item img{
width:64px; height:64px; object-fit:cover;
border-radius:var(--radius-sm);
flex-shrink:0;
background:var(--bg-muted);
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info a{
font-size:13.5px; font-weight:600; color:var(--fg);
display:block; line-height:1.3; margin-bottom:6px;
}
.cart-item-precio{ font-size:13.5px; color:var(--color-primary); font-weight:700; }
.cart-item-qty{
display:flex; align-items:center; gap:10px;
margin-top:8px;
}
.cart-item-qty button{
width:24px; height:24px; border-radius:50%;
border:1px solid var(--border);
font-size:13px; color:var(--color-plum);
display:flex; align-items:center; justify-content:center;
}
.cart-item-qty button:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.cart-item-qty span{ font-size:13px; min-width:16px; text-align:center; }
.cart-item-eliminar{
color:var(--fg-muted);
align-self:flex-start;
font-size:16px;
line-height:1;
padding:4px;
}
.cart-item-eliminar:hover{ color:var(--color-sale); }
.cart-vacio{
text-align:center;
padding:60px 20px;
color:var(--fg-muted);
font-size:14px;
}
.cart-drawer-foot{
padding:20px 24px 24px;
border-top:1px solid var(--border);
}
.cart-envio-texto{ font-size:12.5px; color:var(--fg-muted); margin-bottom:10px; text-align:center; }
.cart-envio-texto strong{ color:var(--color-primary); }
.cart-envio-barra{
position:relative;
height:5px; border-radius:999px;
background:var(--border);
margin-bottom:22px;
}
.cart-envio-barra-fill{
height:100%; background:var(--color-primary);
border-radius:999px;
transition:width .4s;
}
.cart-envio-estrella{
position:absolute; top:50%;
transform:translate(-50%,-50%);
width:18px; height:18px; border-radius:50%;
background:var(--color-primary); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:10px;
box-shadow:0 0 0 3px #fff;
transition:left .4s;
}
.cart-resumen-row{
display:flex; justify-content:space-between;
font-size:13.5px; color:var(--fg-muted);
margin-bottom:8px;
}
.cart-resumen-row.total{
font-size:16px; font-weight:700; color:var(--fg);
margin-top:12px; padding-top:12px;
border-top:1px solid var(--border);
}
.cart-checkout-btn{
display:block; width:100%;
margin-top:16px;
padding:14px;
background:var(--color-primary);
color:#fff; text-align:center;
border-radius:999px;
font-weight:700; font-size:14px;
transition:background .2s;
}
.cart-checkout-btn:hover{ background:var(--color-primary-dark); }
.cart-checkout-btn.deshabilitado{
background:var(--border); color:var(--fg-muted);
pointer-events:none;
}
/* ============ CHECKOUT (Paso 4b) ============ */
.checkout-page{ background:var(--bg-muted); }
.checkout-topbar{ background:#fff; border-bottom:1px solid var(--border); }
.checkout-topbar-inner{
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px;
}
.checkout-seguro{
display:flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:700; letter-spacing:0.05em;
color:var(--fg-muted);
}
.checkout-stepper{
display:flex; align-items:center; justify-content:center;
gap:0; max-width:360px; margin:36px auto 32px;
}
.stepper-item{
width:36px; height:36px; border-radius:50%;
background:#fff; border:2px solid var(--border);
display:flex; align-items:center; justify-content:center;
color:var(--fg-muted);
transition:all .3s;
flex-shrink:0;
}
.stepper-item.activo{ border-color:var(--color-primary); color:var(--color-primary); }
.stepper-item.completado{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.stepper-line{ flex:1; height:2px; background:var(--border); margin:0 4px; min-width:30px; }
.checkout-body{
display:grid;
grid-template-columns:1fr 380px;
gap:32px;
padding-bottom:64px;
}
.checkout-main{ background:#fff; border-radius:var(--radius-md); padding:32px; box-shadow:var(--shadow-card); }
.checkout-step.oculto{ display:none; }
.checkout-step-header{
display:flex; align-items:center; gap:12px;
margin-bottom:8px;
}
.step-num{
width:26px; height:26px; border-radius:50%;
background:var(--color-primary); color:#fff;
font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.checkout-step-header h3{ font-size:17px; flex:1; }
.step-editar{ font-size:12.5px; font-weight:600; color:var(--color-primary); white-space:nowrap; }
.checkout-step-resumen{
font-size:13px; color:var(--fg-muted); line-height:1.6;
padding:12px 0 20px 38px;
border-bottom:1px solid var(--border);
margin-bottom:8px;
}
.checkout-step + .checkout-step{ margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.checkout-subtexto{ font-size:13px; color:var(--fg-muted); margin-bottom:20px; }
.checkout-tabla{ width:100%; border-collapse:collapse; }
.checkout-tabla th{
text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
color:var(--fg-muted);
padding-bottom:14px; border-bottom:1px solid var(--border);
}
.checkout-tabla td{ padding:16px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ck-prod{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; }
.ck-prod img{ width:52px; height:52px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-muted); }
.ck-precio{ font-weight:700; color:var(--fg); white-space:nowrap; }
.qty-selector-sm{ transform:scale(0.9); transform-origin:left center; }
.ck-field{ margin-bottom:16px; flex:1; }
.ck-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:6px; }
.ck-field input, .ck-field select{
width:100%; padding:11px 14px;
border:1px solid var(--border); border-radius:var(--radius-sm);
font-family:inherit; font-size:14px; color:var(--fg);
}
.ck-field input:focus, .ck-field select:focus{ border-color:var(--color-primary); outline:none; }
.ck-row{ display:flex; gap:16px; }
.ck-toggle-row{ display:flex; gap:12px; margin-bottom:18px; }
.ck-toggle{
flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
font-size:13.5px; font-weight:600; color:var(--fg-muted);
cursor:pointer; transition:all .2s;
}
.ck-toggle input{ accent-color:var(--color-primary); }
.ck-toggle.activo{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-rose-soft); }
.ck-check{
display:flex; align-items:center; gap:10px;
font-size:13px; color:var(--fg-muted);
margin-bottom:20px; cursor:pointer;
}
.ck-check input{ width:16px; height:16px; accent-color:var(--color-primary); }
.ck-metodo-pago{ display:flex; flex-direction:column; gap:12px; }
.ck-radio-card{
display:flex; align-items:center; gap:10px;
padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
font-size:13.5px; font-weight:600; color:var(--fg);
cursor:pointer; transition:all .2s;
}
.ck-radio-card em{ font-weight:400; font-style:normal; color:var(--fg-muted); }
.ck-radio-card.activo{ border-color:var(--color-primary); background:var(--color-rose-soft); }
.ck-radio-card input{ accent-color:var(--color-primary); width:16px; height:16px; }
.ck-tarjeta-form{ padding:16px; background:var(--bg-muted); border-radius:var(--radius-sm); margin-top:-4px; }
.checkout-nota-prototipo{
margin-top:14px; padding:12px 14px;
background:#FFF7ED; border:1px solid #FDBA74;
border-radius:var(--radius-sm);
font-size:12.5px; color:#9A5B0F;
}
/* ---- Sidebar del checkout ---- */
.checkout-sidebar{ display:flex; flex-direction:column; gap:16px; align-self:start; position:sticky; top:20px; }
.checkout-sidebar-card{
background:#fff; border-radius:var(--radius-md);
padding:20px; box-shadow:var(--shadow-card);
}
.checkout-sidebar-card h4{ font-size:15px; margin-bottom:14px; }
.checkout-sidebar-cupon-label{ display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:8px; }
.checkout-sidebar-cupon-row{ display:flex; gap:8px; }
.checkout-sidebar-cupon-row input{
flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
font-family:inherit; font-size:13px;
}
.checkout-sidebar-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.checkout-sidebar-item:last-child{ border-bottom:none; }
.checkout-sidebar-item img{ width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-muted); }
.checkout-sidebar-item div{ display:flex; flex-direction:column; font-size:12.5px; }
.checkout-sidebar-item strong{ color:var(--color-primary); font-size:13px; }
.checkout-legal-nota{ font-size:11px; color:var(--fg-muted); margin-top:8px; text-align:right; }
.ck-cuotas-nota{ font-size:12.5px; font-weight:600; color:var(--fg); margin-bottom:10px; }
.ck-cuotas-nota span{ font-weight:400; color:var(--fg-muted); font-size:11px; }
.ck-bancos{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-bancos span{ font-size:11px; font-weight:600; color:var(--fg-muted); border:1px solid var(--border); border-radius:6px; padding:4px 8px; }
.checkout-seguir{ text-align:center; font-size:13px; color:var(--fg-muted); font-weight:600; }
.checkout-seguir:hover{ color:var(--color-primary); }
/* ============ SECCIÓN: SUGERENCIAS PARA TI (vive dentro de .cart-unidad, sin cierre propio) ============ */
.sug-seccion{
width:300px; max-width:80vw;
background:#fff;
padding:24px;
overflow-y:auto;
border-right:1px solid var(--border);
display:none; /* se muestra solo cuando hay sugerencias que pintar, vía JS */
flex-direction:column;
}
.sug-seccion.visible{ display:flex; }
.sug-panel-head{ margin-bottom:18px; }
.sug-panel-head h4{ font-size:16px; }
.sug-grid{ display:flex; flex-direction:column; gap:18px; }
.sug-card{ text-align:left; }
.sug-card img{
width:100%; aspect-ratio:1/1; object-fit:cover;
border-radius:var(--radius-sm); margin-bottom:10px;
background:var(--bg-muted);
}
.sug-card-nombre{ font-size:13px; font-weight:600; color:var(--fg); line-height:1.3; display:block; margin-bottom:6px; }
.sug-card-precio{ font-size:14px; font-weight:700; color:var(--color-primary); display:block; margin-bottom:10px; }
/* En pantallas angostas no hay espacio para mostrar carrito + sugerencias lado a lado */
@media (max-width: 900px){
.sug-seccion{ display:none !important; }
.cart-seccion{ width:100vw; }
}
/* ============ PÁGINA LEGAL (terminos.php) ============
Placeholder temporal: TODO el footer apunta aquí hasta que Senseben
entregue el texto legal definitivo revisado. */
.legal-titulo{ font-size:32px; margin-bottom:18px; }
.legal-aviso{
background:var(--color-rose-soft);
border:1px solid #EFC9BF;
border-radius:var(--radius-sm);
padding:14px 18px;
font-size:13.5px; color:var(--color-plum);
margin-bottom:36px;
max-width:720px;
}
.legal-layout{
display:grid;
grid-template-columns:220px 1fr;
gap:40px;
align-items:start;
}
.legal-index{
display:flex; flex-direction:column; gap:12px;
position:sticky; top:100px;
}
.legal-index-titulo{
font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
color:var(--fg-muted); margin-bottom:4px;
}
.legal-index a{
font-size:13.5px; color:var(--fg-muted);
padding-bottom:2px; border-bottom:1px solid transparent;
transition:color .2s, border-color .2s;
}
.legal-index a:hover{ color:var(--color-primary); border-color:var(--color-primary); }
.legal-contenido{ max-width:720px; }
.legal-seccion{
padding-bottom:32px; margin-bottom:32px;
border-bottom:1px solid var(--border);
}
.legal-seccion:last-child{ border-bottom:none; margin-bottom:0; }
.legal-seccion h2{ font-size:21px; margin-bottom:14px; }
.legal-seccion p{
font-size:14.5px; line-height:1.75; color:var(--fg-muted);
margin-bottom:12px;
}
.legal-seccion p:last-child{ margin-bottom:0; }
@media (max-width:900px){
.legal-layout{ grid-template-columns:1fr; }
.legal-index{ position:static; flex-direction:row; flex-wrap:wrap; gap:14px 20px; }
}
/* ============ AUTENTICACIÓN (login / registro / cuenta) ============ */
.auth-wrap{
display:flex; justify-content:center;
padding:48px 24px 64px;
}
.auth-card{
width:100%; max-width:440px;
background:#fff;
border-radius:var(--radius-md);
box-shadow:var(--shadow-card);
padding:36px;
}
.auth-title{ font-size:26px; margin-bottom:6px; }
.auth-subtexto{ font-size:13.5px; color:var(--fg-muted); margin-bottom:24px; }
.auth-error{
background:#FDECEA; border:1px solid #F5A9A0;
color:#B3261E; font-size:13px;
padding:12px 14px; border-radius:var(--radius-sm);
margin-bottom:18px;
}
.auth-switch{
text-align:center; font-size:13.5px; color:var(--fg-muted);
margin-top:20px;
}
.auth-switch a{ color:var(--color-primary); font-weight:600; }
.cuenta-datos{
display:flex; flex-direction:column; gap:14px;
margin:20px 0 24px;
}
.cuenta-dato{
display:flex; justify-content:space-between; align-items:center;
padding-bottom:14px; border-bottom:1px solid var(--border);
font-size:13.5px;
}
.cuenta-dato span{ color:var(--fg-muted); }
.cuenta-dato strong{ color:var(--fg); font-weight:600; }
.cuenta-proximamente{
background:var(--bg-muted);
border-radius:var(--radius-sm);
padding:14px 16px;
font-size:13px; color:var(--fg-muted);
margin-bottom:8px;
}
.cuenta-accesos{
display:flex; flex-direction:column; gap:12px;
margin-bottom:20px;
}
.cuenta-acceso-card{
display:flex; align-items:center; gap:14px;
padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm);
transition:border-color .2s, background .2s;
}
a.cuenta-acceso-card:hover{ border-color:var(--color-primary); background:var(--color-rose-soft); }
.cuenta-acceso-card.deshabilitado{ opacity:0.55; cursor:not-allowed; }
.cuenta-acceso-icono{
width:40px; height:40px; border-radius:50%; flex-shrink:0;
background:var(--bg-muted);
display:flex; align-items:center; justify-content:center;
color:var(--color-primary);
}
.cuenta-acceso-texto{ display:flex; flex-direction:column; flex:1; }
.cuenta-acceso-texto strong{ font-size:14px; color:var(--fg); }
.cuenta-acceso-texto span{ font-size:12.5px; color:var(--fg-muted); }
.cuenta-acceso-flecha{ color:var(--fg-muted); font-size:16px; }
/* ============ MEGA MENÚ (categorías del nav) ============
Full-width: el panel cuelga de .site-header (position:sticky, que
actúa como contenedor posicionado), NO de .nav-item-mega — por eso
.nav-item-mega va en position:static. Si alguna vez el panel se ve
angosto pegado al link, es porque algo le devolvió position:relative
a .nav-item-mega y volvió a robarle el containing block a .site-header.
Una tarjeta por cada atributo de obtenerFiltrosDisponibles() (Línea,
Beneficio, Tipo de piel...); sus valores se revelan al hacer hover. */
.nav-item-mega{ position:static; }
.mega-menu{
position:absolute; top:100%; left:0; right:0; width:100%;
background:#fff;
border-top:1px solid var(--border);
box-shadow:0 30px 60px -18px rgba(74,42,58,0.22);
opacity:0; visibility:hidden;
transform:translateY(-8px);
transition:opacity .22s ease, transform .22s ease, visibility .22s;
z-index:70;
}
.nav-item-mega:hover .mega-menu{
opacity:1; visibility:visible;
transform:translateY(0);
}
/* Subrayado bajo el nombre de categoría mientras el mega menú está abierto */
.nav-item-mega > a{ position:relative; }
.nav-item-mega > a::after{
content:'';
position:absolute; left:16px; right:16px; bottom:6px;
height:2px; background:var(--color-primary);
transform:scaleX(0); transform-origin:center;
transition:transform .2s ease;
}
.nav-item-mega:hover > a::after{ transform:scaleX(1); }
.mega-menu-inner{
max-width:1240px;
margin:0 auto;
padding:32px 24px 0;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:20px;
}
.mega-card{
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
height:320px;
background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 68%);
}
.mega-card:nth-child(3n+2){ background:linear-gradient(155deg, var(--color-primary-dark), var(--color-plum) 72%); }
.mega-card:nth-child(3n){ background:linear-gradient(155deg, var(--color-primary), var(--color-rose) 78%); }
.mega-card::before{
content:'';
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);
opacity:.6;
pointer-events:none;
}
.mega-card-head{
position:absolute; left:0; right:0; top:0;
padding:20px;
z-index:2;
}
.mega-card-eyebrow{
font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
color:rgba(255,255,255,.75);
}
.mega-card h5{
font-family:var(--font-display); font-style:italic; font-weight:600;
font-size:22px; color:#fff; margin-top:4px; text-transform:none; letter-spacing:normal;
}
.mega-card-sub{
position:absolute; left:0; right:0; bottom:0;
background:rgba(36,27,33,.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:16px 20px 18px;
max-height:82%;
overflow-y:auto;
transform:translateY(68%);
transition:transform .35s cubic-bezier(.4,0,.2,1);
z-index:2;
}
.mega-card:hover .mega-card-sub{ transform:translateY(0); }
.mega-card-indicador{
display:block;
width:34px; height:3px; background:rgba(255,255,255,.5); border-radius:3px;
margin:0 auto 12px;
}
.mega-card-sub ul{ display:flex; flex-direction:column; gap:9px; }
.mega-card-sub a{
font-size:13px; color:#fff; opacity:.92;
display:block;
transition:color .15s, opacity .15s;
}
.mega-card-sub a:hover{ color:var(--color-rose-soft); opacity:1; }
.mega-menu-foot{
max-width:1240px;
margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
gap:16px; flex-wrap:wrap;
padding:16px 24px 22px;
}
.mega-menu-foot span{ font-size:12.5px; color:var(--fg-muted); }
.mega-menu-foot a{ font-size:13px; font-weight:600; color:var(--color-primary); }
.mega-menu-foot a:hover{ color:var(--color-primary-dark); }
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
.plp-layout{ grid-template-columns:1fr; }
.plp-sidebar{ order:2; }
.plp-resultados{ order:1; }
.plp-grid{ grid-template-columns:repeat(3,1fr); }
.category-grid{ grid-template-columns:repeat(3,1fr); }
.product-grid{ grid-template-columns:repeat(3,1fr); }
.promo-grid{ grid-template-columns:1fr; }
.footer-grid{ grid-template-columns:1fr 1fr; }
.pdp-layout{ grid-template-columns:80px 1fr; }
.pdp-info{ grid-column:1 / -1; margin-top:20px; }
.checkout-body{ grid-template-columns:1fr; }
.checkout-sidebar{ position:static; }
}
@media (max-width: 768px){
.search-bar{ display:none; }
.categories-nav{ display:none; }
.menu-toggle{ display:flex; }
.hero{ height:auto; max-height:none; }
.hero-slide{ position:relative; grid-template-columns:1fr; text-align:center; padding:40px 24px 100px; opacity:1; visibility:visible; display:none; }
.hero-slide.activa{ display:grid; }
.hero-foto{ display:none; }
.hero-copy{ padding-left:0; opacity:1; transform:none; }
.hero-copy p{ margin-inline:auto; }
.hero-copy h1{ font-size:30px; }
.hero-meta{ justify-content:center; }
.hero-contador{ top:16px; right:24px; }
.hero-dock{ left:50%; transform:translateX(-50%); bottom:16px; }
.category-grid{ grid-template-columns:repeat(2,1fr); }
.product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.plp-grid{ grid-template-columns:repeat(2,1fr); }
.benefits-grid{ grid-template-columns:1fr 1fr; }
.footer-grid{ grid-template-columns:1fr; }
.pdp-layout{ grid-template-columns:1fr; }
.pdp-thumbs{ flex-direction:row; overflow-x:auto; order:2; }
.pdp-thumb{ width:64px; height:64px; flex-shrink:0; }
.pdp-main-image{ order:1; }
.pdp-info{ order:3; }
.checkout-main{ padding:20px; }
.ck-row{ flex-direction:column; gap:0; }
.checkout-stepper{ max-width:280px; }
}