/* ============================================================
   Secciones de confianza: beneficios, pagos, JMT IA y footer
   ============================================================ */

/* ---------- FRANJA DE BENEFICIOS ---------- */
.franja {
    padding: var(--e-10);
    background: var(--navbar);
    border-radius: var(--r-hero);
    color: var(--texto-claro);
}
/* La rejilla va en el hijo, no en el panel: el panel solo tiene un hijo, y
   con la rejilla puesta arriba los cuatro beneficios quedaban apilados en
   vertical dentro de una columna estrecha. */
.franja-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-8);
}
.franja-item { display: flex; gap: var(--e-4); align-items: flex-start; }
.franja-item .ico {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(22, 119, 255, .16);
    border: 1px solid rgba(54, 179, 255, .22);
    border-radius: var(--r-input);
    color: var(--azul-claro);
}
.franja-item b {
    display: block;
    color: #fff;
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    margin-bottom: 2px;
}
.franja-item span { font-size: var(--txt-sm); color: var(--texto-hero); line-height: var(--lh-card); }

/* ---------- METODOS DE PAGO ---------- */
.pagos-titulo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
    font-family: var(--fuente-display);
    font-size: var(--txt-h4);
    font-weight: var(--peso-bold);
    letter-spacing: var(--track-normal);
    color: var(--texto);
}
.pagos-titulo svg { color: var(--azul); flex-shrink: 0; }

/* Una sola fila que se desplaza si no cabe, en vez de una rejilla que
   reacomoda los medios en varias lineas: asi se lee como la barra de
   medios aceptados de una caja, que es lo que es. */
.pagos-grid {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    box-shadow: var(--sombra-sutil);
    overflow-x: auto;
    scrollbar-width: thin;
}

.pago {
    /* Crecen para repartirse el ancho sobrante, pero nunca bajan de su
       base: cuando ya no caben, la fila se desplaza en horizontal. */
    flex: 1 0 108px;
    height: 78px;
    display: grid;
    place-items: center;
    padding: var(--e-2) var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-input);
    transition: transform var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva);
}
.pago:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra);
    border-color: rgba(22, 119, 255, .3);
}

/* Los logotipos vienen con proporciones muy distintas: Visa es tres veces
   mas ancho que alto y Yape casi cuadrado. Se acotan por los dos lados, y
   el tope de altura va holgado para que los verticales no queden diminutos
   mientras los apaisados se ajustan por el ancho. */
.pago img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pago.cuotas {
    flex: 1 0 130px;
    background: linear-gradient(150deg, var(--navbar), #0D2038);
    border-color: transparent;
    color: #fff;
    font-size: var(--txt-label);
    font-weight: var(--peso-normal);
    line-height: 1.3;
}
.pago.cuotas b {
    display: block;
    font-size: var(--txt-lg);
    font-weight: var(--peso-bold);
    letter-spacing: -.02em;
}

.pagos-aviso {
    margin-top: var(--e-4);
    padding: var(--e-4) var(--e-5);
    background: var(--alerta-fondo);
    border: 1px solid #FDE3B4;
    border-radius: var(--r-input);
    color: var(--alerta);
    font-size: var(--txt-sm);
    line-height: var(--lh-card);
    text-align: center;
}

/* ---------- JMT IA ---------- */
.ia {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 290px) minmax(0, 1fr);
    gap: var(--e-8);
    align-items: center;
    /* Panel bajo y ancho: el robot lo llena de arriba abajo y no queda aire
       alrededor, que es lo que lo hacia parecer un cuadro con un adorno. */
    padding: var(--e-6) var(--e-10);
    background: linear-gradient(120deg, #050A14, #0A1526 55%, #0C1220);
    border-radius: var(--r-hero);
    color: var(--texto-claro);
    overflow: hidden;
    isolation: isolate;
}
/* Un resplandor bajo el robot, del azul de la marca. El halo que traia la
   imagen original se recorto en Scripts/preparar_agente.py: era gris y
   sobre este panel se veia como suciedad. */
.ia::before {
    content: "";
    position: absolute;
    left: 2%; top: 50%;
    translate: 0 -50%;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54,179,255,.34), transparent 65%);
    filter: blur(50px);
    z-index: -1;
}
/* Tinte de color en el borde derecho, como en la referencia. */
.ia::after {
    content: "";
    position: absolute;
    right: -8%; top: -60%;
    width: 46%; height: 220%;
    background:
        radial-gradient(circle at 40% 40%, rgba(168, 85, 247, .30), transparent 60%),
        radial-gradient(circle at 60% 70%, rgba(236, 72, 153, .22), transparent 62%);
    filter: blur(90px);
    z-index: -1;
}

/* El robot define el alto del panel: se apoya en el borde inferior y se
   come el relleno vertical con margenes negativos, como en el diseno.
   Centrado y pequeno dentro del panel se veia como un adorno suelto. */
.ia-agente {
    grid-row: 1;
    align-self: end;
    justify-self: center;
    width: auto;
    max-width: 100%;
    height: calc(100% + var(--e-6) * 2);
    margin-block: calc(var(--e-6) * -1);
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
}

.ia-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--fuente-display);
    font-size: var(--txt-h4);
    font-weight: var(--peso-bold);
    letter-spacing: -.02em;
    color: #fff;
}
.ia-marca svg { color: var(--azul-claro); }

.ia-intro h2 {
    font-family: var(--fuente-display);
    font-size: var(--txt-lg);
    font-weight: var(--peso-semi);
    letter-spacing: var(--track-normal);
    color: #fff;
    margin: var(--e-2) 0 var(--e-3);
}
.ia-intro p {
    color: var(--texto-hero);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: var(--e-4);
    max-width: 30ch;
}

.ia-pregunta {
    margin-bottom: var(--e-3);
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: #fff;
}

/* Cuatro fijas: con auto-fit la cuarta caia sola a una segunda fila en
   cuanto el texto de una opcion crecia. */
.ia-opciones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-3);
}
/* Cada tarjeta lleva su tono, que entra por --tono desde la plantilla:
   en el diseno las cuatro se distinguen por color, no solo por el icono. */
.ia-op {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--e-4);
    background:
        linear-gradient(155deg, rgba(var(--tono), .16), rgba(var(--tono), .03) 65%),
        rgba(255, 255, 255, .03);
    border: 1px solid rgba(var(--tono), .38);
    border-radius: var(--r-input);
    text-align: left;
    transition: transform var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
.ia-op:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--tono), .75);
    box-shadow: 0 10px 30px rgba(var(--tono), .22);
}
.ia-op-ico {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: rgba(var(--tono), .16);
    border: 1px solid rgba(var(--tono), .30);
    border-radius: 10px;
    color: rgb(var(--tono));
}
.ia-op b { color: #fff; font-weight: var(--peso-semi); font-size: var(--txt-sm); }
.ia-op > span { font-size: var(--txt-label); color: var(--texto-hero); line-height: var(--lh-card); }

/* ---------- CONFIANZA ---------- */
/* Agrupadas a la izquierda, como en el diseno, y no estiradas de borde a
   borde: repartidas por todo el ancho quedaban sueltas y sin relacion. */
.confianza {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-6);
    max-width: 66%;
    padding-block: var(--e-6);
}
.confianza-item { display: flex; gap: var(--e-3); align-items: center; min-width: 0; }
.confianza-item svg { color: var(--texto-suave); flex-shrink: 0; }
.confianza-item b {
    display: block;
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    letter-spacing: -.01em;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.confianza-item span { font-size: var(--txt-sm); color: var(--texto-desc); }
/* "Envios a / todo el Peru": el peso cae en la segunda linea. */
.confianza-item span.fuerte {
    font-weight: var(--peso-semi);
    color: var(--texto);
}

/* ---------- FOOTER ---------- */
.footer {
    background: var(--hero);
    color: var(--texto-footer);
    padding-block: var(--e-20) var(--e-8);
    margin-top: var(--e-10);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: var(--e-16);
    padding-bottom: var(--e-12);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer h4 {
    color: #fff;
    font-size: var(--txt-lg);
    font-weight: var(--peso-semi);
    margin-bottom: var(--e-5);
    letter-spacing: var(--track-normal);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.footer a, .footer li {
    font-size: var(--txt-sm);
    font-weight: var(--peso-normal);
    transition: color var(--t-rapido) var(--curva);
}
.footer a:hover { color: #fff; }
.logo-grande img { width: 52px; height: 57px; }
.logo-grande .logo-texto b { font-size: var(--txt-h4); }

.footer-marca p {
    font-size: var(--txt-sm);
    max-width: 36ch;
    line-height: var(--lh-texto);
    margin-block: var(--e-4) var(--e-6);
}
.footer-redes { display: flex; gap: var(--e-3); }
.footer-redes a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--r-sm);
    transition: background var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.footer-redes a:hover { background: var(--azul); color: #fff; transform: translateY(-2px); }

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding-top: var(--e-8);
    font-size: var(--txt-label);
    flex-wrap: wrap;
}

/* ---------- FICHA DE DETALLE ---------- */
/* minmax(0, 1fr) y no 1fr: "1fr" es "minmax(auto, 1fr)", asi que el minimo
   de cada columna es su contenido. La tira de miniaturas mide 84px por foto
   —doce fotos son 1140px— y aunque ella lleve overflow-x:auto, la columna
   es el div que la envuelve, que no hace scroll. Resultado: la galeria se
   estiraba a 1140px, la ficha se quedaba en 268 y la descripcion salia
   partida cada treinta caracteres. Con el minimo en cero, las dos columnas
   se reparten a la mitad y la tira hace el scroll que ya tenia previsto. */
.detalle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-16);
    padding-block: var(--e-12);
}
/* Por si algun hijo vuelve a traer contenido mas ancho que su columna: el
   minimo del propio item tambien tiene que poder bajar de su contenido. */
.detalle > * { min-width: 0; }
.galeria-principal {
    aspect-ratio: 1;
    display: grid; place-items: center;
    padding: var(--e-10);
    background: linear-gradient(160deg, #FBFCFE, #EEF3F9);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
}
.galeria-principal img { max-height: 100%; object-fit: contain; }
.galeria-tiras { display: flex; gap: var(--e-3); margin-top: var(--e-4); overflow-x: auto; }
.galeria-tiras button {
    flex: 0 0 84px; height: 84px;
    padding: var(--e-2);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    transition: border-color var(--t-rapido) var(--curva);
}
.galeria-tiras button:hover { border-color: var(--borde-fuerte); }
.galeria-tiras button[aria-current="true"] { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(22,119,255,.13); }
.galeria-tiras img { width: 100%; height: 100%; object-fit: contain; }

.detalle-info h1 {
    font-size: var(--txt-h2);
    font-weight: var(--peso-bold);
    letter-spacing: var(--track-h2);
    line-height: var(--lh-titulo);
    margin-block: var(--e-3) var(--e-5);
}
.detalle-precio { display: flex; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; }
.detalle-precio b {
    font-size: var(--txt-precio);
    font-weight: var(--peso-bold);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
/* Precio de lista tachado, solo con promocion vigente. El importe rebajado
   pasa a naranja para que se lea que ese numero cambio, igual que en la
   tarjeta del listado. */
.detalle-precio del {
    font-size: var(--txt-lg);
    font-weight: var(--peso-medio);
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
}
.detalle-precio.rebajado b { color: var(--naranja); }

.detalle-tarjeta { margin-top: var(--e-3); font-size: var(--txt-sm); color: var(--texto-desc); }

/* Parrafo comercial y ficha tecnica, ambos tomados de la ficha del
   proveedor. Solo existen en parte del catalogo, asi que la plantilla los
   omite cuando no hay y el resto de la pagina no cambia. */
.detalle-resumen {
    margin-top: var(--e-6);
    font-size: var(--txt-base);
    line-height: var(--lh-texto);
    color: var(--texto-desc);
}

/* Los tramos que el proveedor cuelga detras de la primera coma. Van como
   lista porque eso es lo que son: caracteristicas sueltas. */
.detalle-rasgos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin: var(--e-5) 0 0;
    padding: 0;
    list-style: none;
}
.detalle-rasgos li {
    padding: 6px var(--e-3);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    font-size: var(--txt-sm);
    color: var(--texto-card);
}

.detalle-especs { margin-top: var(--e-7); }
.detalle-especs h2 {
    font-size: var(--txt-lg);
    font-weight: var(--peso-semi);
    letter-spacing: var(--track-normal);
    margin-bottom: var(--e-4);
}
.detalle-especs dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--e-3);
    margin: 0;
}
.detalle-especs dl div {
    padding: var(--e-3) var(--e-4);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--r-input);
}
.detalle-especs dt {
    font-size: var(--txt-label);
    color: var(--texto-desc);
    margin-bottom: 2px;
}
.detalle-especs dd {
    margin: 0;
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    color: var(--texto);
}

.detalle-datos {
    display: grid; gap: var(--e-3);
    padding-block: var(--e-6);
    margin-block: var(--e-6);
    border-block: 1px solid var(--borde);
}
.detalle-datos div { display: flex; gap: var(--e-4); font-size: var(--txt-sm); }
.detalle-datos dt { color: var(--texto-desc); min-width: 130px; }
.detalle-datos dd { margin: 0; font-weight: var(--peso-medio); color: var(--texto-card); }

.detalle-acciones { display: flex; gap: var(--e-3); margin-top: var(--e-8); flex-wrap: wrap; }

.barra-movil { display: none; }

/* ---------- BOTON FLOTANTE DE WHATSAPP ----------
   Existia en la plantilla con su z-index reservado pero sin una sola regla
   de estilo, asi que caia como un enlace suelto al final del documento y no
   se veia nunca.
   ------------------------------------------------------------------ */
.flotante {
    position: fixed;
    right: var(--e-6);
    bottom: var(--e-6);
    z-index: var(--z-flotante);
    display: inline-flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-3) var(--e-3) var(--e-3) var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    color: var(--texto);
    transition: transform var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
.flotante:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .24);
}

.flotante-texto { display: flex; flex-direction: column; line-height: 1.3; }
.flotante-texto b { font-size: var(--txt-sm); font-weight: var(--peso-semi); }
.flotante-texto span { font-size: var(--txt-sm); color: var(--texto-desc); }

.flotante-ico {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: var(--whatsapp);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    /* El robot y el mensaje pasan a compartir fila y las opciones bajan
       entera debajo: a una sola columna el panel se hacia larguisimo. */
    .ia {
        grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
        padding: var(--e-8);
        gap: var(--e-6) var(--e-8);
    }
    .ia-usos { grid-column: 1 / -1; }
    .ia-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ia-agente { max-width: 150px; }
    .franja { padding: var(--e-8); }
    .franja-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--e-10); }
    .detalle { grid-template-columns: 1fr; gap: var(--e-10); }
    .confianza { grid-template-columns: 1fr 1fr; max-width: none; }
}

@media (max-width: 640px) {
    .franja-grid, .confianza, .footer-grid { grid-template-columns: 1fr; }
    .ia { grid-template-columns: 1fr; text-align: center; }
    .ia-agente { max-width: 170px; }
    .ia-intro p { max-width: none; }
    .ia-marca, .ia-intro .btn { display: inline-flex; }
    .ia-op { text-align: left; }
    .ia-op-ico { margin-inline: 0; }
    .footer { margin-top: var(--e-16); }

    /* La accion principal siempre al alcance del pulgar. */
    .barra-movil {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: var(--z-barra);
        display: flex;
        gap: var(--e-3);
        padding: var(--e-4);
        background: var(--superficie);
        border-top: 1px solid var(--borde);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .10);
        padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
    }
    .barra-movil .btn { flex: 1; }
    body.con-barra { padding-bottom: 92px; }

    /* En movil solo el circulo: la pastilla con texto tapa media pantalla. */
    .flotante {
        right: var(--e-4);
        bottom: var(--e-4);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .flotante-texto { display: none; }
    .flotante-ico { box-shadow: 0 8px 22px rgba(34, 197, 94, .40); }

    /* Sobre la barra de acciones de la ficha, no encima de sus botones. */
    body.con-barra .flotante { bottom: calc(92px + var(--e-4)); }
}