/* ═══════════════════════════════════════════════════
   SMARTDEAL — HOMEPAGE CSS
   Mobile-first · Angular tech aesthetic · DARK/LIGHT rhythm
   ═══════════════════════════════════════════════════ */

/* ── SHARED ── */
.sd-home__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.sd-home__section-title {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--sd-petroleum-black);
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0 0 24px;
}
.sd-home__section-title--light {
    color: var(--sd-white);
}

.sd-home__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}
.sd-home__section-header .sd-home__section-title { margin-bottom: 0; }

.sd-home__view-all {
    font-family: var(--sd-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.sd-home__view-all:hover { color: var(--sd-petroleum-black); }

/* ── SCROLL REVEAL — DESACTIVADO (incidente 12-jun-2026: HOME EN BLANCO) ──
   El patrón opacity:0 + clase agregada por JS falló en cadena: RUCSS botó la
   regla counterpart (.sd-home-visible es runtime-only, el SaaS no la ve) y
   delay_js/Rocket Loader impidieron que home.js corriera. REGLA: la visibilidad
   del contenido NUNCA puede depender de JS ni de optimizadores de CSS. */
.sd-home > section {
    opacity: 1;
    transform: none;
}
.sd-home > section.sd-home-visible,
.sd-home > .sd-hero {
    opacity: 1;
    transform: none;
}

/* ═══════════════════════════════════════
   S2: HERO
   ═══════════════════════════════════════ */
.sd-hero {
    position: relative;
    background: var(--sd-petroleum-black);
    overflow: hidden;
    opacity: 1 !important;
    transform: none !important;
}

/* Diagonal green accent */
.sd-hero__bg {
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 100%;
    background: var(--sd-vibrant-green);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 10% 100%);
    opacity: 0.07;
    pointer-events: none;
}

.sd-hero__inner {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.sd-hero__eyebrow {
    display: inline-block;
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sd-vibrant-green);
    margin-bottom: 12px;
}

.sd-hero__title {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 0.92;
    color: var(--sd-white);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.sd-hero__highlight {
    color: var(--sd-vibrant-green);
}

/* Hero trust badges */
.sd-hero__badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.sd-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(197, 255, 62, 0.08);
    border: 1px solid rgba(197, 255, 62, 0.2);
}
.sd-hero__badge svg {
    color: var(--sd-vibrant-green);
    flex-shrink: 0;
}
.sd-hero__badge span {
    font-family: var(--sd-font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}
.sd-hero__badge strong {
    color: var(--sd-vibrant-green);
    font-weight: 700;
}

.sd-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 16px 40px;
    background: var(--sd-vibrant-green);
    color: var(--sd-petroleum-black);
    font-family: var(--sd-font-subtitle);
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.sd-hero__cta:hover {
    background: #b8f032;
    transform: translateY(-2px);
    color: var(--sd-petroleum-black);
}

/* Hero gallery grid — VISIBLE en todos los breakpoints (mobile + desktop)
   Mobile (default): 3 cards horizontales compactas debajo del CTA.
   Desktop (≥768px): 2x2 grid con iPhones expandido vertical (item--tall). */
.sd-hero__gallery {
    display: block;
}

.sd-hero__gallery-grid {
    display: grid;
    /* Mobile: 3 columnas iguales, 1 fila, alto reducido */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 6px;
    min-height: 120px;
}

.sd-hero__gallery-item {
    position: relative;
    overflow: hidden;
    display: block;
}
.sd-hero__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    filter: brightness(0.7);
}
.sd-hero__gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.85);
}

/* En desktop el primer item spanea 2 filas (iPhones expandido vertical).
   En mobile NO aplica — todas las cards van en una sola fila horizontal.
   Override de span en mobile: grid-row auto. */
.sd-hero__gallery-item--tall {
    grid-row: auto;
}

.sd-hero__gallery-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Mobile: padding y font reducidos para que quepa en cards horizontales */
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    font-family: var(--sd-font-subtitle);
    font-weight: 900;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--sd-white);
    letter-spacing: 0.04em;
}
/* Desktop: label más grande */
@media (min-width: 768px) {
    .sd-hero__gallery-label {
        padding: 12px 16px;
        font-size: 14px;
        letter-spacing: 0.05em;
    }
}
.sd-hero__gallery-item:hover .sd-hero__gallery-label {
    color: var(--sd-vibrant-green);
}

/* ═══════════════════════════════════════
   S3: TRUST BAR
   ═══════════════════════════════════════ */
.sd-home-trust {
    background: var(--sd-petroleum-black);
    padding: 32px 0;
    border-bottom: 1px solid rgba(197, 255, 62, 0.1);
}

.sd-home-trust__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
}

.sd-home-trust__sep {
    display: none;
}

.sd-home-trust__badge {
    /* Grid 2 cols con ancho FIJO en la columna del número → todos los
       números terminan alineados a la misma X derecha, y el texto
       descriptivo arranca siempre en la misma X izquierda, sin importar
       si el número es "47" (2 chars) o "24HRS" (5 chars). */
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 14px;
}

.sd-home-trust__number {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1;
    color: var(--sd-vibrant-green);
    text-align: right;          /* el contenido se pega al borde derecho */
    white-space: nowrap;         /* "24HRS" no parte en 2 líneas */
}
.sd-home-trust__number small {
    font-size: 0.5em;
    opacity: 0.6;
}

.sd-home-trust__info strong {
    display: block;
    font-family: var(--sd-font-subtitle);
    font-size: 13px;
    font-weight: 700;
    color: var(--sd-white);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sd-home-trust__info span {
    display: block;
    font-family: var(--sd-font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    margin-top: 2px;
}

/* ═══════════════════════════════════════
   S4: CATEGORIES
   ═══════════════════════════════════════ */
.sd-home-cats {
    padding: 48px 0;
}

.sd-home-cats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.sd-home-cats__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    text-decoration: none;
    color: var(--sd-white);
}
.sd-home-cats__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    filter: brightness(0.65);
}
.sd-home-cats__tile:hover img {
    transform: scale(1.06);
    filter: brightness(0.8);
}

.sd-home-cats__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
}

.sd-home-cats__name {
    font-family: var(--sd-font-subtitle);
    font-weight: 900;
    font-size: 18px;
    color: var(--sd-white);
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.sd-home-cats__tile:hover .sd-home-cats__name {
    color: var(--sd-vibrant-green);
}

.sd-home-cats__from {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(18px, 3vw, 30px);
    color: var(--sd-vibrant-green);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* ═══════════════════════════════════════
   S4b: COMPRA POR MODELO (tiles dinámicos)
   Diseño "catálogo limpio" — foto de producto flota sobre el mismo BG que
   la sección (sin card/borde visible), nombre y precio DEBAJO de la foto
   en texto oscuro legible. Elimina el contraste fondo-tile-foto.
   ═══════════════════════════════════════ */
.sd-home-cats--models {
    background: #fff;
    padding: 56px 0 64px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.sd-home-cats--models .sd-home__section-title {
    margin-bottom: 4px;
}
.sd-home-cats__subtitle {
    font-family: var(--sd-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #6b6f75;
    margin: 0 0 28px;
    max-width: 540px;
}
/* Grid: 2 cols móvil, sobrescribimos en desktop */
.sd-home-cats__grid--models {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
/* Override del comportamiento del grid de categorías:
   aquí el tile NO tiene bg oscuro, NO tiene aspect-ratio forzado,
   NO tiene filter. Es un simple contenedor foto + caption. */
.sd-home-cats__grid--models .sd-home-cats__tile {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    color: inherit;
    transition: transform 0.25s ease;
}
.sd-home-cats__grid--models .sd-home-cats__tile:hover {
    transform: translateY(-2px);
    box-shadow: none;
}
/* Foto: bloque aspect-1:1 con ligero radio, sin filter ni crop. */
.sd-home-cats__grid--models .sd-home-cats__tile img {
    /* `--sd-img-scale` permite normalizar visualmente fotos de producto que
       saturan más el frame (ej. Lenovo Legion, cuya featured image llega casi
       borde-a-borde y se ve "más grande" que las MSI/HP/Acer que tienen más
       espacio en blanco alrededor del laptop). Default = 1; los outliers
       reciben un override puntual abajo. */
    --sd-img-scale: 1;
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    filter: none;
    transform: scale(var(--sd-img-scale));
    transition: transform 0.35s ease;
}
/* Outlier: la foto del Lenovo Legion en catálogo llena el cuadrado de borde a
   borde mientras el resto tiene whitespace nativo. Lo bajamos al ~85% para
   que ópticamente quede en la misma escala que las demás tarjetas. */
.sd-home-cats__grid--models .sd-home-cats__tile img[alt^="Lenovo Legion"] {
    --sd-img-scale: 0.85;
}
.sd-home-cats__grid--models .sd-home-cats__tile:hover img {
    filter: none;
    /* El hover suma un 3% sobre la escala base de cada tile (sea 1.0 o 0.85)
       — preserva la normalización del outlier sin perder el efecto hover. */
    transform: scale(calc(var(--sd-img-scale) * 1.03));
}
/* Overlay ya no es overlay — es un bloque normal debajo de la foto */
.sd-home-cats__grid--models .sd-home-cats__overlay {
    position: static;
    padding: 10px 4px 0;
    background: transparent;
}
.sd-home-cats__grid--models .sd-home-cats__name {
    font-family: var(--sd-font-subtitle);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0 0 4px;
    color: #111317;
    text-transform: none;
    text-shadow: none;
    transition: color 0.2s;
}
.sd-home-cats__grid--models .sd-home-cats__tile:hover .sd-home-cats__name {
    color: #2d7a00;
}
.sd-home-cats__grid--models .sd-home-cats__from {
    font-family: var(--sd-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    display: inline-block;
    color: #5a6169;
    text-shadow: none;
}
.sd-home-cats__grid--models .sd-home-cats__from strong,
.sd-home-cats__grid--models .sd-home-cats__from b {
    color: #111317;
    font-weight: 700;
}

/* ═══════════════════════════════════════
   COMPRA POR MODELO — card con border, badge "-X% vs nuevo",
   precio outlet, micro-CTA, hover border negro + lift sutil.
   ═══════════════════════════════════════ */

/* Quitar focus ring morado feo del browser en todas las tiles del home */
.sd-home-cats__tile:focus,
.sd-home-cats__tile:focus-visible {
    outline: none !important;
}
.sd-home-cats__tile:focus-visible {
    box-shadow: 0 0 0 2px #C5FF3E !important;
    border-radius: 14px;
}

/* ─────────────────────────────────────────
   Tile estilo card con badge de descuento
   ───────────────────────────────────────── */
.sd-home-cats--style-b {
    background: #FAFBFC;
}
.sd-home-cats__grid--style-b {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.sd-tile-b {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: none !important;
}
.sd-tile-b:hover {
    transform: translateY(-3px) !important;
    border-color: #111317 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
}
.sd-tile-b__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #111317;
    color: #C5FF3E;
    font-family: var(--sd-font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 5px 9px;
    border-radius: 6px;
    line-height: 1;
}
.sd-tile-b__frame {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
}
.sd-tile-b__frame img {
    /* `--sd-img-scale` se setea inline en el <img> desde front-page.php
       (Legion 0.72, MSI Vector/Cyborg 0.88, resto 1). Default a 1 si no
       viene seteado. Más confiable que matchear [alt^="..."] en CSS. */
    --sd-img-scale: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    transform: scale(var(--sd-img-scale)) !important;
    transition: transform 0.35s ease !important;
}
.sd-tile-b:hover .sd-tile-b__frame img {
    /* Hover suma 4% sobre la escala base de cada tile, preservando la
       normalización de outliers. */
    transform: scale(calc(var(--sd-img-scale) * 1.04)) !important;
}
.sd-tile-b__body {
    padding: 14px 16px 16px;
    border-top: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sd-tile-b__name {
    font-family: var(--sd-font-subtitle);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: #111317;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
.sd-tile-b__meta {
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 500;
    color: #6B6F75;
    line-height: 1.3;
}
.sd-tile-b__pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}
.sd-tile-b__from-label {
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 500;
    color: #6B6F75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sd-tile-b__price {
    font-family: var(--sd-font-subtitle);
    font-weight: 800;
    font-size: 19px;
    color: #111317;
    line-height: 1;
}
.sd-tile-b__cta {
    margin-top: 6px;
    font-family: var(--sd-font-body);
    font-size: 12px;
    font-weight: 700;
    color: #111317;
    transition: color 0.2s ease;
}
.sd-tile-b__cta span {
    display: inline-block;
    transition: transform 0.25s ease;
}
.sd-tile-b:hover .sd-tile-b__cta {
    color: #2d7a00;
}
.sd-tile-b:hover .sd-tile-b__cta span {
    transform: translateX(3px);
}

/* Responsive: 2 columnas en mobile/tablet para ambas variantes */
@media (max-width: 900px) {
    .sd-home-cats__grid--style-a,
    .sd-home-cats__grid--style-b {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .sd-tile-a__name,
    .sd-tile-b__name { font-size: 14px; }
    .sd-tile-b__price { font-size: 17px; }
}

/* ═══════════════════════════════════════
   S5: LOS MÁS VENDIDOS (Back Market style)
   ═══════════════════════════════════════ */
.sd-home-deals {
    background: var(--sd-bg-alt);
    padding: 48px 0;
}

.sd-home-deals__layout {
    display: flex;
    gap: 24px;
}

/* Promo image (left, desktop only) */
.sd-home-deals__promo {
    display: none;
    position: relative;
    width: 340px;
    flex-shrink: 0;
    overflow: hidden;
}
.sd-home-deals__promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}
.sd-home-deals__promo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}
.sd-home-deals__promo-tag {
    display: inline-block;
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: 28px;
    color: var(--sd-vibrant-green);
    line-height: 1;
}
.sd-home-deals__promo-overlay p {
    font-family: var(--sd-font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin: 6px 0 0;
}

/* Panel derecho */
.sd-home-deals__panel {
    flex: 1;
    min-width: 0;
}

/* Category tabs */
.sd-home-deals__tabs {
    display: flex;
    gap: 6px;
    padding-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sd-home-deals__tabs::-webkit-scrollbar { display: none; }

.sd-home-deals__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--sd-white);
    border: 2px solid var(--sd-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
    min-width: 90px;
}
.sd-home-deals__tab img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    object-position: center;
    transform: scale(1.3);
}
/* Tablet image is full-bleed, needs to be smaller */
.sd-home-deals__tab[data-cat="tablets-nav"] img {
    transform: scale(0.85);
}
.sd-home-deals__tab span {
    font-family: var(--sd-font-subtitle);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sd-text-muted);
    white-space: nowrap;
}
/* Hover sólo para tabs NO activas — para no pisar el borde negro de la activa */
.sd-home-deals__tab:not(.sd-home-deals__tab--active):hover {
    border-color: var(--sd-text-muted);
    background: #FAFAFA;
}
.sd-home-deals__tab:not(.sd-home-deals__tab--active):hover span {
    color: var(--sd-petroleum-black);
}
.sd-home-deals__tab--active,
.sd-home-deals__tab--active:hover {
    border-color: var(--sd-petroleum-black) !important;
    background: var(--sd-white) !important;
    cursor: default;
}
.sd-home-deals__tab--active span,
.sd-home-deals__tab--active:hover span {
    color: var(--sd-petroleum-black);
}

/* Product panels */
.sd-home-deals__products {
    display: none;
    position: relative;
}
.sd-home-deals__products--active {
    display: block;
}

/* Horizontal scroll container — usa la card estándar .sd-plp-card */
.sd-home-deals__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
    align-items: stretch;
}
.sd-home-deals__scroll::-webkit-scrollbar { display: none; }

/* Fijar ancho de la card estándar dentro del scroll horizontal */
.sd-home-deals__scroll .sd-plp-card {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
    scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════════════════
   DEFENSIVE OVERRIDES — S5 "Los más vendidos" reusa .sd-plp-card del
   PLP. El parent theme (Divi/Elementor/ShopEngine) inyecta reglas con
   alta especificidad/orden sobre h3, a, img y .price que rompen la
   card en home (texto gigante 1-palabra-por-línea, precio oculto,
   chips sin estilo). Estos overrides blindan S5 sin tocar PLP ni el
   render de sd_plp_render_card().
   ═══════════════════════════════════════════════════════════════════ */

/* Título — forzar 13px / line-clamp 2 aunque el theme padre imponga h3 */
.sd-home-deals__scroll .sd-plp-card .sd-plp-card__name,
.sd-home-deals__scroll h3.sd-plp-card__name {
    font-family: var(--sd-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--sd-petroleum-black) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Link de la card — evitar que el theme padre agregue underline/color raro */
.sd-home-deals__scroll a.sd-plp-card,
.sd-home-deals__scroll a.sd-plp-card:hover,
.sd-home-deals__scroll a.sd-plp-card:focus {
    text-decoration: none !important;
    color: var(--sd-text) !important;
    box-shadow: none !important;
}

/* Imagen — evitar que ShopEngine inyecte max-width:none o filtros */
.sd-home-deals__scroll .sd-plp-card__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Precio — forzar typo del theme, no del padre */
.sd-home-deals__scroll .sd-plp-card__price {
    font-family: var(--sd-font-headline) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--sd-petroleum-black) !important;
    text-transform: uppercase !important;
}

/* MercadoPago badge — estaba scoped a .sd-plp, en home no aplicaba */
.sd-home-deals__scroll .sd-mp-badge-sm {
    background: #009ee3;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: .1px;
    white-space: nowrap;
}

/* Specs chips — resetear por si el padre pisa */
.sd-home-deals__scroll .sd-plp-card__spec {
    font-size: 10px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Body de la card — flex-direction correcto */
.sd-home-deals__scroll .sd-plp-card__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Scroll arrows */
.sd-home-deals__arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--sd-petroleum-black);
    background: var(--sd-white);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0;
}
.sd-home-deals__arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--sd-petroleum-black);
    flex-shrink: 0;
}
.sd-home-deals__arrow:hover {
    background: var(--sd-petroleum-black);
    border-color: var(--sd-petroleum-black);
}
.sd-home-deals__arrow:hover svg {
    stroke: var(--sd-white);
}
/* Posición INSIDE del viewport (no fuera con -22px) para evitar clipping
   por parents con overflow:hidden y garantizar visibilidad de la flecha. */
.sd-home-deals__arrow--left { left: 8px; }
.sd-home-deals__arrow--right { right: 8px; }

/* View all link */
.sd-home-deals__view-all {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--sd-font-subtitle);
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-petroleum-black);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}
.sd-home-deals__view-all:hover {
    /* Fondo claro → usa verde contrast-safe (AA) */
    color: var(--sd-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════
   S6: WHY SMARTDEAL (Journey + Dashboard)
   ═══════════════════════════════════════ */
.sd-home-why {
    background: var(--sd-petroleum-black);
    padding: 64px 0 48px;
}

.sd-home-why__header { margin-bottom: 40px; }
.sd-home-why__label {
    display: inline-block;
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sd-vibrant-green);
    margin-bottom: 12px;
    border: 1px solid rgba(197, 255, 62, 0.3);
    padding: 4px 12px;
}

/* ── Animated Counters ── */
.sd-home-why__counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
    text-align: center;
}
.sd-home-why__counter {
    padding: 24px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.sd-home-why__counter-num {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--sd-vibrant-green);
    line-height: 1;
}
.sd-home-why__counter-plus {
    font-family: var(--sd-font-headline);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--sd-vibrant-green);
    opacity: 0.6;
}
.sd-home-why__counter svg { vertical-align: middle; margin-left: 4px; }
.sd-home-why__counter--link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.sd-home-why__counter--link:hover {
    border-color: rgba(197, 255, 62, 0.3);
}
.sd-home-why__counter-label {
    display: block;
    font-family: var(--sd-font-subtitle);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
}

/* ═══════════════════════════════════════
   INSPECTION SECTION (white, independent)
   ═══════════════════════════════════════ */
.sd-home-inspect {
    background: var(--sd-white);
    padding: 64px 0;
}

.sd-inspect__grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Each card: checks + image side by side */
.sd-inspect__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.sd-inspect__img {
    position: relative;
    text-align: center;
    flex-shrink: 0;
}
.sd-inspect__img img {
    max-height: 350px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.sd-inspect__device-name {
    display: block;
    order: -1;
    margin-bottom: 16px;
    font-family: var(--sd-font-subtitle);
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-petroleum-black);
}

/* Checklist */
.sd-inspect__checks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sd-inspect__check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-family: var(--sd-font-body);
    font-size: 14px;
    color: var(--sd-text);
    border-bottom: 1px solid var(--sd-border);
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.sd-inspect__card--reverse .sd-inspect__check {
    transform: translateX(12px);
}

/* Animated reveal */
.sd-inspect__card.sd-xray-visible .sd-inspect__check {
    opacity: 1;
    transform: none;
}
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="0"] { transition-delay: 0.1s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="1"] { transition-delay: 0.2s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="2"] { transition-delay: 0.3s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="3"] { transition-delay: 0.4s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="4"] { transition-delay: 0.5s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="5"] { transition-delay: 0.6s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="6"] { transition-delay: 0.7s; }
.sd-inspect__card.sd-xray-visible .sd-inspect__check[data-delay="7"] { transition-delay: 0.8s; }

.sd-inspect__dot {
    width: 10px;
    height: 10px;
    border: 2px solid var(--sd-vibrant-green);
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
    transition: background 0.3s;
}
.sd-inspect__card.sd-xray-visible .sd-inspect__dot {
    background: var(--sd-vibrant-green);
}

/* ── Guarantee Block ── */
.sd-home-why__guarantee {
    background: var(--sd-vibrant-green);
    padding: 32px 24px;
    margin-bottom: 32px;
}
.sd-home-why__guarantee-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sd-home-why__guarantee-badge { flex-shrink: 0; display: none; }
.sd-home-why__guarantee-text h3 {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--sd-petroleum-black);
    margin: 0 0 8px;
}
.sd-home-why__guarantee-text p {
    font-family: var(--sd-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(26,26,26,0.75);
    margin: 0;
}
.sd-home-why__guarantee-text strong { color: var(--sd-petroleum-black); }

/* CTA */
.sd-home-why__cta-wrap { text-align: center; }
.sd-home-why__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: var(--sd-vibrant-green);
    color: var(--sd-petroleum-black);
    font-family: var(--sd-font-subtitle);
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.sd-home-why__cta:hover {
    background: #b8f032;
    transform: translateY(-2px);
    color: var(--sd-petroleum-black);
}

/* ═══════════════════════════════════════
   S7: REVIEWS
   ═══════════════════════════════════════ */
.sd-home-reviews {
    padding: 56px 0;
}

.sd-home-reviews__header {
    text-align: center;
    margin-bottom: 36px;
}

/* Google badge */
.sd-home-reviews__google-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--sd-bg-alt);
    border: 1px solid var(--sd-border);
    text-decoration: none;
    color: var(--sd-text);
    margin-bottom: 20px;
    transition: border-color 0.2s;
}
.sd-home-reviews__google-badge:hover { border-color: var(--sd-text-muted); }
.sd-home-reviews__google-stars { display: flex; gap: 2px; margin-bottom: 2px; }
.sd-home-reviews__google-badge span {
    font-family: var(--sd-font-body);
    font-size: 12px;
    color: var(--sd-text-muted);
}

/* Slider con flechas + dots — fallback nativo a scroll-snap horizontal si JS no carga */
.sd-home-reviews__slider {
    position: relative;
    margin: 0 -8px; /* compensar padding interno del track para hit area de flechas */
}

.sd-home-reviews__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* `proximity` (no `mandatory`): permite que scrollTo() programático llegue a
       posiciones intermedias sin que el browser arrastre el scroll de vuelta al
       snap point más cercano al origen. Sin `scroll-behavior: smooth` en CSS
       porque interfiere con el control programático del slider — el behavior
       smooth se aplica vía JS en scrollTo({behavior:'smooth'}). */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 8px 20px;
}
.sd-home-reviews__track::-webkit-scrollbar { display: none; }

/* Compatibilidad con la clase legacy `__carousel` por si quedan caches/PDP/etc */
.sd-home-reviews__carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0 20px;
}
.sd-home-reviews__carousel::-webkit-scrollbar { display: none; }

.sd-home-reviews__card {
    flex-shrink: 0;
    width: 320px;
    scroll-snap-align: start;
    background: var(--sd-bg-alt);
    border: 1px solid var(--sd-border);
    overflow: hidden;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
}
.sd-home-reviews__card:hover { border-color: var(--sd-vibrant-green); }

/* Flechas de navegación */
.sd-home-reviews__nav {
    position: absolute;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--sd-border);
    color: var(--sd-petroleum-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: background-color 0.15s, color 0.15s, transform 0.15s, opacity 0.2s;
    padding: 0;
}
.sd-home-reviews__nav:hover {
    background: var(--sd-vibrant-green);
    color: #fff;
    border-color: var(--sd-vibrant-green);
    transform: translateY(-50%) scale(1.05);
}
.sd-home-reviews__nav:focus-visible {
    outline: 2px solid var(--sd-vibrant-green);
    outline-offset: 3px;
}
.sd-home-reviews__nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.sd-home-reviews__nav--prev { left: -8px; }
.sd-home-reviews__nav--next { right: -8px; }

/* Dots indicadores */
.sd-home-reviews__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    padding: 0 8px;
}
.sd-home-reviews__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s, width 0.2s;
}
.sd-home-reviews__dot:hover { background: #9ca3af; }
.sd-home-reviews__dot.is-active {
    background: var(--sd-vibrant-green);
    width: 22px;
    border-radius: 4px;
}
.sd-home-reviews__dot:focus-visible {
    outline: 2px solid var(--sd-vibrant-green);
    outline-offset: 2px;
}

/* En mobile, ocultar flechas — el scroll touch ya es natural */
@media (max-width: 767px) {
    .sd-home-reviews__nav { display: none; }
}

.sd-home-reviews__card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sd-home-reviews__card-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}

.sd-home-reviews__quote {
    font-family: var(--sd-font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--sd-text);
    margin: 0 0 10px;
    flex: 1;
    /* Limita altura visual para uniformidad de tarjetas */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-home-reviews__author {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sd-home-reviews__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--sd-border, #e5e7eb);
    background: #f3f4f6;
}
.sd-home-reviews__author strong {
    font-family: var(--sd-font-subtitle);
    font-size: 12px;
    color: var(--sd-petroleum-black);
}
.sd-home-reviews__time {
    font-family: var(--sd-font-body);
    font-size: 10px;
    color: var(--sd-text-faint);
    margin-left: auto;
}

.sd-home-reviews__cta {
    text-align: center;
    margin-top: 28px;
}
.sd-home-reviews__cta a {
    font-family: var(--sd-font-subtitle);
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-petroleum-black);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}
.sd-home-reviews__cta a:hover { color: var(--sd-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════
   S8: PROCESS
   ═══════════════════════════════════════ */
.sd-home-process {
    background: var(--sd-bg-alt);
    padding: 56px 0;
}

.sd-home-process__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sd-home-process__step {
    text-align: center;
    padding: 24px 16px;
    position: relative;
}

.sd-home-process__num {
    display: block;
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3rem);
    /* Fondo claro → verde contrast-safe; sin opacity para garantizar legibilidad */
    color: var(--sd-accent-dark);
    line-height: 1;
    margin-bottom: 12px;
}

.sd-home-process__step svg {
    color: var(--sd-text-muted);
    margin-bottom: 12px;
}

.sd-home-process__step h3 {
    font-family: var(--sd-font-subtitle);
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--sd-petroleum-black);
    margin: 0 0 8px;
    letter-spacing: 0.03em;
}

.sd-home-process__step p {
    font-family: var(--sd-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sd-text-muted);
    margin: 0;
    max-width: 220px;
    margin: 0 auto;
}

.sd-home-process__connector {
    width: 2px;
    height: 24px;
    background: var(--sd-vibrant-green);
    opacity: 0.3;
    margin: 0 auto;
}

/* ═══════════════════════════════════════
   S9: CONDITIONS
   ═══════════════════════════════════════ */
.sd-home-conditions {
    padding: 56px 0;
}

/* Dark background for dramatic contrast */
.sd-home-conditions {
    background: var(--sd-petroleum-black) !important;
    padding: 64px 0 !important;
}

.sd-home-conditions__header { text-align: center; margin-bottom: 40px; }
.sd-home-conditions__intro {
    font-family: var(--sd-font-body);
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    margin: 8px 0 0;
}
.sd-home-conditions__intro strong { color: var(--sd-vibrant-green); }

.sd-home-conditions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
}

/* ── Condition Card (dark, glowing) ── */
.sd-cond-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 28px 24px;
    text-align: center;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}
.sd-cond-card:hover {
    border-color: var(--cond-accent);
    transform: translateY(-4px);
}

/* Subtle glow behind card on hover */
.sd-cond-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--cond-accent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 0;
}
.sd-cond-card:hover .sd-cond-card__glow { opacity: 0.04; }

/* Featured card (Excelente) */
.sd-cond-card--featured {
    border-color: var(--cond-accent);
    background: rgba(197, 255, 62, 0.04);
}
.sd-cond-card--featured .sd-cond-card__glow { opacity: 0.03; }

.sd-cond-card__popular {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--sd-vibrant-green);
    color: var(--sd-petroleum-black);
    font-family: var(--sd-font-subtitle);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px;
    text-align: center;
}
.sd-cond-card--featured { padding-top: 48px; }

.sd-cond-card__save {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--cond-accent);
    color: var(--sd-white);
    font-family: var(--sd-font-subtitle);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px;
    text-align: center;
}
.sd-cond-card:has(.sd-cond-card__save) { padding-top: 48px; }

.sd-cond-card__top { position: relative; z-index: 1; margin-bottom: 20px; }
.sd-cond-card__grade {
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--sd-white);
    letter-spacing: 0.02em;
}

/* Battery ring */
.sd-cond-card__visual {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.sd-cond-card__battery-ring {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto;
}
.sd-cond-card__battery-ring svg {
    width: 100%;
    height: 100%;
}
.sd-cond-card__battery-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sd-font-headline);
    text-transform: uppercase;
    font-size: 28px;
    color: var(--cond-accent);
}
.sd-cond-card__battery-label {
    display: block;
    margin-top: 8px;
    font-family: var(--sd-font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Specs list */
.sd-cond-card__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
    position: relative;
    z-index: 1;
}
.sd-cond-card__specs li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-family: var(--sd-font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sd-cond-card__specs li:last-child { border-bottom: none; }
.sd-cond-card__specs svg { flex-shrink: 0; }

.sd-cond-card__quote {
    font-family: var(--sd-font-body);
    font-size: 13px;
    font-style: italic;
    color: var(--cond-accent);
    margin: 0;
    position: relative;
    z-index: 1;
    opacity: 0.8;
}

/* ── Shared baseline ── */
.sd-home-conditions__baseline {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
}
.sd-home-conditions__baseline-title {
    display: block;
    font-family: var(--sd-font-subtitle);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 16px;
}
.sd-home-conditions__baseline-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}
.sd-home-conditions__baseline-items span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sd-font-body);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════
   S10: BRANDS
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   GEO INTRO PARAGRAPH
   ═══════════════════════════════════════ */
/* GEO intro — eliminado visualmente, contenido se movió al FAQ y schema */
.sd-home-geo { display: none; }

/* ═══════════════════════════════════════
   FAQ SECTION — dark, épico
   ═══════════════════════════════════════ */
.sd-home-faq {
    padding: 64px 0;
    background: var(--sd-white);
}
.sd-home-faq .sd-home__section-title { text-align: center; color: var(--sd-petroleum-black); }
.sd-home-faq__list {
    max-width: 800px;
    margin: 32px auto 0;
}
.sd-home-faq__item {
    border: 1px solid var(--sd-border);
    margin-bottom: 8px;
    background: var(--sd-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-home-faq__item:hover {
    border-color: var(--sd-petroleum-black);
}
.sd-home-faq__item[open] {
    border-color: var(--sd-petroleum-black);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sd-home-faq__question {
    padding: 20px 24px;
    font-family: var(--sd-font-subtitle);
    font-weight: 700;
    font-size: 15px;
    color: var(--sd-petroleum-black);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.sd-home-faq__question::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--sd-petroleum-black);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.sd-home-faq__question::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cline x1='6' y1='2' x2='6' y2='10'/%3E%3Cline x1='2' y1='6' x2='10' y2='6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
details[open] .sd-home-faq__question::after {
    background: var(--sd-vibrant-green);
    border-color: var(--sd-vibrant-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cline x1='2' y1='6' x2='10' y2='6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.sd-home-faq__question::-webkit-details-marker { display: none; }
.sd-home-faq__answer {
    padding: 0 24px 20px;
}
.sd-home-faq__answer p {
    font-family: var(--sd-font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--sd-text-muted);
    margin: 0;
    border-left: 2px solid var(--sd-petroleum-black);
    padding-left: 16px;
}

/* ═══════════════════════════════════════
   BRANDS MARQUEE — infinite scroll
   ═══════════════════════════════════════ */
.sd-home-brands {
    background: var(--sd-bg-alt);
    padding: 32px 0;
    overflow: hidden;
}

.sd-home-brands__marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.sd-home-brands__track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    padding-right: 60px;
    animation: sdMarquee 30s linear infinite;
}

@keyframes sdMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

.sd-home-brands__track:hover {
    animation-play-state: paused;
}

.sd-home-brands__item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* FIX 1-jun-2026: bajar de 0.25 → 0.6 (era invisible). Diego dijo
       "gris invisible" en la auditoría. Sigue siendo wash-out leve para
       no competir con el contenido pero ahora legible. */
    opacity: 0.6;
    transition: opacity 0.3s;
}
.sd-home-brands__item:hover { opacity: 1; }
.sd-home-brands__item img {
    height: 28px;
    width: auto;
    object-fit: contain;
}
.sd-home-brands__item span {
    font-family: var(--sd-font-subtitle);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sd-text);
    white-space: nowrap;
}

/* ═══════════════════════════════════════
   S11: EMAIL CAPTURE
   ═══════════════════════════════════════ */
.sd-home-capture {
    background: var(--sd-petroleum-black);
    padding: 48px 0;
}

.sd-home-capture__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sd-home-capture__text p {
    font-family: var(--sd-font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

.sd-home-capture__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-home-capture__form input[type="email"] {
    flex: 1;
    padding: 14px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--sd-white);
    font-family: var(--sd-font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.sd-home-capture__form input[type="email"]::placeholder {
    color: rgba(255,255,255,0.35);
}
.sd-home-capture__form input[type="email"]:focus {
    border-color: var(--sd-vibrant-green);
}

.sd-home-capture__form button {
    padding: 14px 28px;
    background: var(--sd-vibrant-green);
    color: var(--sd-petroleum-black);
    border: none;
    font-family: var(--sd-font-subtitle);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s;
}
.sd-home-capture__form button:hover {
    background: #b8f032;
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (768px+)
   ═══════════════════════════════════════ */
@media (min-width: 768px) {
    .sd-home__container { padding: 0 24px; }

    /* Hero: 2 columns */
    .sd-hero__inner {
        flex-direction: row;
        align-items: stretch;
        min-height: 480px;
        padding: 56px 24px;
    }
    .sd-hero__text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .sd-hero__gallery { display: block; flex: 1; }
    /* Desktop: gallery vuelve a 2x2 con iPhones spanning 2 rows */
    .sd-hero__gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        min-height: 380px;
    }
    .sd-hero__gallery-item--tall { grid-row: 1 / 3; }
    .sd-hero__badges { flex-direction: row; flex-wrap: wrap; gap: 8px; }
}

/* Mobile MEDIO (480-767px) — aprovechar el espacio verde derecho:
   texto izq + gallery vertical (3 cards en 1 columna) a la derecha. */
@media (min-width: 480px) and (max-width: 767px) {
    .sd-hero__inner {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .sd-hero__text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .sd-hero__gallery {
        flex: 0 0 32%;
        max-width: 32%;
    }
    .sd-hero__gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        min-height: 320px;
        gap: 6px;
    }
    .sd-hero__gallery-item--tall { grid-row: auto; }
    .sd-hero__gallery-label {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* Continuación del @media (min-width: 768px) — reglas de Trust, Categories,
   Deals, Why, Reviews, Conditions, Capture, etc. para desktop. */
@media (min-width: 768px) {
    /* Trust: horizontal with separators */
    .sd-home-trust__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    .sd-home-trust__badge { flex: 1; justify-content: center; }
    .sd-home-trust__sep {
        display: block;
        width: 1px;
        height: 48px;
        background: rgba(197, 255, 62, 0.15);
        flex-shrink: 0;
    }

    /* Categories: 4 columns */
    .sd-home-cats__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    /* Modelos: 4 cols × 4 filas en desktop */
    .sd-home-cats__grid--models {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px 20px;
    }
    .sd-home-cats__grid--models .sd-home-cats__name { font-size: 15px; }
    .sd-home-cats__grid--models .sd-home-cats__from { font-size: 14px; }

    /* Deals: show promo + arrows on desktop */
    .sd-home-deals__promo { display: block; }
    .sd-home-deals__arrow { display: flex; }
    .sd-home-deals__scroll .sd-plp-card { flex-basis: 280px; width: 280px; max-width: 280px; }

    /* Why: counters 4 cols, blueprint side by side, guarantee badge */
    .sd-home-why__counters { grid-template-columns: repeat(4, 1fr); }
    /* Inspect: side by side, image centered with checks */
    .sd-inspect__card { flex-direction: row; gap: 40px; align-items: center; }
    .sd-inspect__card--reverse { flex-direction: row; }
    .sd-inspect__img { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .sd-inspect__img img { max-height: 550px; width: auto; max-width: 100%; object-fit: contain; }
    .sd-inspect__checks { flex: 1; }
    .sd-home-why__guarantee-badge { display: block; }

    /* Reviews: wider cards on desktop */
    .sd-home-reviews__card { width: 340px; }

    /* Process: horizontal */
    .sd-home-process__steps {
        flex-direction: row;
        align-items: flex-start;
    }
    .sd-home-process__step { flex: 1; }
    .sd-home-process__connector {
        width: 40px;
        height: 2px;
        margin: 40px 0 0;
        align-self: flex-start;
    }

    /* Conditions: 3 columns */
    .sd-home-conditions__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        align-items: start;
    }
    .sd-cond-card--featured { margin-top: -8px; margin-bottom: -8px; padding-top: 56px; padding-bottom: 36px; }

    /* Capture: horizontal */
    .sd-home-capture__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .sd-home-capture__form {
        flex-direction: row;
        min-width: 400px;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE — DESKTOP (1024px+)
   ═══════════════════════════════════════ */
@media (min-width: 1024px) {
    .sd-hero__inner {
        min-height: 520px;
        padding: 64px 24px;
    }
    .sd-hero__gallery-grid { min-height: 440px; gap: 8px; }

    /* Why: larger table font */
    .sd-home-why__table { font-size: 14px; }

    /* Brands: more spacing */
    .sd-home-brands__strip { gap: 24px 48px; }
    .sd-home-brands__logo { font-size: 20px; }
}

/* ═══════════════════════════════════════
   HOMEPAGE — hide default Storefront content
   ═══════════════════════════════════════ */
body.sd-homepage .site-main > .woocommerce,
body.sd-homepage .site-main > .storefront-sorting,
body.sd-homepage .site-main > .woocommerce-products-header,
body.sd-homepage .site-main > article,
body.sd-homepage .page-header,
body.sd-homepage .entry-header,
body.sd-homepage .storefront-breadcrumb,
body.sd-homepage #primary > .hentry {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   CARRUSEL — Recién Vendidos (S3.6 de front-page.php)
   ════════════════════════════════════════════════════════════ */
.sd-rvc{
    padding:32px 0 40px;
    background:#fff;
}
.sd-rvc__head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;margin:0 0 22px;flex-wrap:wrap;
}
.sd-rvc__eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border-radius:99px;
    background:rgba(22,163,74,.10);
    border:1px solid rgba(22,163,74,.30);
    color:#16a34a;
    font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:8px;
}
.sd-rvc__pulse{
    width:7px;height:7px;border-radius:50%;background:#16a34a;
    box-shadow:0 0 0 0 rgba(22,163,74,.5);
    animation:sdRvcPulse 2s infinite;
}
@keyframes sdRvcPulse{
    0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}
    70%{box-shadow:0 0 0 7px rgba(22,163,74,0);}
    100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}
.sd-rvc__title{margin:0;}
.sd-rvc__see-all{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:600;
    color:#0f172a;text-decoration:none;
    padding:8px 16px;border:1px solid #e5e7eb;border-radius:99px;
    transition:all .15s ease;white-space:nowrap;
}
.sd-rvc__see-all:hover{
    background:#0f172a;color:#fff;border-color:#0f172a;
    transform:translateX(2px);
}
.sd-rvc__viewport{
    position:relative;
}
.sd-rvc__track{
    list-style:none;margin:0;padding:4px 0 14px;
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}
.sd-rvc__track::-webkit-scrollbar{height:6px;}
.sd-rvc__track::-webkit-scrollbar-thumb{
    background:#e5e7eb;border-radius:3px;
}
.sd-rvc__card{
    flex:0 0 220px;scroll-snap-align:start;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden;
    transition:all .18s ease;
}
.sd-rvc__card:hover{
    border-color:#0f172a;
    box-shadow:0 6px 18px rgba(15,23,42,.10);
    transform:translateY(-2px);
}
.sd-rvc__link{
    display:block;text-decoration:none;color:inherit;
}
.sd-rvc__media{
    position:relative;
    aspect-ratio:1/1;
    background:#f5f7f9;
    border-bottom:1px solid #e5e7eb;
}
.sd-rvc__thumb{
    width:100%;height:100%;object-fit:contain;
    display:block;padding:14px;
    box-sizing:border-box;
}
.sd-rvc__sold-pill{
    position:absolute;top:8px;left:8px;
    background:#C5FF3E;color:#101418;
    font-size:10px;font-weight:700;letter-spacing:.06em;
    padding:3px 8px;border-radius:99px;text-transform:uppercase;
}
.sd-rvc__oos-pill{
    position:absolute;bottom:8px;right:8px;
    background:#6b7280;color:#fff;
    font-size:10px;font-weight:700;letter-spacing:.06em;
    padding:3px 8px;border-radius:99px;text-transform:uppercase;
}
.sd-rvc__stock-pill{
    position:absolute;bottom:8px;right:8px;
    background:#fef2f2;color:#b91c1c;
    border:1px solid #fecaca;
    font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:99px;
}
.sd-rvc.is-oos .sd-rvc__thumb,
.sd-rvc__card.is-oos .sd-rvc__thumb{
    filter:grayscale(40%) opacity(.85);
}
.sd-rvc__body{padding:12px 14px 14px;}
.sd-rvc__estado{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 8px;border-radius:99px;
    font-size:10px;font-weight:600;
    margin-bottom:8px;border:1px solid;
    line-height:1.2;
}
.sd-rvc__estado--premium{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.sd-rvc__estado--excelente{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.sd-rvc__estado--muybueno{background:#d1fae5;color:#065f46;border-color:#a7f3d0;}
.sd-rvc__estado--nuevo-sellado{background:#dbeafe;color:#1e40af;border-color:#bfdbfe;}
.sd-rvc__estado--open-box{background:#e9d5ff;color:#6b21a8;border-color:#d8b4fe;}
.sd-rvc__name{
    font-size:13px;font-weight:600;
    color:#101418;line-height:1.3;
    margin:0 0 8px;
    display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    min-height:34px;
}
.sd-rvc__price{
    font-size:17px;font-weight:800;color:#101418;
    letter-spacing:-.01em;margin-bottom:6px;
}
.sd-rvc__price--oos{
    text-decoration:line-through;
    color:#9ca3af;font-weight:600;
}
.sd-rvc__ship{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;color:#6b7280;line-height:1.3;
}

/* ── Flechas navegación slider ──
   Posición DENTRO del viewport (no fuera con left/right negativos) para que
   no sean clipeadas por parents con overflow:hidden y para que la flecha
   siempre sea visible al usuario. Overlay subtle sobre primera/última card
   estilo Back Market/Amazon. */
.sd-rvc__arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;border-radius:50%;
    background:#fff;color:#0f172a;
    border:1px solid #d1d5db;
    box-shadow:0 4px 14px rgba(15,23,42,.18);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    z-index:3;
    transition:opacity .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    -webkit-appearance:none;appearance:none;
    padding:0;
}
.sd-rvc__arrow svg{
    width:20px;height:20px;
    color:inherit;
    display:block;
    flex:0 0 auto;
    pointer-events:none;
}
.sd-rvc__arrow svg polyline{ stroke:currentColor; }
.sd-rvc__arrow:hover{
    background:#0f172a;color:#fff;border-color:#0f172a;
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 6px 18px rgba(15,23,42,.28);
}
.sd-rvc__arrow:focus-visible{
    outline:2px solid #0f172a;outline-offset:2px;
}
.sd-rvc__arrow--prev{ left:8px; }
.sd-rvc__arrow--next{ right:8px; }
.sd-rvc__arrow:disabled,
.sd-rvc__arrow.is-disabled{
    opacity:0;pointer-events:none;
}

@media (max-width:768px){
    .sd-rvc{padding:24px 0 32px;}
    .sd-rvc__card{flex:0 0 170px;}
    .sd-rvc__name{font-size:12px;}
    .sd-rvc__price{font-size:15px;}
    /* En mobile el scroll por touch es nativo; ocultamos las flechas. */
    .sd-rvc__arrow{display:none;}
}

/* ════════════════════════════════════════════════════════════
   Variante MÁS VENDIDOS (.sd-mv) — reusa .sd-rvc__* base
   Solo cambia: eyebrow naranja/fuego + pill ranking en card
   ════════════════════════════════════════════════════════════ */
.sd-mv .sd-rvc__eyebrow,
.sd-mv__eyebrow{
    background:rgba(249,115,22,.10);
    border-color:rgba(249,115,22,.30);
    color:#c2410c;
    gap:6px;
}
.sd-mv__fire{
    display:inline-block;font-size:13px;line-height:1;
    filter:drop-shadow(0 0 3px rgba(249,115,22,.4));
}
/* Pill ranking #N 🔥 — reemplaza al "Vendido" */
.sd-mv__rank-pill{
    position:absolute;top:8px;left:8px;
    background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);
    color:#fff;
    font-size:11px;font-weight:800;letter-spacing:.02em;
    padding:4px 9px;border-radius:99px;
    box-shadow:0 2px 6px rgba(249,115,22,.35);
    display:inline-flex;align-items:center;gap:3px;
    line-height:1;
}