/* ============================================================
   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; overflow-x: hidden; }
body {
    margin: 0;
    overflow-x: hidden;
    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); }

/* Todo el texto corrido del sitio (párrafos) va justificado. Los títulos,
   botones, nav, etc. no se tocan — y las reglas de .clase con text-align
   puntual (centrado, etc.) definidas más abajo siguen ganando porque una
   clase tiene más especificidad que el selector "p" genérico de acá. */
p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

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

/* ---------- Cintillo superior (ticker) ---------- */
/* Tono más oscuro que el header (mezclado con negro) para que no se vea como
   una sola franja roja continua pegada al header — el cliente lo notó como
   "muy rojo" justo por esta repetición exacta del mismo color. */
.ticker { background: color-mix(in srgb, var(--color-primary) 72%, black); 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;
    /* Mismo color que el fondo del isotipo del logo: evita el recuadro de
       color chocando contra un header blanco y deja el logo integrado. */
    background: var(--color-primary);
    border-bottom: 1px solid color-mix(in srgb, #000 15%, 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: #fff; 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: #fff; white-space: nowrap; }
.main-nav a:hover { color: var(--color-accent); }
.nav-cta {
    background: #fff; color: var(--color-primary) !important;
    padding: .45rem 1rem; border-radius: var(--radius-btn);
}
.nav-cta:hover { background: var(--color-accent); color: #fff !important; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; 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: color-mix(in srgb, var(--color-accent) 70%, black); }
.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;
}
/* Acento dorado en vez de rojo en este hover secundario: el rojo queda
   reservado para botones/CTA reales, el dorado para detalles de navegación
   — ayuda a que el sitio no se perciba "todo rojo". */
.nav-cats-menu a:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: color-mix(in srgb, var(--color-accent) 70%, black); }

/* ---------- 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; }
.hero-overlay {
    position: absolute; inset: 0; z-index: 2;
    /* Degradé oscuro NEUTRO (muy poco primary mezclado) en vez del filtro
       rojo anterior — oscurece la foto para que el texto se lea bien, sin
       teñirla de rojo. El rojo de marca queda para los botones del hero,
       no para el filtro completo de la imagen. */
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--color-primary) 18%, black 82%) 0%,
        color-mix(in srgb, var(--color-primary) 10%, transparent 75%) 70%);
}
.hero-content {
    position: relative; z-index: 3; padding: 7rem 1.25rem; color: #fff; max-width: 1120px;
    margin: 0 auto; text-align: center;
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    line-height: 1.1; margin: 0 auto .8rem; max-width: 16ch;
}
.hero-subtitle { font-size: clamp(1.1rem, 2.4vw, 1.4rem); opacity: .92; max-width: 46ch; margin: 0 auto 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;
    text-align: center;
}
.section-intro { color: var(--color-text-soft); max-width: 65ch; margin: 0 auto 2rem; text-align: center; }

/* ---------- 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-media img { border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.about-media-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-light, #f4f4f4);
    border-radius: var(--radius);
    padding: 2.5rem;
}
.about-media-logo img {
    box-shadow: none;
    max-width: 260px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---------- Galería ---------- */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 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; }

/* ---------- 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);
}
.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);
    font-size: .88rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
    gap: 2.2rem;
    padding: 2.8rem 0 2rem;
    text-align: left;
}
.footer-col h3 {
    color: #fff; font-size: .92rem; font-weight: 700;
    margin: 0 0 .9rem; text-transform: uppercase; letter-spacing: .04em;
}
.footer-col p { opacity: .85; line-height: 1.5; }
.footer-about .footer-brand {
    display: inline-flex; align-items: center; margin-bottom: .8rem;
    font-weight: 700; font-size: 1.1rem; color: #fff; text-decoration: none;
}
.footer-about .footer-brand img.brand-logo { max-height: 42px; width: auto; }
.footer-links { display: flex; flex-direction: column; gap: .55rem; }
.footer-links a, .footer-contact a {
    color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-contact .contact-data { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-contact .btn-small { margin-top: .2rem; }
.footer-social .social-links { justify-content: flex-start; margin-bottom: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); }
.footer-bottom-inner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem; padding: 1rem 0; font-size: .78rem;
}
.footer-copy { margin: 0; opacity: .75; }
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; text-align: left; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-links, .footer-social .social-links { align-items: center; }
    .footer-about .footer-brand { justify-content: center; width: 100%; }
    .footer-bottom-inner { justify-content: center; 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;
}
.wa-float:hover { transform: scale(1.08); }

/* ---------- 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-media img {
    max-width: 100%; height: auto; display: block; cursor: zoom-in;
    transition: transform .25s ease; transform-origin: center center;
}
/* Las fotos de producto se suben al tamaño de tarjeta (600x376), que ya es muy
   parecido al tamaño que ocupan en el modal — por eso quitar el max-width no
   alcanzaba a notarse como "zoom". Se fuerza un acercamiento real con escala,
   independiente de la resolución original de la imagen. */
.product-quickview.is-zoomed .quickview-media img {
    transform: scale(2); 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;
    }
    /* El drawer móvil es un panel blanco, así que el texto vuelve a oscuro
       (el header rojo con texto blanco es solo para la barra horizontal). */
    .main-nav a { padding: .9rem 1.5rem; color: var(--color-text); }
    .main-nav a:hover { color: var(--color-primary); }
    .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: 3.5rem 0; }
.clients-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-text); text-align: center; margin: 0 0 2.2rem;
    position: relative;
}
.clients-title::after {
    content: ""; display: block; width: 64px; height: 3px;
    background: var(--color-primary); border-radius: 2px;
    margin: .9rem auto 0;
}
.clients-strip {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 2.75rem 3.5rem;
}
.client-logo img {
    height: 64px; width: auto; max-width: 200px; object-fit: contain;
    transition: transform .25s;
}
.client-logo:hover img { transform: translateY(-3px); }

/* ---------- 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;
    transition: border-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.faq-item[open] {
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-text) 8%, transparent);
}
.faq-item summary {
    cursor: pointer; font-weight: 600; padding: 1rem 1.2rem;
    list-style: none; position: relative; padding-right: 2.6rem;
    transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--color-accent); }
.faq-item summary::after {
    content: '+'; position: absolute; right: 1.2rem; top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1.3rem; color: var(--color-accent); font-weight: 700;
    transition: transform .25s;
}
.faq-item[open] summary::after { content: '+'; transform: translateY(-50%) rotate(45deg); }
.faq-answer {
    padding: 0 1.2rem 1.1rem; color: var(--color-text-soft);
    animation: faqFadeIn .25s ease;
}
.faq-answer p { margin: 0 0 .6rem; }
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 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; }
/* En computador (pantalla ancha) no hace falta el scroll horizontal: hay
   espacio de sobra para mostrar TODAS las categorías en varias filas sin
   que ninguna quede escondida fuera de vista por el desvanecido de los
   bordes — ese diseño con scroll + máscara solo tiene sentido cuando el
   espacio es angosto (mobile/tablet, ver próximo bloque). */
@media (min-width: 821px) {
    .products-filters-wrap { -webkit-mask-image: none; mask-image: none; }
    .products-filters {
        overflow-x: visible; grid-template-rows: none; grid-auto-flow: row;
        display: flex; flex-wrap: wrap;
    }
}
/* 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;
}
.product-media { position: relative; line-height: 0; background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.product-media img { width: 100%; height: auto; 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-price-quote { font-weight: 600; color: var(--color-text-soft); font-size: .9rem; font-style: italic; }
.product-stock-note { color: #b3261e; font-weight: 600; font-size: .8rem; }
.btn-link { color: var(--color-primary); font-size: .8rem; font-weight: 600; text-decoration: underline; }
.btn-link:hover { text-decoration: none; }
.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);
}
.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);
}
.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);
}
.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: var(--color-text);
}
.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%; }
}