/* =============================================================
   ROLIC — stylesheet
   White / grey base palette with a single terracotta accent.
   Primary typeface: Inter. Accent typeface: Playfair Display.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
    --color-white: #FFFFFF;
    --color-grey-50: #F7F6F4;
    --color-grey-100: #F0EEEB;
    --color-grey-200: #E3E0DB;
    --color-grey-300: #CDC8C1;
    --color-grey-400: #A39C93;
    --color-grey-600: #6E675F;
    --color-grey-700: #4C463F;
    --color-grey-800: #332F2A;
    --color-charcoal: #22201C;
    --color-charcoal-soft: #2C2925;

    --color-accent: #B5654A;
    --color-accent-dark: #96543D;
    --color-accent-light: #F1DCD3;
    --color-accent-tint: #FBF3F0;

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Playfair Display', serif;

    --container-width: 1280px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --shadow-md: 0 20px 45px rgba(34, 32, 28, 0.10);
    --shadow-sm: 0 4px 14px rgba(34, 32, 28, 0.08);
    --transition: 200ms ease;

    /* Toggle: the thin border around content photos (.photo-hero,
       .photo-4x3/.photo-9x7, .stacked-media img, .video-embed) and the
       producto-detalle.php / componente-detalle.php product-image
       displays (.pd-strip__item, .pd-version-item__media,
       .pd-gallery-row1__big, .pd-gallery-row1__side > div,
       .pd-gallery-row2 > div). Set to `none` to remove the border
       everywhere it's used, or back to the 1px value to restore it —
       nothing else needs to change. Doesn't affect card/panel/button
       borders (.card, .product-tile, .panel-card, .pd-tabs, etc.) —
       those are separate UI chrome, not image borders. */
    --content-image-border: 0px solid var(--color-grey-200);

    /* Extra sticky offset every element stacked below .main-header
       (.main-header itself, .pd-tabs) needs to add to its own `top` value
       when .topbar is also sticky — see body.dealer-logged-in below,
       right after the topbar rules. 0 by default (.topbar isn't sticky
       for a logged-out visitor, so nothing needs to shift down). */
    --sticky-header-offset: 0px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input { font: inherit; }

html { overflow-x: hidden; }

body {
    font-family: var(--font-primary);
    color: var(--color-grey-800);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-charcoal);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Subtle scroll-reveal. The .reveal class is written directly into the
   markup (blog.php / productos.php); assets/js/main.js just toggles
   .visible via IntersectionObserver as each card scrolls into view. */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease !important;
}
.reveal.visible { opacity: 1 !important; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }
.delay-7 { transition-delay: 0.7s !important; }
.delay-8 { transition-delay: 0.8s !important; }
.delay-9 { transition-delay: 0.9s !important; }
.delay-10 { transition-delay: 1s !important; }
.delay-11 { transition-delay: 1.1s !important; }
.delay-12 { transition-delay: 1.2s !important; }
@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    z-index: 200;
    transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Accent / cursive text ---------- */
.accent-text {
    font-family: var(--font-accent);
    color: var(--color-accent);
    font-weight: 500;
    font-size: 1.35em;
    line-height: 1;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: .2px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--transition); }
.btn--sm { padding: 9px 20px; font-size: 0.85rem; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--logout:hover svg { transform: translateX(3px); }
.btn--primary {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn--primary:hover { background: var(--color-accent-dark); }
.btn--outline {
    background: transparent;
    border-color: var(--color-grey-300);
    color: var(--color-charcoal);
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
    /* Keeps the <header> landmark for accessibility without letting its
       (short) box constrain how far .main-header (and, for a logged-in
       dealer, .topbar too — see body.dealer-logged-in near the :root
       tokens) can stay sticky below — position:sticky is bounded by its
       containing block's height, and .site-header is only ever as tall
       as topbar + main-header. display:contents removes .site-header
       from the box tree entirely, so each sticky child's containing
       block becomes <body> instead — which is why two stacked sticky
       children with different `top` offsets works here at all. */
    display: contents;
}

/* ---- top utility bar ---- */
.topbar {
    background: var(--color-grey-50);
    border-bottom: 1px solid var(--color-grey-200);
}
/* Only sticky while a dealer is logged in AND the quickbar is enabled
   (body.dealer-logged-in — see includes/header.php) — a logged-out
   visitor's topbar keeps scrolling away as before. z-index above
   .main-header's 100 so it's never accidentally layered under it. */
body.dealer-logged-in .topbar {
    position: sticky;
    top: 0;
    z-index: 101;
}
/* .topbar is 40px tall (.topbar__inner's fixed height, below) at every
   breakpoint, so this one value covers both — unlike .main-header's own
   height, which does change at ≤1024px. */
body.dealer-logged-in { --sticky-header-offset: 40px; }
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: 40px;
}
.topbar__social {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar__social a {
    color: var(--color-grey-600);
    display: flex;
    transition: color var(--transition);
}
.topbar__social svg { width: 20px; height: 20px; }
.topbar__social a:hover { color: var(--color-accent); }

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar__login,
.topbar__logout {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--color-grey-700);
    transition: color var(--transition);
}
.topbar__login svg,
.topbar__logout svg { width: 20px; height: 20px; }
.topbar__login:hover,
.topbar__logout:hover { color: var(--color-accent); }

.topbar__logout {
    padding-left: 16px;
    border-left: 1px solid var(--color-grey-200);
}

/* ---- main header row ---- */
.main-header {
    position: sticky;
    top: var(--sticky-header-offset);
    z-index: 100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-grey-200);
}
.main-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 84px;
}

.brand { flex-shrink: 0; }
.brand img { height: 44px; width: auto; }

.main-nav { flex: 1; }
.main-nav__list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-nav__link-row {
    display: flex;
    align-items: center;
}

.main-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 30px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-grey-800);
    position: relative;
    transition: color var(--transition);
}
.main-nav__link::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 26px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.main-nav__link:hover,
.main-nav__link.is-active { color: var(--color-accent); }
.main-nav__link:hover::after,
.main-nav__link.is-active::after { transform: scaleX(1); }

.mega-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-grey-600);
}
.main-nav__caret { width: 16px; height: 16px; transition: transform var(--transition); }

/* ---- dealer quick-access bar (logged-in distributors only — see
   DEALER_QUICKBAR_ENABLED in includes/functions.php). Lives inside
   .topbar__actions, between .topbar__login and .topbar__logout. When
   present, .topbar itself becomes sticky (body.dealer-logged-in, further
   down) so the icons stay reachable while scrolling — see
   --sticky-header-offset near the :root tokens for how .main-header (and
   anything else stacked below it, e.g. .pd-tabs) shifts down to
   accommodate the now-also-sticky topbar above it. ---- */
.topbar__quickbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--color-grey-200);
}
.topbar__quickbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-grey-600);
    transition: background var(--transition), color var(--transition);
}
.topbar__quickbar-item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.topbar__quickbar-item svg { width: 21px; height: 21px; }

/* ---- mega menu (desktop: hover-driven) ---- */
.has-mega { position: static; }

.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-grey-200);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 90;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu__inner {
    display: flex;
    padding: 44px 24px;
    min-height: 260px;
}

.mega-menu__categories {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-grey-200);
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-menu__category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--color-grey-800);
    transition: background var(--transition), color var(--transition);
}
.mega-menu__category::after {
    content: '\2192';
    opacity: 0;
    transform: translateX(-6px);
    color: var(--color-accent);
    transition: opacity var(--transition), transform var(--transition);
}
.mega-menu__category:hover,
.mega-menu__category.is-active {
    background: var(--color-grey-50);
    color: var(--color-accent);
}
.mega-menu__category:hover::after,
.mega-menu__category.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

.mega-menu__panel {
    display: none;
    padding-left: 56px;
    flex: 1;
}
.mega-menu__panel.is-visible { display: block; }
.mega-menu__panel ul {
    columns: 2;
    column-gap: 48px;
}
.mega-menu__panel li { break-inside: avoid; }
.mega-menu__panel a {
    display: block;
    padding: 11px 14px;
    margin-left: -14px;
    border-radius: var(--radius-sm);
    font-size: 0.98rem;
    color: var(--color-grey-700);
    transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.mega-menu__panel a:hover {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    padding-left: 20px;
}

/* Both mega-menu panels are DB-driven lists (product_lines, component_categories)
   long enough that the base 2-column layout would grow too tall — denser
   3-column layout with a smaller type size keeps the flyout compact.
   Sillas y Sillones and Componentes both use this modifier so their
   distribution/type size match. */
.mega-menu__panel.mega-menu__panel--dense ul {
    columns: 3;
    column-gap: 28px;
}
.mega-menu__panel.mega-menu__panel--dense a {
    padding: 8px 12px;
    margin-left: -12px;
    font-size: 0.88rem;
}

/* ---- search ---- */
.main-header__tools {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.search {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
}
.search__toggle {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-700);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.search__toggle svg { width: 28px; height: 28px; }
.search__toggle:hover { color: var(--color-accent); background: var(--color-grey-50); }
/* When open, the opener collapses — the mag glass now lives inside the
   field as the submit button (.search__submit), with .search__close (X)
   to its right. */
.search.is-active .search__toggle { display: none; }

.search__form {
    display: flex;
    align-items: center;
    width: 0;
    overflow: hidden;
    border-radius: 999px;
    transition: width var(--transition);
}
.search.is-active .search__form {
    width: 300px;
    border: 1px solid var(--color-grey-300);
    background: var(--color-grey-50);
}
.search.is-active .search__form:focus-within { border-color: var(--color-accent); }

.search__form input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 9px 6px 9px 16px;
    font-size: 0.9rem;
    outline: none;
}

.search__submit,
.search__close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-700);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
}
.search__submit svg,
.search__close svg { width: 20px; height: 20px; }
.search__submit:hover,
.search__close:hover { color: var(--color-accent); }
.search__close { margin-right: 4px; }

/* ---- mobile nav toggle (hamburger) ---- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    width: 40px;
    height: 40px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-charcoal);
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   MAIN CONTENT — shared section utilities
   ============================================================= */
.site-main { min-height: 50vh; }

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--grey { background: var(--color-grey-50); }
.section--dark {
    background: var(--color-charcoal);
    color: var(--color-grey-200);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }

.eyebrow {
    display: block;
    font-family: var(--font-accent);
    color: var(--color-accent);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 20px; }
.section-lead {
    max-width: 640px;
    color: var(--color-grey-600);
    font-size: 1.08rem;
}

/* ---- hero ---- */
.hero {
    background: var(--color-grey-50);
    border-bottom: 1px solid var(--color-grey-200);
}
.hero__inner {
    padding: 96px 0 88px;
    max-width: 760px;
}
.hero__title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    letter-spacing: -.5px;
}
.hero__lead {
    margin-top: 22px;
    font-size: 1.15rem;
    color: var(--color-grey-600);
    max-width: 600px;
}
.hero__actions {
    margin-top: 36px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- card grid ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.card {
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
    border-color: var(--color-grey-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}
.card__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.card p { color: var(--color-grey-600); font-size: 0.96rem; }

/* ---- dashboard tile grid (distributor area launcher cards) ---- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.dash-tile:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}
.dash-tile__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
}
.dash-tile:hover .dash-tile__icon {
    background: var(--color-accent);
    color: var(--color-white);
    transform: scale(1.08);
}
.dash-tile__icon svg { width: 26px; height: 26px; }
.dash-tile__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--color-grey-700);
    line-height: 1.4;
    transition: color var(--transition);
}
.dash-tile:hover .dash-tile__label { color: var(--color-accent-dark); }

/* ---- product category placeholder tiles (no photography yet) ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.product-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-grey-200);
    background: var(--color-white);
    transition: box-shadow var(--transition), transform var(--transition);
}
.product-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
/* Stretched-link overlay used by tiles that link out to a real detail page
   (currently only Working Mesh -> producto-detalle.php) without changing
   the tile's own tag from <div> to <a>. */
.product-tile__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.product-tile__media {
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(135deg, var(--color-grey-100) 0 2px, var(--color-grey-50) 2px 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-400);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.product-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Catalog/product-shot tiles (component category tiles, and
   producto-categoria.php's individual product photos) — these photos are
   plain-background product shots, not full-bleed lifestyle renders like
   the Sillas y Sillones category tiles, so they get a padded, white-backed
   inset with object-fit: contain instead of cover — object-fit: cover
   crops a plain-background product shot in a way that often cuts off part
   of the chair; contain shows the whole product instead, letterboxed on
   the white inset rather than against the tile's default diagonal-stripe
   placeholder background. */
.product-tile__media--padded {
    padding: 16px;
    background: var(--color-white);
}
.product-tile__media--padded img {
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.product-tile__body { padding: 18px 20px 22px; }
.product-tile__body h3 { font-size: 1rem; margin-bottom: 4px; }
.product-tile__body p { font-size: 0.85rem; color: var(--color-grey-600); }

/* ---- component card, borderless-image variant (componente-categoria.php
   only — every other card/tile on the site keeps using .product-tile
   above, untouched. Swap the classes back in that one file to revert). ----
   Client wants the photo to sit with no outline around it; only the
   bottom (title/SKU) block is boxed, and the box border fades in rather
   than cutting in with a hard line. Uses the same .product-grid layout
   grid as .product-tile, just a different card/media/body treatment. */
.component-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: transform var(--transition), box-shadow var(--transition);
}
.component-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.component-card__media {
    aspect-ratio: 4 / 3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--color-white);
    color: var(--color-grey-400);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.component-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}
/* the "fade instead of a hard line" border: the area behind the photo
   stays solid white (no tint) — only the left/right edge lines fade in,
   from transparent near the top down to the border color right where
   .component-card__body's solid border begins, so the two joins seamlessly. */
.component-card__media::before,
.component-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, var(--color-grey-200) 100%);
    pointer-events: none;
}
.component-card__media::before { left: 0; }
.component-card__media::after { right: 0; }
.component-card__body {
    padding: 18px 20px 22px;
    border: 1px solid var(--color-grey-200);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.component-card__body h3 { font-size: 1rem; margin-bottom: 4px; }
.component-card__body p { font-size: 0.85rem; color: var(--color-grey-600); }

/* ---- generic content blocks (Lorem Ipsum pages) ---- */
.prose { max-width: 760px; }
.prose p { margin-bottom: 18px; color: var(--color-grey-700); }
.prose p:last-child { margin-bottom: 0; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* Feature rows variant (Descripción General, producto-detalle.php) — image
   sized down and both cells centered (vertically + horizontally) within
   their grid column, instead of the base .two-col's full-width/top-aligned
   default (still used as-is elsewhere: la-empresa.php, contacto.php). */
.two-col--centered { align-items: center; }
.two-col--centered .media { max-width: 82%; margin: 0 auto; }
.two-col--centered .prose { max-width: 80%; margin: 0 auto; }

/* ---- contact map (contacto.php) ---- */
.contact-map {
    height: 320px;
    margin-top: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-grey-200);
    overflow: hidden;
}
.contact-map .leaflet-container { height: 100%; width: 100%; font-family: inherit; }

/* ---- dealers map (mapa-distribuidores.php) ---- */
.dealer-map-meta { color: var(--color-grey-600); font-size: 0.92rem; margin: 0 0 20px; }
.dealer-map {
    height: 600px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-grey-200);
    overflow: hidden;
}
/* L.map('dealers-map') turns this exact element into .leaflet-container
   itself (Leaflet doesn't nest a separate child) — so overrides of
   Leaflet's own base styles need this compound selector to reliably win
   the cascade regardless of stylesheet load order. Leaflet's internal
   panes/controls default to z-index up to 1000, which otherwise beats
   .main-header's sticky z-index (100) once this map scrolls underneath
   it; setting z-index here (position is already relative via leaflet.css)
   makes this element establish its own stacking context, capping
   everything inside it below the header. */
.dealer-map.leaflet-container {
    font-family: inherit;
    background: var(--color-grey-50);
    z-index: 1;
}
.dealer-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05) brightness(1.02); }

.dealer-marker svg { display: block; filter: drop-shadow(0 2px 3px rgba(34, 32, 28, 0.4)); }

.dealer-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.dealer-popup .leaflet-popup-content { margin: 0; width: 320px !important; }
.dealer-popup .leaflet-popup-tip { box-shadow: var(--shadow-sm); }
.dealer-popup .leaflet-popup-close-button { color: var(--color-grey-400); top: 8px; right: 8px; }
.dealer-popup .leaflet-popup-close-button:hover { color: var(--color-accent); }

.dealer-card { padding: 0px 20px 20px; }
.dealer-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-grey-800);
    margin: 0 0 12px;
    padding: 0 24px 12px 0;
    border-bottom: 1px solid var(--color-grey-200);
}
.dealer-card__list { display: flex; flex-direction: column; gap: 9px; }
.dealer-popup .dealer-card__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--color-grey-700);
    line-height: 1.4;
    text-decoration: none;
}
.dealer-card__row svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0; color: var(--color-accent-dark); }
.dealer-card__row span { min-width: 0; word-break: break-word; }
.dealer-popup a.dealer-card__row:hover,
.dealer-popup a.dealer-card__row:hover span { color: var(--color-accent); }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.stat-row__item { text-align: left; }
.stat-row__number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-accent);
}
.stat-row__label { color: var(--color-grey-600); font-size: 0.92rem; margin-top: 4px; }

.cta-banner {
    background: var(--color-charcoal);
    border-radius: var(--radius-lg);
    padding: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    color: var(--color-white);
}
.cta-banner h2 { color: var(--color-white); margin-bottom: 8px; }
.cta-banner p { color: var(--color-grey-300); }

/* ---- company/about page: photo hero, stacked media, steps, video ---- */
.photo-hero {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    border: var(--content-image-border);
}
/* Full-bleed variant (producto-detalle.php's hero) — the img simply isn't
   wrapped in a .container in the markup, so it's already full viewport
   width on its own; this modifier only strips the rounded corners/border
   that make sense for the contained variant but look wrong flush against
   the viewport edges. Deliberately not a width:100vw trick — that can
   overflow by the vertical scrollbar's width (see html's overflow-x:hidden
   comment elsewhere in this file for why that class of bug is taken
   seriously here). */
.photo-hero--bleed {
    border-radius: 0;
    border: none;
}
.photo-4x3, .photo-9x7 {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
    border: var(--content-image-border);
}
.photo-4x3 { aspect-ratio: 4 / 3; }
.photo-9x7 { aspect-ratio: 9 / 7; }

.stacked-media { display: flex; flex-direction: column; gap: 20px; }
.stacked-media img {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
    border: var(--content-image-border);
}
.stacked-media__logos {
    padding: 20px 24px;
    background: var(--color-grey-50);
}

.steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.steps li { padding-left: 16px; border-left: 3px solid var(--color-accent); }
.steps__label { font-weight: 600; color: var(--color-charcoal); margin-bottom: 4px; }
.steps p { color: var(--color-grey-600); font-size: 0.94rem; margin: 0; }

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--content-image-border);
    background: var(--color-grey-100);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- blog ---- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.blog-card__media {
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(135deg, var(--color-grey-100) 0 2px, var(--color-grey-50) 2px 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-400);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: center;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-card__body { padding: 24px; }
.blog-card__date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-accent);
    margin-bottom: 10px;
    display: block;
}
.blog-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.blog-card h3 a:hover { color: var(--color-accent); }
.blog-card p { color: var(--color-grey-600); font-size: 0.92rem; margin-bottom: 16px; }
.blog-card__link { font-weight: 600; font-size: 0.9rem; color: var(--color-charcoal); }
.blog-card__link:hover { color: var(--color-accent); }

/* ---- blog detail (single post) ---- */
.blog-detail__back {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-grey-600);
    margin-bottom: 18px;
}
.blog-detail__back:hover { color: var(--color-accent); }
.blog-detail__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-grey-500);
    font-size: 0.9rem;
    margin-bottom: 18px;
}
.blog-detail__intro {
    font-family: var(--font-accent);
    color: var(--color-accent);
    font-size: 1.9rem;
    line-height: 1.3;
    text-align: center;
    max-width: 700px;
    margin: 40px auto 0;
}
.blog-detail__article h2 { margin-top: 12px; }
.blog-detail__article .accent-text {
    display: block;
    margin: 32px 0;
    line-height: 1.4;
}

/* ---- forms (contact / login) ---- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.form-grid .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
/* .form-grid's own row-gap already spaces rows out — without this,
   fields inside a grid also carry the base .field's margin-bottom on
   top of it, compounding to a much bigger (and inconsistent-looking)
   gap than either value alone. Fields outside a grid (e.g. the plain
   stacked .field list on acceso-distribuidores.php's login form) keep
   the base margin-bottom untouched. */
.form-grid .field { margin-bottom: 0; }
.field label { font-size: 0.88rem; font-weight: 500; color: var(--color-grey-700); }
.field input,
.field textarea {
    border: 1px solid var(--color-grey-300);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.95rem;
    background: var(--color-white);
    outline: none;
    transition: border-color var(--transition);
    resize: vertical;
}
.field input:focus,
.field textarea:focus { border-color: var(--color-accent); }

/* ---- floating-label fields (contacto.php) ---- */
.field--floating {
    position: relative;
    display: block;
}
.field--floating input,
.field--floating textarea {
    width: 100%;
    /* Extra top padding (vs. the base .field's flat 12px) clears the
       label once it's floated to the top — without this the shrunk
       label would sit on top of the typed text instead of above it. */
    padding: 22px 14px 10px;
}
.field--floating label {
    position: absolute;
    left: 15px;
    top: 17px;
    font-size: 0.95rem;
    color: var(--color-grey-400);
    font-weight: 400;
    pointer-events: none;
    transition: top var(--transition), font-size var(--transition), color var(--transition);
}
/* :placeholder-shown only matches when the field is empty — every
   .field--floating input/textarea below has placeholder=" " (a single
   space, never empty-string) specifically so this pseudo-class has
   something to key off without needing JS to track "has a value". */
.field--floating input:focus ~ label,
.field--floating input:not(:placeholder-shown) ~ label,
.field--floating textarea:focus ~ label,
.field--floating textarea:not(:placeholder-shown) ~ label {
    top: 7px;
    font-size: 0.72rem;
    color: var(--color-accent);
}

/* ---- inline field validation (contacto.php) ---- */
.field--invalid input,
.field--invalid textarea { border-color: #B23A3A; }
.field--invalid label { color: #B23A3A; }
.field__error {
    display: block;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #FBEAEA;
    font-size: 0.7rem;
    font-weight: 500;
    color: #B23A3A;
    width: fit-content;
    /* Visible whenever the [hidden] attribute is absent — see the
       [hidden] override right below for why visibility (not display)
       is what actually toggles this. */
    visibility: visible;
}
/* Keeps reserving this element's layout space even while "hidden" —
   overrides the browser's default [hidden] -> display:none (same
   [hidden]-vs-author-rule situation documented elsewhere in this
   project for .form-status, just solved in the opposite direction:
   there the goal was to restore display:none, here it's to cancel it).
   visibility:hidden is what actually hides the content instead, so a
   field's error slot is always the same height whether or not an error
   is currently shown — fields below never jump down when one appears. */
.field__error[hidden] {
    display: block;
    visibility: hidden;
}
.form-error {
    background: #FBEAEA;
    border: 1px solid #E3B8B8;
    color: #B23A3A;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.88rem;
    margin: 0 0 20px;
}
.form-notice {
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    color: var(--color-grey-700);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.88rem;
    margin: 0 0 20px;
}

/* ---- form submit status (contacto.php: spinner while sending, then
   confirmation/error in place) ---- */
.form-status {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0 0 20px;
}
/* The [hidden] attribute's display:none only comes from the browser's
   user-agent stylesheet, which any author rule (like .form-status's own
   `display: flex` above) always overrides regardless of specificity —
   so without this, [data-contact-status] rendered as a visible empty
   box (complete with its spinner, which has no hidden-state of its
   own) on every page load, before any submission. */
.form-status[hidden] { display: none; }
.form-status--loading {
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    color: var(--color-grey-700);
}
.form-status--ok {
    background: var(--color-accent-tint);
    border: 1px solid var(--color-accent-light);
    color: var(--color-accent-dark);
}
.form-status--error {
    background: #FBEAEA;
    border: 1px solid #E3B8B8;
    color: #B23A3A;
}
.form-status__spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(76, 70, 63, 0.25);
    border-top-color: var(--color-grey-700);
    animation: form-status-spin 0.7s linear infinite;
}
.form-status--ok .form-status__spinner,
.form-status--error .form-status__spinner { display: none; }
@keyframes form-status-spin {
    to { transform: rotate(360deg); }
}

.panel-card {
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-sm);
}
.panel-card--grey { background: var(--color-grey-50); box-shadow: none; }

/* ---- password field with show/hide toggle (Mi Clave modal) ---- */
.field__input-wrap { position: relative; display: flex; }
.field__input-wrap input { flex: 1; padding-right: 44px; }
.field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-grey-400);
    transition: color var(--transition), background var(--transition);
}
.field__toggle:hover { color: var(--color-accent); background: var(--color-accent-tint); }
.field__toggle svg { width: 18px; height: 18px; }
.field__toggle .icon-eye-off { display: none; }
.field__toggle[aria-pressed="true"] .icon-eye { display: none; }
.field__toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* ---- modal (generic — currently only Mi Clave's password-change form) ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(34, 32, 28, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    /* visibility deliberately left out of this list — on open it should
       flip to visible the instant .is-open is toggled (so the field
       inside is immediately focusable), not animate in. Only opacity
       (and the .modal panel's own transform, below) actually transition.
       Closing is handled separately via .is-closing (see main.js's
       closeModal()) — visibility has to stay "visible" for the fade-out
       to be seen at all; without that class as a bridge, removing
       .is-open alone would drop straight to this rule's own
       visibility:hidden before the opacity transition had a chance to
       play, which is exactly the "just disappears" bug this fixes. */
    transition: opacity var(--transition);
}
.modal-overlay.is-open,
.modal-overlay.is-closing { visibility: visible; }
.modal-overlay.is-open { opacity: 1; }
.modal-overlay.is-closing { pointer-events: none; }
.modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 36px 32px 32px;
    position: relative;
    transform: translateY(16px);
    transition: transform var(--transition);
}
.modal-overlay.is-open .modal { transform: translateY(0); }
.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.modal__close:hover { background: var(--color-accent-tint); color: var(--color-accent); border-color: var(--color-accent-light); }
.modal__close svg { width: 18px; height: 18px; }
.modal__title { font-size: 1.3rem; margin-bottom: 8px; padding-right: 36px; }
.modal__lead { color: var(--color-grey-600); font-size: 0.92rem; margin-bottom: 24px; }
.modal .field:last-of-type { margin-bottom: 24px; }
body.modal-open { overflow: hidden; }

/* PDF preview modal (producto-detalle.php) — much larger than the base
   .modal (sized for a short form), near-fullscreen so the embedded PDF is
   actually readable. overflow:hidden on the panel itself (rather than the
   base modal's overflow-y:auto) since the iframe fills all remaining
   space via flex:1 — nothing here should ever need the panel itself to
   scroll. */
.modal--pdf {
    max-width: 960px;
    width: calc(100% - 48px);
    height: calc(100vh - 48px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal--pdf .modal__title { flex-shrink: 0; }
.modal__pdf-frame {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-grey-50);
}

/* Download success toast (producto-detalle.php) — deliberately a literal
   green rather than the site's terracotta accent (see CLAUDE.md: one
   accent color, used sparingly) — a save-confirmation toast is closer to
   generic "success" UI than an on-brand moment, so it borrows the more
   universal green convention instead. Visibility is class-only
   (.is-visible), same reasoning as .modal-overlay above: no [hidden]
   attribute, since author display/opacity rules would silently defeat it
   (see the .form-status[hidden] bug elsewhere in this project). */
.download-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #2E7D46;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}
.download-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.download-toast svg { width: 20px; height: 20px; flex-shrink: 0; }

/* =============================================================
   PRODUCT DETAIL (producto-detalle.php)
   ============================================================= */

/* ---- photo strip (5 images, 3 visible, arrow nav) ---- */
.pd-strip { position: relative; margin-top: 32px; }
/* Full-bleed variant (producto-detalle.php, right below the full-bleed
   hero) — not wrapped in a .container, so it's already edge-to-edge; this
   only zeroes the strip's own top margin so it sits flush against the hero
   above it, with no gap. */
.pd-strip--bleed { margin-top: 0; }
.pd-strip__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pd-strip__track::-webkit-scrollbar { display: none; }
.pd-strip__item {
    flex: 0 0 calc((100% - 40px) / 3);
    scroll-snap-align: start;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--content-image-border);
}
/* Bleed variant: no gap between items (flush edge-to-edge, unlike the
   contained strip's 20px gap above), no rounded corners, and smaller tiles
   — flex-basis is deliberately NOT an even divisor of 100% (22% ≈ 4.5
   visible instead of a clean 4 or 5), so the last one in view is
   intentionally cut off mid-image as a "there's more, scroll" affordance,
   per explicit request rather than an oversight. */
.pd-strip--bleed .pd-strip__track { gap: 0; }
.pd-strip--bleed .pd-strip__item { flex-basis: 22%; border-radius: 0; }
.pd-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-strip__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal);
    z-index: 5;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pd-strip__arrow:hover { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.pd-strip__arrow--prev { left: 12px; }
.pd-strip__arrow--next { right: 12px; }
.pd-strip__arrow svg { width: 20px; height: 20px; }

/* ---- sticky section tabs ---- */
.pd-tabs {
    /* Not nested inside a .container div (see producto-detalle.php for
       why — it needs to be a direct child of .pd-tabs-scope for the
       sticky fix to actually take effect), so it replicates .container's
       content-area width/centering itself: a width:100%,max-width:1280px,
       margin:auto,padding:0 24px box has a content area that's always
       exactly "min(100%, 1280px) - 48px", centered the same way — this
       reproduces that same box without an outer wrapper or padding of its
       own (padding would sit *inside* this element's own border, making
       the visible bordered box wider than the rest of the page's content
       instead of matching it). */
    width: calc(100% - 48px);
    max-width: calc(var(--container-width) - 48px);
    position: sticky;
    /* .main-header is 84px tall (72px at the ≤1024px breakpoint below) —
       the extra 8px here is a deliberate visual gap so the tab bar
       doesn't sit flush against the header once both are stuck; keep the
       matching .pd-section scroll-margin-top values (further down) and
       the ::before backdrop's offsets (right below) in sync if this
       changes. The + var(--sticky-header-offset) accounts for .topbar
       also being sticky for a logged-in dealer (see body.dealer-logged-in
       near the :root tokens) — 0px otherwise, so this is a no-op for
       everyone else. */
    top: calc(92px + var(--sticky-header-offset));
    z-index: 60;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    margin: 32px auto 0;
    box-shadow: var(--shadow-sm);
}
/* The 8px gap above (between the stuck header and top:92px here) isn't
   covered by either sticky box on its own, so scrolling content was
   visible through it. This backdrop rides along with .pd-tabs (same
   sticky box, so it moves with it, not a separately-positioned element)
   and paints that gap solid. `top`/`height` stop 1px short of the box's
   own top border (an absolutely-positioned child is placed relative to
   the *padding* box, not the border box, so without that 1px offset the
   backdrop paints directly over — and visually erases — .pd-tabs' own
   top border) — keep both the "8"s and the "1" in sync with the gap and
   border-width above if either changes. */
.pd-tabs::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--color-white);
}
.pd-tabs__inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: none;
}
.pd-tabs__inner::-webkit-scrollbar { display: none; }
.pd-tabs__link {
    flex: 0 0 auto;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-grey-600);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.pd-tabs__link:hover { color: var(--color-charcoal); }
.pd-tabs__link.is-active { background: var(--color-grey-100); color: var(--color-charcoal); }

.pd-section { scroll-margin-top: 164px; }
/* Click-to-show tab panels (producto-detalle-tab.php only — see the
   data-tabs-panels branch in main.js). producto-detalle.php's .pd-section
   elements never get this class, since that page keeps every section
   always rendered and just scrolls to it. */
.pd-section.is-hidden { display: none; }

/* ---- "versiones disponibles" panel ---- */
.pd-versions {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 24px;
}
.pd-versions__label h3 { font-size: 1.5rem; margin-top: 6px; }
.pd-versions__list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.pd-version-item { flex: 0 0 110px; text-align: center; }
.pd-version-item__media {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    border: var(--content-image-border);
    background: var(--color-white);
    overflow: hidden;
    margin-bottom: 10px;
}
.pd-version-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-version-item span { font-size: 0.82rem; color: var(--color-grey-600); }

/* ---- specs (measurements list + video) ---- */
.pd-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 24px;
    align-items: start;
}
.pd-specs__media { display: flex; flex-direction: column; gap: 20px; }
.pd-specs__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-grey-200);
    font-size: 0.94rem;
}
.pd-specs__row:first-child { padding-top: 0; }
.pd-specs__row span:first-child { color: var(--color-grey-600); }
.pd-specs__row span:last-child { font-weight: 600; color: var(--color-charcoal); text-align: right; }

/* ---- real measurement-diagram images (producto-detalle.php,
   product_medidas) — one fixed height, side by side, wrapping to as many
   rows as needed; width is whatever that height works out to for each
   image's own aspect ratio (object-fit:contain, not stretched/cropped),
   which is why there's no explicit width here. Replaces .pd-specs above
   (still kept for producto-detalle-tab.php / "producto-detalle -
   STATIC.php", the two standalone comparison pages that still use it —
   not touched here, this is a new, separate ruleset). */
.pd-medidas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-top: 24px; }
.pd-medidas__img {
    height: 600px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    background: var(--color-white);
    border: var(--content-image-border);
    border-radius: var(--radius-md);
    display: block;
}
/* Half-height modifier — currently applied to just the last image in the
   loop (Producto en Caja: icons + a couple lines of text, not a tall
   diagram like the others, so it doesn't need the full 600px). */
.pd-medidas__img--half { height: 300px; }

/* ---- ficha técnica download pills ---- */
.pd-downloads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 16px 32px;
    margin-top: 24px;
}
.pd-download-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--color-charcoal);
    transition: border-color var(--transition), background var(--transition);
    /* A grid item's default min-width is auto (= its content's natural
       width), not 0 — without this, a long title forces the whole pill
       wider than its .pd-downloads grid track instead of wrapping/eliding
       within it, pushing later columns/pills off-screen. Same fix as
       .pd-download-btn__label's own min-width:0 below, just one level up
       the box tree (grid item, not flex item). */
    min-width: 0;
}
/* :not(--split) — the split (PDF) pill isn't a single click target
   anymore (view/download are two separate icon buttons inside it), so it
   shouldn't hover as a whole; only its .pd-download-btn__icon children
   get their own hover state, further down. */
.pd-download-btn:not(.pd-download-btn--split):hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.pd-download-btn svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }

/* Split variant: PDF docs get two separate actions (view in modal /
   force-download) instead of one link filling the whole pill, so the pill
   itself is a plain <div> — .pd-download-btn's own padding/background/
   border/hover are all still shared with the single-link variant above,
   only the inner layout differs. */
/* Wraps to 2 (or more) lines rather than eliding — the label sits in a
   flex row next to the icon(s), and min-width:0 is what lets it actually
   shrink/wrap within that row instead of pushing them out. */
.pd-download-btn__label { min-width: 0; }
.pd-download-btn__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pd-download-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.pd-download-btn__icon svg { width: 18px; height: 18px; color: var(--color-accent); }
.pd-download-btn__icon:hover { background: var(--color-accent); }
.pd-download-btn__icon:hover svg { color: var(--color-white); }

/* ---- imágenes gallery grid ---- */
.pd-gallery-row1 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-top: 32px;
}
.pd-gallery-row1__big {
    height: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--content-image-border);
}
.pd-gallery-row1__side { display: flex; flex-direction: column; gap: 20px; height: 520px; }
.pd-gallery-row1__side > div {
    flex: 1;
    min-height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--content-image-border);
}
.pd-gallery-row1__big img,
.pd-gallery-row1__side img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-gallery-row2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.pd-gallery-row2 > div {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--content-image-border);
}
.pd-gallery-row2 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- real product-photos gallery (producto-detalle.php) — large/featured
   photo in a narrower, portrait-leaning left column, the rest in a
   thumbnail grid in the right column. Photo counts vary wildly (1 to
   45+), and every thumbnail needs to be visible with no scrolling, so the
   two columns do NOT share a fixed/matched height — .pd-gallery__thumbs is
   left at its natural content height (however many rows that takes)
   instead of being capped + made scrollable, and align-items:start keeps
   the shorter column from being stretched to match the taller one. Only
   the featured image keeps its own height cap (55vh / 560px) so it never
   gets "way too large" on a tall viewport; its width is derived from that
   height via aspect-ratio (3:4, portrait) rather than stretching to fill
   the column, which is what makes it narrower than a plain full-width
   image. Both the featured image and every thumbnail use
   object-fit:contain (not cover) so the whole photo is always visible,
   never cropped — each box's own white background (matching the
   #imagenes section, which has no --grey modifier here unlike most other
   .pd-section blocks) fills whatever letterbox space that leaves when a
   photo's real aspect ratio doesn't match its box. */
.pd-gallery { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 20px; margin-top: 24px; align-items: start; }
.pd-gallery__featured {
    display: block;
    width: auto;
    aspect-ratio: 3 / 4;
    height: 55vh;
    max-height: 560px;
    min-height: 320px;
    justify-self: start;
    padding: 0;
    /* Fill color for the letterbox space object-fit:contain leaves around
       an image whose real aspect ratio doesn't match this box's 3:4 —
       shows the whole photo uncropped instead of cover's crop-to-fill.
       White (not the grey-50 this started as) so the whole gallery reads
       as one consistent white surface, section background included. */
    background: var(--color-white);
    border: var(--content-image-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
}
.pd-gallery__featured img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--transition); }
.pd-gallery__featured:hover img { transform: scale(1.03); }
.pd-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.pd-gallery__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    background: var(--color-white);
    border: var(--content-image-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: zoom-in;
}
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--transition); }
.pd-gallery__thumb:hover img { transform: scale(1.06); }

/* ---- image lightbox modal (#modal-gallery) — dark stage so photos of
   any aspect ratio sit centered via object-fit:contain instead of being
   cropped, matching a typical lightbox rather than the site's usual
   content-image treatment. */
.modal--gallery {
    max-width: 1100px;
    width: calc(100% - 48px);
    height: calc(100vh - 48px);
    max-height: none;
    padding: 0;
    background: var(--color-charcoal);
    position: relative;
    overflow: hidden;
}
.modal--gallery .modal__close {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    z-index: 3;
}
.modal--gallery .modal__close:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.pd-gallery-modal__stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pd-gallery-modal__stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pd-gallery-modal__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition);
}
.pd-gallery-modal__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); }
.pd-gallery-modal__arrow[hidden] { display: none; }
.pd-gallery-modal__arrow--prev { left: 16px; }
.pd-gallery-modal__arrow--next { right: 16px; }
.pd-gallery-modal__arrow svg { width: 22px; height: 22px; }
.pd-gallery-modal__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 999px;
    z-index: 2;
}

/* ---- recursos cards ---- */
.pd-resources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 32px;
}
.pd-resource-card {
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    transition: box-shadow var(--transition), transform var(--transition);
}
.pd-resource-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.pd-resource-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-grey-50); overflow: hidden; }
.pd-resource-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(0.9) brightness(1.15) opacity(0.5);
}
.pd-resource-card__icon {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-600);
}
.pd-resource-card__icon svg { width: 16px; height: 16px; }
.pd-resource-card__body { padding: 22px 24px 26px; }
.pd-resource-card__body h3 { font-size: 1.1rem; margin-bottom: 14px; }
.pd-resource-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background var(--transition);
}
.pd-resource-card__btn:hover { background: var(--color-accent); }
.pd-resource-card__btn svg { width: 14px; height: 14px; }

/* =============================================================
   DISTRIBUTOR ORDER HISTORY
   (historial-pedidos.php / historial-pedido-detalle.php)
   ============================================================= */

/* ---- status pill (shared by the list row and the detail header) ---- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill--pending { background: var(--color-grey-100); color: var(--color-grey-700); }
.status-pill--progress { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.status-pill--success { background: #E8F3EB; color: #2E7D46; }
.status-pill--danger { background: #FBEAEA; color: #B23A3A; }
/* Sits in a 1fr grid column in .order-row — without this it stretches to
   fill that column's full width instead of just wrapping its text. */
.status-pill { justify-self: start; }

/* ---- filter toolbar + collapsible date-filter panel (historial-pedidos.php) ---- */
.order-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.order-toolbar__summary { color: var(--color-grey-600); font-size: 0.95rem; }
.order-toolbar .btn svg { width: 16px; height: 16px; }
.order-toolbar__chevron { transition: transform var(--transition); }
.order-toolbar__toggle[aria-expanded="true"] .order-toolbar__chevron { transform: rotate(180deg); }

.order-filter-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 16px;
    transition: max-height var(--transition), opacity var(--transition);
}
.order-filter-panel.is-open { max-height: 260px; opacity: 1; }

.order-filter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
}
.order-filter .field { margin-bottom: 0; gap: 4px; }
.order-filter .field label { font-size: 0.78rem; }
.order-filter .field input {
    min-width: 130px;
    padding: 8px 38px 8px 10px;
    font-size: 0.88rem;
}
/* Calendar-picker trigger, sized down a bit from its default (also used
   by the Mi Clave modal's password eye-toggle) to match this compact
   filter. Sits over .field__input-wrap's padding-right:38px above. */
.order-filter .field__toggle { width: 26px; height: 26px; right: 4px; }
.order-filter .field__toggle svg { width: 15px; height: 15px; }
/* The real <input type="date"> behind the calendar button — invisible
   but still a real, sizeable element (not display:none) so
   .showPicker()/.focus() keep working across browsers. Its own value
   is never submitted (no [name]); assets/js/main.js copies a picked
   date into the visible dd/mm/aaaa text field instead. */
.field__input-wrap .date-field__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---- order list rows ---- */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}
.order-row {
    display: grid;
    grid-template-columns: 140px 110px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.order-row:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.order-row__id { font-weight: 600; color: var(--color-charcoal); }
.order-row__date { color: var(--color-grey-600); font-size: 0.92rem; }
.order-row__action {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent);
}
.order-row__action svg { width: 16px; height: 16px; transition: transform var(--transition); }
.order-row:hover .order-row__action svg { transform: translateX(3px); }

/* ---- pagination ---- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}
.pagination__link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-charcoal);
    transition: color var(--transition);
}
.pagination__link:hover { color: var(--color-accent); }
.pagination__link--disabled { color: var(--color-grey-300); pointer-events: none; }
.pagination__status { color: var(--color-grey-500); font-size: 0.88rem; }

/* ---- detail page ---- */
.historial-detail__back {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-grey-600);
    margin-bottom: 18px;
}
.historial-detail__back:hover { color: var(--color-accent); }
.historial-detail__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-grey-500);
    font-size: 0.9rem;
    margin-top: 6px;
}
.order-detail-summary { margin-bottom: 40px; }
.order-detail-summary p { margin: 0 0 8px; }
.order-detail-summary p:last-child { margin-bottom: 0; }

.order-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
.order-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
}
.order-detail-item__qty {
    flex-shrink: 0;
    background: var(--color-grey-100);
    color: var(--color-grey-700);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
}
.order-detail-item__title { font-weight: 600; color: var(--color-charcoal); margin-bottom: 4px; }
.order-detail-item__code {
    font-size: 0.82rem;
    color: var(--color-accent-dark);
    font-weight: 600;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
.order-detail-item__options { font-size: 0.88rem; color: var(--color-grey-600); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
    background: var(--color-charcoal);
    color: var(--color-grey-300);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
    gap: 48px;
    padding: 72px 24px 56px;
}

.footer__logo {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 20px;
}

.footer__address {
    font-size: 0.92rem;
    color: var(--color-grey-300);
    margin-bottom: 16px;
    max-width: 240px;
}

.footer__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-white);
    transition: color var(--transition);
}
.footer__whatsapp svg { width: 18px; height: 18px; color: #3FBF5F; }
.footer__whatsapp:hover { color: var(--color-accent); }

.footer__social {
    display: flex;
    gap: 14px;
    margin-top: 24px;
}
.footer__social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-300);
    transition: border-color var(--transition), color var(--transition);
}
.footer__social svg { width: 15px; height: 15px; }
.footer__social a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.site-footer h3 {
    color: var(--color-white);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 20px;
}

.footer__col--links ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col--links a { font-size: 0.92rem; transition: color var(--transition); }
.footer__col--links a:hover { color: var(--color-accent); }

.footer__col--newsletter p { font-size: 0.88rem; margin-bottom: 18px; color: var(--color-grey-400); }
.newsletter-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    max-height: 0;
    margin: 0;
    padding: 0 14px;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}
.newsletter-msg.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 60px;
    margin: -6px 0 14px;
    padding: 10px 14px;
}
.newsletter-msg::before {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
}
.newsletter-msg--ok {
    background: rgba(181, 101, 74, 0.22);
    border: 1px solid rgba(181, 101, 74, 0.55);
    color: var(--color-accent-light);
}
.newsletter-msg--ok::before { content: '\2713'; background: var(--color-accent); color: var(--color-white); }
.newsletter-msg--error {
    background: rgba(211, 92, 92, 0.18);
    border: 1px solid rgba(211, 92, 92, 0.5);
    color: #F0BFBF;
}
.newsletter-msg--error::before { content: '!'; background: #D35C5C; color: var(--color-white); }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-form input {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    color: var(--color-white);
    font-size: 0.9rem;
    outline: none;
}
.newsletter-form input::placeholder { color: var(--color-grey-400); }
.newsletter-form input:focus { border-color: var(--color-accent); }
.newsletter-form button {
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--color-accent-dark); }

.grecaptcha-badge { visibility: hidden; }

p.recaptcha-disclaimer {
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--color-grey-400);
    margin-top: 12px;
}
.recaptcha-disclaimer a { color: inherit; text-decoration: underline; }
.recaptcha-disclaimer a:hover { color: var(--color-white); }

.footer__seals {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.footer__seals img {
    max-height: 64px;
    width: auto;
    border-radius: var(--radius-sm);
}

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer__bottom-inner {
    padding: 22px 24px;
    font-size: 0.82rem;
    color: var(--color-grey-400);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    /* 8 quickbar icons + login/logout + 3 social icons is too much for a
       40px-tall topbar below tablet width — hidden rather than shrunk
       further; logged-in mobile users can still reach everything from
       distribuidores-home.php. */
    .topbar__quickbar { display: none; }

    .main-header__inner { height: 72px; gap: 16px; justify-content: space-between; }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        max-height: 0;
        overflow-y: auto;
        transition: max-height var(--transition);
        padding: 0;
        border-top: 1px solid var(--color-grey-200);
    }
    .main-nav.is-open { max-height: calc(100vh - 112px); padding: 12px 0 40px; }

    .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav__item { padding: 0 24px; }
    .main-nav__item.has-mega { padding: 0; }
    .main-nav__link-row { padding: 0 24px; }
    .main-nav__link { padding: 16px 0; width: 100%; }
    .main-nav__link::after { display: none; }

    .mega-toggle { display: flex; }
    .mega-toggle[aria-expanded="true"] .main-nav__caret { transform: rotate(180deg); }

    .mega-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition);
        background: var(--color-grey-50);
    }
    .has-mega.is-open .mega-menu { max-height: 900px; }
    .has-mega .mega-menu { display: block; }

    .mega-menu__inner { flex-direction: column; padding: 8px 24px 24px; min-height: 0; }
    /* Unwrap the categories column (display:contents) so each category
       button and its own panel become direct flex children of
       .mega-menu__inner and can be interleaved with `order` — a category's
       sub-items open directly below THAT category, not after both. */
    .mega-menu__categories { display: contents; }
    .mega-menu__category[data-panel-target="sillas-sillones"] { order: 1; }
    .mega-menu__panel[data-panel="sillas-sillones"] { order: 2; }
    .mega-menu__category[data-panel-target="componentes"] { order: 3; }
    .mega-menu__panel[data-panel="componentes"] { order: 4; }
    /* padding-left aligns the sub-item text with the parent category label
       (which sits 18px inside its button via the base .mega-menu__category
       padding); the links' own -14px/-12px margin nets to 0, so this is
       what does the aligning. */
    .mega-menu__panel { padding-left: 18px; padding-top: 8px; }
    .mega-menu__panel ul,
    .mega-menu__panel.mega-menu__panel--dense ul { columns: 1; }

    .nav-toggle { display: flex; }

    /* Expanded search spans the row and covers the logo, stopping just
       short of the hamburger, instead of stretching the flex row —
       .search__form leaves normal flow entirely (anchored to
       .main-header, already a positioned ancestor via its sticky rule —
       see the sticky-header note above), so the opener icon and
       hamburger never move when it opens. The mag-glass submit + X close
       live inside the pill at its right end. */
    .search__form {
        position: absolute;
        top: 50%;
        right: 74px;
        transform: translateY(-50%);
        z-index: 60;
    }
    .search.is-active .search__form {
        width: calc(100vw - 98px);
        background: var(--color-white);
        box-shadow: var(--shadow-md);
    }
    .search__form input { padding-top: 13px; padding-bottom: 13px; }

    .card-grid, .product-grid, .blog-grid, .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col { grid-template-columns: 1fr; gap: 40px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }

    .pd-tabs { top: calc(80px + var(--sticky-header-offset)); }
    .pd-section { scroll-margin-top: 140px; }
    .pd-strip__item { flex-basis: calc((100% - 20px) / 2); }
    .pd-strip--bleed .pd-strip__item { flex-basis: 36%; }
    .pd-versions { grid-template-columns: 1fr; }
    .pd-specs { grid-template-columns: 1fr; }
    .pd-downloads { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .pd-gallery-row1 { grid-template-columns: 1fr; }
    .pd-gallery-row1__big { height: auto; aspect-ratio: 4 / 3; }
    .pd-gallery-row1__side { height: auto; flex-direction: row; }
    .pd-gallery-row1__side > div { aspect-ratio: 4 / 3; }
    .pd-gallery-row2 { grid-template-columns: repeat(2, 1fr); }
    .pd-gallery { grid-template-columns: 1fr; }
    .pd-gallery__featured { width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: 4 / 3; justify-self: stretch; }
    .pd-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .pd-resources { grid-template-columns: 1fr; }

    .order-row { grid-template-columns: 1fr auto; row-gap: 10px; }
    .order-row__action { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 720px) {
    .topbar__login span,
    .topbar__logout span { display: none; }
    .topbar__logout { padding-left: 0; border-left: 0; }
    .section { padding: 64px 0; }
    .hero__inner { padding: 64px 0 56px; }
    .card-grid, .product-grid, .blog-grid { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr; padding: 56px 24px 40px; }
    .form-grid { grid-template-columns: 1fr; }
    .cta-banner { padding: 40px 28px; }
    .panel-card { padding: 32px 24px; }
    .photo-hero { height: 240px; }
    .pd-medidas__img { height: 320px; }
    .pd-medidas__img--half { height: 160px; }
    .dealer-map { height: 420px; }
    .pd-strip__item { flex-basis: 82%; }
    .pd-gallery-row2 { grid-template-columns: 1fr; }
    .pd-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .pd-gallery-modal__arrow { width: 40px; height: 40px; }
    .pd-gallery-modal__arrow--prev { left: 8px; }
    .pd-gallery-modal__arrow--next { right: 8px; }
    .two-col--centered .media,
    .two-col--centered .prose { max-width: 100%; }

    .order-filter { padding: 20px; gap: 16px; }
    .order-filter .field input { min-width: 0; width: 100%; }
    .order-filter .btn { width: 100%; }
    .order-row {
        grid-template-columns: 1fr;
        justify-items: start;
        row-gap: 10px;
    }
    .order-row__action { grid-column: 1; grid-row: auto; justify-self: start; }
    .pagination { gap: 16px; }
    .order-detail-item { flex-direction: column; gap: 10px; }
}