/* ============================================================
   style.css — Plantilla Madre
   Los colores y tipografías vienen de :root inyectado por PHP
   (theme_vars() en config.php). NO hardcodear colores aquí:
   usar siempre var(--color-*) y var(--font-*).
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Cintillo superior (ticker) ---------- */
.ticker { background: var(--color-primary); color: #fff; overflow: hidden; white-space: nowrap; }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 22s linear infinite; }
.ticker-group { display: flex; flex-shrink: 0; }
.ticker-item {
    display: inline-flex; align-items: center; padding: .5rem 1.8rem;
    font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,.3);
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    /* Blanco sólido a propósito: el cintillo y los botones ya llevan el color
       principal, así que el header limpio deja que el logo y esos acentos
       destaquen en vez de apilar otra franja de color encima. */
    background: var(--color-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 136px; }
.brand {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.15rem;
    color: var(--color-primary); text-decoration: none;
}
.main-nav { display: flex; gap: 1.4rem; align-items: center; }
.main-nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--color-text); white-space: nowrap; }
.main-nav a:hover { color: var(--color-primary); }
.nav-cta {
    background: var(--color-primary); color: #fff !important;
    padding: .45rem 1rem; border-radius: var(--radius-btn);
}
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 5px 0; transition: .25s; }

/* ---------- Categorías agrupadas en el header ---------- */
.nav-cats { position: relative; }
.nav-cats summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: .3rem;
    font-weight: 500; font-size: .95rem; color: var(--color-text); white-space: nowrap;
}
.nav-cats summary::-webkit-details-marker { display: none; }
.nav-cats summary::after { content: '▾'; font-size: .65em; transition: transform .2s; }
.nav-cats[open] summary::after { transform: rotate(180deg); }
.nav-cats summary:hover { color: var(--color-primary); }
.nav-cats-menu {
    position: absolute; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%);
    background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.14);
    padding: .5rem; display: flex; flex-direction: column; gap: .1rem;
    min-width: 220px; z-index: 60;
}
.nav-cats-menu a {
    padding: .5rem .7rem; border-radius: calc(var(--radius) - 4px); white-space: nowrap;
    text-decoration: none; color: var(--color-text); font-size: .9rem;
}
.nav-cats-menu a:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 86vh; overflow: hidden; background: var(--color-primary); }
/* La foto llena TODO el placeholder (background-size:cover): se recorta
   para no dejar barras vacías. Se ancla arriba (center top) en vez de al
   centro: aunque la foto se suba en 16:9, el hero real en pantalla casi
   nunca calza exacto en esa proporción, así que el recorte vertical
   sobrante siempre se saca de abajo — nunca se pierde el techo/cielo de la
   foto. Por eso las fotos de slides deben traer el sujeto principal
   centrado horizontalmente y en la mitad superior — ver instrucciones en
   admin/slides.php. */
.hero-slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
    display: grid; align-items: center;
    background-color: var(--color-primary); /* respaldo si el slide no tiene foto */
    background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
/* Video de fondo opcional (admin/slides.php, campo "video"). Se posiciona
   absoluto dentro del slide, detrás del overlay — mismo recorte "cover,
   anclado arriba" que la imagen, para que al cargar no haya salto visual
   entre el poster (la imagen) y el primer cuadro del video. */
.hero-slide-video {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--color-primary) 82%, black) 0%,
        color-mix(in srgb, var(--color-primary) 35%, transparent) 70%);
}
.hero-content { position: relative; z-index: 3; padding: 7rem 1.25rem; color: #fff; max-width: 1120px; }
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    line-height: 1.1; margin: 0 0 .8rem; max-width: 16ch;
}
.hero-subtitle { font-size: clamp(1.1rem, 2.4vw, 1.4rem); opacity: .92; max-width: 46ch; margin: 0 0 2rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-dots {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .5rem; z-index: 2;
}
.hero-dot {
    width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.45); transition: .2s;
}
.hero-dot.is-active { background: var(--color-accent); transform: scale(1.25); }

/* ---------- Botones ---------- */
.btn {
    display: inline-block; text-decoration: none; font-weight: 600;
    padding: .7rem 1.4rem; border-radius: var(--radius-btn);
    border: 0; cursor: pointer; font-size: .95rem; font-family: var(--font-body);
    transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
/* BUG de cascada CSS: al traer `display` propio, .btn (y cualquier variante
   que también fije `display`, ej. .products-show-more más abajo) pisa la
   regla nativa del navegador `[hidden]{display:none}` — una regla de autor
   gana sobre la del user-agent sin importar especificidad. Resultado: cualquier
   botón con clase .btn que se oculte por JS (`elemento.hidden = true`) seguía
   viéndose igual (afectó, en el cliente Glowmy, "Avísame cuando vuelva" del
   modal, "Mostrar más productos", "Continuar pedido" del carrito y "Dejar una
   reseña"). Regla única acá (en vez de una por botón) para cubrir cualquier
   .btn futuro que se oculte por JS del mismo modo. */
.btn[hidden] { display: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-accent  { background: var(--color-accent); color: color-mix(in srgb, var(--color-primary) 85%, black); }
.btn-ghost   { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.65); }
.btn-small   { padding: .5rem 1rem; font-size: .85rem; background: var(--color-primary); color: #fff; }
/* Variante para acciones secundarias sobre fondo claro, ej. "Avísame cuando
   vuelva stock" en la tarjeta de producto agotado (va después de .btn-small
   a propósito, para ganar la especificidad y pisar su fondo sólido). */
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* ---------- Franja de credenciales ---------- */
.cred-strip {
    background: var(--color-primary); color: #fff;
    border-top: 3px solid var(--color-accent);
}
.cred-inner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem; padding: 1.4rem 1.25rem; text-align: center;
}
.cred-value {
    display: block; font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700; color: var(--color-accent);
}
.cred-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

/* ---------- Secciones ---------- */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--color-surface); }
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin: 0 0 1rem; color: var(--color-primary);
    text-transform: uppercase; letter-spacing: .04em;
}
.section-intro { color: var(--color-text-soft); max-width: 65ch; margin-bottom: 2rem; }

/* ---------- Servicios destacados ---------- */
.featured-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem; margin-top: 1.5rem;
}
.featured-card {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius); padding: 1.4rem;
}
.featured-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.featured-card p { margin: 0 0 .8rem; font-size: .92rem; color: var(--color-text-soft); }
.link-more { font-size: .88rem; font-weight: 600; text-decoration: none; }

/* ---------- Grilla de servicios ---------- */
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
}
.service-card {
    background: var(--color-bg);
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
}
.service-card img { display: block; width: 100%; height: auto; background: var(--color-surface); }
.service-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.service-body h3 { margin: 0; font-size: 1.05rem; }
.service-body p { margin: 0; font-size: .92rem; color: var(--color-text-soft); }
.service-body .btn-small { margin-top: auto; align-self: flex-start; }
.service-detail summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--color-primary); }
.service-detail p { margin: .5rem 0 0; font-size: .88rem; }

/* ---------- Quién soy ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.about-text .btn { margin-top: 1rem; }
.about-text p { text-align: justify; }
.about-media {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border-radius: var(--radius); padding: 3rem;
}
.about-media-video { position: relative; }
.about-media img { max-width: 65%; height: auto; display: block; }
.about-media video {
    max-width: 65%; max-height: 70vh; height: auto; display: block;
    border-radius: var(--radius);
}
.about-video-sound {
    position: absolute; right: calc(17.5% + .6rem); bottom: .6rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none;
    background: rgba(0,0,0,.55); color: #fff; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
}
.about-video-sound .icon-unmuted { display: none; }
.about-video-sound[aria-pressed="true"] .icon-muted { display: none; }
.about-video-sound[aria-pressed="true"] .icon-unmuted { display: block; }

/* ---------- Galería ---------- */
/* Grilla fija: 2 columnas en celular (2x2 por tanda), 4 por fila en
   escritorio — ver media query más abajo. */
.gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.gallery-item { margin: 0; }
.gallery-item img {
    aspect-ratio: 4/3; object-fit: cover; width: 100%;
    border-radius: var(--radius); transition: transform .25s;
}
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-item figcaption { font-size: .82rem; color: var(--color-text-soft); margin-top: .4rem; }

/* ---------- Galería de videos ---------- */
.video-gallery-item .video-trigger {
    position: relative; display: block; width: 100%; padding: 0; border: 0;
    background: var(--color-surface); border-radius: var(--radius); cursor: pointer;
    aspect-ratio: 4/3; overflow: hidden;
}
.video-gallery-item .video-trigger img {
    aspect-ratio: 4/3; object-fit: cover; width: 100%; height: 100%;
    border-radius: var(--radius); transition: transform .25s;
}
.video-gallery-item .video-trigger:hover img { transform: scale(1.03); }
.video-poster-placeholder {
    display: block; width: 100%; height: 100%;
    background: var(--color-surface, #eee);
}
.video-play-icon {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff;
}
.video-play-icon svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.video-play-icon::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 70%);
}

/* ---------- "Ver más" de galerías (fotos / videos) ---------- */
.paginated-more { text-align: center; margin-top: 1.6rem; }
.paginated-grid .gallery-item.is-paginated-hidden { display: none !important; }

/* ---------- Popup de video ---------- */
.video-modal {
    position: fixed; inset: 0; z-index: 70; display: none;
    place-items: center; background: rgba(10, 14, 16, .92); padding: 1.2rem;
}
.video-modal.is-open { display: grid; }
.video-modal .video-modal-box {
    position: relative; width: min(94vw, 960px);
}
.video-modal video {
    width: 100%; max-height: 82vh; border-radius: var(--radius); display: block; background: #000;
}
.video-modal-caption { color: #fff; text-align: center; margin-top: .8rem; font-size: .9rem; }
.video-modal-close {
    position: absolute; top: -2.6rem; right: 0; background: transparent; border: 0;
    color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}

@media (max-width: 640px) {
    /* En celular: 2 columnas fijas (2x2 por tanda inicial de 4, "Ver más"
       revela de a 4 más). */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}

/* ---------- Valores ---------- */
.values-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.values-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.values-list li {
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    padding: .7rem 1rem; border-radius: 0 var(--radius) var(--radius) 0;
    font-weight: 600;
}

/* ---------- Testimonios ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.testimonial {
    margin: 0; background: var(--color-bg); border-radius: var(--radius);
    padding: 1.4rem; border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.testimonial p { margin: 0 0 .8rem; font-style: italic; }
.testimonial footer { font-size: .85rem; color: var(--color-text-soft); }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-data { list-style: none; padding: 0; display: grid; gap: .5rem; }
.contact-data a { text-decoration: none; font-weight: 600; }
.map-wrap { margin-top: 1.2rem; border-radius: var(--radius); overflow: hidden; }
.map-wrap iframe { width: 100%; height: 260px; border: 0; display: block; }
.contact-form {
    background: var(--color-surface); padding: 1.6rem; border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    display: grid; gap: .35rem; align-self: start;
}
.contact-form label { font-weight: 600; font-size: .88rem; margin-top: .5rem; }
.contact-form input, .contact-form textarea {
    padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .95rem;
    background: var(--color-bg); color: var(--color-text);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-text-soft); opacity: .7; }
.contact-form input:focus, .contact-form textarea:focus {
    outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent;
}
.contact-form .btn { margin-top: 1rem; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.form-ok  { color: #0a7d38; font-weight: 600; }
.form-err { color: #b3261e; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-primary); color: rgba(255,255,255,.85);
    padding: 1.6rem 0; font-size: .88rem; text-align: center;
}

/* ---------- WhatsApp flotante ---------- */
.wa-float {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: transform .15s;
    animation: wa-pulse 2.2s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); animation-play-state: paused; }
/* Halo que "palpita" hacia afuera del botón para llamar la atención sin
   mover el ícono — se repite cada 2.2s. Respeta prefers-reduced-motion. */
.wa-float::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; z-index: -1;
    animation: wa-pulse-ring 2.2s ease-out infinite;
}
@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
    35% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
}
@keyframes wa-pulse-ring {
    0% { transform: scale(1); opacity: .55; }
    70% { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-float, .wa-float::after { animation: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 14, 16, .92);
    display: none; place-items: center; padding: 2rem;
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; border-radius: var(--radius); cursor: zoom-in; }
/* Zoom: un clic sobre la foto ya agrandada la muestra a su tamaño real (o más grande
   si el navegador la infla) y permite recorrerla con scroll/arrastre; otro clic la achica. */
.lightbox.is-zoomed { overflow: auto; align-items: safe center; justify-items: safe center; padding: 1.2rem; cursor: zoom-out; }
.lightbox.is-zoomed figure { margin: auto; }
.lightbox.is-zoomed img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; border-radius: 0; }
.lightbox-caption { color: #fff; text-align: center; margin-top: .8rem; font-size: .9rem; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.2rem;
    background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer;
}

/* ---------- Vista rápida de producto (quick view) ---------- */
/* Modal propio (no reutiliza .lightbox) para no heredar sus reglas de
   fondo/tamaño de foto — acá la foto convive con un panel de detalles.
   Clic en la tarjeta (fuera del botón Agregar) la abre; clic en la foto
   hace zoom con la misma técnica "safe center" que el lightbox de galería
   (centra la foto agrandada pero nunca la deja fuera de alcance del scroll). */
.product-quickview {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 14, 16, .92);
    display: none; place-items: center; padding: 1.2rem; overflow: auto;
}
.product-quickview.is-open { display: grid; }
.quickview-panel {
    position: relative; margin: auto;
    background: var(--color-bg); border-radius: var(--radius);
    width: min(920px, 100%); max-height: 90vh; overflow: auto;
    display: grid; grid-template-columns: 1.1fr 1fr;
}
.quickview-close {
    position: absolute; top: .6rem; right: .8rem; z-index: 1;
    background: none; border: 0; color: var(--color-text); font-size: 2rem;
    line-height: 1; cursor: pointer;
}
.quickview-media {
    position: relative; line-height: 0;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    display: flex; flex-direction: column;
}
.quickview-photo { position: relative; overflow: auto; display: grid; place-items: safe center; }
.quickview-photo img { max-width: 100%; height: auto; display: block; cursor: zoom-in; }
.product-quickview.is-zoomed .quickview-photo img {
    max-width: none; width: 200%; height: auto; cursor: zoom-out;
}
.quickview-badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .4rem; z-index: 1; }
.quickview-badges .product-badge,
.quickview-badges .product-badge-new { position: static; }
/* Miniaturas de fotos adicionales del producto (múltiples fotos, Fase 2) */
.quickview-thumbs {
    display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
    padding: .7rem; line-height: 0;
}
.quickview-thumbs:empty { display: none; }
.quickview-thumb {
    width: 52px; height: 52px; object-fit: cover; border-radius: calc(var(--radius) / 2);
    cursor: pointer; opacity: .65; border: 2px solid transparent; transition: opacity .2s, border-color .2s;
}
.quickview-thumb:hover { opacity: 1; }
.quickview-thumb.is-active { opacity: 1; border-color: var(--color-primary); }
.quickview-details { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.quickview-name { margin: 0; font-size: 1.3rem; }
.quickview-desc { margin: 0; color: var(--color-text-soft); font-size: .95rem; }
.quickview-price .product-price-old { font-size: .95rem; }
.quickview-price .product-price-now { font-size: 1.3rem; }
.quickview-add,
.quickview-notify { margin-top: .6rem; align-self: flex-start; }
@media (max-width: 720px) {
    .quickview-panel { grid-template-columns: 1fr; }
}

/* ---- Reseñas de clientes (promedio en tarjeta + listado y form en quickview) ---- */
.product-rating { margin: .1rem 0; display: flex; gap: .35rem; align-items: baseline; font-size: .85rem; }
.product-rating-stars,
.quickview-rating-stars,
.product-review-stars { color: var(--color-accent); letter-spacing: 1px; }
.product-rating-count,
.quickview-rating .quickview-rating-count { color: var(--color-text-soft); font-size: .8rem; }
.quickview-rating { margin: 0; display: flex; gap: .35rem; align-items: baseline; font-size: .9rem; }
.quickview-reviews { border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); padding-top: .8rem; margin-top: .4rem; }
.quickview-reviews h4 { margin: 0 0 .5rem; font-size: 1rem; }
.quickview-reviews-list { display: flex; flex-direction: column; gap: .7rem; max-height: 220px; overflow-y: auto; }
.quickview-reviews-empty { color: var(--color-text-soft); font-size: .85rem; margin: 0 0 .5rem; }
.product-review { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 12%, transparent); padding-bottom: .6rem; }
.product-review:last-child { border-bottom: 0; padding-bottom: 0; }
.product-review-head { margin: 0 0 .2rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .85rem; }
.product-review-date { color: var(--color-text-soft); font-size: .75rem; }
.product-review-comment { margin: 0; font-size: .9rem; color: var(--color-text-soft); }
.quickview-review-toggle { margin-top: .6rem; }
.quickview-review-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.quickview-review-stars { display: flex; gap: .2rem; font-size: 1.4rem; }
.quickview-review-stars button {
    background: none; border: 0; cursor: pointer; padding: 0; line-height: 1;
    color: color-mix(in srgb, var(--color-text) 25%, transparent);
}
.quickview-review-stars button.is-active { color: var(--color-accent); }
.quickview-review-msg { margin: 0; font-size: .85rem; color: var(--color-text-soft); }

/* ---- Productos relacionados ("también te puede interesar", Fase 2) ---- */
.quickview-related { border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); padding-top: .8rem; margin-top: .4rem; }
.quickview-related[hidden] { display: none; }
.quickview-related h4 { margin: 0 0 .5rem; font-size: 1rem; }
.quickview-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.quickview-related-card {
    display: flex; flex-direction: column; gap: .2rem; text-align: left;
    background: none; border: 0; cursor: pointer; padding: 0; font: inherit; color: inherit;
}
.quickview-related-card img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: calc(var(--radius) / 2);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.quickview-related-name { font-size: .8rem; font-weight: 600; }
.quickview-related-price .product-price-now { font-size: .85rem; }
.quickview-related-price .product-price-old { font-size: .72rem; }

.product-card { cursor: pointer; }
.product-card .btn-add-cart { cursor: pointer; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .about-grid, .values-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .main-nav {
        position: fixed; inset: 136px 0 auto 0;
        background: var(--color-surface);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
        transform: translateY(-130%);
        visibility: hidden; opacity: 0; pointer-events: none;
        transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
    }
    .main-nav.is-open {
        transform: none;
        visibility: visible; opacity: 1; pointer-events: auto;
    }
    .main-nav a { padding: .9rem 1.5rem; }
    .nav-cta { margin: .5rem 1.5rem; text-align: center; }
    .nav-toggle { display: block; }
    /* En el drawer móvil la lista de categorías va anidada e inline, no como
       panel flotante (que solo tiene sentido con el nav horizontal). */
    .nav-cats summary { padding: .9rem 1.5rem; }
    .nav-cats-menu {
        position: static; transform: none; box-shadow: none; border: 0; background: transparent;
        display: flex; flex-direction: column; gap: 0; padding: 0 0 .4rem 1rem; min-width: 0;
    }
    .nav-cats-menu a { padding: .7rem 1.5rem; color: var(--color-text-soft); }
    /* La foto llena todo el placeholder (background-size:cover), así que la
       altura del hero en mobile es una decisión estética, no una corrección
       de recorte: 70vh da un hero grande sin tapar todo el viewport inicial. */
    .hero { min-height: 70vh; }
    .hero-content { padding: 4rem 1.25rem; }
}

/* ---------- Clientes que confían ---------- */
.clients-section { padding: 3rem 0; }
.clients-title {
    font-family: var(--font-body);
    font-size: .85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--color-text-soft); text-align: center; margin: 0 0 1.6rem;
}
.clients-strip {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 2.5rem 3rem;
}
.client-logo img {
    height: 44px; width: auto; max-width: 150px; object-fit: contain;
    filter: grayscale(1); opacity: .6;
    transition: filter .25s, opacity .25s;
}
.client-logo:hover img { filter: none; opacity: 1; }

/* ---------- Footer: redes y crédito ---------- */
.social-links { display: flex; justify-content: center; gap: 1.1rem; margin-bottom: .9rem; }
.social-links a { color: rgba(255,255,255,.75); transition: color .2s; }
.social-links a:hover { color: var(--color-accent); }
.footer-credit { font-size: .78rem; opacity: .75; margin-top: .4rem; }
.footer-credit a { color: var(--color-accent); text-decoration: none; font-weight: 600; }

/* ---------- Logo en header ---------- */
.brand { display: flex; align-items: center; }
.brand-logo { height: 126px; width: auto; max-width: 320px; object-fit: contain; }

/* ---------- FAQ ---------- */
.faq-container { max-width: 760px; }
.faq-list { display: grid; gap: .7rem; margin-top: 1.5rem; }
.faq-item {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius); padding: 0;
}
.faq-item summary {
    cursor: pointer; font-weight: 600; padding: 1rem 1.2rem;
    list-style: none; position: relative; padding-right: 2.6rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 1.2rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem; color: var(--color-accent); font-weight: 700;
    transition: transform .2s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 1.2rem 1rem; color: var(--color-text-soft); }
.faq-answer p { margin: 0 0 .6rem; }

/* ---------- Vitrina de productos ---------- */
.products-iva-note { color: var(--color-text-soft); font-size: .85rem; margin: -.6rem 0 1.6rem; }
/* Título de "Productos destacados": centrado porque es lo primero que se ve
   al entrar a la sección (landing de la vitrina), a diferencia de los demás
   section-title del sitio que quedan alineados a la izquierda. */
.products-featured-title-main { text-align: center; }
.products-iva-note-center { text-align: center; }
.products-featured-title { font-size: 1.1rem; color: var(--color-primary); margin: 0 0 1rem; }
.products-featured-grid { margin-bottom: 2.5rem; }
/* Selector de categorías: pastillas con indicador deslizante (estilo segmented
   control) sobre una franja con scroll horizontal — pensado para muchas
   categorías sin que ocupen media pantalla como el acordeón anterior. */
.products-filters-wrap {
    position: relative; margin-bottom: 1.2rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* Grilla de 2 filas fijas: se llena por columnas (arriba→abajo, luego la
   siguiente columna a la derecha) para que nunca crezca a más de 2 filas de
   alto, ni en mobile — si no caben todas las pestañas, la franja scrollea
   horizontal en vez de agregar una tercera fila. */
.products-filters {
    position: relative; padding: .35rem;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 18px; overflow-x: auto; overflow-y: hidden;
    display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: max-content; gap: .35rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.products-filters::-webkit-scrollbar { display: none; }
.products-filters-indicator {
    position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: transform .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1),
        height .35s cubic-bezier(.65,0,.35,1), opacity .25s;
    z-index: 0;
}
.products-filters-indicator.is-visible { opacity: 1; }
.products-filter {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: .4rem;
    border: none; background: transparent; color: var(--color-text);
    padding: .55rem 1.15rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: color .25s;
}
.products-filter img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.products-filter.is-active { color: #fff; }
.products-filter-offer { color: var(--color-accent); }
.products-filter-offer.is-active { color: #fff; }
/* Buscador + orden del catálogo (ver cart.js): mismo estilo de campo que el
   formulario de contacto para que se sienta parte del mismo sitio. */
.products-toolbar {
    display: flex; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.products-search, .products-sort {
    padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .92rem;
    background: var(--color-bg); color: var(--color-text);
}
.products-search { flex: 1 1 240px; min-width: 0; }
.products-sort { flex: 0 1 220px; cursor: pointer; }
.products-search:focus, .products-sort:focus {
    outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent;
}
.products-grid-hint {
    text-align: center; color: var(--color-text-soft); font-size: .92rem;
    padding: 2rem 0; margin: 0 0 1.2rem;
}
.products-grid.is-collapsed { display: none; }
.products-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem;
}
.product-card {
    background: var(--color-bg);
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
}
/* Caja de imagen de tarjeta con proporción fija (600x376, igual que el preset
   'card' de subida) para que todas las tarjetas de la vitrina queden del mismo
   alto sin importar la proporción real de cada foto — la imagen se centra
   dentro con object-fit:contain, así nunca se recorta ni se deforma. */
.product-media {
    position: relative; line-height: 0; aspect-ratio: 600 / 376;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-badge {
    position: absolute; top: .6rem; left: .6rem;
    background: var(--color-accent); color: color-mix(in srgb, var(--color-primary) 85%, black);
    font-size: .78rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px;
}
.product-overlay {
    position: absolute; inset: 0; background: rgba(20, 20, 20, .55); color: #fff;
    display: grid; place-items: center; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.product-badge-new {
    position: absolute; top: .6rem; right: .6rem; left: auto;
    background: var(--color-primary); color: #fff;
}
.product-card.is-sold-out .product-media img { filter: grayscale(.6); opacity: .7; }
.product-body { padding: 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.product-body h3 { margin: 0; font-size: 1rem; }
.product-body p { margin: 0; font-size: .85rem; color: var(--color-text-soft); }
.product-price { margin: .2rem 0; display: flex; gap: .5rem; align-items: baseline; }
.product-price-old { text-decoration: line-through; color: var(--color-text-soft); font-size: .85rem; }
.product-price-now { font-weight: 700; color: var(--color-primary); font-size: 1.05rem; }
.product-stock-note { color: #b3261e; font-weight: 600; font-size: .8rem; }
.product-variants { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0; }
.product-variant-btn {
    min-width: 2.4rem; padding: .3rem .6rem; border: 1px solid var(--color-border, #ccc);
    border-radius: 6px; background: #fff; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.product-variant-btn:hover:not(.is-disabled) { border-color: var(--color-primary); }
.product-variant-btn.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.product-variant-btn.is-disabled, .product-variant-btn:disabled {
    opacity: .4; text-decoration: line-through; cursor: not-allowed;
}
.btn-add-cart { margin-top: auto; align-self: flex-start; }
.btn-add-cart:disabled { opacity: .5; cursor: not-allowed; }
.products-show-more { display: block; width: fit-content; margin: 1.6rem auto 0; }
@media (max-width: 640px) {
    /* En móvil la grilla siempre va de a 2 columnas (2x2 = 4 tarjetas por
       tanda) en vez del auto-fill que en pantallas angostas colapsa a 1 sola
       columna. La paginación "Mostrar más" (ver cart.js) oculta el resto con
       esta clase hasta que el visitante pide ver más. */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .products-grid .product-card.is-paginated-hidden { display: none !important; }
    .product-body { padding: .7rem; gap: .3rem; }
    .product-body h3 { font-size: .88rem; }
}

/* ---------- Carrito flotante ---------- */
.cart-float { position: fixed; right: 1.2rem; bottom: 5.4rem; z-index: 61; }
.cart-btn {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-primary); color: #fff; border: 0; font-size: 1.4rem;
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s;
}
.cart-btn:hover { transform: scale(1.08); }
/* El carrito flotante (.cart-float) solo se muestra cuando hay productos
   agregados (ver cart.js: cartFloat.hidden = cart.length === 0), así que
   mientras esté visible SIEMPRE hay algo pendiente de compra: el anillo
   "palpitando" corre sin parar para que no se pierda de vista. Va en un
   ::before aparte (no anima transform del botón) para no pelear con el
   scale del :hover de arriba. */
.cart-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent);
    animation: cart-pulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes cart-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
    70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--color-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
.cart-count {
    position: absolute; top: -4px; right: -4px;
    background: var(--color-accent); color: color-mix(in srgb, var(--color-primary) 85%, black);
    font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 4px;
}
.cart-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 100vw);
    background: var(--color-surface); box-shadow: -8px 0 32px rgba(0,0,0,.18);
    z-index: 70; padding: 1.2rem; display: flex; flex-direction: column; overflow-y: auto;
}
/* El atributo [hidden] tiene la misma especificidad que .cart-panel: sin esta
   regla, "display:flex" de arriba gana y el panel queda visible siempre
   aunque tenga el atributo hidden (bloqueando clics del contenido de abajo). */
.cart-panel[hidden] { display: none; }
.cart-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cart-panel-header h3 { margin: 0; }
.cart-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--color-text); }
.cart-items { display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.cart-item { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); padding-bottom: .6rem; }
.cart-item-name { font-weight: 600; font-size: .92rem; }
.cart-item-controls { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .85rem; }
.cart-qty-btn {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    background: var(--color-bg); cursor: pointer; font-size: 1rem; line-height: 1;
}
.cart-item-subtotal { margin-left: auto; font-weight: 600; }
.cart-item-remove { background: none; border: 0; color: #b3261e; font-size: 1.2rem; cursor: pointer; }
.cart-item-pct {
    background: var(--color-accent); color: color-mix(in srgb, var(--color-primary) 85%, black);
    font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; margin-left: .3rem;
}
.cart-item-next-tier { margin: .3rem 0 0; font-size: .78rem; color: var(--color-text-soft); }
.cart-savings, .cart-shipping-msg {
    font-size: .82rem; font-weight: 600; text-align: center; margin: .4rem 0 0;
    color: var(--color-primary);
}
.cart-shipping-bar {
    width: 100%; height: .45rem; margin: .5rem 0 0; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.cart-shipping-bar-fill {
    height: 100%; width: 0%; border-radius: inherit; background: var(--color-accent);
    transition: width .3s ease;
}
.cart-shipping-bar.is-complete .cart-shipping-bar-fill { background: var(--color-primary); }
.cart-coupon { margin-top: .8rem; }
.cart-coupon input {
    width: 100%; padding: .6rem .7rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .9rem; background: var(--color-bg);
}
.cart-total { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.05rem; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.cart-checkout-form label { display: block; font-weight: 600; font-size: .85rem; margin: .6rem 0 .2rem; }
.cart-checkout-form input {
    width: 100%; padding: .6rem .7rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .95rem;
    background: var(--color-bg); color: var(--color-text);
}
.cart-checkout-form input::placeholder { color: var(--color-text-soft); opacity: .7; }
.cart-checkout-form .btn { width: 100%; margin-top: 1rem; }
.cart-msg { font-size: .85rem; color: var(--color-text-soft); text-align: center; }
@media (max-width: 480px) {
    .cart-panel { width: 100vw; }
    .cart-float { bottom: 5rem; }
}

/* ---------- Citas ---------- */
.appt-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 760px; }
.appt-picker label, .appt-form label { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 .4rem; }
.appt-picker input[type=date] {
    width: 100%; padding: .6rem .7rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .95rem;
    background: var(--color-surface); color: var(--color-text);
}
.appt-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.appt-slot-btn {
    padding: .5rem .9rem; border-radius: calc(var(--radius) - 3px);
    border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    background: var(--color-surface); cursor: pointer; font-size: .9rem;
}
.appt-slot-btn:hover { border-color: var(--color-primary); }
.appt-slot-btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.appt-slots-msg { color: var(--color-text-soft); font-size: .85rem; margin-top: .8rem; }
.appt-form { border-left: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); padding-left: 2rem; }
.appt-form input, .appt-form select {
    width: 100%; padding: .6rem .7rem; margin-bottom: .8rem; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: .95rem;
    background: var(--color-surface); color: var(--color-text);
}
.appt-form input::placeholder { color: var(--color-text-soft); opacity: .7; }
.appt-form .btn { width: 100%; }
.appt-msg { font-size: .85rem; color: var(--color-text-soft); margin-top: .8rem; }
@media (max-width: 700px) {
    .appt-wrap { grid-template-columns: 1fr; }
    .appt-form { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); padding-top: 1.5rem; margin-top: .5rem; }
}

/* ---------- Retorno de pago Flow ---------- */
.flow-return-page {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.2rem;
    background: var(--color-bg); font-family: var(--font-body);
}
.flow-return-card {
    background: var(--color-surface); border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(0,0,0,.12); padding: 2.2rem; max-width: 420px; width: 100%;
    text-align: center; border-top: 6px solid var(--color-primary);
}
.flow-return-card h1 { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.5rem; }
.flow-return-card p { margin: 0 0 .8rem; color: var(--color-text-soft); }
.flow-return-paid { border-top-color: #2e7d32; }
.flow-return-paid h1 { color: #2e7d32; }
.flow-return-rejected { border-top-color: #b3261e; }
.flow-return-rejected h1 { color: #b3261e; }
.flow-return-cancelled { border-top-color: #b3261e; }
.flow-return-cancelled h1 { color: #b3261e; }
.flow-return-pending { border-top-color: var(--color-accent); }
.flow-return-order { font-weight: 600; color: var(--color-text); }
.flow-return-actions { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
.flow-return-actions .btn { width: 100%; }

/* ---------- Newsletter ---------- */
/* Franja promocional en el color principal (como la de "clo"): contrasta con
   las secciones blancas/bg de alrededor y destaca la invitación a suscribirse. */
.newsletter-section { background: var(--color-primary); color: #fff; }
.newsletter-inner { max-width: 620px; text-align: center; }
.newsletter-title {
    font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    margin: 0 0 .6rem; color: #fff;
}
.newsletter-subtitle { margin: 0 0 1.4rem; color: rgba(255,255,255,.85); }
.newsletter-form { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.newsletter-form-row {
    display: flex; width: 100%; max-width: 440px; gap: .6rem; flex-wrap: wrap; justify-content: center;
}
.newsletter-form-row input[type=email] {
    flex: 1 1 240px; padding: .75rem 1rem; border: 0; border-radius: var(--radius-btn);
    font-family: inherit; font-size: .95rem; background: #fff; color: #1a1a1a;
}
.newsletter-form-row input[type=email]::placeholder { color: #6b6b6b; }
.newsletter-form-row input[type=email]:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.newsletter-form-row .btn { flex: 0 0 auto; }
.newsletter-note { margin: .8rem 0 0; font-size: .8rem; color: rgba(255,255,255,.7); }
.newsletter-form .form-ok, .newsletter-form .form-err { margin: .4rem 0 0; }
.newsletter-form .form-ok { color: #d7f7e2; }
.newsletter-form .form-err { color: #ffd7d0; }
@media (max-width: 480px) {
    .newsletter-form-row { flex-direction: column; }
    /* En columna, el flex-basis de 240px del input pasa a ser ALTO (no ancho),
       por eso el cuadro se veía gigante en celular. Se resetea a auto + 100% ancho. */
    .newsletter-form-row input[type=email] { flex: 0 0 auto; width: 100%; }
    .newsletter-form-row .btn { width: 100%; }
}