/* ==========================================================================
   VendoLanas.cl · Hoja de estilos compartida (index + páginas de producto)
   ========================================================================== */

/* ---------- Variables y reset ---------- */
:root {
    --rosa-suave: #f4c2c2;
    --rosa-medio: #e8a0bf;
    --rosa-fuerte: #d17ba0;   /* solo decorativo (bordes, fondos) */
    --rosa-btn: #a94773;      /* botones y enlaces: contraste 5,5:1 sobre blanco */
    --rosa-oscuro: #8f3a63;   /* títulos y acentos de texto */
    --crema: #faf3e8;
    --crema-oscuro: #f0e4d0;
    --blanco: #ffffff;
    --texto-oscuro: #4a3b3f;
    --texto-medio: #5f4a4f;
    --sombra: rgba(184, 92, 133, 0.15);
    --wsp: #0e7a3f;
    --wsp-hover: #0a6434;
    --fuente-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --fuente-texto: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --radio: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fuente-texto);
    color: var(--texto-oscuro);
    background-color: var(--crema);
    line-height: 1.65;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--rosa-oscuro); line-height: 1.2; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 3000;
    background: var(--texto-oscuro); color: var(--blanco);
    padding: 10px 18px; border-radius: 0 0 12px 12px; font-weight: 600;
}
.skip-link:focus { top: 0; }

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

.icono { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; }

/* ---------- Títulos de sección ---------- */
.seccion-titulo { text-align: center; margin-bottom: 50px; }
.seccion-titulo h2 { font-size: 2.4rem; margin-bottom: 18px; position: relative; display: inline-block; }
.seccion-titulo h2::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 3px; background: var(--rosa-medio); border-radius: 2px;
}
.seccion-titulo p { color: var(--texto-medio); max-width: 620px; margin: 0 auto; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 34px; background: var(--rosa-btn); color: var(--blanco);
    border-radius: 50px; font-weight: 600; font-size: 1rem;
    border: 2px solid var(--rosa-btn); cursor: pointer; text-align: center;
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.btn:hover { background: var(--rosa-oscuro); border-color: var(--rosa-oscuro); transform: translateY(-2px); box-shadow: 0 8px 20px var(--sombra); }
.btn-outline { background: transparent; color: var(--rosa-btn); }
.btn-outline:hover { background: var(--rosa-btn); border-color: var(--rosa-btn); color: var(--blanco); }
.btn-wsp { background: var(--wsp); border-color: var(--wsp); }
.btn-wsp:hover { background: var(--wsp-hover); border-color: var(--wsp-hover); }
.btn-sm { padding: 10px 20px; font-size: .92rem; }
.btn-block { width: 100%; }

/* ---------- Barra superior y cabecera ---------- */
.topbar { background: var(--rosa-oscuro); color: var(--blanco); font-size: .85rem; padding: 8px 20px; text-align: center; }
.site-header { background: var(--blanco); box-shadow: 0 2px 15px var(--sombra); position: sticky; top: 0; z-index: 1000; }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fuente-titulo); font-size: 1.7rem; font-weight: 700; color: var(--rosa-btn); }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
.logo .resalte { color: var(--rosa-oscuro); }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-weight: 500; color: var(--texto-oscuro); position: relative; padding: 6px 0; transition: color .25s; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--rosa-btn); transition: width .25s; }
.nav-links a:hover { color: var(--rosa-btn); }
.nav-links a:hover::after { width: 100%; }
.nav-acciones { display: flex; align-items: center; gap: 14px; }
.menu-toggle {
    display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
    align-items: center; justify-content: center; border-radius: 10px; color: var(--rosa-oscuro);
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block; width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background .25s;
}
.menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, var(--crema) 0%, var(--rosa-suave) 100%); padding: 70px 0; overflow: hidden; }
.hero-contenido { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 50px; }
.pre-titulo { color: var(--rosa-oscuro); font-weight: 600; font-size: .95rem; letter-spacing: .3px; }
.hero-texto h1 { font-size: 3rem; margin: 12px 0 20px; }
.hero-texto > p { font-size: 1.1rem; color: var(--texto-medio); margin-bottom: 30px; max-width: 520px; }
.hero-botones { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-datos { display: flex; gap: 34px; margin-top: 38px; flex-wrap: wrap; }
.hero-datos strong { display: block; font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--rosa-oscuro); line-height: 1.2; }
.hero-datos span { font-size: .9rem; color: var(--texto-medio); }
.hero-collage { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 1 / 1; max-width: 540px; margin-left: auto; width: 100%; }
.hero-collage a { background: var(--blanco); border-radius: 26px; box-shadow: 0 16px 40px var(--sombra); overflow: hidden; display: block; }
.hero-collage a:first-child { grid-row: 1 / span 2; }
.hero-collage img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.hero-collage a:hover img { transform: scale(1.04); }

/* ---------- Beneficios ---------- */
.beneficios { padding: 56px 0; background: var(--blanco); }
.beneficios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.beneficio-card { text-align: center; padding: 26px 18px; border-radius: var(--radio); transition: background .25s; }
.beneficio-card:hover { background: var(--crema); }
.beneficio-icono { font-size: 2.3rem; margin-bottom: 12px; line-height: 1; }
.beneficio-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.beneficio-card p { color: var(--texto-medio); font-size: .92rem; }

/* ---------- Categorías ---------- */
.categorias { padding: 80px 0; background: var(--crema); }
.categorias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.categoria-card { background: var(--blanco); border-radius: var(--radio); overflow: hidden; display: block; box-shadow: 0 8px 24px var(--sombra); transition: transform .3s, box-shadow .3s; }
.categoria-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px var(--sombra); }
.categoria-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--blanco); }
.categoria-texto { padding: 6px 22px 24px; }
.categoria-texto h3 { font-size: 1.25rem; margin-bottom: 6px; }
.categoria-texto p { color: var(--texto-medio); font-size: .93rem; margin-bottom: 10px; }
.categoria-texto .desde { font-weight: 600; color: var(--rosa-btn); }

/* ---------- Productos (tarjetas) ---------- */
.productos { padding: 80px 0; background: var(--blanco); }
.filtros { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.filtro-btn { padding: 10px 24px; border: 2px solid var(--rosa-medio); background: transparent; border-radius: 30px; color: var(--rosa-oscuro); font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.filtro-btn[aria-pressed="true"], .filtro-btn:hover { background: var(--rosa-btn); color: var(--blanco); border-color: var(--rosa-btn); }
.productos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.productos-grid.cuatro { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.producto-card { background: var(--crema); border: 1px solid var(--crema-oscuro); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.producto-card:hover { box-shadow: 0 15px 35px var(--sombra); transform: translateY(-5px); }
.producto-imagen { background: var(--blanco); display: block; }
.producto-imagen img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .4s; }
.producto-card:hover .producto-imagen img { transform: scale(1.04); }
.producto-info { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.producto-categoria { font-size: .82rem; color: var(--rosa-oscuro); font-weight: 600; }
.producto-info h3 { font-size: 1.15rem; margin: 6px 0 4px; }
.producto-info h3 a { color: var(--texto-oscuro); }
.producto-info h3 a:hover { color: var(--rosa-btn); }
.producto-marca { font-size: .88rem; color: var(--texto-medio); }
.producto-precio { margin: 12px 0 16px; }
.precio-actual { font-size: 1.45rem; font-weight: 700; color: var(--rosa-oscuro); font-family: var(--fuente-texto); }
.precio-unidad { font-size: .82rem; color: var(--texto-medio); margin-left: 6px; }
.producto-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.producto-acciones .btn { padding: 10px 12px; font-size: .9rem; }
.filtro-estado { text-align: center; color: var(--texto-medio); font-size: .9rem; margin-bottom: 24px; }


.ideas { padding: 80px 0; background: var(--crema); }
.ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.idea-card { background: var(--blanco); padding: 34px 30px; border-radius: var(--radio); box-shadow: 0 10px 30px var(--sombra); }
.idea-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.idea-card p { color: var(--texto-medio); margin-bottom: 18px; }
.idea-card ul li { margin-bottom: 8px; }
.idea-card ul a { color: var(--rosa-btn); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.idea-card ul a:hover { color: var(--rosa-oscuro); }

/* ---------- Nosotros ---------- */
.nosotros { padding: 80px 0 100px; background: var(--rosa-suave); }
.nosotros-contenido { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.nosotros-imagenes { position: relative; padding-bottom: 50px; }
.nosotros-imagenes img { border-radius: var(--radio); background: var(--blanco); box-shadow: 0 20px 40px var(--sombra); }
.img-principal { width: 78%; }
.img-secundaria { width: 52%; position: absolute; bottom: 0; right: 0; border: 6px solid var(--blanco); }
.nosotros-texto h2 { font-size: 2.3rem; margin: 10px 0 20px; }
.nosotros-texto p { color: var(--texto-oscuro); margin-bottom: 18px; }
.lista-check { margin: 24px 0; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-weight: 500; }
.lista-check li::before {
    content: '✓'; background: var(--rosa-btn); color: var(--blanco); width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; margin-top: 2px;
}

/* ---------- Redes sociales ---------- */
.redes-banda { padding: 64px 0; background: linear-gradient(135deg, var(--rosa-btn), var(--rosa-oscuro)); text-align: center; }
.redes-banda h2 { color: var(--blanco); font-size: 2rem; margin-bottom: 12px; }
.redes-banda p { color: var(--crema); margin: 0 auto 28px; max-width: 560px; }
.redes-botones { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn-social { background: var(--blanco); color: var(--rosa-oscuro); border-color: var(--blanco); }
.btn-social:hover { background: var(--crema); border-color: var(--crema); color: var(--rosa-oscuro); }

/* ---------- FAQ ---------- */
.faq { padding: 80px 0; background: var(--blanco); }
.faq-lista { max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--crema); margin-bottom: 14px; border-radius: 15px; overflow: hidden; }
.faq-item summary { padding: 20px 25px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.6rem; color: var(--rosa-btn); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-respuesta { padding: 0 25px 22px; color: var(--texto-medio); }
.faq-respuesta a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* ---------- Contacto ---------- */
.contacto { padding: 80px 0; background: var(--rosa-suave); }
.contacto-contenido { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contacto-info h2 { font-size: 2.2rem; margin-bottom: 18px; }
.contacto-info > p { color: var(--texto-oscuro); margin-bottom: 26px; }
.contacto-item { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.contacto-icono { width: 44px; height: 44px; background: var(--rosa-btn); color: var(--blanco); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contacto-item a { text-decoration: underline; text-underline-offset: 3px; }
.redes-sociales { display: flex; gap: 12px; margin-top: 26px; }
.redes-sociales a { width: 46px; height: 46px; background: var(--blanco); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rosa-oscuro); transition: background .25s, color .25s, transform .25s; }
.redes-sociales a:hover { background: var(--rosa-btn); color: var(--blanco); transform: translateY(-3px); }
.formulario-contacto { background: var(--blanco); padding: 38px; border-radius: var(--radio); box-shadow: 0 15px 40px var(--sombra); }
.formulario-contacto h3 { font-size: 1.4rem; margin-bottom: 6px; }
.form-ayuda { color: var(--texto-medio); font-size: .9rem; margin-bottom: 22px; }
.campo-form { margin-bottom: 18px; }
.campo-form label { display: block; margin-bottom: 7px; font-weight: 500; font-size: .92rem; }
.campo-form input, .campo-form select, .campo-form textarea { width: 100%; padding: 12px 15px; border: 2px solid var(--crema-oscuro); border-radius: 10px; font-size: .95rem; background: var(--blanco); transition: border-color .25s; }
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus { outline: none; border-color: var(--rosa-btn); box-shadow: 0 0 0 3px rgba(169, 71, 115, .18); }
.campo-form textarea { resize: vertical; min-height: 110px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--texto-oscuro); color: var(--crema); padding-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 2.4fr 1.3fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-logo { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--rosa-suave); margin-bottom: 14px; }
.footer-col p { color: #d8c6ca; font-size: .92rem; margin-bottom: 10px; }
.footer-col h3 { color: var(--blanco); font-family: var(--fuente-titulo); font-size: 1.1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: #d8c6ca; font-size: .92rem; transition: color .25s; }
.footer-col ul a:hover { color: var(--rosa-suave); text-decoration: underline; }
.footer-productos { columns: 2; column-gap: 32px; }
.footer-cat { break-inside: avoid; margin-bottom: 20px; }
.footer-cat h4 { font-family: var(--fuente-texto); font-size: .88rem; font-weight: 600; color: var(--rosa-suave); margin-bottom: 10px; }
.footer-cat ul li { margin-bottom: 7px; }
.footer-redes { display: flex; gap: 12px; margin-top: 16px; }
.footer-redes a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: var(--blanco); transition: background .25s; }
.footer-redes a:hover { background: var(--rosa-btn); }
.footer-bottom { text-align: center; padding: 24px 20px; font-size: .86rem; color: #d8c6ca; }
.footer-bottom a { color: var(--rosa-suave); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- WhatsApp flotante y barra móvil ---------- */
.wsp-flotante {
    position: fixed; bottom: 22px; right: 22px; z-index: 999; width: 60px; height: 60px; border-radius: 50%;
    background: var(--wsp); color: var(--blanco); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transition: transform .25s, background .25s;
}
.wsp-flotante .icono { width: 32px; height: 32px; }
.wsp-flotante:hover { transform: scale(1.08); background: var(--wsp-hover); }
.barra-compra { display: none; }

/* ==========================================================================
   PÁGINA DE PRODUCTO
   ========================================================================== */
.breadcrumb { padding: 22px 0 6px; font-size: .9rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; color: var(--texto-medio); }
.breadcrumb li + li::before { content: '›'; margin: 0 9px; color: var(--rosa-fuerte); font-size: 1.1rem; }
.breadcrumb a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--texto-oscuro); font-weight: 500; }

.ficha { padding: 24px 0 60px; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.ficha-galeria { background: var(--blanco); border-radius: 28px; box-shadow: 0 16px 44px var(--sombra); overflow: hidden; position: sticky; top: 100px; }
.ficha-galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.ficha-info h1 { font-size: 2.5rem; margin: 8px 0 12px; }
.ficha-marca { color: var(--texto-medio); font-size: .95rem; }
.ficha-marca strong { color: var(--texto-oscuro); }
.ficha-resumen { font-size: 1.08rem; margin: 18px 0 22px; color: var(--texto-oscuro); }
.ficha-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.ficha-precio .precio-actual { font-size: 2.4rem; }
.stock-ok { color: var(--wsp); font-weight: 600; font-size: .95rem; }
.ficha-iva { color: var(--texto-medio); font-size: .88rem; margin-bottom: 24px; }
.ficha-cta { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.ficha-cta .btn { padding: 16px 30px; font-size: 1.05rem; }
.ficha-puntos { margin-top: 28px; display: grid; gap: 12px; }
.ficha-puntos li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-oscuro); font-size: .97rem; }
.ficha-puntos li::before {
    content: '✓'; background: var(--rosa-btn); color: var(--blanco); width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; margin-top: 2px;
}

.detalle { padding: 60px 0; background: var(--blanco); }
.detalle-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.detalle h2 { font-size: 1.9rem; margin-bottom: 20px; }
.detalle-texto p { margin-bottom: 18px; max-width: 68ch; }
.specs { background: var(--crema); border-radius: var(--radio); padding: 10px 26px 16px; }
.specs table { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--crema-oscuro); font-size: .95rem; vertical-align: top; }
.specs th { font-weight: 500; color: var(--texto-medio); padding-right: 16px; width: 42%; }
.specs td { font-weight: 600; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs caption { text-align: left; font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--rosa-oscuro); padding: 18px 0 6px; font-weight: 700; }

.pasos { padding: 64px 0; background: linear-gradient(135deg, var(--crema), var(--rosa-suave)); text-align: center; }
.pasos h2 { font-size: 1.9rem; margin-bottom: 30px; }
.pasos-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; counter-reset: paso; text-align: left; }
.pasos-lista li { background: var(--blanco); border-radius: var(--radio); padding: 26px 24px 24px; box-shadow: 0 8px 24px var(--sombra); counter-increment: paso; display: flex; flex-direction: column; gap: 8px; }
.pasos-lista li::before { content: counter(paso); width: 38px; height: 38px; border-radius: 50%; background: var(--rosa-btn); color: var(--blanco); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.pasos-lista strong { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--rosa-oscuro); }
.pasos-lista span { color: var(--texto-medio); font-size: .95rem; }
.usos { padding: 60px 0; background: var(--crema); }
.usos h2 { font-size: 1.9rem; margin-bottom: 24px; }
.usos-lista { display: flex; flex-wrap: wrap; gap: 12px; }
.usos-lista li { background: var(--blanco); padding: 12px 22px; border-radius: 50px; font-weight: 500; box-shadow: 0 4px 14px var(--sombra); display: flex; gap: 10px; align-items: center; }
.usos-lista li::before { content: '🧶'; font-size: 1.05rem; line-height: 1; }

.relacionados { padding: 70px 0; background: var(--blanco); }
.relacionados + .relacionados { padding-top: 0; }
.relacionados h2 { font-size: 1.9rem; margin-bottom: 28px; }

.faq-producto { padding: 60px 0 70px; background: var(--crema); }
.faq-producto h2 { font-size: 1.9rem; margin-bottom: 26px; }
.faq-producto .faq-item { background: var(--blanco); }
.faq-producto .faq-lista { margin: 0; max-width: 860px; }

.cta-final { padding: 60px 0; background: linear-gradient(135deg, var(--rosa-btn), var(--rosa-oscuro)); text-align: center; }
.cta-final h2 { color: var(--blanco); font-size: 2rem; margin-bottom: 12px; }
.cta-final p { color: var(--crema); margin: 0 auto 26px; max-width: 560px; }
.cta-final .btn-wsp { background: var(--blanco); border-color: var(--blanco); color: var(--wsp); }
.cta-final .btn-wsp:hover { background: var(--crema); border-color: var(--crema); color: var(--wsp-hover); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .productos-grid.cuatro { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-col-productos { grid-column: 1 / -1; order: 3; }
    .categorias-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .hero-contenido, .nosotros-contenido, .contacto-contenido, .ficha-grid, .detalle-grid { grid-template-columns: 1fr; }
    .hero-collage { margin: 0 auto; }
    .productos-grid, .productos-grid.cuatro, .ideas-grid { grid-template-columns: repeat(2, 1fr); }
    .pasos-lista { grid-template-columns: 1fr; }
    .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
    .ficha-galeria { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
    .nosotros-imagenes { max-width: 520px; margin: 0 auto; width: 100%; }
}

@media (max-width: 1080px) {
    .menu-toggle { display: inline-flex; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--blanco);
        flex-direction: column; gap: 0; padding: 8px 20px 18px; box-shadow: 0 14px 20px var(--sombra);
    }
    .nav-links.abierto { display: flex; }
    .nav-links a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--crema-oscuro); }
    .nav-links a::after { display: none; }
    .nav-acciones .btn-sm span.txt { display: none; }
    .nav-acciones .btn-sm { padding: 10px 12px; }
}

@media (max-width: 680px) {
    .topbar { font-size: .78rem; }
    .hero { padding: 44px 0; }
    .hero-texto h1 { font-size: 2.1rem; }
    .seccion-titulo h2 { font-size: 1.9rem; }
    .categorias, .productos, .ideas, .nosotros, .faq, .contacto { padding: 56px 0; }
    .productos-grid, .productos-grid.cuatro { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .producto-info { padding: 14px 14px 16px; }
    .producto-info h3 { font-size: 1rem; }
    .precio-actual { font-size: 1.2rem; }
    .precio-unidad { display: none; }
    .producto-acciones { grid-template-columns: 1fr; gap: 8px; }
    .ideas-grid, .footer-grid { grid-template-columns: 1fr; }
    .footer-productos { columns: 1; }
    .pasos { padding: 44px 0; }
    .categorias-grid { grid-template-columns: 1fr; gap: 16px; }
    .categoria-card { display: grid; grid-template-columns: 36% 1fr; align-items: center; }
    .categoria-card img { aspect-ratio: 1 / 1; }
    .categoria-texto { padding: 12px 16px 12px 4px; }
    .categoria-texto h3 { font-size: 1.15rem; }
    .categoria-texto p { font-size: .85rem; margin-bottom: 6px; }
    .beneficios { padding: 36px 0; }
    .beneficios-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .beneficio-card { padding: 14px 8px; }
    .beneficio-card h3 { font-size: 1rem; }
    .beneficio-card p { font-size: .84rem; }
    .formulario-contacto { padding: 26px 20px; }
    .ficha-info h1 { font-size: 1.9rem; }
    .ficha-precio .precio-actual { font-size: 2rem; }
    .detalle, .usos, .relacionados, .faq-producto, .cta-final { padding: 44px 0; }
    .relacionados + .relacionados { padding-top: 0; }
    .logo { font-size: 1.4rem; }
    /* En la ficha de producto, la barra inferior reemplaza al botón flotante */
    .pagina-producto { padding-bottom: 76px; }
    .pagina-producto .wsp-flotante { display: none; }
    .barra-compra {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--blanco);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(74, 59, 63, .18);
    }
    .barra-compra .precio-actual { font-size: 1.35rem; line-height: 1.1; }
    .barra-compra small { display: block; color: var(--texto-medio); font-size: .75rem; }
    .barra-compra .btn { padding: 12px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Grupos de productos (index) ---------- */
.grupo-productos { margin-bottom: 56px; }
.grupo-productos:last-child { margin-bottom: 0; }
.grupo-cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; border-bottom: 2px solid var(--rosa-suave); padding-bottom: 12px; margin-bottom: 26px; }
.grupo-cabecera h3 { font-size: 1.7rem; }
.grupo-cabecera p { color: var(--texto-medio); font-size: .93rem; max-width: 640px; }
.producto-info h4 { font-family: var(--fuente-titulo); font-size: 1.15rem; line-height: 1.25; margin: 6px 0 4px; }
.producto-info h4 a { color: var(--texto-oscuro); }
.producto-info h4 a:hover { color: var(--rosa-btn); }
@media (max-width: 680px) { .producto-info h4 { font-size: 1rem; } .grupo-cabecera h3 { font-size: 1.4rem; } .grupo-productos { margin-bottom: 40px; } }

.topbar a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.stock-no { color: #b3261e; font-weight: 600; font-size: .95rem; }

/* ---------- Página de marca (Reginella) ---------- */
.fondo-crema { background: var(--crema); --alt: var(--blanco); }
.fondo-blanco { background: var(--blanco); --alt: var(--crema); }
.fondo-crema .faq-item { background: var(--blanco); }
.producto-card { position: relative; }
.badge-agotado { position: absolute; top: 12px; left: 12px; z-index: 2; background: #b3261e; color: var(--blanco); font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.ficha-marca a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; }
.comparativa, .guia { padding: 70px 0; }
.tabla-scroll { overflow-x: auto; background: var(--blanco); border-radius: var(--radio); box-shadow: 0 10px 30px var(--sombra); }
.tabla-comp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
.tabla-comp caption { text-align: left; padding: 18px 20px 8px; font-weight: 600; color: var(--texto-medio); font-size: .9rem; }
.tabla-comp th, .tabla-comp td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--crema-oscuro); vertical-align: top; }
.tabla-comp thead th { background: var(--rosa-suave); color: var(--texto-oscuro); font-weight: 600; }
.tabla-comp tbody th { font-weight: 600; }
.tabla-comp tbody th a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; }
.tabla-comp tbody tr:last-child th, .tabla-comp tbody tr:last-child td { border-bottom: 0; }
.estado-ok { color: var(--wsp); font-weight: 600; }
.estado-no { color: #b3261e; font-weight: 600; }
.guia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guia-card { background: var(--alt, var(--crema)); border-radius: var(--radio); padding: 28px 26px; }
.guia-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.guia-card p { color: var(--texto-medio); }
.mas-marcas { padding: 60px 0; }
.mas-marcas h2 { font-size: 1.8rem; margin-bottom: 12px; }
.mas-marcas .container > p { color: var(--texto-medio); margin-bottom: 22px; max-width: 70ch; }
.usos-lista li a { font-weight: 500; }
.usos-lista li a:hover { color: var(--rosa-btn); }
@media (max-width: 992px) { .guia-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .comparativa, .guia, .mas-marcas { padding: 44px 0; } }

.producto-acciones.apiladas { grid-template-columns: 1fr; }

/* ---------- Blog ---------- */
.container-art { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.articulo { background: var(--blanco); padding: 6px 0 56px; }
.articulo-cabecera { padding-top: 30px; }
.articulo-cat { color: var(--rosa-oscuro); font-weight: 600; font-size: .92rem; }
.articulo h1 { font-size: 2.6rem; margin: 8px 0 16px; line-height: 1.15; }
.articulo-lead { font-size: 1.2rem; color: var(--texto-medio); line-height: 1.7; margin-bottom: 16px; }
.articulo-meta { color: var(--texto-medio); font-size: .9rem; margin-bottom: 26px; }
.articulo-hero { margin-bottom: 30px; }
.articulo-hero img { border-radius: 24px; width: 100%; box-shadow: 0 16px 40px var(--sombra); }
.toc { background: var(--crema); border-radius: var(--radio); padding: 22px 28px; margin-bottom: 34px; }
.toc h2 { font-size: 1.15rem; margin-bottom: 10px; }
.toc ol { list-style: decimal; padding-left: 20px; }
.toc li { margin: 6px 0; }
.toc a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; }
.articulo-cuerpo h2 { font-size: 1.85rem; margin: 46px 0 14px; scroll-margin-top: 90px; }
.articulo-cuerpo h3 { font-size: 1.3rem; margin: 26px 0 8px; }
.articulo-cuerpo p { margin-bottom: 18px; line-height: 1.85; font-size: 1.05rem; }
.articulo-cuerpo ul { list-style: disc; margin: 0 0 20px 24px; }
.articulo-cuerpo ol { list-style: decimal; margin: 0 0 20px 24px; }
.articulo-cuerpo li { margin: 8px 0; line-height: 1.75; font-size: 1.05rem; }
.articulo-cuerpo a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.articulo-cuerpo a:hover { color: var(--rosa-oscuro); }
.callout { background: var(--crema); border-left: 5px solid var(--rosa-btn); border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 26px 0; line-height: 1.75; }
.art-tabla { overflow-x: auto; margin: 22px 0 28px; border-radius: 14px; border: 1px solid var(--crema-oscuro); }
.art-tabla table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .96rem; }
.art-tabla caption { text-align: left; padding: 14px 16px 6px; font-weight: 600; color: var(--texto-medio); font-size: .9rem; }
.art-tabla th, .art-tabla td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--crema-oscuro); vertical-align: top; line-height: 1.55; }
.art-tabla thead th { background: var(--rosa-suave); color: var(--texto-oscuro); }
.art-tabla tbody th { font-weight: 600; white-space: nowrap; }
.art-tabla tbody tr:last-child th, .art-tabla tbody tr:last-child td { border-bottom: 0; }
.blog-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.blog-cards.una { grid-template-columns: minmax(0, 560px); }
.blog-card { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: 0 10px 30px var(--sombra); display: flex; flex-direction: column; border: 1px solid var(--crema-oscuro); transition: transform .3s, box-shadow .3s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--sombra); }
.blog-card-img img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-card-texto { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blog-card-cat { color: var(--rosa-oscuro); font-weight: 600; font-size: .85rem; }
.blog-card h3 { font-size: 1.35rem; line-height: 1.25; }
.blog-card h3 a { color: var(--rosa-oscuro); }
.blog-card h3 a:hover { color: var(--rosa-btn); }
.blog-card p { color: var(--texto-medio); font-size: .96rem; }
.blog-card .btn { align-self: flex-start; margin-top: 10px; }
.blog-home, .blog-portada { padding: 80px 0; }
@media (max-width: 820px) { .blog-cards { grid-template-columns: 1fr; } .articulo h1 { font-size: 2rem; } .articulo-cuerpo h2 { font-size: 1.55rem; } .blog-home, .blog-portada { padding: 56px 0; } }

/* ---------- Menú con 8 enlaces: ajuste en pantallas medianas ---------- */
@media (min-width: 1081px) and (max-width: 1279px) { .nav-links { gap: 18px; } .nav-links a { font-size: .92rem; } }

/* ---------- Página de marca Ukryl ---------- */
.lineas { padding: 70px 0; }
.lineas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.linea-card { background: var(--alt, var(--crema)); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--crema-oscuro); }
.linea-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--blanco); }
.linea-card-texto { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.linea-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.linea-card p { color: var(--texto-medio); font-size: .96rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 18px; }
.chip { background: var(--blanco); border: 1px solid var(--crema-oscuro); border-radius: 20px; padding: 4px 12px; font-size: .85rem; font-weight: 500; }
.linea-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.linea-seccion { padding: 70px 0; }
.linea-seccion .seccion-titulo p a { color: var(--rosa-btn); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.linea-seccion .seccion-titulo p { max-width: 720px; }
.linea-pie { text-align: center; margin-top: 34px; }
@media (max-width: 992px) { .lineas-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .lineas, .linea-seccion { padding: 44px 0; } }