/* ============================================================
   Homepage — Hero, Features, Catálogo
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero__bg {
    position: absolute;
    inset: 0;
    /* Color café oscuro de base: se ve apenas carga, en vez del gris del navegador.
       Capa 1 = imagen real (var, definida inline); capa 2 = LQIP borroso embebido
       que aparece al instante con el CSS y queda debajo hasta que entra la nítida. */
    background-color: #1a1310;
    /* Fallback "none": si --hero-img no está definida (p. ej. PHP cacheado),
       la capa 1 queda vacía y el LQIP de abajo igual se muestra. */
    background-image: var(--hero-img, none), url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAyADIAAD/4QCARXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAADIAAAAAQAAAMgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAACCgAwAEAAAAAQAAABUAAAAA/8AAEQgAFQAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMADAwMDAwMFAwMFB0UFBQdJx0dHR0nMScnJycnMTsxMTExMTE7Ozs7Ozs7O0dHR0dHR1NTU1NTXV1dXV1dXV1dXf/bAEMBDg8PGBYYKBYWKGFCNkJhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYf/dAAQAAv/aAAwDAQACEQMRAD8A4gQyMCwO4DvS+S+0Nnrn8hV23VPs8obAPGFPelAxBtwgG0nrzmsrl2Ixp90F37Tj6GmtA6jk4+ua39NurWCVnnkPVc9cHHtVnWNQs7uErBz04x71OpR//9DzwE460isc9aUdKavWpEaEI3cHsKtMu1Q559qr23U/Srcv+qH1qHuaLY//2Q==');
    background-size: cover, cover;
    background-position: center 40%, center 40%;
    background-repeat: no-repeat, no-repeat;
    transform: scale(1.03); /* slight scale for parallax headroom */
}

.hero__overlay {
    position: absolute;
    inset: 0;
    /* Solo un oscurecido en el centro para la legibilidad del texto; a izquierda
       y derecha la imagen queda 100% visible (transparente). */
    background: linear-gradient(90deg, transparent 0%, rgba(26,19,16,0.62) 50%, transparent 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    /* Push text below the transparent fixed navbar (70px) + breathing room */
    padding-top: calc(70px + var(--spacing-xl));
}

.hero__eyebrow {
    color: var(--color-dorado);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 10px;
    /* Acerca el eyebrow al título (el gap del contenedor es spacing-lg) */
    margin-bottom: calc(-1 * var(--spacing-md));
}

.hero__title {
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero__title-line1 {
    display: block;
    color: #ffffff;
}

.hero__title-line2 {
    display: block;
    color: var(--color-dorado);
}

.hero__subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.4;
    margin-top: calc(-1 * var(--spacing-sm));
}

.hero__description {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-base);
    line-height: 1.7;
    max-width: 500px;
    margin-inline: auto;
    text-shadow: 0 0 10px #000;
}

.hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hero__chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px #000;
}

.hero__chip:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    margin-left: 12px;
    box-shadow: 0 0 6px #000;
}

.hero__chip svg {
    width: 14px;
    height: 14px;
    margin-right: 7px;
    color: var(--color-dorado);
    flex-shrink: 0;
}

.hero__cta {
    margin: auto;
    margin-top: 40px;
}

/* ---- CTA "gooey": relleno con blobs dorados al hover ----
   Botón con borde dorado y fondo transparente; al hover, 3 blobs dorados suben
   y se fusionan (filtro #sc-goo) hasta rellenar la píldora. El texto pasa a
   oscuro para contrastar sobre el dorado. Adaptado de uiverse.io/dpaulos6. */
.hero__cta--gooey {
    position: relative;
    z-index: 0;
    background: transparent;
    color: var(--color-dorado);
    border: 2px solid var(--color-dorado);
    transition: color 400ms ease, transform var(--transition-fast);
}

.hero__cta--gooey:hover,
.hero__cta--gooey:focus-visible {
    color: var(--color-oscuro);
    background: transparent;
}

/* El label va por encima de los blobs */
.hero__cta-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hero__cta-blobs {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: var(--radius-pill);
    filter: url(#sc-goo);
}

.hero__cta-blobs span {
    position: absolute;
    width: 34%;
    height: 100%;
    background: var(--color-dorado);
    border-radius: 100%;
    transform: scale(1.4) translateY(125%) translateZ(0);
    transition: transform 700ms ease;
}

.hero__cta-blobs span:nth-child(1) { left: -5%; }
.hero__cta-blobs span:nth-child(2) { left: 30%; transition-delay: 60ms; }
.hero__cta-blobs span:nth-child(3) { left: 66%; transition-delay: 25ms; }

.hero__cta--gooey:hover .hero__cta-blobs span,
.hero__cta--gooey:focus-visible .hero__cta-blobs span {
    transform: scale(1.4) translateY(0) translateZ(0);
}

/* Accesibilidad: sin animación de subida; el relleno aparece directo al hover. */
@media (prefers-reduced-motion: reduce) {
    .hero__cta-blobs span { transition: none; }
}

/* Scroll indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.hero__scroll-indicator.is-visible {
    opacity: 0.6;
}

.scroll-mouse {
    display: block;
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 13px;
    position: relative;
}

.scroll-wheel {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    animation: scroll-wheel-anim 2s ease-in-out infinite;
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

@keyframes scroll-wheel-anim {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 0; transform: translateX(-50%) translateY(10px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   FEATURES
   ============================================================ */

.features {
    background: var(--color-oscuro);
    padding: var(--spacing-2xl) 0;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

/* Frameless cards: centered icon + title + desc, no box (desktop/tablet). */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm);
}

.feature-card__icon {
    width: 52px;
    height: 52px;
    background: rgba(223, 179, 62, 0.12);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dorado);
    flex-shrink: 0;
    transition: background var(--transition-base);
}

.feature-card:hover .feature-card__icon {
    background: rgba(223, 179, 62, 0.20);
}

.feature-card__icon svg {
    width: 26px;
    height: 26px;
}

/* Carousel dots — hidden by default, shown only in the mobile carousel. */
.features__dots {
    display: none;
}

.features__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: width var(--transition-base), background var(--transition-base);
}

/* Hit area ampliada sin cambiar lo visual */
.features__dot::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.features__dot.is-active {
    width: 22px;
    background: var(--color-dorado);
}

.feature-card__title {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

.feature-card__desc {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
}

/* ============================================================
   CATALOG SECTION
   ============================================================ */

.catalog-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-crema);
}

.catalog-section__header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.catalog-section__pill {
    display: inline-block;
    padding: 5px var(--spacing-md);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    background: #fff;
}

.catalog-section__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--color-oscuro);
}

.catalog-section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-texto-suave);
    font-style: italic;
}

.catalog-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.catalog-section__empty {
    text-align: center;
    color: var(--color-texto-suave);
    padding: var(--spacing-2xl) 0;
    font-style: italic;
}

/* Utility */
.text-dorado { color: var(--color-dorado-suave); }

/* ============================================================
   RESPONSIVE — homepage adjustments
   (full responsive in _responsive.css; fast overrides here)
   ============================================================ */

@media (max-width: 1280px) {
    .catalog-section__grid     { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .features__grid            { grid-template-columns: repeat(2, 1fr); }
    .catalog-section__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .hero__content {
        padding-top: calc(var(--header-height-mob) + var(--spacing-lg));
    }
}

/* Landscape / pantallas bajas: a pantalla completa el contenido se desbordaba
   (el eyebrow se metía bajo la navbar). Se reduce tipografía y paddings para
   que entre, y se centra verticalmente (con las medidas ya reducidas, entre
   600 y 700px de alto sobra lugar y queda mejor centrado que pegado arriba).
   No afecta tamaños normales (altura > 700px). */
@media (orientation: landscape) and (max-height: 700px) {
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        align-items: center;
    }
    .hero__content {
        padding-top: calc(var(--header-height-mob) + var(--spacing-md));
        padding-bottom: var(--spacing-xl);
        gap: var(--spacing-sm);
    }
    .hero__eyebrow { padding-bottom: 6px; }
    .hero__title { font-size: clamp(1.6rem, 5vw, 2.3rem); }
    .hero__description { font-size: var(--font-size-sm); }
}

/* Debajo de los 600px de alto ya no entra centrado sin superponerse a la
   navbar — se vuelve a anclar arriba, como en el fix original. */
@media (orientation: landscape) and (max-height: 600px) {
    .hero {
        align-items: flex-start;
    }
}

/* Below 800px the 4 panels become a swipeable horizontal carousel
   (scroll-snap) so they don't take up so much vertical space. */
@media (max-width: 800px) {
    .features__grid {
        display: flex;
        grid-template-columns: none;
        gap: var(--spacing-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--spacing-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;           /* Firefox */
        padding-bottom: var(--spacing-xs);
    }
    .features__grid::-webkit-scrollbar { display: none; } /* Safari/Chrome */

    .feature-card {
        flex: 0 0 clamp(260px, 75%, 460px); /* next card peeks in, like a gallery */
        scroll-snap-align: center;
        /* In gallery mode the cards get their framed look back. */
        padding: var(--spacing-lg) var(--spacing-md);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: var(--radius-card);
    }

    .features__dots {
        display: flex;
        justify-content: center;
        /* Gap ≥ hit area de los dots (24px) para que no se solapen */
        gap: var(--spacing-md);
        margin-top: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    .hero__content             { gap: var(--spacing-md); }
    .hero__description         { text-align: center; }
    /* En mobile no hay ancho para un gradiente horizontal; usamos un oscurecido
       parejo para la legibilidad del texto. */
    .hero__overlay             { background: #00000055; }
    /* Reencuadre del foco de la imagen en pantallas angostas. */
    .hero__bg                  { background-position: 48%; }
    .features                  { padding: var(--spacing-xl) 0; }
    .catalog-section__grid     { grid-template-columns: 1fr; }
    .catalog-section           { padding: var(--spacing-xl) 0; }
    .contacto                  { padding: var(--spacing-xl) 0; }
}

/* ============================================================
   SECTION DIVIDER  ———  ☕  ———
   ============================================================ */

/* No vertical padding: the surrounding sections already provide it.
   The divider just sits in the gap between catalog and nosotros. */
.section-divider {
    padding: 0;
    background: var(--color-crema);
}

.section-divider .sc-divider {
    max-width: 560px;
    margin: 0 auto;
    gap: var(--spacing-lg);
}

.section-divider .sc-divider__icon svg {
    width: 30px;
    height: 30px;
}

/* ============================================================
   NOSOTROS
   ============================================================ */

.nosotros {
    padding: var(--spacing-2xl) 0;
    background: var(--color-crema);
}

.nosotros__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.nosotros__label {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-md);
}

.nosotros__title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.15;
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-lg);
}

.nosotros__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.nosotros__body p {
    font-size: var(--font-size-base);
    color: var(--color-texto-suave);
    line-height: 1.75;
    text-align: justify;
}

.nosotros__values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-borde);
}

.nosotros__value-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-texto);
}

.nosotros__value-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-dorado-suave);
    flex-shrink: 0;
}

/* Contenedor de la galería "Nuestra historia" (la galería trae su propio
   borde/sombra; el wrap solo ocupa la columna del grid). */
.nosotros__image-wrap {
    min-width: 0;
}

/* ============================================================
   GUÍAS (home preview)
   ============================================================ */

.home-guias {
    padding: var(--spacing-2xl) 0;
    background: var(--color-beige);
}

.home-guias__header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--spacing-2xl);
}

.home-guias__kicker {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-sm);
}

.home-guias__title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-sm);
}

.home-guias__desc {
    font-size: var(--font-size-base);
    color: var(--color-texto-suave);
    line-height: 1.6;
}

.home-guias__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.home-guias__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* ============================================================
   CONTACTO
   ============================================================ */

.contacto {
    padding: var(--spacing-2xl) 0;
    background: var(--color-oscuro);
    color: rgba(255, 255, 255, 0.8);
}

.contacto__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

/* Prevent grid children from overflowing their tracks */
.contacto__grid > * {
    min-width: 0;
}

.contacto__label {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado);
    margin-bottom: var(--spacing-md);
}

.contacto__title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: var(--spacing-lg);
}

.contacto__desc {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
}

.contacto__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 500px;
    margin: 0 auto;
}

.contacto__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.contacto__item-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(223, 179, 62, 0.12);
    color: var(--color-dorado);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contacto__item-icon svg {
    width: 20px;
    height: 20px;
}

.contacto__item-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.66); /* subido de 0.4 → contraste AA sobre la sección oscura */
    display: block;
    margin-bottom: 2px;
}

.contacto__item-value {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-base);
    transition: color var(--transition-fast);
}

a.contacto__item-value:hover {
    color: var(--color-dorado);
}

/* Contact form column */
.contacto__form-col {
    display: flex;
    flex-direction: column;
}

/* Contact form — light card on the dark section */
.contacto__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 500px;
    width: 100%;
    background: var(--color-crema);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* El atributo hidden debe ganarle al display:flex del form */
.contacto__form[hidden] {
    display: none;
}

.form-field__req {
    color: var(--color-dorado);
}

.form-field__optional {
    color: var(--color-texto-suave);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Mensaje de éxito (reemplaza al form tras enviar) */
.contacto__success {
    max-width: 500px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(223, 179, 62, 0.35);
    border-radius: var(--radius-card);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
}

.contacto__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(223, 179, 62, 0.15);
    color: var(--color-dorado);
    margin-bottom: var(--spacing-md);
}

.contacto__success-icon svg {
    width: 28px;
    height: 28px;
}

.contacto__success-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    color: #fff;
    margin-bottom: var(--spacing-sm);
}

.contacto__success-text {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-field label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-texto-suave);
}

.form-field input,
.form-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-oscuro);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-texto-suave);
    opacity: 0.6;
}

/* Inputs ≥16px en mobile (evita auto-zoom de iOS y mejora legibilidad) */
@media (max-width: 600px) {
    .form-field input,
    .form-field textarea {
        font-size: 16px;
    }
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(223, 179, 62, 0.15);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* ============================================================
   Responsive overrides — colocados al final para ganar por orden
   de fuente a las reglas base de .nosotros__grid / .contacto__grid
   (que están definidas más arriba en el archivo).
   ============================================================ */
@media (max-width: 1024px) {
    .nosotros__grid  { grid-template-columns: 1fr; }
    .nosotros__image-wrap {
        max-width: 500px;
        margin: 0 auto;
    }
    /* Guías: 4 → 2 columnas en tablet */
    .home-guias__grid { grid-template-columns: repeat(2, 1fr); }
    .contacto__grid  { grid-template-columns: 1fr; gap: var(--spacing-xl); }
    /* Center form card in the single-column layout */
    .contacto__form-col { align-items: center; }
    /* Pad the card with the same horizontal rhythm as the container */
    .contacto__form,
    .contacto__success {
        max-width: 500px;
        padding-inline: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    /* Lighter vertical padding on the "Nuestra Historia" panel. Placed here
       (after the base .nosotros rule) so it wins by source order. */
    .nosotros { padding: var(--spacing-xl) 0; }
    /* Guías: 2 → 1 columna en mobile */
    .home-guias__grid { grid-template-columns: 1fr; }
    .home-guias { padding: var(--spacing-xl) 0; }
}

/* ============================================================
   RESEÑAS (home) — dos carouseles infinitos (izquierda / derecha)
   ============================================================ */
.reviews {
    padding: var(--spacing-2xl) 0;
    background: var(--color-crema);
    overflow: hidden;
}

.reviews__head {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.reviews__label {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-xs);
}

.reviews__title {
    font-size: var(--font-size-2xl);
    color: var(--color-oscuro);
}

.reviews__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    color: var(--color-texto-suave);
}

.reviews__rating-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-dorado);
}

.reviews__rating-stars svg {
    width: 18px;
    height: 18px;
}

.reviews__rating-score {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-oscuro);
}

.reviews__rating-count {
    font-size: var(--font-size-sm);
}

/* Pista que se desplaza; el contenido va duplicado, así -50% loopea sin saltos.
   El gap entre tarjetas lo aporta el margin-right de cada tarjeta (no flex gap)
   para que el punto de corte del loop sea exacto. */
.reviews__marquee {
    overflow: hidden;
    /* Aire vertical para que la sombra de las tarjetas no se recorte arriba/abajo */
    padding: var(--spacing-md) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.reviews__marquee + .reviews__marquee {
    margin-top: var(--spacing-xs);
}

.reviews__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.reviews__marquee--left  .reviews__track { animation: reviews-left  60s linear infinite; }
.reviews__marquee--right .reviews__track { animation: reviews-right 72s linear infinite; }

@keyframes reviews-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes reviews-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

/* Pausa al pasar el mouse */
.reviews__marquee:hover .reviews__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .reviews__track { animation: none; }
}

.review-card {
    flex: 0 0 auto;
    width: 340px;
    margin-right: var(--spacing-lg);
    background: var(--color-tarjeta);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Cabecera: estrellas a la izquierda, nombre arriba a la derecha */
.review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.review-card__stars {
    display: flex;
    gap: 2px;
    color: var(--color-dorado);
}

.review-card__star {
    width: 16px;
    height: 16px;
    display: block;
}

.review-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-texto);
    line-height: 1.55;
    flex: 1;
    margin: 0;
}

.review-card__name {
    font-weight: 600;
    color: var(--color-oscuro);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .review-card { width: 280px; }
}

/* ============================================================
   Recomendador de café — home, entre "Beneficios" y "Nuestros Cafés"
   ============================================================ */
.recommender {
    padding: var(--spacing-xl) 0;
    background: var(--color-beige);
}

.recommender__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    /* En desktop, misma altura para las 2 columnas (ver .recommender__card
       más abajo para que el wizard reparta ese alto de más sin quedar todo
       pegado arriba). Ya no hay hueco vacío del lado del paquete porque su
       alto real está acotado (ver .recommender__pack-images max-width). */
    align-items: stretch;
}

.recommender__card {
    /* Fondo sutil: la foto va DEBAJO de todo el contenido (es background,
       no un elemento hijo), así no hay que lidiar con el z-index de los
       marcos de esquina (::before/::after, más abajo) ni del resto de los
       pasos. El velo casi opaco (mismo blanco que --color-tarjeta) encima
       de la foto es lo que le baja la intensidad — sin él la imagen se
       ve a pleno color y compite con el contenido. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('../images/cafeteras/bg_recomendador.jpg');
    background-size: cover, cover;
    background-position: center bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    /* position:relative + overflow:hidden: ancla los marcos de esquina
       (::before/::after, ver más abajo) y los recorta prolijo contra el
       border-radius del panel. */
    position: relative;
    overflow: hidden;
    /* Arriba, no centrado: centrado hacía que la barra de progreso y la
       pregunta cambiaran de altura según cuánto contenido tuviera cada
       paso (ver .recommender__layout para el alto compartido con el
       panel de paquetes) — arriba, todas las preguntas arrancan en el
       mismo lugar siempre. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Piso de alto — sin esto, el paso "Pensando..." (mucho más corto que
       una pregunta con sus opciones) achica el panel entero y la página
       salta feo al entrar y salir de esa pantalla. En desktop no hace nada
       (el align-items:stretch del layout ya lo iguala al panel de
       paquetes, que es más alto). En mobile la intro pisa esto con un
       piso más bajo (ver .recommender__card--intro) — el JS anima el
       cambio de alto al pasar de un piso al otro. */
    min-height: 480px;
}

/* El JS fija un height inline puntual para animar la transición entre
   pasos con alturas distintas (ver recShowStep en main.js) — sin esta
   transición, ese cambio de height sería instantáneo. */
@media (prefers-reduced-motion: no-preference) {
    .recommender__card {
        transition: height 0.35s ease;
    }
}

@media (max-width: 600px) {
    /* La intro no necesita tanto alto como una pregunta con sus opciones
       — que ocupe menos en mobile y se estire (animado) recién al entrar
       al wizard de verdad. */
    .recommender__card--intro {
        min-height: 340px;
    }
}

.recommender__step { display: none; }
.recommender__step.is-active { display: block; animation: sc-recommender-fade-in 0.25s ease-out; }

/* "Pensando" sí queda centrado verticalmente (pantalla de una sola pieza,
   sin nada que deba alinearse entre pasos); las preguntas y resultados van
   arriba siempre (.recommender__card ya es flex-start), así no saltan de
   una pregunta a otra. La intro usa el alto entero en vez de centrarse
   (ver más abajo, ocupa flex:1 con el botón anclado abajo). */
.recommender__step[data-step="loading"].is-active {
    margin-top: auto;
    margin-bottom: auto;
}

@keyframes sc-recommender-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.recommender__kicker {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-sm);
}

.recommender__title {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.2;
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-md);
}

.recommender__desc {
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    line-height: 1.55;
    max-width: 420px;
    margin: 0 auto var(--spacing-lg);
}

.recommender__question {
    font-size: var(--font-size-lg);
    line-height: 1.3;
    color: var(--color-oscuro);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    /* Alto fijo — tiene que alcanzar para el peor caso real: una pregunta
       que se parte en 2 líneas Y ADEMÁS cada una de esas líneas lleva un
       signo "¿"/"?" a 2em, que infla la altura de SU línea bastante más
       que el texto normal (cada línea con signo llega a ~2.4em, no ~1.3em
       como asumía la primera versión de este fix — por eso seguía
       saltando). 5em cubre ese peor caso con margen; en preguntas de una
       sola línea queda centrada dentro de esa misma caja fija. */
    min-height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Signos de interrogación con un poco de onda — más grandes y en dorado,
   en vez de perderse del mismo color y tamaño que el resto de la frase. */
.recommender__question-mark {
    color: var(--color-dorado);
    font-size: 2em;
    font-weight: 800;
    padding: 0px 4px;
}
.recommender__question-mark--exclaim {
    font-size: 1.2em;
}

/* ---- Ícono de paso (intro / cada pregunta / resultados) — mismo lenguaje
   visual que .feature-card__icon del resto del sitio, para que se sienta
   parte de Santo Café y no un agregado suelto. Deliberadamente claro/cálido,
   no oscuro con puntitos como el panel de paquetes: son dos módulos
   distintos y no deberían leerse como el mismo componente. ---- */
.recommender__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(223, 179, 62, 0.12);
    color: var(--color-dorado);
    margin: 0 auto var(--spacing-lg);
}

/* En resultados no hay kicker (se sacó, no aportaba) — ícono más chico y
   menos aire abajo, si no el header queda con demasiado espacio suelto. */
.recommender__step-icon--results {
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
}
.recommender__step-icon--results svg {
    width: 20px;
    height: 20px;
}

/* ---- Intro: pill "es un test" y botón con flecha — para que se note de
   una que es algo interactivo y no solo un texto de bienvenida. Ocupa
   todo el alto disponible de la tarjeta (en vez de quedar centrada como
   un bloque chico con aire de sobra arriba y abajo) con el botón anclado
   abajo del todo. ---- */
.recommender__step[data-step="intro"].is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.recommender__intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Pill + título + bajada, en el espacio que queda arriba del botón (que se
   mantiene siempre pegado abajo del todo). Más aire arriba que abajo del
   bloque — centrado puro quedaba con el texto muy pegado arriba — vía dos
   "resortes" (::before/::after) con distinto flex-grow en vez de un
   justify-content:center parejo. */
.recommender__intro-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.recommender__intro-top::before,
.recommender__intro-top::after {
    content: '';
    flex: 1.6;
}
.recommender__intro-top::after {
    flex: 1;
}

/* Marcos de esquina — mismo lenguaje visual que el panel de paquetes de
   degustación (.recommender__pack), pero en las esquinas contrarias: acá
   arriba-derecha/abajo-izquierda en vez de arriba-izquierda/abajo-derecha,
   para que los dos paneles se sientan pareja sin ser idénticos. Reemplaza
   las imágenes decorativas sueltas que había antes (no quedaban bien). */
.recommender__card::before,
.recommender__card::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--color-dorado);
    opacity: 0.7;
    pointer-events: none;
}
.recommender__card::before {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    border-left: none;
    border-bottom: none;
    border-top-right-radius: var(--spacing-sm);
}
.recommender__card::after {
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    border-right: none;
    border-top: none;
    border-bottom-left-radius: var(--spacing-sm);
}

/* La pill reemplaza el texto suelto del kicker por algo con más peso
   visual — se nota que es una acción, no solo una etiqueta. */
.recommender__kicker--pill {
    background: rgba(223, 179, 62, 0.14);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    margin-bottom: var(--spacing-lg);
}

.recommender__intro-hint {
    font-size: var(--font-size-xs);
    color: var(--color-texto-suave);
    margin: var(--spacing-md) 0 0;
}

/* Estaba todo muy apretado — más aire entre pill / título / bajada /
   botón en esta pantalla específicamente. */
.recommender__intro-content .recommender__title {
    margin-bottom: var(--spacing-lg);
}
.recommender__intro-content .recommender__desc {
    margin: 0 auto var(--spacing-xl);
}

/* ---- Progreso (visible solo durante las preguntas) ---- */
.recommender__progress {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
}
.recommender__progress.is-visible { display: flex; }

.recommender__progress-bar {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-beige);
    overflow: hidden;
}
.recommender__progress-fill {
    height: 100%;
    width: 0;
    background: var(--color-dorado);
    border-radius: var(--radius-pill);
    transition: width var(--transition-base);
}
.recommender__progress-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

/* ---- Opciones de cada pregunta ---- */
.recommender__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* "Volver a la pregunta anterior" — solo en intensidad/acidez/cuerpo (la
   de método no tiene paso previo). Centrado abajo del todo, discreto. */
.recommender__question-back {
    display: block;
    margin: var(--spacing-lg) auto 0;
    background: none;
    border: none;
    color: var(--color-texto-suave);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.recommender__question-back:hover {
    color: var(--color-oscuro);
    text-decoration: underline;
}

.recommender__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Preguntas 2-4 (intensidad/acidez/cuerpo) — Q1 (métodos) pisa esto
       con su propio padding más abajo. */
    padding: var(--spacing-lg) var(--spacing-sm);
    background: var(--color-crema);
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    text-align: center;
}
.recommender__option:hover {
    border-color: var(--color-dorado);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* Feedback al elegir: se marca ANTES de pasar a la siguiente pregunta, así
   se ve qué se tocó en vez de saltar directo. */
.recommender__option.is-selected {
    border-color: var(--color-dorado);
    background: rgba(223, 179, 62, 0.14);
    transform: scale(1.04);
}
.recommender__option.is-selected::after {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-dorado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1310' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    animation: sc-rec-option-pop 0.25s ease-out;
}
@keyframes sc-rec-option-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* 6 métodos de preparación: ícono arriba centrado, texto abajo (igual
   estructura que las preguntas de escala) pero con la ilustración más
   grande, en un bloque de tamaño fijo — así las 6 quedan del mismo
   tamaño entre sí (sin deformarse, object-fit: contain adentro de esa
   caja) y los textos arrancan todos a la misma altura debajo. */
.recommender__options--methods .recommender__option {
    padding: var(--spacing-md) var(--spacing-sm);
    gap: var(--spacing-xs);
}
.recommender__option-icon {
    height: 64px;
    width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.recommender__option-title {
    font-weight: 700;
    color: var(--color-oscuro);
    font-size: var(--font-size-sm);
}
.recommender__option-desc {
    font-size: 11px;
    color: var(--color-texto-suave);
}

/* ---- "Pensando" — pausa falsa antes del resultado ---- */
.recommender__loading-cup {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-dorado);
    animation: sc-rec-cup-bounce 1.2s ease-in-out infinite;
}
@keyframes sc-rec-cup-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.recommender__loading-steam {
    position: absolute;
    top: 4px;
    width: 3px;
    height: 14px;
    border-radius: 3px;
    background: rgba(223, 179, 62, 0.6);
    opacity: 0;
    animation: sc-rec-steam 1.4s ease-in-out infinite;
}
.recommender__loading-steam--1 { left: 18px; animation-delay: 0s; }
.recommender__loading-steam--2 { left: 26px; animation-delay: 0.25s; }
.recommender__loading-steam--3 { left: 34px; animation-delay: 0.5s; }
@keyframes sc-rec-steam {
    0%   { transform: translateY(0) scaleY(1); opacity: 0; }
    35%  { opacity: 0.9; }
    100% { transform: translateY(-16px) scaleY(1.5); opacity: 0; }
}

.recommender__loading-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-texto-suave);
    min-height: 1.4em;
}

/* Más separación del título de resultados respecto de las fichas de abajo
   — quedaba pegado. Flex + align-items:center: igual que en
   .recommender__question, para que los "¡ !" (1.2em, más grandes que el
   texto) queden centrados sobre la línea del título en vez de colgar de
   la línea base como cualquier texto inline normal. */
.recommender__title--results {
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Resultados ---- */
.recommender__results {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.recommender__result-card {
    position: relative;
    display: flex;
    gap: var(--spacing-md);
    background: var(--color-crema);
    border: 1.5px solid transparent;
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.recommender__result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* Toda la ficha lleva a la página del producto — un link "estirado" (cubre
   la tarjeta entera, invisible) por debajo de todo. Los botones reales van
   con su propio z-index encima para poder seguir usándose cada uno por su
   lado sin que el click se lo coma el link de fondo. */
.recommender__result-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.recommender__result-image-wrap,
.recommender__result-body {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.recommender__result-actions,
.recommender__result-actions * {
    pointer-events: auto;
}

/* El mejor calce se destaca con borde dorado — sutil, no tan "de fiesta"
   como el panel de paquetes, para que se note que son dos cosas distintas. */
.recommender__result-card--best {
    border-color: var(--color-dorado);
    background: #fff;
}
.recommender__result-ribbon {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-oscuro);
    background: var(--color-dorado);
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Agotado: se sigue mostrando (mejor decir "no hay stock" que fingir que no
   existe), pero atenuado, sin "Agregar al carrito" — solo queda "Ver
   producto" activo. Si había alguna alternativa con stock, esta ni
   siquiera aparece (ver recScore en main.js). */
.recommender__result-card--soldout {
    opacity: 0.6;
}
.recommender__result-card--soldout .recommender__result-image-wrap {
    border-color: var(--color-borde);
}
.recommender__result-ribbon--soldout {
    color: #fff;
    background: var(--color-texto-suave);
}
.recommender__result-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.recommender__result-image-wrap {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 104px;
    height: 104px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-dorado);
    overflow: hidden;
    background: var(--color-beige);
}

/* Distintivo del mejor calce, en la esquina de SU foto. Va DENTRO del
   recuadro (sin offset negativo) — el wrap tiene overflow:hidden para la
   imagen, así que si sobresalía quedaba cortada a la mitad. */
.recommender__result-star {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-dorado);
    color: var(--color-oscuro);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.recommender__result-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recommender__result-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.recommender__result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.recommender__result-head-right {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.recommender__result-country {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-dorado-suave);
}

.recommender__result-match {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-dorado-suave);
    white-space: nowrap;
}

/* El mejor calce ya no lleva un rótulo "Mejor calce" aparte — el propio %
   pasa a ser el pill destacado (mismo lugar donde antes iba ese rótulo). */
.recommender__result-match--best {
    color: var(--color-oscuro);
    background: var(--color-dorado);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-transform: none;
    letter-spacing: normal;
}

.recommender__result-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-oscuro);
    margin: 0;
}

.recommender__result-why {
    font-size: var(--font-size-xs);
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin: 2px 0 var(--spacing-sm);
    flex: 1;
}

.recommender__result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.recommender__result-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Precio y "tachado + badge" en la misma línea, no apilados, para que la
   ficha no crezca de más en vertical (el layout column es el que usa el
   resto del sitio, pero acá el espacio es más chico). */
.recommender__result-footer .product-card__pricing {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.recommender__result-btn-short { display: none; }

@media (max-width: 900px) {
    .recommender__result-btn-full  { display: none; }
    .recommender__result-btn-short { display: inline; }
}

.recommender__empty {
    color: var(--color-texto-suave);
    grid-column: 1 / -1;
}

.recommender__help {
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    margin-top: var(--spacing-lg);
}
.recommender__help a { color: var(--color-dorado-suave); font-weight: 600; }
.recommender__help a:hover { color: var(--color-dorado); }

/* ---- Paquetes degustación (columna derecha) ---- */
.recommender__pack {
    /* Grid en vez de flex: los dos pasos (lista/detalle) se apilan en la
       MISMA celda (ver .recommender__pack-step) — así el alto del panel
       siempre es el del contenido más alto de los dos, y no salta al
       pasar de uno a otro. */
    display: grid;
    /* Sin stretch: la celda queda alta como el paso más alto (list/detalle),
       pero cada paso ocupa solo lo que necesita — si no, el paso más corto
       se estira igual y deja un hueco vacío abajo. */
    align-items: start;
    background: var(--color-oscuro);
    background-image: radial-gradient(rgba(223, 179, 62, 0.15) 1px, transparent 1px);
    background-size: 18px 18px;
    /* Textura en movimiento diagonal hacia arriba-derecha, continuo. 180px
       = múltiplo exacto del patrón de puntos (18px), así el loop no se
       nota al repetir. */
    animation: sc-pack-bg-drift 20s linear infinite;
    color: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

@keyframes sc-pack-bg-drift {
    from { background-position: 0 0; }
    to   { background-position: 180px -180px; }
}

/* Marcos decorativos en las esquinas — mismo espíritu que un cartel de
   "regalo", con la paleta de la marca en vez de colores ajenos. */
.recommender__pack::before,
.recommender__pack::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--color-dorado);
    opacity: 0.7;
    pointer-events: none;
}
/* Solo la esquina que realmente tiene los 2 lados presentes se redondea —
   las puntas sueltas (donde falta un lado) quedan rectas, si no el trazo
   se curva de más ahí y parece un gancho. */
.recommender__pack::before {
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    border-right: none;
    border-bottom: none;
    border-top-left-radius: var(--spacing-sm);
}
.recommender__pack::after {
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    border-left: none;
    border-top: none;
    border-bottom-right-radius: var(--spacing-sm);
}

/* Ambos pasos viven en la misma celda del grid (uno encima del otro) — el
   que no está activo sigue "midiendo" para el alto del panel, solo que
   invisible y sin poder clickearse. */
.recommender__pack-step {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.recommender__pack-step.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: sc-recommender-fade-in 0.25s ease-out;
}

/* El detalle sí se estira a la altura completa de la celda (a diferencia
   de la lista, que se queda en su alto natural — ver comentario en
   .recommender__pack) para que molienda/precio/carrito, con su
   margin-top:auto, puedan bajar hasta el fondo del panel en vez de quedar
   apretados justo debajo del texto. */
.recommender__pack-step[data-pack-step="detail"] {
    align-self: stretch;
}

.recommender__pack-title {
    font-family: var(--font-heading, inherit);
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 var(--spacing-xs);
}

/* Más aire entre el título del paquete elegido y sus fotos — quedaban
   pegados al sacarle la descripción de en medio. */
[data-pack-step="detail"] .recommender__pack-title {
    margin-bottom: var(--spacing-lg);
}

/* "Degustación" con degradé dorado en movimiento — un brillo lento y
   continuo que le da onda al título sin ser un GIF ni distraer. Base
   dorada con un destello blanco que la recorre. El primer y el último
   stop son el mismo color (dorado) y el loop avanza exactamente un
   tile (background-size 200%) — así el patrón calza consigo mismo al
   volver al inicio y no se nota el corte. */
.recommender__pack-title-shine {
    background: linear-gradient(90deg,
        var(--color-dorado) 0%,
        var(--color-dorado) 40%,
        #fff 50%,
        var(--color-dorado) 60%,
        var(--color-dorado) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sc-pack-title-shine 6s linear infinite;
}
@keyframes sc-pack-title-shine {
    from { background-position: 0% 0; }
    to   { background-position: -200% 0; }
}

.recommender__pack-desc {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 var(--spacing-lg);
}

/* Lista de paquetes (paso 1) — apilados: con los dos en horizontal sobraba
   alto (la columna del wizard, a la izquierda, siempre es más alta). */
.recommender__pack-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.recommender__pack-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    /* Ancho de borde fijo en 2px siempre (con color casi invisible por
       defecto) — así el hover solo cambia el COLOR, nunca el ancho, y el
       panel no salta de tamaño al pasar el mouse. */
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.recommender__pack-item:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--color-dorado);
    transform: translateY(-2px);
}

/* Destello al pasar el mouse — una franja de luz que cruza la ficha una
   sola vez, de punta a punta. */
.recommender__pack-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(223, 179, 62, 0.35) 50%, transparent 70%);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .recommender__pack-item:hover::before,
    .recommender__pack-item:focus-visible::before {
        animation: sc-pack-item-shine 0.8s ease 1;
    }
}
@keyframes sc-pack-item-shine {
    from { transform: translateX(-120%) skewX(-20deg); }
    to   { transform: translateX(220%) skewX(-20deg); }
}

/* Sin stock: algún componente quedó con menos de 125g gestionados
   (ver sc_pack_is_available() en inc/tasting-packs.php). Sigue siendo
   clickeable para ver el detalle, pero "Agregar al carrito" queda
   deshabilitado ahí; acá se avisa con "Agotado" en vez de "Ver detalle". */
.recommender__pack-item.is-sold-out {
    opacity: 0.55;
}
.recommender__pack-item.is-sold-out:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: none;
}
.recommender__pack-item.is-sold-out .recommender__pack-item-images img {
    filter: grayscale(1);
}

/* Cabecera: título a la izquierda, chips a la derecha, misma fila. */
.recommender__pack-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.recommender__pack-item-name {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--font-size-lg);
}

.recommender__pack-item-chips {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* Las fotos van debajo del título, en su tamaño de siempre (no ocupan
   todo el ancho del panel: se mantienen en una franja angosta). */
.recommender__pack-item-images {
    display: grid;
    /* 3 fotos + un "+" angosto entre cada par, para que se lea como una
       combinación de cafés y no como una simple grilla. */
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 300px;
    margin: 2px auto;
}
.recommender__pack-item-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid var(--color-dorado);
}
.recommender__pack-item-plus {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-dorado);
    text-align: center;
    /* Padding en el propio "+" (columna auto), no en el gap del grid — así
       se separa de las fotos sin robarles ancho a las columnas 1fr. */
    padding: 0 var(--spacing-xs);
}
.recommender__pack-item-chip {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.recommender__pack-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.recommender__pack-item-price {
    font-size: var(--font-size-lg);
    color: var(--color-dorado);
    font-weight: 700;
}
.recommender__pack-item-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    transition: gap var(--transition-fast);
}
.recommender__pack-item:hover .recommender__pack-item-cta { gap: 8px; }

/* Detalle (paso 2) */
.recommender__pack-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--spacing-md);
}
.recommender__pack-back:hover { color: #fff; }

.recommender__pack-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-md);
}

.recommender__pack-image-tile {
    position: relative;
    display: block;
    transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .recommender__pack-image-tile:hover,
    .recommender__pack-image-tile:focus-within {
        transform: scale(1.05);
    }
}
.recommender__pack-image-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    display: block;
}

/* El link cubre TODA la foto (clickear en cualquier parte va al producto);
   el pill "Ver" es solo lo que se ve, en una esquina, siempre visible (no
   depende de :hover — en mobile no hay hover y quedaba invisible ahí). */
.recommender__pack-image-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 6px;
}
.recommender__pack-image-view-badge {
    padding: 3px 10px;
    background: var(--color-dorado);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-oscuro);
    transition: background var(--transition-fast);
}
.recommender__pack-image-view:hover .recommender__pack-image-view-badge,
.recommender__pack-image-view:focus-visible .recommender__pack-image-view-badge {
    background: var(--color-dorado-hover);
}

.recommender__pack-list-simple {
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}
.recommender__pack-list-simple li { margin-bottom: 2px; }
.recommender__pack-list-notas {
    color: rgba(255, 255, 255, 0.6);
    opacity: 0.75;
    font-style: italic;
}
.recommender__pack-list-notas::before {
    content: ' · ';
}

/* Molienda del paquete — una sola elección para los 3 cafés. */
.recommender__pack-molienda {
    /* Empuja molienda (y por lo tanto todo el bloque de abajo, ver
       .recommender__pack-footer) al fondo del panel — el espacio libre que
       deja el detalle más corto se acumula ACÁ, justo arriba del precio,
       en vez de quedar repartido raro. */
    margin-top: auto;
    margin-bottom: var(--spacing-lg);
}
.recommender__pack-molienda-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-xs);
}
.recommender__pack-molienda-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.recommender__pack-molienda-option {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.recommender__pack-molienda-option:hover { border-color: var(--color-dorado); }
.recommender__pack-molienda-option.is-selected {
    background: var(--color-dorado);
    border-color: var(--color-dorado);
    color: var(--color-oscuro);
}

.recommender__pack-footer {
    /* El margin-top:auto vive en .recommender__pack-molienda ahora — acá
       ya no hace falta, footer sigue directo después de molienda. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.recommender__pack-price-now {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-dorado);
}

.recommender__pack-footer .btn {
    flex: 0 0 auto;
}
.recommender__pack-footer .btn:disabled,
.recommender__pack-footer .btn.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .recommender__layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .recommender__card { padding: var(--spacing-lg) var(--spacing-md); }
    .recommender__options { grid-template-columns: 1fr; }
    /* La pregunta de método tiene 6 opciones — en 1 columna queda una lista
       larguísima. 2 columnas la compacta bastante sin apretar el texto. */
    .recommender__options--methods { grid-template-columns: repeat(2, 1fr); }
    /* El gap grande de las imágenes de los paquetes achica demasiado la
       foto cuando el panel pasa a ocupar todo el ancho (una sola columna,
       ver @media 900px arriba) — un gap más chico ahí. */
    .recommender__pack-item-images { gap: var(--spacing-sm); }
    /* Resultado del recomendador: con descuento (precio + tachado + badge)
       no entra junto a los botones en una fila angosta — vuelve a apilarse
       para dejarles lugar. */
    .recommender__result-footer .product-card__pricing {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    /* Detalle de paquete: en mobile el nombre + "125 g" + notas de cata
       quedaban todo en una sola línea larguísima — las notas pasan a su
       propia línea, y cada componente del paquete gana algo de aire entre
       sí (en desktop, con más ancho disponible, entra bien tal cual). */
    .recommender__pack-list-notas {
        display: block;
    }
    .recommender__pack-list-notas::before {
        content: '';
    }
    .recommender__pack-list-simple li {
        margin-bottom: var(--spacing-sm);
    }
    .recommender__progress {
        margin-bottom: var(--spacing-md);
    }
    .recommender__question {
        margin-bottom: 0;
    }
}