/* ==========================================================================
   Dulce Sorpresa Peru - Segunda etapa de mejoras
   Hoja de estilos adicional. Se carga despues de index.css, por lo que sus
   reglas tienen prioridad. Cada bloque debe indicar a que item del plan
   corresponde para poder revertirlo de forma aislada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloque 3 - Catalogo a todo el ancho de la pantalla
   Las paginas de catalogo (categoria, ocasion, buscador y ofertas) llevan la
   clase .catalogo-full en su etiqueta <main>. Sin esa clase el sitio conserva
   el ancho original, de modo que el resto de vistas no se ve afectado.

   Ancho original: .container-fluid queda en 92% en movil y 82% desde 992px.
   Aqui se libera a 100% solo en escritorio y se compensa con un margen
   lateral fijo para que las tarjetas no queden pegadas al borde.
   En movil no se toca nada: se mantiene el 92% heredado.

   La portada usa la segunda clase, .catalogo-full-grid, que va directamente
   sobre el contenedor de la grilla. La portada no es una pagina de catalogo:
   ensanchar su <main> entero estiraria tambien el filtro de ocasiones y los
   testimonios, que se leen mejor en la caja angosta.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .catalogo-full .container-fluid,
    .container-fluid.catalogo-full-grid {
        width: 100% !important;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* A partir de 1600px las cuatro columnas de Bootstrap (col-xl-3) darian
   tarjetas demasiado grandes, asi que se pasa a cinco columnas.

   Ojo: estos dos tramos son solo para el catalogo, NO para la portada. La
   grilla de la portada intercala dos banners de media fila despues del cuarto
   producto (productos.php, condicion $oo == 3), asi que ese primer grupo tiene
   exactamente cuatro tarjetas. Con cinco columnas quedaria un hueco visible
   justo arriba de todo. La portada se queda en cuatro columnas a cualquier
   ancho, que es lo unico que encaja con esa maquetacion. */
@media (min-width: 1600px) {
    .catalogo-full .content-product-index > .row > .col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* En monitores muy anchos se pasa a seis columnas para que la tarjeta se
   mantenga en un tamano parecido al original (unos 400px). */
@media (min-width: 2400px) {
    .catalogo-full .content-product-index > .row > .col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* --------------------------------------------------------------------------
   Bloque 2.1 (parte) - El carrito no debe desbordar horizontalmente en movil

   Esto NO es el rediseno del carrito. Es solo el defecto: elementos que se
   salen del ancho de la pantalla. La jerarquia, los tamanos de letra y el
   orden no se tocan aqui, porque eso necesita una maqueta aprobada.

   Sintoma que reporto la clienta: en el movil los textos aparecen cortados por
   la izquierda ("ADJUNTAR IMAGEN...", "ATOS DEL COMPRADOR"). No se podia
   arrastrar para verlos: el documento mide exactamente el ancho de la pantalla
   (scrollWidth == clientWidth) y lo que sobresale queda recortado, no
   desplazado. Por eso se ve como texto mutilado y no como una pagina ancha.

   Causa de fondo, repetida en varias formas: margenes y desplazamientos
   laterales negativos que no tienen nada que cancelar. El .row de Bootstrap
   trae margin-left y margin-right de -15px, pensados para compensar el relleno
   de la columna que lo contiene; cuando esa columna lleva px-0, o cuando el
   contenedor no es una columna, el bloque se sale por los dos lados.

   Medido con una sonda que cuenta los elementos cuyo borde queda fuera del
   ancho por causa propia, no por heredarlo del padre, en un viewport de 390px
   con un producto y el complemento FOTO en el carrito:
       antes: 33 elementos
       despues: 0

   Todo va acotado a #carrito, que es el id que el header pone en <body> solo
   en la pagina del carrito, y a menos de 768px. Fuera de ahi no cambia nada.

   Las dos filas de plantilla de las lineas del carrito no se arreglan aqui
   sino con mx-0 en carrito-de-compras.php: son un caso puntual y hacerlo en la
   vista evita depender de :has(), que no existe en los moviles mas viejos, que
   son justamente los que peor sufren el problema.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Filas que cuelgan de un contenedor sin relleno lateral. */
    #carrito .px-0 > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Filas que ademas son columna y se declaran sin relleno lateral.
       Un .row que trae px-0 en si mismo no puede querer sangrar hacia afuera. */
    #carrito .row.px-0 {
        margin-left: 0;
        margin-right: 0;
    }

    /* Una .row anidada directamente dentro de otra .row. En Bootstrap el hijo
       de una fila debe ser una columna, nunca otra fila, asi que sus margenes
       negativos no tienen nada que cancelar. */
    #carrito .row > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Titulos de seccion con margen negativo fijo (.diay, -8px). */
    #carrito .diay {
        margin-left: 0 !important;
    }

    /* El aviso del cupon se corria 20px hacia la izquierda por un right:20px
       heredado de un @media (min-width:320px) de la propia vista. */
    #carrito .content-cupon {
        right: 0;
    }

    /* Etiquetas flotantes de los campos: son position:absolute con el ancho
       completo de su columna y ademas desplazadas, asi que sobresalian por la
       derecha. Se limita el ancho, no la posicion. */
    #carrito .formulario-car .form__label {
        max-width: calc(100% - 2rem);
    }

    /* Radios de comprobante y forma de pago: mismo caso, con un left:27px
       fijo sobre un ancho del 100%. */
    #carrito .check-repeat .radio {
        max-width: calc(100% - 30px);
    }

    /* Casilla de verificacion con margin-left negativo fijo. */
    #carrito .form-check-input {
        margin-left: 0;
    }
}


/* --------------------------------------------------------------------------
   Bloque 3.1 - Distintivos de producto

   Sellos que van ENCIMA de la foto, arriba a la izquierda, tal como los mostro
   la clienta en sus cuatro referencias: "Personalizalo", "Producto exclusivo",
   "Producto nuevo" y un sello de campana.

   Cada distintivo se pinta de una de dos formas:
     - con imagen: un PNG de 400x400 transparente
     - sin imagen: el nombre sobre un color, que es el respaldo mientras la
       clienta no mande los archivos. Nunca queda un hueco.

   Las dos formas se miden distinto a proposito:

   La IMAGEN lleva un ancho fijo en pixeles. Es una proporcion conocida, 400x400,
   y un tamano fijo se comporta igual en toda la grilla, que segun el ancho de
   pantalla da tarjetas de entre 288 y 430 px.

   El TEXTO se mide con un maximo en porcentaje de la foto y puede partirse en
   varias lineas. No lleva ancho fijo porque los nombres no miden igual: "Nuevo"
   y "Apto celiacos" no caben en la misma caja, y el respaldo tiene que seguir
   siendo legible con cualquier nombre que ella escriba, sin salirse de la foto.
   -------------------------------------------------------------------------- */

.content-products-foto,
#v-pills-tabContent {
    position: relative;
}

.distintivos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Sin ancho propio: se ajusta al sello mas ancho, con el tope de abajo. */
    max-width: 60%;
    /* No debe tapar el enlace que cubre la tarjeta ni el hover de "VER DETALLE". */
    pointer-events: none;
}

.distintivo {
    display: block;
    line-height: 0;
    margin-bottom: 6px;
    max-width: 100%;
}

.distintivo-img {
    display: block;
    height: auto;
    max-width: 100%;
}

/*
 * En el listado el sello vive dentro de `.content-products-img`, y index.css
 * le da a TODA imagen de ahi `height:100%` y `object-fit:cover` (0,1,1 de
 * especificidad, mas que `.distintivo-img`). El alto se calculaba contra la
 * caja de los sellos, que no tiene alto propio, y el SVG de la clienta salia
 * de 76 x 6 px: una tira naranja recortada. Con dos clases gana esta regla.
 */
.distintivos .distintivo-img {
    height: auto;
    object-fit: contain;
}

.distintivo-texto {
    display: inline-block;
    max-width: 100%;
    border-radius: 999px;
    font-family: brandon_grotesquebold, sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    /* Se parte en varias lineas antes que salirse de la foto. */
    white-space: normal;
    overflow-wrap: break-word;
}

/*
 * Tarjeta del catalogo y de la portada.
 *
 * El sello del catalogo va del MISMO tamaño y a la misma distancia del borde
 * que en la portada: 46 px a 12 px de la esquina (32 px en movil). Asi lo pidio
 * la clienta el 06/10/2026, cuando subio sus SVG: con 76 px el sello del
 * catalogo se veia el doble que el de la portada en la misma foto.
 */
.distintivos--listado {
    margin: 12px 0 0 12px;
}

.distintivos--listado .distintivo-img {
    width: 46px;
}

.distintivos--listado .distintivo-texto {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .02em;
}

/*
 * La portada usa la misma clase, pero su caja de sellos recorta al 60 % y el
 * tamaño que se ve alli -46 px, 32 px en movil- sale de 76 y 54. Se dejan esos
 * valores en la portada para que no cambie al ajustar el catalogo.
 */
.rd-regalo__marcas .distintivos--listado .distintivo-img {
    width: 76px;
}

@media (max-width: 767.98px) {
    .rd-regalo__marcas .distintivos--listado .distintivo-img {
        width: 54px;
    }
}

/* Ficha de producto: la foto es mas grande, el sello tambien. */
.distintivos--ficha {
    margin: 12px 0 0 12px;
}

.distintivos--ficha .distintivo-img {
    width: 104px;
}

.distintivos--ficha .distintivo-texto {
    padding: 7px 14px;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    /* En movil la tarjeta baja a unos 180 px de ancho. */
    .distintivos--listado {
        margin: 12px 0 0 12px;
    }

    .distintivos--listado .distintivo-img {
        width: 32px;
    }

    .distintivos--listado .distintivo-texto {
        padding: 4px 8px;
        font-size: 9px;
    }

    .distintivos--ficha .distintivo-img {
        width: 72px;
    }
}


/* --------------------------------------------------------------------------
   Bloques 3.2 y 3.3 - Iconos de confianza y aviso de entrega el mismo dia

   Punto 19: "agregar estos iconos en la parte inferior del home". Su
   referencia es una fila de tarjetas con el icono a la izquierda y titulo mas
   una linea de apoyo a la derecha.

   Punto 28: lo mismo dentro de la ficha, junto al boton de comprar, con la
   etiqueta "insignias de promesa", mas un aviso de cuanto queda para pedir con
   entrega hoy.

   Mientras no lleguen los PNG de 300x300 el icono es la inicial del titulo
   dentro de un circulo. La tarjeta se ve completa igual.
   -------------------------------------------------------------------------- */

.confianza {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.confianza-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* El sitio pone list-style a los li dentro de varios contenedores, asi que
       hace falta quitarlo tambien en el elemento y no solo en la lista. */
    list-style: none;
}

.confianza-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

.confianza-icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.confianza-icono--inicial {
    font-family: brandon_grotesquebold, sans-serif;
    line-height: 1;
}

.confianza-texto {
    display: block;
}

.confianza-titulo {
    display: block;
    font-family: brandon_grotesquebold, sans-serif;
    color: #522a16;
    line-height: 1.2;
}

.confianza-descripcion {
    display: block;
    color: #796857;
    line-height: 1.35;
}

/* --- Home: fila de tarjetas al final de la portada --- */

.sct-confianza {
    padding: 2.5rem 0 3rem;
}

.confianza--home {
    gap: 2rem;
    justify-content: center;
}

.confianza--home .confianza-item {
    flex: 1 1 260px;
    max-width: 360px;
}

.confianza--home .confianza-icono {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.confianza--home .confianza-titulo {
    font-size: 16px;
}

.confianza--home .confianza-descripcion {
    font-size: 14px;
    margin-top: 4px;
}

/* --- Ficha: insignias debajo del boton de comprar --- */

.confianza--ficha {
    flex-direction: column;
    gap: 12px;
    margin-top: 1.2rem;
}

.confianza--ficha .confianza-item {
    flex: 1 1 auto;
    gap: 10px;
}

.confianza--ficha .confianza-icono {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.confianza--ficha .confianza-titulo {
    font-size: 14px;
}

.confianza--ficha .confianza-descripcion {
    font-size: 13px;
}

/* --- Aviso de entrega el mismo dia --- */

/* Sin caja, sin fondo y sin barra de color.
 *
 * La version anterior era un recuadro verde con borde izquierdo grueso y
 * esquinas redondeadas: el patron de "alerta" de cualquier libreria de
 * componentes. En esta ficha desentonaba por dos motivos. Uno, no hay ni una
 * sola superficie de color en toda la columna salvo el boton COMPRAR, asi que
 * el bloque verde se leia como un elemento pegado de otro sitio. Dos, esto no
 * es una alerta: es un dato de servicio, del mismo rango que "Podras cambiarla
 * en el carrito antes de pagar".
 *
 * Se adopta el idioma que la propia ficha ya usa para sus datos: icono de
 * Font Awesome mas texto en el gris calido #796857, igual que "¿Cuando quieres
 * que llegue?" y el campo de personalizacion. Lo unico que se separa del resto
 * es el tiempo restante, que es el dato por el que existe el aviso. */
/* El selector va acompanado de .detail-detail p a proposito, no por gusto de
 * escribir de mas. La columna de la ficha ya trae dos reglas para sus parrafos:
 * index.css les pone un borde superior punteado naranja y main.min.css se lo
 * quita otra vez con div.detail-detail p, que pesa mas que una clase suelta.
 * Sin subir la especificidad aqui, el borde y el color de este aviso los decide
 * el CSS antiguo y no este archivo. */
.aviso-entrega,
.detail-detail p.aviso-entrega {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .9rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid #e6ddd2;
    font-size: 14px;
    line-height: 1.45;
    color: #796857;
}

/* El texto va dentro de un <span> y ese <span> hereda el naranja #ffb466 de la
   ficha si no se le dice lo contrario. */
.aviso-entrega > span,
.detail-detail p.aviso-entrega > span {
    color: inherit;
}

.aviso-entrega .fa,
.detail-detail p.aviso-entrega .fa {
    flex: 0 0 auto;
    color: #b8935f;
    font-size: 13px;
}

/* El numero se repinta cada minuto. Sin cifras de ancho fijo la frase se
   desplaza sola mientras el cliente la esta leyendo. */
.aviso-entrega-cuenta {
    color: #8c6239;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Cuando ya no hay entrega para hoy el aviso NO se esconde ni cambia de tono
   alarmante: sigue siendo informacion util, solo que otra. Mismo tratamiento,
   un paso mas apagado. */
.aviso-entrega--cerrado {
    color: #8a7768;
}

.aviso-entrega--cerrado .fa {
    color: #c8b5a0;
}

@media (max-width: 767.98px) {
    .confianza--home {
        gap: 1.4rem;
    }

    .confianza--home .confianza-item {
        flex: 1 1 100%;
        max-width: none;
    }

    .confianza--home .confianza-icono {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .sct-confianza {
        padding: 1.8rem 0 2rem;
    }
}


/* --------------------------------------------------------------------------
   Bloque 3.5 - Cabecera editable de catalogo y de ocasion

   Punto 24: "he visto que varias paginas tienen el titulo pero ademas un texto
   y un banner (a veces) en la parte superior de cada catalogo u ocasion".

   Su referencia pone el titulo grande a la izquierda y el parrafo a la
   derecha, separados por una linea vertical, y debajo una franja ancha con la
   imagen. Aqui se reutiliza la fila que ya existe en la barra de busqueda, asi
   que el titulo sigue siendo el mismo <h1> de siempre y el parrafo se le pone
   al lado.

   Todo esto solo aparece cuando hay algo escrito. Sin configurar nada, estas
   reglas no tienen a que aplicarse y la pagina se ve igual que antes.
   -------------------------------------------------------------------------- */

.cabecera-cat-texto-col {
    display: flex;
    align-items: center;
}

.cabecera-cat-texto {
    color: #796857;
    font-size: 15px;
    line-height: 1.5;
}

/* La linea que separa el titulo del texto, como en la referencia. Solo desde
   992px: apilados en movil, una linea vertical no separa nada. */
@media (min-width: 992px) {
    .cabecera-cat-texto-col {
        border-left: 1px solid #e3d7c9;
        padding-left: 1.6rem;
    }
}

/* Version centrada, para las paginas de ocasion, donde el titulo va centrado
   entre las dos hojas y no alineado a la izquierda. */
.cabecera-cat-texto-centrado {
    max-width: 760px;
    margin: .6rem auto 0;
    color: #796857;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    /* La seccion de ocasiones lleva la tipografia decorativa para su titulo.
       Un parrafo de tres lineas con esa letra no se lee, y este parrafo esta
       para leerse: es lo que describe la seccion y lo que indexa Google. */
    font-family: inherit;
}

.title-products-index .cabecera-cat-texto-centrado {
    font-family: brandon_grotesque, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Cabecera en dos columnas: banner a la izquierda, texto a la derecha

   Correccion de la revision de la clienta. La primera version metia el titulo
   y el parrafo en la misma fila que el filtro de busqueda -select 3 columnas,
   titulo 5, parrafo 4- y dejaba el banner debajo a lo ancho. Con las tres
   cosas repartidas en doce columnas el titulo manuscrito se comia su hueco y
   el parrafo quedaba en una tira estrecha, encima de un banner gigante.

   Lo pidio asi: banner a la izquierda, texto a la derecha separados por la
   rayita, y el filtro DEBAJO.
   -------------------------------------------------------------------------- */

.sct-cabecera-catalogo {
    padding: 1.4rem 0 .4rem;
}

.cabecera-cat-fila {
    row-gap: 1rem;
}

.cabecera-cat-banner-col img {
    display: block;
    width: 100%;
    height: auto;
    /* El banner es una imagen que sube la clienta y puede venir cuadrada o muy
       alta. Sin tope, un logo cuadrado ocupa una pantalla entera y empuja los
       productos fuera de la vista, que es justo lo que pasaba. */
    max-height: 260px;
    object-fit: contain;
    object-position: left center;
}

.cabecera-cat-info h1 {
    margin: 0 0 .6rem;
}

/* La rayita. Solo desde 992px: apilados en movil una linea vertical no separa
   nada, y ahi pasa a ser un filete horizontal. */
@media (min-width: 992px) {
    .cabecera-cat-info--separada {
        border-left: 1px solid #e3d7c9;
        padding-left: 2rem;
    }
}

@media (max-width: 991.98px) {
    .cabecera-cat-info--separada {
        border-top: 1px solid #e3d7c9;
        padding-top: 1rem;
        margin-top: .2rem;
    }

    .cabecera-cat-banner-col img {
        max-height: 200px;
        object-position: center;
        margin: 0 auto;
    }

    .cabecera-cat-info {
        text-align: center;
    }
}

/* El filtro queda debajo de la cabecera, ya no compartiendo fila con ella.
 *
 * `.sct-busqueda` arrastra un margin-top enorme -de 3rem a 14rem segun el
 * ancho, repartido en siete reglas de index.css- porque era lo primero del
 * <main> y ese margen le hacia sitio bajo la cabecera fija. Ahora tiene la
 * seccion de cabecera delante y ese hueco queda en medio de la pagina: 240px
 * de vacio entre el texto y el filtro.
 *
 * Se anula SOLO cuando va precedida de la cabecera nueva, sin tocar index.css
 * -que esta minificada y con finales de linea mezclados-.
 *
 * Lleva !important porque las siete reglas de index.css lo llevan: ahi esta
 * escrito `.sct-busqueda{margin-top:240px!important}`. Contra un !important no
 * basta con tener mas especificidad, hace falta otro !important. Con los dos
 * en juego, gana el selector mas especifico, que es este.
 *
 * Sin cabecera configurada el selector no casa y esas paginas conservan su
 * margen tal cual.
 */
.sct-cabecera-catalogo + .sct-busqueda {
    margin-top: 0 !important;
    padding-top: .2rem;
}

/* --- El banner --- */

.cabecera-cat-banner {
    margin: 0 0 1.5rem;
}

.cabecera-cat-banner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .cabecera-cat-texto,
    .cabecera-cat-texto-centrado {
        font-size: 14px;
    }

    .cabecera-cat-texto-col {
        margin-top: .8rem;
    }

    .cabecera-cat-banner {
        margin-bottom: 1rem;
    }
}


/* --------------------------------------------------------------------------
   Bloque 1.2 (defecto) - Imagenes dentro del texto de la franja superior

   index.css trae `.carousel-item img { width:100%; object-fit:cover }`, escrita
   para los banners del carrusel de portada. El problema es que tambien alcanza
   a cualquier imagen que entre en el TEXTO de la franja superior.

   Como aparecio: el editor del panel tiene un boton de emoticones que inserta
   <img src=".../smiley-cool.gif">, de 18x18 px. Al caer bajo esa regla se
   estiraba al ancho completo del carrusel -unos 840 px de alto- y empujaba el
   resto de la portada fuera de la pantalla. La pagina quedaba en blanco por
   debajo del menu.

   El plugin de emoticones ya se cambio por uno que inserta el caracter Unicode
   en vez de una imagen (mgr/js/plugins/tinymce/plugins/emoticons/). Esta regla
   es la segunda defensa: cubre lo que ya este guardado con la imagen dentro y
   cualquier otra imagen que alguien pegue ahi mas adelante.

   Se acota a .carrusel-item-text, que es el bloque de texto de la franja. Los
   banners del carrusel no se tocan.
   -------------------------------------------------------------------------- */
.carrusel-item-text img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    /* A la altura de la linea, como se comporta un emoji de texto. */
    height: 1.15em;
    max-height: 1.15em;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: -.18em;
    margin: 0 .1em;
}


/* --------------------------------------------------------------------------
   Bloque 2.1 - Cabecera del checkout aislado

   Durante el pago solo se pinta la marca. La primera version reusaba
   .bgblanco-top, que trae `height: 38px` fija -es la barra delgada del
   escritorio-. El logo salia a 150x100 px, el contenido medía 124 px y se
   derramaba fuera del contenedor: en movil el logo caia encima de la cabecera
   de la tabla y tapaba la palabra "PRODUCTOS".

   Con clase propia el alto lo manda el contenido, y el logo se dimensiona por
   altura -no por un width fijo- para que se adapte a cada pantalla.
   -------------------------------------------------------------------------- */
.checkout-marca {
    display: block;
    width: 100%;
    background: #fdfaf3;
    padding: 12px 16px;
    text-align: center;
    /* Sin altura fija: la define el logo mas el relleno. */
    line-height: 0;
}

.checkout-marca img {
    display: inline-block;
    width: auto;
    height: 58px;
    max-width: 70%;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 768px) {
    .checkout-marca {
        padding: 16px;
    }

    .checkout-marca img {
        height: 76px;
        max-width: 45%;
    }
}

/*
 * El contenedor de la cabecera y el margen superior del contenido estan
 * calculados para el menu completo: .cabeceramenu llega a fijar entre 90 y
 * 190 px segun el ancho, y body > .main-carrito arrastra `margin-top: 7em`.
 *
 * En el checkout solo va el logo, asi que esos numeros dejan una franja crema
 * vacia entre la marca y la tabla de productos. Aqui el alto lo decide el
 * contenido.
 */
/*
 * Va con #carrito por delante porque index.css trae
 * `#carrito .cabeceramenu { height: 90px !important }` y variantes por ancho:
 * con un solo nombre de clase el ID gana y la altura fija sobrevive.
 */
#carrito .cabeceramenu-checkout,
.cabeceramenu.cabeceramenu-checkout {
    height: auto !important;
    min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Bloque 2.2 - Carrito en movil: bloques pegados al borde y calendario suelto

   Mismo patron que el del complemento FOTO: el formulario del carrito cuelga de
   una `.row` con `margin: 0 -15px`, que en Bootstrap se cancela con el
   `padding: 15px` de las columnas. De las 39 columnas de esa fila, 17 tienen el
   padding en cero -unas por `px-0`, otras por estilos propios-, asi que el
   margen negativo no encuentra nada que lo cancele y el contenido queda pegado
   al borde de la pantalla.

   Las columnas afectadas y visibles son cuatro: el calendario, la hora de
   entrega, el comprobante y las formas de pago. Las otras trece son campos de
   locacion que solo aparecen segun el tipo de entrega, y un modal.

   Se corrige devolviendo el padding en lugar de quitarle el margen negativo a
   la fila: las otras 22 columnas si tienen su padding y ya estan bien puestas,
   y tocar la fila las desplazaria a todas.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .formulario-car > .row > .fdqueja,
    .formulario-car > .row > .content-hora-pedido,
    .formulario-car > .row > .comprobante-pago-car,
    .formulario-car > .row > .form-pago-car,
    .formulario-car > .row > .row.col-md-6 {
        /* !important porque .px-0 de Bootstrap lo trae y si no, gana el suyo. */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/*
 * El calendario mide 299 px fijos y quedaba alineado a la izquierda dentro de
 * una columna de ~358 px, con todo el aire sobrante a la derecha.
 */
.fdqueja .datepicker-inline,
.fdqueja .datepicker {
    margin-left: auto;
    margin-right: auto;
}

/*
 * "ADJUNTAR IMAGEN DEL COMPLEMENTO" arrancaba exactamente donde terminaba el
 * bloque del codigo de promocion: separacion medida, 0 px. El titulo quedaba
 * pegado al input de arriba.
 *
 * Es el unico <legend class="row mx-0"> de la vista del carrito -comprobado en
 * el DOM-, y vive fuera de .formulario-car, asi que el selector no lleva ese
 * prefijo.
 */
legend.row.mx-0 {
    margin-top: 12px;
}


/*
 * La cabecera es `position: fixed`, asi que el contenido tiene que compensarla
 * con un margen equivalente a su alto; si no, se le mete debajo.
 *
 * ACTUALIZADO 03/09/2026. Los numeros anteriores (82 y 108) se calcularon
 * cuando la cabecera de pago solo llevaba el logo. Ahora lleva ademas la linea
 * fina del artboard -"COMPRA SEGURA", logo y telefono en una fila-, asi que el
 * alto es otro.
 *
 * El alto ya no se mide: se CONSTRUYE en assets/css/carrito.css, que le fija a
 * esa cabecera el padding y al logo su altura. De ahi salen estas dos sumas, y
 * por eso son exactas y no aproximadas:
 *
 *     movil:      12 + 44 + 12 + 1 de filete =  69
 *
 * ACTUALIZADO 04/09/2026. En movil el sumando de en medio dejo de ser el alto
 * del logo (que ahora es 38) y paso a ser el del recuadro del WhatsApp (44):
 * desde el ajuste de la cabecera es el elemento mas alto de la fila, y el alto
 * lo manda el mayor de los dos.
 *     escritorio: 18 + 52 + 18 + 1 de filete =  89
 *
 * SI CAMBIA cualquiera de esos cuatro valores en carrito.css (el padding de
 * .cabeceramenu-checkout o el height de su .checkout-marca img), hay que mover
 * estos dos numeros. Es la unica dependencia entre las dos hojas y esta anotada
 * en los dos lados.
 *
 * Va por hermano general y no como `body > .main-carrito`, que alcanzaria
 * tambien al carrito con la cabecera completa y le quitaria el margen que ahi
 * si hace falta.
 */
/*
 * LA COMPENSACION ALCANZA A DOS ENVOLTORIOS, NO A UNO.
 *
 * El carrito es .main-carrito, pero las pantallas de RESPUESTA del pago
 * -compra-realizada.php, que sirve visa/gracias y pago-tarjeta/gracias, y
 * deposito-bancario.php- no llevan <main>: abren directamente con
 * <section class="dsp-detalle">. Las tres encienden $checkout_aislado y por
 * tanto la misma cabecera fija, pero solo el carrito estaba compensado: en las
 * otras dos la cabecera se comia el principio del texto, o sea justo la linea
 * que dice si el pago paso o no.
 *
 * Los dos selectores comparten los numeros a proposito: es la misma cabecera y
 * el mismo hueco que tapar.
 */
.cabeceramenu-checkout ~ .main-carrito,
.cabeceramenu-checkout ~ .dsp-detalle {
    margin-top: 69px !important;
}

@media (min-width: 768px) {
    .cabeceramenu-checkout ~ .main-carrito,
    .cabeceramenu-checkout ~ .dsp-detalle {
        margin-top: 89px !important;
    }
}

/* --- Cabecera minima del checkout aislado --- */

/*
 * Autonoma a proposito. No hereda de .bgblanco-top / .min-phon / .navbar-top,
 * que llevan offsets escritos a mano (bottom:-89px, top:32px, top:-15px) y
 * hacian que el logo cayera sobre la barra PRODUCTOS.
 */
.cabeceramenu--pago {
    position: static;
}

/*
 * .main-carrito lleva margin-top:7em !important para librar la cabecera cuando
 * es fixed. Con la cabecera ya en el flujo ese margen se cuenta dos veces y
 * deja un hueco vacio entre el logo y la barra PRODUCTOS. Se anula solo aqui.
 */
.cabeceramenu--pago ~ main {
    margin-top: 0 !important;
}

.checkout-marca {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 249, 236, .9);
    padding: 14px 16px;
    margin: 0;
}

.checkout-marca img {
    display: block;
    width: 150px;
    max-width: 55%;
    height: auto;
}

@media (max-width: 767.98px) {
    .checkout-marca {
        padding: 10px 16px;
    }

    .checkout-marca img {
        width: 120px;
    }
}

/* --------------------------------------------------------------------------
   Defecto encontrado al comprobar el catalogo a todo el ancho, no cotizado

   Entre 1720 y 1749 px de ancho el menu superior se parte en tres filas y
   "REGALOS CORPORATIVOS" queda encima del titulo de la pagina.

   La causa no es el ancho del menu ni el tamano de los iconos, que fue la
   primera sospecha y era falsa. Es el salto de letra: main.min.css sube
   .nav>li>a de 13px a 16px justo en 1720px. Medido enlace por enlace, ese
   salto anade 114px a la lista de la derecha:

       CUMPLEANOS            103.6 -> 123.8
       PERSONALIZADO         122.3 -> 146.9
       OCASIONES              90.1 -> 107.3
       REGALOS CORPORATIVOS  176.3 -> 213.2

   El contenedor de esa lista es el 50% de la barra, que a su vez es el 80% de
   la pantalla: crece 4px por cada 10px de viewport. Necesita hasta ~1746px
   para absorber los 114px de golpe, y mientras tanto la lista, que lleva
   flex-wrap: wrap, se parte.

       1710   contenido 567  contenedor 669   entra
       1720   contenido 681  contenedor 673   NO entra
       1740   contenido 681  contenedor 681   empate, tampoco entra
       1750   contenido 681  contenedor 685   entra

   El arreglo es retrasar el salto hasta donde hay sitio, no encoger nada ni
   poner nowrap: a partir de 1750px la letra de 16px entra sola y el menu se ve
   como estaba pensado. Solo se toca la franja rota.
   -------------------------------------------------------------------------- */
@media (min-width: 1720px) and (max-width: 1749.98px) {
    .nav > li > a {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   Punto 3 - Botones de cantidad en el carrito

   La clienta lo reporto asi: "no puedo agregar cantidades como deberia ser, no
   me aparece un boton para aumentar las cantidades". Habia solo un campo
   numerico suelto: en movil el teclado no ofrece flechas y en escritorio las
   del navegador son de unos 8px y aparecen solo al pasar el raton.

   El grupo se dibuja como una sola pieza, con el mismo trazo fino y las
   esquinas rectas de la caja CANT. de la ficha, para que no parezca un widget
   pegado de otro sitio. El campo pierde las flechas nativas: teniendo botones
   de verdad, duplicarlas solo estrecha el numero.
   -------------------------------------------------------------------------- */
.cant-grupo {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d9c9b6;
    background: #fff;
    line-height: 1;
}

.cant-grupo .selc-cant {
    width: 44px;
    border: 0;
    border-left: 1px solid #e6ddd2;
    border-right: 1px solid #e6ddd2;
    background: transparent;
    padding: 6px 2px;
    font-size: 15px;
    color: #4c4c4c;
    -moz-appearance: textfield;
}

/* Sin flechas nativas: ya hay botones. */
.cant-grupo .selc-cant::-webkit-outer-spin-button,
.cant-grupo .selc-cant::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cant-boton {
    border: 0;
    background: transparent;
    color: #8c6239;
    font-size: 16px;
    line-height: 1;
    width: 30px;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cant-boton:hover { background-color: #f6efe7; }
.cant-boton:active { background-color: #eadfd2; }

/* El foco tiene que verse: estos botones se usan con teclado. */
.cant-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .cant-boton { transition: none; }
}

/* En movil la fila es estrecha y el grupo comparte sitio con el precio. */
@media (max-width: 767.98px) {
    .cant-grupo .selc-cant { width: 38px; font-size: 14px; }
    .cant-boton { width: 28px; }
}

/* --------------------------------------------------------------------------
   Banners de la portada - proporcion en vez de altura fija

   La clienta lo dijo asi el 02/09: "ahora que ha crecido el tamano de las
   fotos, estos dos banners se ven muy gigantes". Es consecuencia directa del
   catalogo a todo el ancho.

   La caja .inicio-productos-banner-img tenia height:500px fijo y la imagen la
   rellenaba con object-fit:cover. Al ensanchar la grilla la caja crecio a lo
   ancho pero el alto no se movio, asi que el banner dejo de ser proporcional:

       ventana 1440   banner 607x500   foto de producto 311 de ancho
       ventana 1920   banner 828x500   foto de producto 429 de ancho

   A 1920 un banner medida casi el doble de ancho que un producto y seguia con
   500 de alto. Eso es lo que se ve gigante.

   Se cambia por la proporcion de las piezas nuevas que ella va a subir,
   1024x500. Asi la caja crece y encoge con su ancho:

       ventana 1440   607 de ancho -> 296 de alto
       ventana 1920   828 de ancho -> 404 de alto

   Se mantiene object-fit:cover para que un archivo con otra proporcion siga
   rellenando sin deformarse. La altura fija se anula con !important porque la
   regla original vive en index.css y pesa lo mismo que esta.
   -------------------------------------------------------------------------- */
.inicio-productos-banner-img {
    height: auto !important;
    aspect-ratio: 1024 / 500;
}

.inicio-productos-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Punto 18 - Tarjeta de fecha y hora en la ficha

   Maqueta de la clienta del 02/09/2026: una tarjeta con el aviso arriba y dos
   campos debajo, "Escoge una fecha de entrega" y "Seleccione horario de
   entrega", cada uno con su icono a la derecha.

   El calendario deja de estar siempre desplegado y se abre al pulsar el campo.
   Ocupaba media columna de forma permanente y empujaba el boton de comprar
   fuera de la pantalla en portatiles.

   Los dos campos comparten exactamente la misma caja para que se lean como un
   par y no como dos controles distintos que casualmente estan juntos.
   -------------------------------------------------------------------------- */
.entrega-caja {
    border: 1px solid #e6ddd2;
    border-radius: 10px;
    padding: 18px 18px 16px;
    background: #fff;
    /* Bloque contenedor del calendario, que se cuelga de esta caja
       (container: '#ficha-fecha-entrega' en detalle-producto.php).

       Sin esto la libreria lo mete en el <body> y, al calcular la posicion, le
       resta la del <body> dando por hecho que es un bloque contenedor. Ese
       <body> es `position: static`, asi que la resta no la compensa nadie y el
       calendario aparecia 190 pixeles por encima del campo, sobre la
       descripcion del producto. */
    position: relative;
}

/* El aviso vive aqui dentro como titulo, asi que pierde el filete superior y
   el icono que llevaba cuando iba suelto al lado del boton. */
.entrega-caja .entrega-titulo .aviso-entrega {
    display: block;
    border-top: 0;
    padding-top: 0;
    margin: 0 0 14px;
    text-align: center;
    font-size: 15px;
    color: #796857;
}

.entrega-caja .entrega-titulo .aviso-entrega .fa {
    display: none;
}

.entrega-campo {
    position: relative;
    margin-bottom: 12px;
}

.entrega-campo:last-of-type {
    margin-bottom: 0;
}

.entrega-input {
    width: 100%;
    border: 1px solid #e6ddd2;
    border-radius: 8px;
    background: #fdfbf9;
    padding: 13px 44px 13px 14px;
    font-size: 15px;
    color: #4c4c4c;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.entrega-input::placeholder { color: #9a8f85; }

.entrega-input:disabled {
    background: #f7f4f0;
    color: #9a8f85;
    cursor: default;
}

.entrega-input:focus {
    outline: none;
    border-color: #b8935f;
    background: #fff;
}

/* El icono no debe robar el clic: el campo entero es la zona pulsable. */
.entrega-icono {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c6239;
    font-size: 16px;
    pointer-events: none;
}

/* El calendario emergente se alinea con el ancho del campo.

   Cuelga de .entrega-caja, no de .entrega-campo: la libreria lo mueve al
   elemento que se le pasa en `container`. Si este selector vuelve a
   .entrega-campo, el calendario se queda sin borde ni sombra. */
.entrega-caja .datepicker {
    border: 1px solid #e6ddd2;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(140, 98, 57, .12);
}

/* --------------------------------------------------------------------------
   Carrito: fecha y hora dejan de estar una a cada lado

   La clienta, 02/09/2026: "a nivel diseno no se ve bien el poner de un lado a
   otro la fecha y hora". En el carrito la fecha ocupa una columna a la
   izquierda con el calendario desplegado y la hora otra columna a la derecha,
   separadas por todo el ancho de la pagina.

   Esto NO es el rediseno del carrito, que necesita maqueta aprobada. Es solo
   juntar las dos: se apilan en una columna estrecha, una debajo de otra, con el
   mismo aire que la tarjeta de la ficha. La estructura y el calendario no se
   tocan, asi que el dia que llegue la maqueta esto se revierte borrando este
   bloque.

   El maximo de 420px es el ancho que necesita el calendario desplegado; sin el,
   al pasar a una sola columna se estiraria a toda la pagina.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* Ocupan la fila entera para que la segunda caiga debajo y no al lado. Con
       un max-width en la columna las dos seguian cabiendo en la misma linea. */
    #carrito .fdqueja,
    #carrito .content-hora-pedido {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* El ancho se limita por dentro, no en la columna: 420px es lo que necesita
       el calendario desplegado. */
    #carrito .fdqueja > .form-group,
    #carrito .fdqueja #datepicker-container,
    #carrito .fdqueja #chk_recordar,
    #carrito .content-hora-pedido > .form-group {
        max-width: 420px;
    }

    /* La hora venia con un margen superior pensado para ir al lado, no debajo. */
    #carrito .content-hora-pedido.mt-2pc {
        margin-top: 14px !important;
    }
}

/* El titulo de la hora igualado al de la fecha: iban con tamanos distintos
   porque uno era cabecera de seccion y el otro de columna. */
#carrito .content-hora-pedido .diay {
    padding-left: 0;
}

/* --------------------------------------------------------------------------
   Punto 21 en la portada - cinco y seis columnas

   La portada se habia quedado en cuatro columnas a proposito: los dos banners
   iban intercalados detras del cuarto producto, asi que la primera fila tenia
   exactamente cuatro tarjetas y con cinco quedaba un hueco vacio arriba del
   todo, en el sitio mas visible.

   El punto 20 saco los banners de la grilla, asi que ese motivo ya no existe y
   la portada puede escalar como el resto de catalogos. Mismos tramos.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .container-fluid.catalogo-full-grid > .row > .col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 2400px) {
    .container-fluid.catalogo-full-grid > .row > .col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* --------------------------------------------------------------------------
   Punto 25 - Testimonios: comprador verificado y producto comprado

   La referencia que mando la clienta anade dos cosas a lo que ya habia: el
   sello de comprador verificado junto al nombre, y al pie el producto que
   compro con su miniatura y su precio.

   Ninguna de las dos necesito campo nuevo: el testimonio ya guardaba el enlace
   al producto y el id es el ultimo segmento de la URL.

   El sello se pinta SOLO si hay producto detras. Ponerlo en todos por defecto
   seria decir "verificado" sin nada que lo respalde.
   -------------------------------------------------------------------------- */
.inicio-testimonios-verificado {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
    color: #7a8b76;
    white-space: nowrap;
}

.inicio-testimonios-verificado .fa {
    font-size: 10px;
}

.inicio-testimonios-producto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e6ddd2;
    text-align: left;
}

.inicio-testimonios-producto img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 44px;
}

.inicio-testimonios-producto-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

/* El nombre del producto puede ser largo: se corta con puntos suspensivos en
   vez de partir la tarjeta o empujar el precio fuera. */
.inicio-testimonios-producto-nombre {
    font-size: 12px;
    color: #796857;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-testimonios-producto-precio {
    font-size: 13px;
    font-weight: 600;
    color: #8c6239;
}

/* --------------------------------------------------------------------------
   Punto 12 - Aviso de cookies

   Barra inferior, no ventana modal a pantalla completa: la persona puede seguir
   viendo la web mientras decide. Una modal que tapa todo obliga a responder para
   poder mirar, y eso presiona hacia el "aceptar".

   Los dos botones pesan lo mismo a proposito. El de aceptar lleva el marron de
   marca y el de rechazar el mismo trazo sin relleno, pero identico tamano y
   tipografia: rechazar tiene que costar lo mismo que aceptar.
   -------------------------------------------------------------------------- */
.aviso-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: #fff;
    border-top: 1px solid #e6ddd2;
    box-shadow: 0 -4px 18px rgba(140, 98, 57, .10);
}

.aviso-cookies-texto {
    flex: 1 1 380px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4c4c4c;
}

.aviso-cookies-texto strong {
    display: block;
    margin-bottom: 3px;
    color: #8c6239;
    font-size: 14px;
}

.aviso-cookies-texto p { margin: 0; }

.aviso-cookies-botones {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.aviso-cookies-boton {
    border: 1px solid #8c6239;
    background: transparent;
    color: #8c6239;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.aviso-cookies-boton--si {
    background: #8c6239;
    color: #fff;
}

.aviso-cookies-boton:hover { background: #f6efe7; color: #8c6239; }
.aviso-cookies-boton--si:hover { background: #75512f; color: #fff; }

.aviso-cookies-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-cookies-boton { transition: none; }
}

/* En movil los botones pasan a ocupar la fila entera, mitad y mitad, para que
   ninguno quede mas a mano que el otro. */
@media (max-width: 575.98px) {
    .aviso-cookies { padding: 14px 16px; }
    .aviso-cookies-botones { flex: 1 1 100%; }
    .aviso-cookies-boton { flex: 1 1 50%; padding: 11px 10px; }
}


/* --------------------------------------------------------------------------
   LA EQUIS DE CERRAR MEDIA 48 PIXELES EN TODOS LOS MODALES DEL SITIO

   modalsearch, modalregistro, modallogin y Detalleproducto pintaban el boton
   de cerrar a 23x48 px. La equis acababa pesando mas que el titulo del modal
   al que pertenece.

   DOS REGLAS DISTINTAS, Y LA SEGUNDA ES LA QUE MANDA. Conviene dejarlo escrito
   porque el diagnostico de partida senalaba a la equivocada:

   1. index.css:  `.close, .modal-header .close span { font-size: 3rem }`
      El trozo `.modal-header .close span` NO alcanza a estos modales: ninguno
      de los cuatro tiene `.modal-header` en su marcado (comprobado en QA con
      close.closest('.modal-header'), que devuelve null). Lo que si les llega
      es `.close` a secas, y de ahi salen los 48px del BOTON.

   2. main.min.css:  `.form-reg .close span { font-size: 3rem }`
      Esta es la que viste el SPAN, y es la que de verdad decide lo que se ve,
      porque el glifo lo dibuja el span y no el boton. Bajar solo el boton no
      cambiaba nada: medido en QA, el boton se quedaba en 20px y el span
      seguia a 48. Por eso hacen falta las dos reglas de abajo.

   Tampoco hay ningun desbordamiento que arreglar, aunque lo parezca: el span
   mide 68,5px de alto contra los 48 del boton, pero es un elemento EN LINEA y
   esa cifra es la caja de contenido de la fuente (48 x 1,425), no una caja que
   se salga. Con 20px la proporcion es identica. El unico problema real era el
   tamano.

   Se baja a 20px, que es el mismo tamano de glifo que ya usa la equis del
   modal del carrito redisenado (.car-modal, en carrito.css), para que cerrar
   un modal se vea igual en todo el sitio.

   Va acotada a `.modal` -y no a `.close` suelto- porque `.close` es una clase
   de Bootstrap que tambien visten las alertas descartables. Ahi 48px no
   molesta a nadie y no hay motivo para tocarlo.

   Especificidad, que aqui es lo delicado:
     - `.modal .close` (0,2,0) le gana a `.close` (0,1,0).
     - `.modal .close span` (0,2,1) EMPATA con `.form-reg .close span` (0,2,1),
       asi que decide el orden de carga. Sale bien porque etapa2.css va en la
       linea 116 de includes/header.php y main.min.css en la 110.
   Si algun dia se mueve el orden de las hojas, esto se rompe en silencio.
   -------------------------------------------------------------------------- */
.modal .close {
    font-size: 20px;
    line-height: 1;

    /* Bajar el glifo a 20px dejaba el boton en 9,6 x 20 px: se lee bien pero
       es un blanco de toque diminuto, por debajo de los 24x24 que pide WCAG
       2.2. Se le da caja de 34x34, que es la misma que usa la equis del modal
       del carrito. El glifo sigue a 20px; lo que crece es el area pulsable.

       Va con width/height y no con padding a proposito: main.min.css declara
       `.form-reg .close { padding: 0 !important }`, y a un !important no se le
       gana con un padding normal. */
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* El line-height va tambien aqui y no solo heredado: `line-height: 1` es un
   numero sin unidad, asi que lo que se hereda es el 1, no los 20px, y el span
   lo multiplicaba por SU tamano de letra. */
.modal .close span {
    font-size: inherit;
    line-height: 1;
}

/* ==========================================================================
   Observaciones del 06/10/2026 (catalogo, ficha y complementos)
   ========================================================================== */

/*
 * 1. Tarjeta del catalogo: precio pegado al nombre, iconos mas arriba y menos
 * aire entre filas ("juntar un poco mas el precio al nombre, subir un poco los
 * iconos y acortar el espacio entre filas"). Solo catalogo y ocasiones
 * (main.catalogo-full); la tarjeta de la portada es otra.
 */
main.catalogo-full .content-products-img {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}
main.catalogo-full .description-products-index ul {
    gap: 0 !important;
}
main.catalogo-full .description-products-index .precio-prd,
main.catalogo-full .description-products-index .precio-prd span {
    line-height: 1.2 !important;
}
main.catalogo-full .description-products-index .rd-tarjeta-rasgos {
    margin-top: 4px !important;
}

/*
 * 2. Telefono: el nombre en UNA linea ("se va en dos lineas y no se ve bien").
 * Letra algo mas chica; si aun asi no cabe, termina en puntos suspensivos en
 * vez de saltar de linea.
 */
@media (max-width: 767.98px) {
    main.catalogo-full .content-products-img {
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
    }
    main.catalogo-full .description-products-index .title-dcpt-product {
        max-width: 100%;
        min-width: 0;
    }
    main.catalogo-full .description-products-index .title-dcpt-product a {
        display: block;
        font-size: 18px !important; /* 14 -> 18 el 07/10: "solo de los nombres en los catalogos" */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    main.catalogo-full .description-products-index .precio-prd,
    main.catalogo-full .description-products-index .precio-prd span {
        font-size: 16px !important;
    }
}

/*
 * Titulo del catalogo o la ocasion cuando NO hay banner: salia a 57 px y "se
 * ve un poquito tosco". Con banner el titulo va en la cabecera y no cambia.
 */
.sct-busqueda h1.title-busqueda {
    font-size: 40px !important;
    line-height: 1.15 !important;
}
@media (max-width: 767.98px) {
    .sct-busqueda h1.title-busqueda {
        font-size: 30px !important;
    }
}

/*
 * 4. Ficha: la lista de la descripcion mas junta ("hay mucha separacion entre
 * ellos"). Cada punto llevaba 6 px de margen, 6 de hueco y un alto de linea
 * de 1.7.
 */
.rd-ficha .detail-detail .rd-descripcion ul {
    gap: 2px !important;
}
.rd-ficha .detail-detail .rd-descripcion ul li {
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
}

/*
 * 5. Complementos: la descripcion en la tarjeta va en UNA linea y termina en
 * puntos suspensivos si es larga; completa se lee al abrir el complemento.
 */
body .complement-pedido .title-prod-cmpl small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * 3. Texto del icono al tocarlo en el telefono. En el catalogo el icono esta
 * dentro de `.description-products-index`, y main.min.css pone a todo span de
 * ahi `font-size:1.8rem !important`: la nota salia a 24 px. Se devuelve a su
 * tamaño, el mismo que en la portada.
 */
.description-products-index span.rd-regalo__rasgo-nota {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

/*
 * Color del nombre en la tarjeta del catalogo como en la web actual (07/10/2026,
 * "podria mantenerse en ese color?... el del nombre"): #796857, medido en
 * dulcesorpresaperu.com/desayunos. El rediseno lo habia dejado en #3e2a20.
 * El precio se queda como esta.
 */
main.catalogo-full .description-products-index .title-dcpt-product a {
    color: #796857 !important;
}