/* =============================================================================
 * PAGINAS ESTATICAS (07/10/2026)
 *
 * Nosotros, Trabaja con nosotros, Como comprar, Formas de pago, Costos de
 * envio, Terminos y condiciones, Ayuda al cliente y Libro de reclamaciones.
 *
 * La clienta noto que "las paginas estaticas tambien cambiaron". No se tocaron
 * a proposito: las alcanzaron dos cosas de la portada nueva.
 *
 *   1. El fondo pasa a crema (rediseno.css). Los GIF de la linea punteada
 *      tienen el fondo BLANCO dentro del archivo, asi que quedaron como cajas
 *      blancas sobre el crema.
 *   2. rediseno.css redefine Mellifret y Brandon para que apunten a Newsreader
 *      y Karla. Los titulos de los banners, que eran la letra script, salieron
 *      en la serif fina.
 *
 * Joseph pidio NO redisenarlas: dejarlas bien, balanceadas y con las mismas
 * imagenes. Asi que esta hoja no cambia el marcado ni las fotos. Hace cuatro
 * cosas:
 *
 *   - vuelve a poner la script en los titulos, con el MISMO archivo de
 *     siempre (assets/fonts/MELLIFRET.TTF) bajo otro nombre de familia, para
 *     que el mapeo de rediseno.css no la alcance;
 *   - esconde la linea punteada: era lo que abria los huecos de 200 px entre
 *     bloque y bloque, ya en produccion;
 *   - ordena cada pagina en una columna de lectura con el aire parejo;
 *   - cierra los acordeones de Ayuda y Terminos, que en QA salian abiertos
 *     (ver mas abajo).
 *
 * Todo cuelga de la clase del <main> de cada pagina, asi que no alcanza a
 * ninguna otra pantalla. Es la leccion del cambio global que piso el carrito.
 * -------------------------------------------------------------------------- */

@font-face {
    font-family: 'DS Mellifret';
    src: url('../fonts/MELLIFRET.TTF') format('truetype');
    font-display: swap;
}

/* --- RAIZ ------------------------------------------------------------------ */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) {
    background: var(--rd-bg, #F3EAE1);
    color: var(--rd-ink-2, #6B5346);
    padding-bottom: 72px;
}

/* La linea punteada animada. Son decoracion, no contenido: el contenido de
   cada pagina se queda entero. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) img[src*="gif/linea-animacion"] {
    display: none !important;
}

/* --- TITULOS: LA SCRIPT DE SIEMPRE ----------------------------------------- */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) :is(.font-mellifret, .font-mellifret span) {
    font-family: 'DS Mellifret', var(--rd-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* El banner traia 48-72 px de margen debajo, y cada seccion suma su propio
   aire: entre la foto y el primer texto quedaban 130 px. Se deja solo el de
   la seccion. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente) .banner-repeat {
    margin-bottom: 0 !important;
}

/* El titulo blanco va sobre fotos claras (el celeste de Nosotros, el
   amarillo de Costos): una sombra suave lo despega sin cambiar la foto. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente) .title-banner-repeat h1 {
    text-shadow: 0 2px 18px rgba(62, 42, 32, .28);
}
/* La bajada blanca de Como comprar y Formas de pago cae sobre el piso blanco
   de la foto y no se leia. */
:is(.main-como-comprar, .main-formasdepago, .main-terminos-y-condiciones) .title-banner-repeat p {
    text-shadow: 0 1px 3px rgba(62, 42, 32, .55), 0 0 18px rgba(62, 42, 32, .35);
    font-weight: 600;
}

/* Las bajadas de los banners son blancas. Van despues de la regla general de
   parrafos (mas abajo) con mas especificidad, para que esa no las pinte de
   marron. Terminos traia ademas `padding: 0 304px`, que la dejaba en una
   columna de 150 px que se salia de la foto. */
:is(.main-como-comprar, .main-formasdepago, .main-terminos-y-condiciones) .banner-repeat .title-banner-repeat p {
    color: #fff !important;
    padding: 0 24px !important;
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Lo que era Brandon negrita (rotulos en mayuscula) pasa a la negrita de la
   sans del sitio, que es la que mas se le parece. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) .font-brandonB {
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
}

/* --- TEXTO ----------------------------------------------------------------- */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}

/* Los rotulos de seccion (ELIGE TU REGALO, TARJETA DE CREDITO...). Vienen como
   h1/h2 desde el editor del panel; se igualan todos. */
.main-como-comprar .icons-como-comprar h1,
.main-formasdepago .info-formasdepago h2,
.main-libroreclamos .titulorecla {
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rd-ink, #3E2A20) !important;
    margin: 0 0 12px;
    line-height: 1.3;
}

/* --- COMO COMPRAR ----------------------------------------------------------- */
/* Los tres pasos, uno al lado del otro con su numero, en vez de una columna
   con 300 px de linea punteada entre paso y paso. */

.main-como-comprar .icons-como-comprar {
    padding: 64px 24px 0;
}
.main-como-comprar .icons-como-comprar > .row {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch !important;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    counter-reset: paso;
}
.main-como-comprar .icons-como-comprar > .row > .col {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
    padding: 34px 28px 30px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    counter-increment: paso;
    opacity: 1 !important;
}
.main-como-comprar .icons-como-comprar > .row > .col::before {
    content: counter(paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--rd-bg-warm, #F7E9E2);
    color: var(--rd-accent, #B4462F);
    font-family: var(--rd-serif);
    font-size: 20px;
}
.main-como-comprar .icons-como-comprar p {
    margin: 0;
    padding: 0 !important;
}

/* --- NOSOTROS Y TRABAJA CON NOSOTROS ---------------------------------------- */

.main-nosotros .sct-intro-nosotros {
    padding: 64px 24px 24px;
    max-width: 820px;
    margin: 0 auto;
}
.main-nosotros .sct-intro-nosotros h1.text-grande,
.main-nosotros .container h1.text-grande {
    font-size: 30px !important;
    color: var(--rd-ink, #3E2A20) !important;
    margin-bottom: 4px;
}
.main-nosotros .sct-intro-nosotros h1.color-beige,
.main-nosotros .container h1.color-beige {
    font-size: 22px !important;
    line-height: 1.3;
    color: var(--rd-brown, #8B5E34) !important;
    margin-bottom: 18px;
}
.main-nosotros .sct-intro-nosotros h1.text-two {
    font-size: 30px !important;
    color: var(--rd-accent-dot, #EFA48D) !important;
    margin: 10px 0 0;
}
.main-nosotros .sct-intro-nosotros h1.text-two .text-two-oscuro {
    font-size: 44px !important;
    color: var(--rd-brown, #8B5E34) !important;
}
.main-nosotros .sct-description-nosotros {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
.main-nosotros .sct-description-nosotros .p-md-5 {
    padding: 8px 24px 0 0 !important;
    font-size: 15.5px;
    line-height: 1.8;
}
/* El logo de la firma es un PNG con fondo blanco: con multiply el blanco toma
   el crema. Para que el fundido llegue al fondo de la pagina, el bloque no
   puede ser su propio contexto de apilamiento, y la animacion de entrada
   (fadeInLeftShort) lo era por el transform. Se queda quieto. */
.main-nosotros .sct-description-nosotros .animated {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.main-nosotros .sct-description-nosotros p img {
    mix-blend-mode: multiply;
    margin-top: 6px;
}
.main-nosotros .img-celebration-nosotros img {
    border-radius: 16px;
}

/* Trabaja con nosotros usa los colores de Bootstrap tal cual: azul en los
   iconos y en el boton. Se pasan a los de la marca. */
.main-nosotros > .container {
    padding-top: 56px !important;
}
.main-nosotros .container .lead {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: 17px;
}
.main-nosotros .container h3 {
    font-size: 23px !important;
}
.main-nosotros .container h5 {
    font-size: 19px !important;
}
.main-nosotros .container h3,
.main-nosotros .container h4,
.main-nosotros .container h5 {
    font-family: var(--rd-serif) !important;
    color: var(--rd-ink, #3E2A20);
    font-weight: 500;
}
.main-nosotros .container .text-primary {
    color: var(--rd-accent, #B4462F) !important;
}
.main-nosotros .container .bg-light {
    background: var(--rd-white, #fff) !important;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px !important;
}
.main-nosotros .container .btn-primary {
    background: var(--rd-ink, #3E2A20) !important;
    border-color: var(--rd-ink, #3E2A20) !important;
    border-radius: 999px !important;
    padding: 12px 30px;
    font-size: 16px;
}
.main-nosotros .container .btn-primary:hover {
    background: var(--rd-accent-dark, #8E3522) !important;
    border-color: var(--rd-accent-dark, #8E3522) !important;
}

/* --- FORMAS DE PAGO --------------------------------------------------------- */

.main-formasdepago .info-formasdepago {
    max-width: 1100px;
    margin: 0 auto 0 !important;
    padding: 56px 24px 0;
}
.main-formasdepago .info-formasdepago > .row {
    justify-content: center !important;
    gap: 24px;
    margin: 0;
}
.main-formasdepago .info-formasdepago > .row > .col {
    flex: 1 1 0;
    max-width: none;
    padding: 32px 28px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
.main-formasdepago .info-formasdepago > .row > .col h2:not(:first-child) {
    margin-top: 26px;
}
.main-formasdepago .content-img-credito {
    gap: 14px;
    justify-content: center !important;
    flex-wrap: wrap;
}
.main-formasdepago .img-creditos {
    max-height: 40px;
    width: auto;
}
.main-formasdepago .cuenta {
    font-size: 15px;
    color: var(--rd-ink, #3E2A20);
}
.main-formasdepago .info-formasdepago > .row > .col-12.m-auto {
    flex-basis: 100%;
    max-width: 760px;
    padding: 8px 0 0;
}
.main-formasdepago .info-formasdepago ul li span {
    font-size: 15px;
}

/* --- COSTOS DE ENVIO --------------------------------------------------------- */

.main-costodeenvio .sct-buscar-distrito {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 28px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
/* El selector de distrito con el mismo borde fino y redondeado que los
   campos del Libro de reclamaciones; tenia un marco oscuro de 1 px recto. */
.main-costodeenvio .sct-buscar-distrito .select select {
    border: 1px solid var(--rd-line-3, #D8BCAE) !important;
    border-radius: 10px !important;
    background: var(--rd-white, #fff) !important;
}
.main-costodeenvio .sct-buscar-distrito thead {
    background: var(--rd-bg-soft, #FBF6F1);
}
.main-costodeenvio .sct-buscar-distrito h3 {
    font-family: var(--rd-sans) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .08em;
    color: var(--rd-ink, #3E2A20);
}
.main-costodeenvio .sct-description-costosdeenvio {
    max-width: 1100px;
    margin: 36px auto 0;
    padding: 0 24px;
}
/* La vista trae `.color-orange-dulce li span { font-size: 18px }` en linea: a
   ese tamaño la lista era mas grande que cualquier titulo de la pagina. */
.main-costodeenvio .sct-description-costosdeenvio .color-orange-dulce li span {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}
.main-costodeenvio .sct-description-costosdeenvio li {
    margin-bottom: 10px;
}

/* --- TERMINOS Y AYUDA: ACORDEONES ------------------------------------------- */
/*
 * POR QUE SALIAN ABIERTOS. index.css trae
 * `.no-js .accordionItem.is-collapsed { height: auto }`, el respaldo para
 * navegadores sin JavaScript. En produccion algo quita la clase `no-js` del
 * <html>; en QA ya no, porque esa pieza dejo de cargarse con el JS agrupado.
 * El acordeon funciona igual, pero la regla de respaldo lo dejaba todo
 * desplegado: Terminos media 5300 px en PC y 11500 en el telefono.
 *
 * Aqui se vuelve a cerrar con una regla mas especifica. El JavaScript del
 * acordeon (accordions.js) quita `is-collapsed` al abrir, asi que sigue
 * funcionando.
 */
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordionItem.is-collapsed {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.main-terminos-y-condiciones > section:not(.banner-repeat),
.main-ayudaalcliente .sct-accordions-preguntas {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 0;
}
.main-terminos-y-condiciones .accordion,
.main-ayudaalcliente .accordion {
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    padding: 8px 0;
}
.main-terminos-y-condiciones .accordion dl,
.main-ayudaalcliente .accordion dl {
    margin: 0;
    padding-left: 0 !important;
    border-left: 0 !important;
}
.main-terminos-y-condiciones .accordion dt + dd,
.main-ayudaalcliente .accordion dt {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
.main-terminos-y-condiciones .accordion dt:first-child,
.main-ayudaalcliente .accordion dt:first-child {
    border-top: 0;
}
.main-terminos-y-condiciones .accordion dt + dd {
    border-top: 0;
}
.main-terminos-y-condiciones .accordion dt:not(:first-child) {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle,
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle-ayuda {
    padding: 18px 28px;
    font-family: var(--rd-sans) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--rd-ink, #3E2A20);
}
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion dd,
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordion-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}
.main-terminos-y-condiciones .accordion dd.is-expanded {
    padding: 0 28px 20px;
}
/* Las preguntas de Ayuda son un segundo nivel dentro de cada tema. */
.main-ayudaalcliente .accordion ul.accordionItem {
    margin: 0;
    padding-left: 28px;
}
.main-ayudaalcliente .accordion ul.accordionItem.is-expanded {
    padding-bottom: 14px;
}
.main-ayudaalcliente .accordion ul.accordionItem li a {
    font-family: var(--rd-sans) !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--rd-ink, #3E2A20);
    padding: 10px 28px 10px 0;
    display: block;
}
.main-ayudaalcliente .accordion ul.accordionItem > div.is-expanded {
    padding: 0 28px 12px 0;
}

/* El texto de presentacion de Ayuda: ya no en naranja, que pesaba mas que las
   propias preguntas. Las mayusculas se quedan: estan escritas asi en el
   panel, no las pone el CSS, y pasarlas a minuscula con text-transform
   dejaria "dulce sorpresa" en minuscula. Se baja el tamaño y se abre el
   espaciado para que no griten. */
/* La hoja vieja le pone al .container-fluid un ancho fijo (699 px en PC) mas
   fuerte que esta regla sin !important: el recuadro quedaba corrido a la
   izquierda en todos los anchos. */
.main-ayudaalcliente .sct-accordions-preguntas :is(.container, .container-fluid) {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.main-ayudaalcliente .sct-text-medio {
    margin-bottom: 0 !important;
    padding-top: 48px;
}
.main-ayudaalcliente .sct-text-medio p {
    font-family: var(--rd-sans) !important;
    font-weight: 600 !important;
    color: var(--rd-ink-2, #6B5346) !important;
    font-size: 13.5px;
    letter-spacing: .05em;
    line-height: 1.9;
    margin-top: 14px;
}
.main-terminos-y-condiciones .title-p {
    max-width: 760px;
    margin: 0 auto;
}

/* --- LIBRO DE RECLAMACIONES -------------------------------------------------- */

/* El padding de arriba NO se toca: esta pagina no tiene banner y el <main>
   arranca en y=0, debajo de la cabecera fija. Ese padding es lo que deja el
   titulo a la vista; al bajarlo, el titulo quedo tapado por el menu. */
.main-libroreclamos .title-reclamos {
    padding-bottom: 8px !important;
}
.main-libroreclamos .title-reclamos h1 {
    font-size: 52px !important;
    color: var(--rd-brown, #8B5E34) !important;
}
.main-libroreclamos .title-reclamos p {
    max-width: 720px;
    margin: 6px auto 0;
}
.main-libroreclamos .formulario-libro {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
.main-libroreclamos .formulario-libro .form-control {
    background: var(--rd-white, #fff) !important;
    border: 1px solid var(--rd-line-2, #E4D8CE) !important;
    border-radius: 10px !important;
}
.main-libroreclamos .formulario-libro .form-control:focus {
    border-color: var(--rd-brown, #8B5E34) !important;
    box-shadow: 0 0 0 3px rgba(139, 94, 52, .12) !important;
}
/* Los radios llevaban una franja blanca de fondo que, sobre el crema, se leia
   como un campo vacio. Dentro de la tarjeta blanca ya no hace falta. */
.main-libroreclamos .formulario-libro .radio {
    background: transparent !important;
}
.main-libroreclamos .formulario-libro button,
.main-libroreclamos .formulario-libro input[type="submit"] {
    border-radius: 999px !important;
    background: var(--rd-ink, #3E2A20) !important;
    border-color: var(--rd-ink, #3E2A20) !important;
}
.main-libroreclamos .sct-description-reclamo ~ section,
.main-libroreclamos .sct-description-reclamo > p,
.main-libroreclamos > section:last-child {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* --- TELEFONO --------------------------------------------------------------- */

@media (max-width: 991px) {
    .main-como-comprar .icons-como-comprar > .row {
        flex-direction: column !important;
        gap: 16px;
    }
    .main-formasdepago .info-formasdepago > .row > .col {
        flex-basis: 100%;
    }
}
@media (max-width: 767px) {
    :is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
        .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) {
        padding-bottom: 48px;
    }
    /* index.css deja estas secciones con padding 0 en el telefono, con mas
       especificidad que la de arriba: las tarjetas quedaban pegadas a la
       foto del banner. */
    .main-como-comprar .icons-como-comprar,
    .main-formasdepago .info-formasdepago,
    .main-nosotros .sct-intro-nosotros {
        padding: 32px 16px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        /* Bootstrap les deja un ancho fijo (100% menos el margen de 15 px
           que se les quita arriba): sin esto la seccion quedaba corrida a
           la izquierda, con 16 px de un lado y 46 del otro. */
        width: auto !important;
    }
    .main-formasdepago .info-formasdepago > .row {
        gap: 16px;
    }
    .main-formasdepago .info-formasdepago > .row > .col {
        padding: 26px 20px !important;
    }
    .main-formasdepago .info-formasdepago > .row > .col-12.m-auto {
        padding: 8px 4px 0 !important;
    }
    /* La bajada de Formas de pago es un parrafo entero: en la foto de 244 px
       del telefono se salia por abajo. */
    .main-formasdepago .banner-repeat .title-banner-repeat p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        padding: 0 16px !important;
    }
    .main-como-comprar .icons-como-comprar > .row > .col {
        padding: 26px 22px 24px;
    }
    .main-nosotros .sct-intro-nosotros h1.text-two .text-two-oscuro {
        font-size: 36px !important;
    }
    .main-nosotros .sct-description-nosotros .p-md-5 {
        padding: 0 !important;
    }
    .main-nosotros .img-celebration-nosotros {
        margin-top: 24px;
    }
    /* index.css deja la tarjeta sin relleno y la fila de Bootstrap con -15 px
       a cada lado: el camion, el selector y la tabla tocaban el borde y se
       pasaban 28 px por la derecha. */
    .main-costodeenvio .sct-buscar-distrito {
        width: auto !important;
        max-width: none !important;
        margin: 28px 16px 0 !important;
        padding: 22px 18px 6px !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row {
        margin: 0 !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row > [class*="col"] {
        padding: 0 !important;
        border: 0 !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row > [class*="col"]:first-child {
        margin-bottom: 20px;
    }
    .main-costodeenvio .sct-buscar-distrito .img-cst-car {
        width: 64px;
    }
    .main-costodeenvio .sct-buscar-distrito h3 {
        font-size: 13px;
    }
    .main-costodeenvio .sct-description-costosdeenvio {
        width: auto !important;
        margin: 28px 0 0 !important;
        padding: 0 18px !important;
        max-width: none !important;
    }
    .main-costodeenvio .sct-description-costosdeenvio ul {
        padding-left: 18px !important;
    }
    .main-terminos-y-condiciones > section:not(.banner-repeat),
    .main-ayudaalcliente .sct-accordions-preguntas {
        padding: 28px 16px 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }
    /* La fila de Bootstrap trae -15 px a cada lado y el texto llegaba al
       borde de la pantalla. */
    .main-nosotros .sct-intro-nosotros > .row,
    .main-nosotros .sct-description-nosotros > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-nosotros .sct-intro-nosotros h1.text-two {
        margin-bottom: 8px !important;
    }
    .main-nosotros .sct-description-nosotros {
        padding: 16px 16px 0 !important;
    }
    :is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle,
    :is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle-ayuda {
        padding: 16px 20px;
    }
    .main-ayudaalcliente .accordion ul.accordionItem {
        padding-left: 20px;
    }
    /* En el telefono la cabecera tapaba el titulo: el padding de arriba que
       trae la pagina no alcanza para los 150 px del menu. */
    .main-libroreclamos .title-reclamos {
        padding-top: 48px !important;
    }
    .main-libroreclamos .title-reclamos h1 {
        font-size: 36px !important;
    }
    .main-libroreclamos .formulario-libro {
        width: auto !important;
        margin: 0 12px !important;
        padding: 22px 16px !important;
    }
    .main-libroreclamos .formulario-libro .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-libroreclamos .formulario-libro [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =============================================================================
 * OBSERVACIONES DEL 08/10/2026
 * -------------------------------------------------------------------------- */

/* Nosotros: "mover un poco el logo y agrandar la foto".
   El PNG de la firma trae mucho blanco alrededor del dibujo, asi que a 165 px
   el logo parecia flotar suelto y corrido. Se achica y se arrima a "Atte.",
   alineado con el borde del texto. La foto se come el relleno del marco: era
   de 40 px arriba y 32 a los lados, y la foto quedaba chica dentro. */
.main-nosotros .sct-description-nosotros p img {
    width: 130px !important;
    height: auto !important;
    margin: 2px 0 0 -12px;
}
.main-nosotros .img-celebration-nosotros {
    padding: 14px 14px 10px !important;
}
.main-nosotros .img-celebration-nosotros > div,
.main-nosotros .img-celebration-nosotros img {
    width: 100% !important;
    max-width: none !important;
}
.main-nosotros .img-celebration-nosotros img {
    height: auto !important;
    margin-bottom: 8px !important;
}

/* Formas de pago: "estos logos se ven aplastados". Los archivos de Yape y
   Plin son verticales (80 x 100) y la hoja vieja les fijaba 73 x 40: se
   estiraban a lo ancho. Con contain cada logo se dibuja con su forma. */
.main-formasdepago .content-img-credito .img-creditos {
    width: 73px !important;
    height: 40px !important;
    max-height: none !important;
    object-fit: contain !important;
}
.main-formasdepago .content-img-credito .img-creditos:is([alt="Yape"], [alt="PLIN"]) {
    width: auto !important;
    height: 56px !important;
}

/* Formas de pago: la lista de horarios se quito desde el panel (campo
   «Pie»). formasdepago.php ya no pinta la columna cuando esta vacio. */

@media (max-width: 767px) {
    /* Terminos: "el texto se sale del banner en responsive". La bajada
       ocupaba 132 px y el banner del telefono mide 244: se salia 34 px por
       abajo. Mas chica y mas junta entra entera. */
    .main-terminos-y-condiciones .title-banner-repeat {
        padding-top: 26px !important;
    }
    .main-terminos-y-condiciones .title-banner-repeat h1 {
        font-size: 40px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }
    .main-terminos-y-condiciones .banner-repeat .title-banner-repeat .title-p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        letter-spacing: .02em !important;
        margin-top: 4px !important;
        padding: 0 18px !important;
    }
    .main-nosotros .img-celebration-nosotros {
        margin-top: 18px;
    }
}

/* --- /empresas ANTIGUA (10/10/2026) -----------------------------------------
 * La landing corporativa nueva no salio; /empresas sigue con su vista vieja.
 * rediseno.css le cambia el h1 a Newsreader grande con interlineado justo y
 * "Regalos Corporativos" se partia en dos lineas montadas. Se le devuelve su
 * script de siempre y un interlineado que no se monte si parte. Solo #empresas.
 * -------------------------------------------------------------------------- */
main#empresas :is(.font-mellifret, .font-mellifret span) {
    font-family: 'DS Mellifret', var(--rd-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}