/* =====================================================================
   BOLSAS ECOLÓGICAS DE TELA — banda Colección (full-bleed, fondo sand)
   Modo: @coleccion · Apertura: Mosaico (1 tile héroe + 2)
   También vive aquí la Cinta de Confianza (.bt-pagos): una card blanca
   que flota sobre la costura entre esta banda y la de Flash Sale.
   ===================================================================== */

/* Tokens Fiubags usados por las bandas del home (autocontenidos: cada
   hoja del home los declara para poder cargarse sola). */
:root {
    --fiu-teal: #6EABA5;
    --fiu-teal-deep: #5A9F99;
    --fiu-teal-darker: #355E5A;
    --fiu-teal-ink: #1A3532;
    --fiu-teal-muted: #8EC4BF;
    --fiu-teal-light: #E8F5F3;
    --fiu-teal-wash: #F3F8F7;
    --fiu-sand: #F6F0E6;
    --fiu-canvas: #EFE6D4;
    --fiu-clay: #BAA491;
    --fiu-coral: #F8796C;
    --fiu-coral-deep: #E35D50;
    --fiu-coral-light: #FDE7E4;
    --fiu-white: #FFFFFF;
    --fiu-paper: #F8F9FA;
    --fiu-mist: #F1F3F5;
    --fiu-line: #E5E7EB;
    --fiu-line-soft: #EEF0F2;
    --fiu-ink: #1F2937;
    --fiu-slate: #475569;
    --fiu-muted: #64748B;
    --fiu-faint: #94A3B8;
    --fiu-radius-md: 14px;
    --fiu-radius-lg: 20px;
    --fiu-radius-xl: 28px;
    --fiu-radius-pill: 999px;
    --fiu-shadow-sm: 0 2px 10px rgba(26, 53, 50, .07);
    --fiu-shadow-md: 0 4px 20px rgba(0, 0, 0, .08);
    --fiu-shadow-lg: 0 14px 36px rgba(26, 53, 50, .12);
    --fiu-shadow-product: 0 15px 22px rgba(104, 104, 104, .28);
    --fiu-ring: 0 0 0 3px rgba(110, 171, 165, .40);
    --fiu-ease-out: cubic-bezier(.22, .61, .36, 1);
    --fiu-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------------
   Utilidades del home
   --------------------------------------------------------------------- */

/* Texto solo para lectores de pantalla */
.fiu-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   ORDEN VISUAL DE LAS BANDAS DEL HOME
   El H1 (.bt-intro) abre el marcado —primer encabezado del documento,
   que es lo que leen buscadores y navegación por encabezados— pero se
   pinta al final, debajo de la banda de productos. Como el bloque no
   contiene enlaces ni controles, reordenarlo no altera el orden de
   tabulación de nadie.
   Los <link>/<script> intercalados entre bandas no llegan a ser items
   flex (el UA los pinta display:none), por eso basta numerar las cinco.
   --------------------------------------------------------------------- */
/* float+width como el resto de secciones: style.css apila la página con
   `.section { float: left; width: 100% }`, así que un bloque en flujo
   normal se colocaría encima del slider flotado en vez de después. */
.home-orden {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;

    /* Rojo de campaña, sólo para las bandas del home.
       Va aquí y no en :root porque --fiu-coral es un token global que
       también usa el menú (badges "Nuevo", flag de Wedding Club): en
       :root el rojo se le pegaría al header, y sólo en esta página.
       Las custom properties heredan, así que basta declararlo en el
       contenedor para que lo tomen las seis bandas de dentro. */
    --fiu-coral: #F53B28;
    --fiu-coral-deep: #C92A16;
    /* Tinte del rojo de campaña: fondo de la banda de oferta y de la
       cinta de confianza, y pincelada de los títulos. */
    --fiu-coral-light: #FBD3CD;
}

/* El orden visual de las bandas se fija aquí con `order`, no con el DOM.
   .bt-intro (encabezado de puro texto) va primero en el marcado por
   SEO pero se pinta más abajo. La cinta de confianza (pago y
   paqueterías) y el Flash Sale se suben por encima del catálogo. */
.home-orden > .ha-full    { order: 1; }
.home-orden > .cinta-band { order: 2; }
.home-orden > .fs-band    { order: 3; }
.home-orden > .prd-band   { order: 4; }
.home-orden > .bt-intro   { order: 5; }
.home-orden > .bt-band    { order: 6; }

/* Cinta de confianza: va sobre el mismo verde de aniversario que la
   banda del hero (.ha-body), para que la card blanca se lea "dentro"
   de esa franja. Mismos brillos dorados muy sutiles. */
.cinta-band {
    background:
        radial-gradient(55% 42% at 12% 0%, rgba(216, 169, 58, .16), transparent 65%),
        radial-gradient(45% 38% at 92% 100%, rgba(216, 169, 58, .10), transparent 70%),
        linear-gradient(180deg, #004349 0%, #003338 100%);
    padding: clamp(40px, 5vw, 64px) 0;
}

/* ---------------------------------------------------------------------
   Bandas full-bleed sobre sand con trama de tela muy sutil
   --------------------------------------------------------------------- */
.bt-band,
.bt-intro {
    background-color: var(--fiu-sand);
    background-image:
        repeating-linear-gradient(0deg, rgba(186, 164, 145, .07) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg, rgba(186, 164, 145, .06) 0 1px, transparent 1px 9px);
}

/* .bt-intro y .bt-band se pintan pegadas y con el mismo fondo: leen
   como una sola sección, con el encabezado arriba y el mosaico abajo.
   Por eso el aire va sólo en los extremos del par. */
.bt-intro {
    padding: clamp(48px, 6vw, 84px) 0 0;
}

.bt-band {
    margin-top: 0;
    padding: 0 0 clamp(48px, 6vw, 84px);
}

/* ── eyebrow + H1 + sub, centrados ── */
.bt-head {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.bt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fiu-teal-light);
    color: var(--fiu-teal-darker);
    font-family: 'Poppins', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--fiu-radius-pill);
    margin-bottom: 14px;
}

.bt-eyebrow i {
    font-size: .8rem;
}

.bt-title {
    font-weight: 600;
    color: var(--fiu-teal-ink);
    font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
    line-height: 1.12;
    margin: 0 0 12px;
}

/* Pincelada coral en una palabra del título */
.bt-accent {
    background: linear-gradient(transparent 60%, var(--fiu-coral-light) 60%);
    border-radius: 6px;
    padding: 0 .12em;
}

.bt-sub {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(.95rem, .88rem + .3vw, 1.05rem);
    color: var(--fiu-slate);
    line-height: 1.6;
    max-width: 58ch;
    margin: 0 auto;
}

/* ── Mosaico: 1 tile héroe (vertical) + 2 tiles apilados ── */
.bt-mosaic {
    display: grid;
    /* Columna angosta a la izquierda (dos cards a media altura) y
       columna ancha a la derecha (la card grande). El alto de las
       filas lo fija el aspect-ratio de las dos cards chicas; la
       grande se estira para cubrir ambas. */
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(12px, 1.6vw, 20px);
}

.bt-tile {
    position: relative;
    display: block;
    border-radius: var(--fiu-radius-lg);
    overflow: hidden;
    background: rgba(26, 53, 50, .06);
    box-shadow: var(--fiu-shadow-sm);
    transition: transform .25s var(--fiu-ease-out), box-shadow .25s var(--fiu-ease-out);
    aspect-ratio: 1 / 1;
}

.bt-tile--hero {
    grid-column: 2;
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.bt-tile:hover,
.bt-tile:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--fiu-shadow-lg);
}

.bt-tile:focus-visible {
    outline: none;
    box-shadow: var(--fiu-shadow-lg), var(--fiu-ring);
}

/* El <picture> debe llenar la card para que el <img> pueda recortar
   (object-fit: cover) sin alterar la medida de la card. */
.bt-tile picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bt-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--fiu-ease-out);
}

.bt-tile:hover img {
    transform: scale(1.07);
}

.bt-tile-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--fiu-coral);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--fiu-radius-pill);
    box-shadow: 0 3px 10px rgba(227, 93, 80, .35);
}

.bt-tile-badge--deep {
    background: var(--fiu-coral-deep);
}

/* Placa inferior: nombre de categoría + flecha que gira en coral */
.bt-tile-plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 44px 16px 14px;
    background: linear-gradient(to top, rgba(10, 26, 24, .78), rgba(10, 26, 24, 0));
}

.bt-tile-label {
    color: #fff;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(.95rem, .85rem + .5vw, 1.25rem);
    line-height: 1.2;
}

.bt-tile-cta {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--fiu-teal-ink);
    font-size: .8rem;
    transform: rotate(-45deg);
    transition: transform .25s var(--fiu-ease-back), background .2s ease, color .2s ease;
}

.bt-tile:hover .bt-tile-cta {
    transform: rotate(0deg);
    background: var(--fiu-coral);
    color: #fff;
}

/* ---------------------------------------------------------------------
   CINTA DE CONFIANZA (.bt-pagos) — card blanca dentro de .cinta-band
   Se neutralizan aquí los estilos legacy de .barra-de-pago (style.css).
   --------------------------------------------------------------------- */
.bt-pagos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 18px;
    background: var(--fiu-white);
    border: 1px solid var(--fiu-line-soft);
    border-radius: var(--fiu-radius-xl);
    box-shadow: var(--fiu-shadow-lg);
    padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2.2vw, 26px);
    margin: 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.bt-pagos .contenedor-de-pago {
    padding: 0 14px;
    gap: 12px;
    justify-content: flex-start;
    text-align: center;
}

.bt-pagos .contenedor-de-pago + .contenedor-de-pago {
    border-left: 1px solid var(--fiu-line-soft);
}

.bt-pagos .cp-titulo p {
    color: var(--fiu-ink);
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Cajas de logos parejas para que las 4 columnas alineen */
.bt-pagos .cp-logos {
    width: 100%;
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    gap: 14px;
}

.bt-pagos .cp-logos img {
    height: 32px;
}

/* Celda 1: icono en círculo teal (style.css oculta .cp-logos del
   primer hijo de .barra-de-pago; aquí se reactiva). */
.bt-pagos .contenedor-de-pago:first-child .cp-logos {
    display: flex;
}

.bt-pagos .cp-logos--icon i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fiu-teal-light);
    color: var(--fiu-teal-darker);
    font-size: 1.25rem;
}

/* Paqueterías: lienzo cuadrado con aire, necesitan más alto */
.bt-pagos .cp-logos--paqueteria {
    height: 64px;
    min-height: 64px;
    margin-top: 0;
}

.bt-pagos .cp-logos--paqueteria img {
    height: 56px;
}

.bt-pagos .cp-logos--mercadolibre {
    height: 64px;
    min-height: 64px;
    margin-top: 0;
    margin-bottom: 0;
}

.bt-pagos .cp-logos--mercadolibre img {
    height: 74px;
    max-width: 100%;
    object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .bt-pagos {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 12px;
    }

    .bt-pagos .contenedor-de-pago + .contenedor-de-pago {
        border-left: none;
    }

    .bt-pagos .contenedor-de-pago:nth-child(even) {
        border-left: 1px solid var(--fiu-line-soft);
    }
}

@media (max-width: 767px) {
    .bt-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .bt-tile {
        aspect-ratio: 4 / 3;
    }

    .bt-tile--hero {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .bt-tile-plate {
        padding: 30px 12px 10px;
    }

    .bt-tile-cta {
        width: 30px;
        height: 30px;
        font-size: .7rem;
    }

    .bt-tile-badge {
        font-size: .68rem;
        padding: 3px 9px;
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 575px) {
    .bt-pagos {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 18px;
        border-radius: var(--fiu-radius-lg);
    }

    .bt-pagos .contenedor-de-pago,
    .bt-pagos .contenedor-de-pago:nth-child(even) {
        border-left: none;
        padding: 0;
    }

    .bt-pagos .contenedor-de-pago + .contenedor-de-pago {
        border-top: 1px solid var(--fiu-line-soft);
        padding-top: 18px;
    }
}