/***************************************************
 * LYS PAÑALERA – CSS BASE
 * Desktop first ✔ luego haremos responsive
 ***************************************************/

/*=========== 1) BASE GENERAL ===========*/

body {
    background: gray;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.site-wrapper {
    width: 970px;
    margin: 7px auto;
    background: white;
    border-radius: 15px 15px 10px 0;
    overflow: hidden;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/*=========== 2) HEADER ===========*/

.site-header {
    width: 970px;
    margin: auto;
    background: white;
    border-bottom: 1px solid #ccc;
    border-radius: 15px 15px 0 0;
}

/* contenedor logo + banner */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
}

.header-logo img {
    max-height: 110px;
}

.header-banner img {
    max-height: 120px;
}

/*=========== 3) HOME: SECCIONES MODERNAS ===========*/

.home-section-title {
    font-size: 28px;
    color: #256075;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

/* Grilla de Categorías */
.home-categories-section {
    padding: 10px 20px 30px 20px; /* Top reducido a 10px para acercar al slider */
    background: #fff;
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.categoria-card {
    text-decoration: none;
    text-align: center;
    padding: 30px 20px;
    background: #fdfdfd;
    border-radius: 15px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.categoria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    background: #fff;
    border-color: #256075;
}

.cat-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #eef7f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: background 0.3s ease;
}

.cat-icon-wrapper img {
    width: 35px;
    height: 35px;
}

.categoria-card:hover .cat-icon-wrapper {
    background: #256075;
}

.categoria-card:hover .cat-icon-wrapper img {
    filter: brightness(0) invert(1);
}

.categoria-card h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.cat-link {
    font-size: 13px;
    color: #256075;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tarjetas de Beneficios (Trust Section) */
.home-benefits-section {
    padding: 40px 20px; /* Reducido de 80px */
    background: #f4f7f8;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.benefit-card {
    background: white;
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.benefit-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-size: 19px;
    color: #256075;
    margin-bottom: 15px;
}

.benefit-card p {
    font-size: 14.5px;
    color: #666;
    line-height: 1.6;
}

/* Banners de Marcas Inferiores */
.banner-marcas {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    background: #fff;
    max-width: 1100px;
    margin: 0 auto;
}

.banner-item {
    flex: 1;
    max-width: 480px;
    overflow: hidden;
    border-radius: 10px;
}

.nonisec_banner {
    width: 100%;
    height: 180px; /* Altura fija para uniformidad */
    object-fit: contain; /* Mantiene la proporción sin estirar */
    display: block;
    background: #fdfdfd;
}


/* Responsive Index */
@media (max-width: 768px) {
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .home-section-title {
        font-size: 24px;
    }
    .banner-marcas {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .nonisec_banner {
        height: 120px; /* Más pequeño en móviles */
    }
}


/*=========== PIE ===========*/
#pie {
    height: 126px;
    width: 100%;
    margin: 0px auto 10px auto;
    background-image: url(../img/pie/pie.gif);
    background-color: white;
}

#pie_contacto {
    margin: 2px 0px 0px 400px;
    width: 326px;
    height: 60px;
    float: right;
    background-image: url(../img/pie/sobre.gif);
    background-repeat: no-repeat;
    background-position: 3% 40%;
    overflow: hidden;
}

#pie_contacto_link {
    text-decoration: none;
    color: black;
    font-size: 105%;
    float: right;
    margin: 5.8% 40% 0 0%;
    font-family: arial;
}

#pie_facebook {
    width: 326px;
    height: 64px;
    float: right;
    overflow: hidden;
}

#face_img {
    width: 32px;
    height: 32px;
    float: left;
    margin: 13px 0 0 35px;
    overflow: hidden;
}

#pie_facebook_link {
    text-decoration: none;
    color: black;
    font-size: 13px;
    float: left;
    margin: 5% 0 0 7px;
    font-family: arial;
    text-align: center;
}

#instagram_img {
    width: 32px;
    height: 32px;
    float: left;
    margin: 13px 0 0 50px;
    overflow: hidden;
}

#pie_facebook_link {
    text-decoration: none;
    color: black;
    font-size: 15px;
    float: left;
    margin: 6% 0 0 7px;
    font-family: arial;
    text-align: center;
}

#pie_facebook_link:hover {
    color: rosybrown;
}

#instagram_img {
    width: 32px;
    height: 32px;
    float: left;
    margin: 13px 0 0 50px;
    overflow: hidden;
}

#pie_horarios {
    font-family: arial;
    width: 250px;
    height: 50px;
    float: left;
    padding: 0.9% 0 0 6%;
    margin: -6.1% 0 0 19%;
    overflow: hidden;
    background-image: url(../img/pie/reloj.gif);
    background-repeat: no-repeat;
    background-position: 3% 40%;
}

#pie_horarios_sab {
    font-family: arial;
    width: 100px;
    height: 48px;
    float: right;
    margin: -5.1% 2.5% 0 0;
    overflow: hidden;
}

#pie_tel {
    font-family: arial;
    width: 150px;
    height: 58px;
    padding: 0.9% 0 0 7%;
    float: right;
    margin: 0.2% 19% 0 0;
    background-image: url(../img/pie/tel.gif);
    background-repeat: no-repeat;
    background-position: 3% 40%;
}

#pie_tel_letra {
    font-family: arial;
    color: black;
    text-decoration-line: none;
}

#pie_tel_letra:hover {
    color: rosybrown;
}

#pie_wassp {
    font-family: arial;
    width: 100px;
    height: 50px;
    padding: 0.9% 0 0 7%;
    float: right;
    margin: 0.4% -40% 0 0;
    background-image: url(../img/pie/wass.webp);
    background-repeat: no-repeat;
    background-position: 10% 40%;
    background-size: 43px 44px;
    color: black;
    text-decoration-line: none;
}

#pie_wassp:hover {
    color: rosybrown;
}

#pielys {
    margin: -6% 0 0 2.4%;
    text-align: center;
    font-family: arial;
    float: left;
    padding: 13px 0px 0px 0px;
}

#pielys_letrachica {
    font-family: arial;
    font-size: 10px;
    color: gray;
}

#afip {
    margin: 1% 0 0 20%;
    width: 776px;
    height: 130px;
    overflow: visible;
}

/*=========== CIERRA PIE ===========*/
/*=========== Abre Botonera Prod ===========*/
/* ====== MENÚ DE PRODUCTOS (RECTOS / ANATÓMICOS / ETC.) ====== */


#menu,
#menu02 {
    height: 100px !important;
    box-sizing: border-box !important;
}

/* Reset de listas del menú */
#menu ul,
#menu02 ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#menu li,
#menu02 li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Configuración de columnas del menú */
#menu {
    float: left !important;
    margin: 1% 0 0 2% !important;
    width: 48% !important;
    padding-left: 15px !important;
}

#menu02 {
    float: right !important;
    margin: 1% 2% 0 0 !important;
    width: 48% !important;
    transform: translateX(-20px) !important;
}



/* Botones individuales (los <a class="boto_prodi ...">) */
.boto_prodi {
    width: 19%;
    height: 90px;
    text-indent: -9999px;
    float: left;
    margin-bottom: 2%;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* Listas del menú */
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu02 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hover de los botones */
#menu a:hover {
    background-size: 96%;
    background-position: center center;
    background-repeat: no-repeat;
}

#menu02 a:hover {
    background-size: 96%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Pestaña seleccionada (li con id="current" que setea la función Menu()) */
#menu #current a {
    /* TAB seleccionado, Página Actual */
    filter: hue-rotate(120deg);
}

#menu02 #current a {
    /* TAB seleccionado, Página Actual */
    filter: hue-rotate(120deg);
}

/* ====== IMÁGENES DE CADA BOTÓN ====== */

.boton_recto {
    background: url(../img/boto_prod/boton_recto.png);
}

.boton_anat {
    background: url(../img/boto_prod/boton_anat.png);
}

.boton_ropa {
    background: url(../img/boto_prod/boton_ropa.png);
}

.boton_aposito {
    background: url(../img/boto_prod/boton_aposito.png);
}

.boton_refuerza {
    background: url(../img/boto_prod/boton_refuerza.png);
}

.boton_zaleas {
    background: url(../img/boto_prod/boton_zalea.png);
}

.boton_toallitas {
    background: url(../img/boto_prod/boton_toallitas.png);
}

.boton_femenina {
    background: url(../img/boto_prod/boton_femenina.png);
}

.boton_algodon {
    background: url(../img/boto_prod/boton_algodon.png);
}

.boton_varios {
    background: url(../img/boto_prod/boton_varios.png);
}

/*=========== Cierra Botonera Prod ===========*/
/*=========== Quienes Somos ===========*/
#quienes-somos {
    width: 100%;
    overflow: visible;
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f7f8; /* Fondo más notable inspirado en el logo */
}

.quienes-hero {
    text-align: center;
    padding: 10px 5% 0 5%;  /* Reducido para compactar */
    background-color: #fff;
    border-bottom: 1px solid #e0e7e5;
}

.quienes-hero-sub {
    font-size: 108%;
    color: #666;
    margin-top: 5px;
    margin-bottom: 10px;
}

.quienes-content {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 20px auto;   /* Reducido de 30px */
    width: 90%;
}

.quienes-historia {
    flex: 1;
    text-align: left;
    line-height: 1.7;
    font-size: 105%;
    color: #333;
}

.quienes-historia p {
    margin-bottom: 20px;
}

.quienes-collage {
    flex: 0 0 450px;
}

.quienes-foto-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border: 1px solid #eee;
}

.quienes-foto {
    width: 100%;
    height: auto;
    display: block;
}

/* Sección Pilares — Banda de color suave */
.quienes-pilares-band {
    width: 100%;
    background-color: #f8fbfc;
    padding: 50px 0;
    margin: 40px 0;
    border-top: 1px solid #eef3f5;
    border-bottom: 1px solid #eef3f5;
}

.quienes-pilares {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
    flex-wrap: wrap;
}

.pilar-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
}

.pilar-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}

.pilar-item h3 {
    font-size: 22px;
    color: #256075;
    margin-bottom: 10px;
}

.pilar-item p {
    font-size: 95%;
    color: #666;
    line-height: 1.5;
}

.quienes-cierre {
    max-width: 800px;
    margin: 60px auto;   /* Aumentado y equilibrado para centrado visual */
    text-align: center;
    padding: 0 20px 40px 20px; /* Padding inferior para alejarlo del pie */
    font-size: 110%;
    line-height: 1.8;
    color: #444;
    font-style: italic;
}
/*=========== Cierra Quienes Somos ===========*/

/*=========== Entregas Modernizadas ===========*/
#entregas-modern {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f7f8;
}

.entregas-hero {
    text-align: center;
    padding: 20px 5% 10px 5%;
    background-color: #fff;
    border-bottom: 1px solid #e0e7e5;
}

.entregas-hero-sub {
    font-size: 110%;
    color: #666;
    margin-top: 5px;
}

.entregas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto;
    width: 95%;
}

.entrega-card {
    background: #fff;
    border-radius: 12px;
    width: 280px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.2s ease;
    border-top: 4px solid #256075; /* Borde superior de marca */
}

.entrega-card:hover {
    transform: translateY(-5px);
}

.card-header {
    background-color: #fcfdfe;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f4f6;
}

.card-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.card-logo-img {
    display: block;
    height: 40px;
    width: 40px;
    margin: 0 auto 10px auto;
    object-fit: contain;
    border-radius: 4px;
}

.card-header h3 {
    margin: 0;
    font-size: 20px;
    color: #256075;
}

.card-body {
    padding: 20px;
    text-align: center;
}

.costo-sub {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.costo-valor {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.label-gratis {
    background-color: #e7f7ed;
    color: #27ae60;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}

.label-info {
    background-color: #eaf1f4;
    color: #256075;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}

.localidades-tit {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-top: 10px;
}

.localidades-list {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}

.card-detalles {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    border-top: 1px dashed #eee;
    padding-top: 15px;
}

.card-detalles li {
    font-size: 13.5px;
    color: #444;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.card-detalles li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #256075;
    font-weight: bold;
}

/* Sección Mapa y Ayuda */
.entregas-info-extra {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 5%;
}

.mapa-container {
    text-align: center;
    margin-bottom: 50px;
}

.mapa-wrapper {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: inline-block;
    max-width: 100%;
}

.mapa-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.consulta-ayuda {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.consulta-ayuda p {
    font-size: 110%;
    color: #444;
    margin-bottom: 25px;
}

.botones-contacto-ent {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.tel-text {
    font-size: 15px;
    color: #777;
}

/*=========== Cierra Entregas Modernas ===========*/

.titulo02 {
    font-size: 25px;
    font-weight: bolder;
    text-align: center;
    color: red;
    width: 100%;
    font-family: verdana;
    text-decoration: underline;
}

/*=========== Donde Modernizada ===========*/
#donde-modern {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f7f8;
}

.donde-hero {
    text-align: center;
    padding: 30px 5% 20px 5%;
    background-color: #fff;
    border-bottom: 1px solid #e0e7e5;
}

.donde-hero-sub {
    font-size: 110%;
    color: #666;
    margin-top: 5px;
}

.donde-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto;
    width: 95%;
}

.donde-card {
    background: #fff;
    border-radius: 12px;
    width: 320px;
    min-height: 250px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 4px solid #256075;
    transition: transform 0.2s ease;
}

.donde-card:hover {
    transform: translateY(-5px);
}

.donde-card-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.donde-card h3 {
    font-size: 20px;
    color: #256075;
    margin-bottom: 15px;
    font-weight: bold;
}

.donde-card-text {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Botones GPS */
.donde-gps-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.btn-gps {
    display: block;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: opacity 0.2s;
}

.google-maps { background-color: #4285F4; }
.waze { background-color: #33CCFF; }
.btn-gps:hover { opacity: 0.9; }

/* Horarios corregidos */
.donde-horarios-list {
    width: 100%;
    text-align: center;
}

.horario-grupo {
    margin-bottom: 25px;
}

.dia-semana {
    display: block;
    font-size: 16px;
    color: #666;
    margin-bottom: 2px;
}

.hora-rango {
    display: block;
    font-size: 22px;
    color: #256075;
    font-weight: bold;
}

.horario-nota {
    font-size: 14px;
    color: #888;
    margin: 2px 0 0 0;
}

/* Contacto */
.donde-contacto-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.contact-link {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.btn-whatsapp-donde {
    background-color: #25D366;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    transition: background 0.2s;
}

.btn-whatsapp-donde:hover {
    background-color: #128c7e;
}

/* Ajuste de Mapa */
#donde-modern .donde-mapa-full {
    display: block !important;
    width: 95% !important;
    max-width: 1200px !important;
    margin: 40px auto 70px auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

#donde-modern .mapa-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
    line-height: 0 !important;
    border: 1px solid #e0e7e5 !important;
}

#donde-modern .iframe-mapa {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 500px !important;
    border: 0 !important;
    margin: 0 !important;
}

/*=========== Cierra Donde Modernizada ===========*/

/*=========== Abre Cambiar Pañal Modernizada ===========*/
#cambiar-moderno {
    padding-bottom: 50px;
    background-color: #f8fafb;
}

.cambiar-hero {
    text-align: center;
    padding: 20px 20px 30px;
}

.cambiar-hero-sub {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

.cambiar-pasos-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.paso-card {
    background: #fff;
    border-radius: 12px;
    flex: 1;
    min-width: 250px;
    max-width: 280px;
    padding: 35px 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 4px solid #256075;
    transition: transform 0.2s ease;
}

.paso-card:hover {
    transform: translateY(-5px);
}

.paso-number {
    position: absolute;
    top: -15px;
    left: 15px;
    background: #256075;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.paso-icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.paso-card h3 {
    font-size: 19px;
    color: #256075;
    margin-bottom: 12px;
    font-weight: bold;
}

.paso-card p {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
}

/* Video Section */
.cambiar-video-section {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
    text-align: center;
}

.video-container-wrapper {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-credits {
    margin-top: 15px;
    font-size: 14px;
    color: #888;
}

/* Ayuda Final CTA */
.cambiar-ayuda-final {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.ayuda-card-highlight {
    background: linear-gradient(135deg, #256075 0%, #1a4554 100%);
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(37, 96, 117, 0.3);
}

.ayuda-card-highlight h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
}

.ayuda-card-highlight p {
    font-size: 16px;
    margin-bottom: 25px;
    opacity: 0.9;
}

.btn-whatsapp-modern {
    display: inline-block;
    background-color: #25D366;
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp-modern:hover {
    background-color: #128c7e;
    transform: scale(1.05);
}

/*=========== Cierra Cambiar Pañal Modernizada ===========*/

/*=========== Asesoramiento ===========*/
#asesoramiento {
    width: 100%;
    overflow: visible;
    margin: 0 auto;
    padding-bottom: 30px;
}

/*=========== Abre Pizarra Solidaria Modernizada ===========*/
#pizarra-moderna {
    background-image: url('../img/pizarra/pizarra.avif');
    background-size: auto; /* Evita que se estire y se pixele */
    background-repeat: repeat;
    background-position: top center;
    background-attachment: fixed;
    padding-bottom: 60px;
    position: relative;
}

/* Capa para obscurecer el fondo y que las tarjetas resalten (Efecto Pizarrón Real) */
#pizarra-moderna::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Capa oscura para dar profundidad y contraste */
    z-index: 0;
}

#pizarra-moderna > * {
    position: relative;
    z-index: 1;
}

.pizarra-header {
    background: #fff;
    padding: 20px 20px 40px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.pizarra-hero h1 {
    color: #256075;
    font-size: 32px;
}

.pizarra-sub {
    color: #666;
    max-width: 700px;
    margin: 10px auto 30px;
    font-size: 16px;
}

#pizarra-moderna .pizarra-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
}

#pizarra-moderna .pizarra-search-box {
    position: relative !important;
    margin: 0 auto 25px !important;
    width: 100% !important;
    max-width: 800px !important;
    float: none !important;
    display: block !important;
}

#pizarra-moderna #pizarra-search-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 50px 15px 20px !important;
    border-radius: 50px !important;
    display: block !important;
    margin: 0 auto !important;
    border: 2px solid #e0e7e5;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

#pizarra-search-input:focus {
    border-color: #256075;
    outline: none;
    box-shadow: 0 4px 15px rgba(37, 96, 117, 0.15);
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #256075;
}

.pizarra-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #fff;
    border: 1px solid #256075;
    color: #256075;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.filter-btn:hover, .filter-btn.active {
    background: #256075;
    color: #fff;
}

/* Grilla de Tarjetas */
.pizarra-board-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.pizarra-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #efefef;
}

.pizarra-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 25px;
}

.card-badges {
    margin-bottom: 15px;
}

.badge {
    background: #e1f0f4;
    color: #256075;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 5px;
}

.pizarra-card h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.3;
}

.pizarra-full-content {
    font-size: 14.5px;
    color: #444;
    line-height: 1.6;
}

.pizarra-full-content p {
    margin-bottom: 15px;
}

.pizarra-full-content ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

/* Video responsivo en tarjetas */
#pizarra-moderna .card-video-wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
}

#pizarra-moderna .card-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Redes Sociales en tarjetas */
.card-social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #efefef;
    justify-content: center;
}

.social-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.social-icon img {
    width: 20px;
    height: 20px;
    transition: filter 0.3s ease;
}

/* Colores de Marca en Hover */
.social-icon.ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-icon.fb:hover { background: #1877F2; }
.social-icon.wa:hover { background: #25D366; }
.social-icon.web:hover { background: #256075; }

.social-icon:hover img {
    filter: brightness(0) invert(1);
}


/* CTA Final */
.pizarra-cta-section {
    max-width: 900px;
    margin: 80px auto 20px;
    padding: 0 20px;
}

.cta-solidario-card {
    background: #256075;
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(37, 96, 117, 0.2);
}

.cta-solidario-card h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

.btn-whatsapp-pizarra {
    display: inline-block;
    background: #25D366;
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}

.btn-whatsapp-pizarra:hover {
    background: #128c7e;
    transform: scale(1.05);
}

.pizarra-vacia {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px 20px;
    color: #888;
    background: #fff;
    border-radius: 20px;
}

/*=========== Cierra Pizarra Solidaria Modernizada ===========*/


#asesoramiento_texto {
    width: 100%;
    font-family: sans-serif;
    font-size: 110%;
    margin: 0 auto;
    text-align: center;
    padding: 0;
    line-height: 1.6;
    max-width: 100%;
}

/* Layout héroe: dos columnas — texto izq, imagen der */
.aseso-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1100px;
    margin: 15px auto;   /* Reducido de 30px a 15px */
    width: 94%;
    box-sizing: border-box;
}

.aseso-hero-texto {
    flex: 1;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
}

.aseso-hero-img {
    flex: 0 0 500px;     /* Ancho fijo/proporcional para la imagen en PC */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    height: 320px;       /* Altura ajustada para el formato rectangular */
}

.aseso-hero-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Logo L&S semitransparente sobre la imagen */
.aseso-hero-img::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 90px;
    height: 60px;
    background: url('../img/web_logo.webp') center/contain no-repeat;
    opacity: 0.5;
}

.aseso-intro {
    font-size: 100%;
    color: #333;
    margin: 10px 0 20px 0;
    line-height: 1.7;
}

/* Frase de confidencialidad */
.aseso-confidencial {
    display: inline-block;
    background-color: #f0f8ff;
    border-left: 4px solid #256075;
    padding: 12px 20px;
    margin: 15px auto 20px auto;
    border-radius: 6px;
    color: #256075;
    font-size: 95%;
    text-align: left;
    line-height: 1.6;
}

/* Sección ¿Sobre qué podés consultarnos? — BANDA gris de borde a borde */
.aseso-consultas-band {
    width: 100%;
    background-color: #f2f4f6;
    padding: 30px 0;
    margin: 0;           /* Reducido de 20px a 0 para quitar el doble espacio */
}

.aseso-consultas {
    width: 65%;
    margin: 0 auto;
    text-align: left;
    font-family: sans-serif;
    font-size: 105%;
}

.aseso-consultas ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.aseso-consultas ul li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    color: #333;
    line-height: 1.5;
}

.aseso-consultas ul li:last-child {
    border-bottom: none;
}

/* Horarios */
.aseso-horarios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 60%;
    margin: 20px auto;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: sans-serif;
    font-size: 100%;
    color: #444;
    line-height: 1.7;
}

.aseso-horarios-icon {
    font-size: 32px;
    flex-shrink: 0;
}

/* BANDA azul oscuro — sección de acción rápida */
.aseso-accion {
    width: 100%;
    background-color: #1c4a5a;
    padding: 35px 20px;
    margin: 20px 0 0 0;
    box-sizing: border-box;
}

/* Botonera de acción rápida */
.aseso-botones {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 15px auto;
    flex-wrap: wrap;
}

.aseso-btn-llamar,
.aseso-btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado horizontal del texto e icono */
    gap: 10px;
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 108%;
    font-weight: bold;
    text-decoration: none;
    font-family: sans-serif;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.aseso-btn-llamar:hover,
.aseso-btn-whatsapp:hover {
    opacity: 0.88;
}

.aseso-btn-llamar {
    background-color: #256075;
    color: #fff;
}

.aseso-btn-whatsapp {
    background-color: #25d366;
    color: #fff;
}

.aseso-subtexto {
    text-align: center;
    font-family: sans-serif;
    font-size: 92%;
    color: rgba(255,255,255,0.75); /* Blanco semitransparente sobre el fondo azul */
    margin: 0;
}

/* Banners de marcas Nonisec/Comodín — ocultos en Asesoramiento */
.aseso-marcas-footer {
    display: none;
}

.titulo_aseso {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #de4444;
    margin-bottom: 10px;
    font-family: sans-serif;
    width: 100%;
}

.titulo_aseso03 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #a7004b;
    font-family: sans-serif;
    margin: 0 auto;
    width: 55%;
}

.titulo_aseso02 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #a7004b;
    font-family: sans-serif;
    margin-bottom: 10px;
}

/*=========== Cierra Asesoramiento ===========*/

/*=========== Abre Contacto ===========*/
#contacto_izq {
    text-align: center;
    margin: 22px 0px 0px 15px;
    float: left;
    height: 380px;
    width: 45%;
    background-color: orange;
    border-radius: 5px;
}

.telefono,
.nombre,
.mail,
.consulta {
    font-family: Arial;
    font-style: italic;
    color: white;
}

#contacto_der {
    text-align: center;
    float: right;
    height: 100%;
    width: 50%;
    margin: 2.4% 1.5% 2% 0px;
}

#contacto_numeros {
    font-family: sans-serif;
    color: gray;
    font-size: 150%;
    margin: 0% auto 15px auto;
    text-align: center;
    width: 65%;
    height: 15%;
}

#contacto_mail {
    font-family: sans-serif;
    color: red;
    font-size: 130%;
    margin: 4% auto 0 auto;
    width: 90%;
    height: 8%;
}

#wassap_img {
    float: left;
    margin: -1.1% 0 0 0;
    width: 43px;

}

#wassap_img_nuevo {
    float: right;
    margin: -57px 0 0 0;
}

#contacto_wassap {
    font-family: sans-serif;
    color: #666;
    font-size: 178%;
    margin: 2% auto 0 auto;
    padding-top: 1%;
    background-color: #8ce181;
    width: 70%;
    height: 13.5%;
    text-align: left;
}

#contacto_msj {
    font-family: sans-serif;
    font-size: 14px;
    margin: -5px 70px 0px 0px;
    text-align: center;
}

#contacto_tit {
    font-family: arial;
    text-align: center;
    width: 32%;
    margin: 1% auto 10px auto;
    background-color: orange;
    font-size: 200%;
    color: white;
    font-weight: bolder;
    font-style: italic;
}

#contacto_facebook {
    font-family: Arial;
    font-size: 100%;
    color: #9082a7;
    margin: 2.5% auto 0px auto;
    width: 67%;
    height: 15%;
}

#contacto_instagram {
    font-family: Arial;
    font-size: 100%;
    color: #9082a7;
    margin: 2.5% auto 0px auto;
    width: 67%;
    height: 15%;
}

#contacto_facebook_img {
    float: left;
    margin: 0 0px 0px 0px;
}

#contacto_horario {
    font-family: Arial;
    font-size: 100%;
    color: #9082a7;
    margin: 2% auto 0px auto;
    width: 67%;
    height: 13%;
}

#contacto_horario02 {
    font-family: Arial;
    font-size: 80%;
    color: #9082a7;
    margin: 0% auto 0px auto;
    width: 92%;
    height: 53%;
    font-weight: bolder;
    font-style: italic;
}

input[name=name],
[name=mail],
[name=telefono] {
    color: white;
    border-radius: 5px;
    width: 213px;
    height: 18px;
    padding: 0px 1px 0px 1px;
    margin: 0px 1px 0px 10px;
    background: #5a5a5a;
    background: -moz-linear-gradient(top, #546A7F 0%, #5a5a5a 20%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #546A7F), color-stop(20%, #5a5a5a));
    /* webkit */
}

textarea[name=consulta] {
    color: white;
    border-radius: 5px;
    width: 420px;
    height: 150px;
    padding: 0px 1px 0px 1px;
    margin: 3px 1px 0px 1px;
    background: #5a5a5a;
    background: -moz-linear-gradient(top, #546A7F 0%, #5a5a5a 20%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #546A7F), color-stop(20%, #5a5a5a));
    /* webkit */
}

#contacto_gracias {
    font-size: 35px;
    margin: 3% auto 5% auto;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
}

#contacto_gracias02 {
    font-family: sans-serif;
    font-size: 15px;
    margin: 40px auto 0 auto;
    color: white;
    text-align: center;
    font-weight: bold;
    background-color: gray;
}

#contacto_gracias_link {
    font-family: sans-serif;
    font-size: 15px;
    margin: 20% auto 0 auto;
    color: white;
    text-align: center;
}

#linea {
    width: 98%;
    margin-top: 50px;
}

/*=========== Cierra Contacto ===========*/

/*=========== Abre Cambiar ===========*/
/*=========== Productos ===========*/

#titulo_productos {
    width: 100%;
    float: right;
    color: #a7004b;
    margin: 2% auto 10px auto;
    text-align: center;
    font-family: arial;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 2px 2px 5px gray;
}

#texto_rectos {
    width: 70%;
    height: 150px;
    padding: 5px 0 5px 40px;
    float: left;
    margin: 0px 0px 10px 0px;
    font-family: sans-serif;
    font-size: 16px;
    text-align: justify;
    overflow: hidden;
}

#img_menu {
    width: 150px;
    height: 150px;
}

#cont_img_menu {
    float: right;
    margin: auto;
    width: 20%;
    margin: -2% 5% 0 0;
    text-align: center;
    overflow: hidden;
}

#line {
    width: 90%;
    float: left;
    height: 1px;
    background-color: gray;
    margin: -10px 0 0 40px;
}

#line_02 {
    width: 90%;
    float: left;
    height: 1px;
    background-color: gray;
    margin: -20px 0 0 40px;
}

#titulo_femenina {
    width: 90%;
    float: left;
    text-align: center;
    font-family: sans-serif;
    font-size: 25px;
    margin: -4px 0 0 40px;
    color: red;
}

.productos_boton {
    width: 170px;
    height: 157px;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    margin: auto;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.productos_boton:hover {
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center center;
}

#tabla_boton {
    width: 87%;
    margin: 0px auto 20px auto;
    overflow: hidden;
}

.tabla_linea_boton {
    font-family: Arial;
    font-size: 18px;
    padding: 10px 0 10px 0;
}

.nonisec_basico_boton {
    background: url(../img/b_productos/nonisec_basico.avif);
}

.comodin_basico_boton {
    background: url(../img/b_productos/comodin_basico.avif);
}

.nonisec_25_boton {
    background: url(../img/b_productos/nonisec25.avif);
}

.comodin_clasico_boton {
    background: url(../img/b_productos/comodin_clasico.avif);
}

.nonino_recto_boton {
    background: url(../img/b_productos/nonino_recto.avif);
}

.hennia_recto_boton {
    background: url(../img/b_productos/hennia_recto.avif);
}

.nonisec_ultra_boton {
    background: url(../img/b_productos/nonisec_ultra.avif);
}

.nonisec_extra_boton {
    background: url(../img/b_productos/nonisec_proteccion.avif);
}

.comodin_anatomico_boton {
    background: url(../img/b_productos/comodin_anat.avif);
}

.nonino_clasico_boton {
    background: url(../img/b_productos/nonino_clasico.avif);
}

.nonino_plus_boton {
    background: url(../img/b_productos/nonino_plus.avif);
}

.tena_slip_boton {
    background: url(../img/b_productos/tena_slip.avif);
}

.tena_slip_nocturno_boton {
    background: url(../img/b_productos/tena_slip_nocturno.avif);
}

.plenitud_protect_boton {
    background: url(../img/b_productos/plenitud_protect.avif);
}

.plenitud_classic_boton {
    background: url(../img/b_productos/plenitud_classic.avif);
}

.indaslip_premium_s7_boton {
    background: url(../img/b_productos/indaslip_premium_s7.avif);
}

.indaslip_premium_boton {
    background: url(../img/b_productos/indaslip_premium.avif);
}

.indaslip_premiummas_boton {
    background: url(../img/b_productos/indaslip_premium+.avif);
}

.tena_pants_nocturno_boton {
    background: url(../img/b_productos/tena_pants_nocturno.avif);
}

.tena_pants_ultra_protect_boton {
    background: url(../img/b_productos/tena_pants_ultra_protect.avif);
}

.tena_pants_comfort_boton {
    background: url(../img/b_productos/tena_pants_comfort.avif);
}

.comodin_ropa_boton {
    background: url(../img/b_productos/comodin_ropa.avif);
}

.hennia_premium_boton {
    background: url(../img/b_productos/hennia_premium.avif);
}

.nonisec_ropa_boton {
    background: url(../img/b_productos/nonisec_ropa.avif);
}

.indasec_pants_super_boton {
    background: url(../img/b_productos/indasec_pants_super.avif);
}

.indasec_pants_plus_boton {
    background: url(../img/b_productos/indasec_pants_plus.avif);
}

.adult_care_boton {
    background: url(../img/b_productos/adult_care.avif);
}

.adult_care_max_boton {
    background: url(../img/b_productos/adult_care_max.avif);
}

.hennia_advance_boton {
    background: url(../img/b_productos/hennia_advance.avif);
}

.igfit_boton {
    background: url(../img/b_productos/igfit.avif);
}

.plenitud_plus_boton {
    background: url(../img/b_productos/plenitud_plus.avif);
}

.adult_care_max_ropa_boton {
    background: url(../img/b_productos/adult_care_max.avif);
}

.plenitud_femme_ropa_boton {
    background: url(../img/b_productos/plenitud_femme_ropa.avif);
}

.goodnites_boton {
    background: url(../img/b_productos/goodnites.avif);
}

.seniors_bombacha_boton {
    background: url(../img/b_productos/seniors_bombacha.avif);
}

.tena_discreet_maxi_nocturna_boton {
    background: url(../img/b_productos/tena_discreet_maxi_nocturna.avif);
}

.indasec_hombre_boton {
    background: url(../img/b_productos/indasec_hombre.avif);
}

.tena_discreet_maxi_boton {
    background: url(../img/b_productos/tena_discreet_maxi.avif);
}

.tena_discreet_natural_boton {
    background: url(../img/b_productos/tena_discreet_natural.avif);
}

.tena_discreet_medium_boton {
    background: url(../img/b_productos/tena_discreet_medium.avif);
}

.tena_discreet_medium_boton {
    background: url(../img/b_productos/tena_discreet_medium.avif);
}

.nosotras_maternidad_boton {
    background: url(../img/b_productos/nosotras_maternidad.avif);
}

.nosotras_maternidad_boton {
    background: url(../img/b_productos/nosotras_maternidad.avif);
}

.nonisec_aposito_boton {
    background: url(../img/b_productos/nonisec_apositos.avif);
}

.indasform_boton {
    background: url(../img/b_productos/indasform.avif);
}

.indasec_discreet_boton {
    background: url(../img/b_productos/indasec_discreet.avif);
}

.indasec_dermoseda_boton {
    background: url(../img/b_productos/indasec_dermoseda.avif);
}

.doncella_fem_boton {
    background: url(../img/b_productos/doncella_fem.avif);
}

.hennia_aposito_boton {
    background: url(../img/b_productos/hennia_aposito.avif);
}

.hennia_aposito_plus_boton {
    background: url(../img/b_productos/hennia_aposito_plus.avif);
}

.calipso_leve_boton {
    background: url(../img/b_productos/calipso_leve.avif);
}

.plenitud_toallas_boton {
    background: url(../img/b_productos/plenitud_toalla.avif);
}

.plenitud_protectores_boton {
    background: url(../img/b_productos/plenitud_protector.avif);
}

.gasa_algodon_boton {
    background: url(../img/b_productos/gasa_algodon.avif);
}

.comodin_aposito_boton {
    background: url(../img/b_productos/comodin_apositos.avif);
}

.comodin_post_boton {
    background: url(../img/b_productos/comodin_post.avif);
}

.doncella_post_parto_boton {
    background: url(../img/b_productos/doncella_post_parto.avif);
}

.nonisec_refuerza_boton {
    background: url(../img/b_productos/nonisec_refuerza.avif);
}

.comodin_refuerza_boton {
    background: url(../img/b_productos/comodin_refuerza.avif);
}

.hennia_refuerza_anatomico_boton {
    background: url(../img/b_productos/hennia_refuerza_anatomico.avif);
}

.hennia_refuerza_plus_boton {
    background: url(../img/b_productos/hennia_refuerza_plus.avif);
}

.le_bon_zalea_boton {
    background: url(../img/b_productos/Le_Bon.avif);
}

.comodin_zalea_boton {
    background: url(../img/b_productos/comodin_zalea.avif);
}

.nonisec_zalea_boton {
    background: url(../img/b_productos/nonisec_zalea.avif);
}

.nonino_zalea_boton {
    background: url(../img/b_productos/nonino_zalea.avif);
}

.igdry_zalea_boton {
    background: url(../img/b_productos/igdry.avif);
}

.adult_care_zalea_boton {
    background: url(../img/b_productos/adult_care_zalea.avif);
}

.pet_protect_boton {
    background: url(../img/b_productos/pet_protect.avif);
}

.seniors_cubre_boton {
    background: url(../img/b_productos/seniors_cubre.avif);
}

.nonisec_toallas_boton {
    background: url(../img/b_productos/nonisec_toallas.avif);
}

.cofia_boton {
    background: url(../img/b_productos/cofia.avif);
}

.igfresh_toallas_boton {
    background: url(../img/b_productos/IGfresh_toallas.avif);
}

.indasec_intimas_boton {
    background: url(../img/b_productos/indasec_intimas.avif);
}

.qsoft_toallas_boton {
    background: url(../img/b_productos/qsoft_toallas.avif);
}

.comodin_toallas_boton {
    background: url(../img/b_productos/comodin_toallas.avif);
}

.pad_humedo_boton {
    background: url(../img/b_productos/pad_humedo.avif);
}

.clorhexidina_boton {
    background: url(../img/b_productos/clorhexidina.avif);
}

.bano_facil_boton {
    background: url(../img/b_productos/bano_facil.avif);
}

.natural_manzanilla_boton {
    background: url(../img/b_productos/natural_manzanilla.avif);
}

.pad_seco_boton {
    background: url(../img/b_productos/pad_seco.avif);
}

.nosotras_protector_normal_boton {
    background: url(../img/b_productos/nosotras_protector_normal.avif);
}

.nosotras_protector_largo_boton {
    background: url(../img/b_productos/nosotras_protector_largo.avif);
}

.calipso_cola_less_boton {
    background: url(../img/b_productos/calipso_cola_less.avif);
}

.nosotras_protector_respirable_boton {
    background: url(../img/b_productos/nosotras_respirable.avif);
}

.tena_protector_largo_boton {
    background: url(../img/b_productos/tena_protector_largo.avif);
}

.tena_natural_protector_boton {
    background: url(../img/b_productos/tena_natural_protector.avif);
}

.nosotras_buenas_noches_boton {
    background: url(../img/b_productos/nosotras_buenas_noches.avif);
}

.calipso_normal_salas_boton {
    background: url(../img/b_productos/calipso_normal_sin_alas.avif);
}

.calipso_normal_calas_boton {
    background: url(../img/b_productos/calipso_normal_con_alas.avif);
}

.calipso_delgada_boton {
    background: url(../img/b_productos/calipso_delgada.avif);
}

.nosotras_delgada_suave_boton {
    background: url(../img/b_productos/nosotras_delgada_suave.avif);
}

.nosotras_clasica_suave_boton {
    background: url(../img/b_productos/nosotras_clasica_suave.avif);
}

.doncella_algodon_boton {
    background: url(../img/b_productos/doncella_algodon.avif);
}

.donna_pompon_boton {
    background: url(../img/b_productos/donna_pompon.avif);
}

.doncella_algodon_super_boton {
    background: url(../img/b_productos/doncella_super.avif);
}

.estrella_super_boton {
    background: url(../img/b_productos/estrella_super.avif);
}

.estrella_panos_boton {
    background: url(../img/b_productos/estrella_panos.avif);
}

.guantes_nitrilo_boton {
    background: url(../img/b_productos/guantes_nitrilo.avif);
}

.gasa_esteril_boton {
    background: url(../img/b_productos/gasa_esteril.avif);
}

.guante_latex_boton {
    background: url(../img/b_productos/guante_latex.avif);
}

.colchon_antiescara_boton {
    background: url(../img/b_productos/colchon_antiescara.avif);
}

.cinta_hipo_boton {
    background: url(../img/b_productos/cinta_hipoalergic.avif);
}

.vidol_fecula_boton {
    background: url(../img/b_productos/vidol_fecula.avif);
}

.balanza_boton {
    background: url(../img/b_productos/balanza_mecanica.avif);
}

.tensiometro_boton {
    background: url(../img/b_productos/tensiometro_automatico.avif);
}

.andador_boton {
    background: url(../img/b_productos/andador.avif);
}

.aposito_protector_boton {
    background: url(../img/b_productos/aposito_protector.avif);
}

.nebulizador_boton {
    background: url(../img/b_productos/nebulizador.avif);
}

.depreal_colonia_boton {
    background: url(../img/b_productos/depreal_colonia.avif);
}

.venda_boton {
    background: url(../img/b_productos/venda.avif);
}

.seniors_faja_boton {
    background: url(../img/b_productos/seniors_faja.avif);
}

.basic_line_oleo_boton {
    background: url(../img/b_productos/basic_line_oleo.avif);
}

/*=========== 3) BOTONERA ===========*/

ul.topnav {
    list-style: none;
    margin: auto;
    padding: 0;
    width: 970px;
    display: flex;
    justify-content: center;
    background: linear-gradient(#75AADB, white, white, #75AADB);
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: inline-block;
    padding: 13px 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    border-left: 1px solid gray;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Arial, sans-serif;
}

ul.topnav li a:hover {
    background: white;
}

ul.topnav li.icon {
    display: none;
}

/* menú hamburguesa a futuro */

/****************************************
 * 4) SLIDER — Estilo funcional como SITIO ORIGINAL
 ****************************************/

.flexslider {
    width: 100%;
    max-width: 970px;
    margin: 15px auto;
    border: none;
    box-shadow: none;
}

/* Restablecemos comportamiento original */
.flexslider .slides {
    display: block !important;
}

.flexslider .slides li {
    display: none;
}

.flexslider .slides li.flex-active-slide {
    display: block !important;
}

/******** Producto *********/

.slide-item {
    text-align: center;
}

.slide-item img {
    width: 260px;
    height: auto;
}

.slider-data {
    font-family: Arial;
    margin-top: 10px;
}

.slider-nombre {
    font-size: 19px;
    color: #062d66;
    font-weight: bold;
}

.slider-precio {
    font-size: 26px;
    font-weight: bold;
    color: #d40000;
}

/******** Flechas *********/
.flex-direction-nav a {
    width: 35px;
    height: 35px;
    background: #0008;
    border-radius: 50%;
    color: white !important;
    line-height: 35px;
    font-size: 22px;
}

.flex-direction-nav a:hover {
    background: #000c;
}

ul.topnav li:first-child a {
    border-left: none;
}

/******** Empieza Productos *********/

#nom_prod_gral {
    width: 100%;
    margin-top: 1%;
    overflow: hidden;
    text-align: center;
    position: relative;
}

#nom_prod_izq {
    width: 20%;
    overflow: hidden;
    text-align: center;
    color: white;
    font-family: arial;
    font-size: 100%;
    top: 50%;
    position: absolute;
    transform: translate(-240%, -50%);
    -webkit-transform: translate(-240, -50%);
    left: 55%;
}

#nom_prod_der {
    width: 20%;
    overflow: hidden;
    text-align: center;
    color: white;
    font-family: arial;
    font-size: 100%;
    top: 50%;
    position: absolute;
    transform: translate(155%, -50%);
    -webkit-transform: translate(130%, -50%);
    right: 35%;
}

#logo_id {
    margin: 1% auto 10px auto;
}

#encuadre_tiendalys {
    width: 35%;
    height: 80px;
    color: white;
    float: right;
    margin: 0 12px 0 0;
}

#table_tot {
    width: 100%;
    overflow: hidden;
    margin: 2px 0 12px 0;
    padding-top: 15px;
    float: left;
    clear: both;
}

.nom_prod_det {
    width: 16.66%;
    float: left;
    height: 110px;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    position: relative;
}

.nom_prod_det_s {
    width: 20%;
    float: left;
    height: 110px;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    position: relative;
}

#encuadre_boton {
    width: 300px;
    height: 40px;
    float: right;
    margin: 0px 20px 0px 400px;

}

.buttonize.red,
.buttonize.red:link,
.buttonize.red:visited {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    float: right;
    padding: 8px;
    font-family: arial;
    background: -webkit-linear-gradient(lightblue, white, white, lightblue);
    background: -moz-linear-gradient(lightblue, white, white, lightblue);
    background: -o-linear-gradient(lightblue, white, white, lightblue);
    background-image: -ms-linear-gradient(top, lightblue 0%, white 50%, lightblue 0%);
    font-weight: bold;
    text-decoration: none;
}

.buttonize.red:active {
    background-color: red;
}

.buttonize.red:hover {
    color: red;
}

#img_prod_gral {
    float: none;
    width: 50%;
    margin: 10px 0px 4% 3%;
}

#vid_prod_gral {
    width: 40%;
    overflow: hidden;
    float: right;
    margin: 10px 20px 0px 0px;
    padding: 0 10px 0 10px;
    text-align: center;
}

.producto_texto_gral {
    width: 35%;
    overflow: hidden;
    float: right;
    margin: 0 auto;
    font-size: 17px;
    padding: 2% 5% 0 5%;
    font-family: Arial;
    text-align: center;
    white-space: normal;
}

.producto_texto_con_video {
    width: 90%;
    float: none;
    margin: 20px auto;
    text-align: justify;
    clear: both;
}

#link_tiendalys {
    width: 38%;
    overflow: hidden;
    float: right;
    margin: 8% 25% 0 25%;
    display: inline;
    color: white;
    background-color: #e67e22;
    background-image: url(../img/Carrito_LyS.png);
    background-size: 35px 27px;
    background-repeat: no-repeat;
    background-position: 10% center;
    text-align: right;
    border-radius: 11px;
    padding: 10px 15px;
    font-family: sans-serif;
    font-size: 22px;
    text-decoration: none;
    border-width: 2px;
    border-style: ridge;
    box-shadow: 3px 3px 5px black;
}

#link_tiendalys:hover {
    background-color: gray;
}

.div_prod_det,
.div_prod_det * {
    box-sizing: border-box;
}

.div_prod_det {
    width: 100%;
    background-color: #CCCCCC;
    float: left;
}

.div_prod_det:nth-child(odd) {
    background-color: white;
}

.div_prod_det:nth-child(even) {
    background-color: #d9d9d9;
}

.centro_tabla {
    top: 50%;
    position: absolute;
    transform: translate(-20%, -50%);
    -webkit-transform: translate(-20%, -50%);
    left: 30%;

}

.centro_tabla_precio {
    font-family: arial;
    font-weight: bolder;
    width: 100%;
    height: 50%;
    padding-top: 8%;
    color: red;
    font-size: 140%;
}

.centro_tabla_precio_porcen {
    background-color: red;
    font-family: arial;
    font-weight: bolder;
    width: 100%;
    height: 50%;
}

.precio_desc {
    float: left;
    margin-left: 2%;
    margin-top: 10%;
    color: white;
    font-size: 90%;
    font-family: arial;
}

.centro {
    width: 157px;
    height: 100%;
    margin: 0 auto 0 auto;
}

.stock {
    width: 100%;
    height: 100%;
    padding-top: 22%;
    font-family: arial;
    font-size: 150%;
    color: white;
    font-weight: bolder;
    background: repeating-linear-gradient(45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px);
}

.centro_tabla_desc {
    float: left;
    margin-top: 9%;
    margin-left: 1%;
    font-size: 95%;
    font-weight: bolder;
}

.desc_cuadro {
    height: 50%;
    background-color: yellow;
}

.desc {
    width: 69px;
    height: 36px;
    float: right;
    background-image: url(../img/descuento5.avif);
    background-size: 69px 36px;
    background-repeat: no-repeat;
    color: white;
    font-size: 15px;
    font-style: oblique;
    font-weight: bold;
    margin-top: 7px;
    margin-right: 2px; /* Centrado dinámico inteligente para 5 o 10 */
    display: flex;
    box-sizing: border-box;
    padding-right: 37px; /* Esto restringe el texto solo a la zona del triángulo */
    justify-content: center; /* Centra el nro perfecto dentro del triángulo */
    align-items: flex-start;
    padding-top: 4px;
}

.desc_v {
    width: 69px;
    height: 36px;
    float: right;
    background-image: url(../img/descuento_verde.avif);
    background-size: 69px 36px;
    background-repeat: no-repeat;
    color: white;
    font-size: 15px;
    font-style: oblique;
    font-weight: bold;
    margin-top: 7px;
    font-family: arial;

    /* Centrado dinámico inteligente para 5 o 10 */
    display: flex;
    box-sizing: border-box;
    padding-right: 37px;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4px;
}

.img_prod_det {
    width: 16.66%;
    height: 110px;
    float: left;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    padding-top: 0.4%;
}

.img_prod_det_s {
    width: 20%;
    height: 110px;
    float: left;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    padding-top: 0.4%;
}

.logo_prod {
    width: 30%;
}

#nom_prod_izq_oscuro {
    width: 20%;
    overflow: hidden;
    text-align: center;
    font-family: arial;
    font-size: 100%;
    top: 50%;
    position: absolute;
    transform: translate(-240%, -50%);
    -webkit-transform: translate(-240, -50%);
    left: 55%;
}

#nom_prod_der_oscuro {
    width: 20%;
    overflow: hidden;
    text-align: center;
    font-family: arial;
    font-size: 100%;
    top: 50%;
    position: absolute;
    transform: translate(155%, -50%);
    -webkit-transform: translate(130%, -50%);
    right: 35%;
}

#texto_blanco {
    color: white;
}

#texto_blanco_chico {
    font-size: 13px;
    color: white;
}

#texto_blanco_justificado {
    color: white;
    text-align: justify;
}

#texto_negro {
    color: black;
    font-size: 16px
}

#comodin_ropa_texto {
    color: white;
}

#comodin_ropa {
    background-color: #015758;
}

#nonisec_basico {
    background-color: #a9aff1;
}

#comodin_basico {
    background-color: #99cc66;
}

#nonisec_25 {
    background-color: #6363b7;
}

#comodin_clasico {
    background-color: #00c3ff;
}

#nonino_recto {
    background-color: #007198;
}

#hennia_recto {
    background-color: #35ba98;
}

#nonisec_ultra {
    background-color: #8080ff;
}

#nonisec_extra {
    background-color: #1674b2;
}

#comodin_anatomico {
    background-color: #f4fae0;
}

#nonino_clasico {
    background-color: #2f7ee7;
}

#nonino_plus {
    background-color: #4e3380;
}

#tena_slip {
    background-color: #393c89;
}

#tena_slip_nocturno {
    background-color: #10003b;
}

#plenitud_protect {
    background-color: #963895ff;
}

#plenitud_classic {
    background-color: #008745;
}

#indaslip_premium {
    background-color: #ffb380ff;
}

#tena_pants_nocturno {
    background-color: #30275e;
}

#tena_pants_ultra_protect {
    background-color: #3994cb;
}

#tena_pants_comfort {
    background-color: #00a293;
}

#hennia_premium {
    background-color: #26a1dc;
}

#hennia_advance {
    background-color: #b4b4b4;
}

#nonisec_ropa {
    background-color: #cccccc;
}

#indasec_pant_super {
    background-color: #dc218a;
}

#indasec_pant_plus {
    background-color: #d7258a;
}

#adult_care {
    background-color: #666666;
}

#adult_care_max_ropa {
    background-color: #d7d3d4;
}

#igfit {
    background-color: #db82b6;
}

#plenitud_plus {
    background-color: #99b9e3;
}

#texto_azul_plenitud {
    color: #3a5798;
}

#plenitud_femme_ropa {
    background-color: #cc91ab;
}

#goodnites {
    background-color: #508dd0;
}

#seniors_bombacha {
    background-color: #007eff;
}

#tena_discreet_maxi {
    background-color: #282f73;
}

#tena_discreet_natural_care {
    background-color: #fbeee9;
}

#tena_discreet_medium {
    background-color: #26428e;
}

#nosotras_maternidad {
    background-color: #864f8c;
}

#nonisec_apositos {
    background-color: #4d4d4d;
}

#indasform {
    background-color: #ff9955;
}

#doncella_fem {
    background-color: #ce55c3;
}

#hennia_aposito {
    background-color: #ffa061;
}

#hennia_aposito_plus {
    background-color: #103e62;
}

#comodin_apositos {
    background-color: #94dac0;
}

#oleo_basic_line {
    background-color: #008081;
}

#calipso_leve {
    background-color: #59c2ff;
}

#plenitud_toalla {
    background-color: #f39cbe;
}

#plenitud_protector {
    background-color: #645381;
}

#igaltex_aposito {
    background-color: #280c0b;
}

#nonisec_refuerza {
    background-color: #007d00;
}

#comodin_refuerza {
    background-color: #2996b7;
}

#hennia_refuerza_plus {
    background-color: #79b93e;
}

#hennia_refuerza_anatomico {
    background-color: #45b9a2;
}

#le_bon_zalea {
    background-color: #113d46;
}

#pet_protect {
    background-color: #017198;
}

#comodin_zalea {
    background-color: #f2b2c3;
}

#nonisec_zalea {
    background-color: #2996b7;
}

#nonino_zalea {
    background-color: #007198;
}

#igdry_zalea {
    background-color: #345c99;
}

#adult_care_zalea {
    background-color: #2c3135;
}

#seniors_colchon {
    background-color: #d35f5f;
}

#nonisec_toallas {
    background-color: #73c384;
}

#indasec_intimas {
    background-color: #c91f96;
}

#ig_fresh {
    background-color: #007c28;
}

#qsoft_toallas {
    background-color: #e6e6e6;
}

#comodin_toallas {
    background-color: #1096c0;
}

#pad_higiene {
    background-color: #a8a8a8;
}

#oximetro {
    background-color: #999999ff;
}

#clorhexidina {
    background-color: #15a337;
}

#bano_facil {
    background-color: #873f99;
}

#natural_manzanilla {
    background-color: #65b7cd;
}

#dermpad {
    background-color: #006a80;
}

#nosotras_protector_normal {
    background-color: #2da96d;
}

#nosotras_protector_largo {
    background-color: #13a3a3;
}

#calipso_cola_less {
    background-color: #f8fb89;
}

#nosotras_protector_respirable {
    background-color: #077cc1;
}

#tena_protector_largo {
    background-color: #6f7dbd;
}

#nosotras_buenas_noches {
    background-color: #4b2c70;
}

#calipso_normal_sin_alas {
    background-color: #b53d89;
}

#calipso_normal_con_alas {
    background-color: #9fcc5d;
}

#nosotras_delgada_suave {
    background-color: #a65a78;
}

#nosotras_clasicas_suave {
    background-color: #efced7;
}

#donna_pompon {
    background-color: #049be0;
}

#doncella_algodon {
    background-color: #169b9a;
}

#doncella_algodon_super {
    background-color: #ecc0bf;
}

#estrella_panos {
    background-color: #cdc69f;
}

#guante_latex {
    background-color: #ffbd81;
}

#guante_nitrilo {
    background-color: #3d704c;
}

#indasec_hombre{
	background-color: #ffce50;
}
#comodin_post{
	background-color: #fcc6c4;
}
#gasa_esteril {
    background-color: #807ffe;
}
#doncella_post_parto{
	background-color:#ff8080;
	}
#colchon_antiescaras {
    background-color: #7196ae;
}

#balanza {
    background-color: #72a5da;
}

#andador {
    background-color: #ececec;
}

#vidol_fecula {
    background-color: #616aa3;
}

#tensiometro {
    background-color: #377fbb;
}

#hipoalergic_apositos {
    background-color: #d16e37;
}

#de_preal {
    background-color: #43435b;
}

#venda {
    background-color: #1a2e23;
}

#seniors_faja {
    background-color: #534054;
}

/******** Cierra Productos *********/
/* ==========================================================================
   ADAPTACIÓN MÓVIL (SITIO COMPLETO Y PRODUCTOS LYS)
   ========================================================================== */
@media screen and (max-width: 800px) {

    /* 1. EL GRAN CULPABLE: Reseteo del ancho fijo de toda la página */
    html,
    body,
    .site-wrapper,
    header,
    #fondo_blanco,
    #pie {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        /* Evita que la pantalla se mueva a los costados */
    }

    /* 2. Contenedores y Textos Generales del Producto */
    #fondo_prod_auto,
    .fondo_prod_serie {
        width: 100% !important;
        padding: 0 !important;
        /* Eliminamos el espacio de 10px que generaba un borde grueso lateral */
        box-sizing: border-box !important;
    }

    #img_prod_gral {
        width: 100% !important;
        max-width: 350px !important;
        /* Tope máximo para que no sea inmensa en el celu */
        height: auto !important;
        margin: 0 auto 15px auto !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }

    .producto_texto_gral {
        width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #vid_prod_gral {
        width: 100% !important;
        float: none !important;
        margin: 15px auto !important;
    }

    /* 3. Reseteo de Títulos y Logos */
    #nom_prod_izq,
    #nom_prod_der,
    #nom_prod_izq_oscuro,
    #nom_prod_der_oscuro {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        display: none !important;
        /* Ahora sí los apagamos por completo para que no se vean duplicados en el celu */
        margin-bottom: 10px !important;
    }

    .logo_prod {
        width: auto !important;
        max-width: 200px !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* 4. LA TABLA DE TALLES Y PRECIOS */
    #table_tot {
        width: 100% !important;
        display: block !important;
        padding-top: 0 !important;
    }

    .div_prod_det {
        width: 100% !important;
        height: auto !important;
        padding: 15px 0 !important;
        margin-bottom: 20px !important;
        border-bottom: 3px solid #888 !important;
    }

    .nom_prod_det,
    .nom_prod_det_s,
    .img_prod_det,
    .img_prod_det_s {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        min-height: 50px !important;
        position: relative !important;
        border: none !important;
        margin-bottom: 10px !important;
    }

    .stock {
        padding: 20px !important;
        font-size: 24px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 80px !important;
        box-sizing: border-box !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Le da aspecto de cartel */
    }

    .centro_tabla {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 95% !important;
        max-width: none !important;
        /* Damos libertad total para que el texto ocupe toda la pantalla sin cortar */
        margin: 0 auto !important;
        /* Lo mantenemos bien centrado */
        text-align: center !important;
        font-size: 160% !important;
        /* Volvemos al tamaño grande de tu web vieja */
        padding: 5px !important;
        line-height: 1.5 !important;
    }

    .img_prod_det_s img,
    .img_prod_det img {
        height: auto !important;
        width: 50% !important;
        /* Forzamos que la imagen ocupe la mitad de la pantalla */
        min-width: 160px !important;
        /* Aseguramos que nunca se vea diminuta */
        max-width: 300px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .centro_tabla_precio {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        padding-top: 10px !important;
        height: auto !important;
        color: #000 !important;
        /* Volvemos al precio en negro */
        font-size: 230% !important;
        /* Tamaño gigante como en la web original */
    }

    /* Ajustes del cuadro de descuentos (Amarillo) */
    .desc_cuadro {
        width: 100% !important;
        height: 60px !important;
        /* Altura fija para que el cartelito entre perfecto */
        overflow: hidden !important;
        border-top: 1px dashed gray !important;
        background-color: rgba(235, 255, 25, 0.25) !important;
        padding: 0 !important;
        display: block !important;
    }

    /* La caja invisible que envuelve al precio y al cartelito */
    .centro {
        width: 85% !important;
        height: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        /* MAGIA: Los pone en la misma línea */
        justify-content: space-between !important;
        /* Tira el precio a la izq y el cartel a la der */
        align-items: center !important;
        /* Los centra verticalmente */
    }

    /* El texto del precio */
    .centro_tabla_desc {
        float: none !important;
        margin: 0 !important;
        font-size: 200% !important;
        /* Lo agrandamos para que destaque */
        font-weight: bolder !important;
        color: red !important;
    }

    /* El cartelito de Pago Efectivo */
    .desc,
    .desc_v {
        float: none !important;
        width: 85px !important;
        height: 40px !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin: 0 !important;
        margin-right: 0 !important;
        color: white !important;
        font-size: 15px !important;
        font-style: oblique !important;
        font-weight: bold !important;
        font-family: arial !important;

        /* Centrado dinámico adaptativo para Móvil (Soporta 1 y 2 dígitos) */
        display: flex !important;
        box-sizing: border-box !important;
        padding-right: 48px !important; /* Contenedor acotado al triángulo izquierdo */
        padding-left: 0 !important; /* Reseteamos márgenes fijos del pasado */
        justify-content: center !important;
        align-items: flex-start !important;
        padding-top: 6px !important;
    }
    /* 5. Botón de TiendaLys */
    #encuadre_tiendalys {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
    }

    #link_tiendalys {
        float: none !important;
        margin: 10px auto 30px auto !important;
        display: inline-block !important;
    }

    /* 6. Botonera Responsive */
    ul.topnav {
        width: 100% !important;
        background-color: #fff !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border-bottom: 1px solid #ccc !important;
    }

    ul.topnav li {
        float: left;
        width: auto !important;
        display: block !important;
    }

    ul.topnav li a {
        display: block !important;
        color: #333 !important;
        text-align: center !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border: none !important;
        font-weight: bold !important;
    }

    ul.topnav li:not(:first-child) {
        display: none !important;
    }

    ul.topnav li.icon {
        float: right;
        display: block !important;
    }

    ul.topnav.responsive {
        position: relative !important;
    }

    ul.topnav.responsive li.icon {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
    }

    ul.topnav.responsive li {
        float: none;
        display: block !important;
        width: 100% !important;
    }

    ul.topnav.responsive li a {
        display: block !important;
        text-align: left !important;
        border-top: 1px solid #eee !important;
    }

    /* 7. Encabezado L&S y Comodín */
    .header-banner {
        display: none !important;
        /* Ocultamos el banner en celu para que no interfiera */
    }

    .header-container {
        display: block !important;
        /* Anulamos el flex para alinear centrado libremente */
        text-align: center !important;
        padding: 5px 0 !important;
    }

    .header-logo {
        margin: 0 auto !important;
        display: inline-block !important;
    }

    .header-logo img {
        max-height: 90px !important;
        /* Un tamaño ideal para móviles */
    }

    /* 8. Footer Premium Responsive (Mobile First) */
    #pie {
        background-color: #1e293b !important;
        background-image: none !important; /* MATA EL GIF DE RAYAS BLANCAS OBSOLETO */
        color: #f8fafc !important;
        padding: 40px 20px 20px 20px !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        height: auto !important;
        border: none !important;
    }
    
    #pie > div, #pie > a {
        background-image: none !important; /* MATA LOS ICONOS ANTIGUOS QUE SE CORTAN */
        float: none !important;
        position: static !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        height: auto !important;
    }

    #pie_contacto_link {
        color: #93c5fd !important;
        font-size: 20px !important;
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
        float: none !important;
    }
    #pie_contacto_link::before {
        content: "\2709\00a0"; /* Icono de sobre */
        font-size: 24px !important;
        vertical-align: middle !important;
    }
    
    #pie > #pie_facebook {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #pie_facebook img {
        height: 35px !important;
        width: auto !important;
        margin: 0 !important;
        float: none !important;
    }
    #pie_facebook_link {
        color: #ffffff !important;
        font-size: 18px !important;
        margin: 0 15px 0 0 !important;
        text-align: left !important;
        float: none !important;
    }

    #pie_horarios, #pie_horarios_sab {
        background: rgba(255, 255, 255, 0.08) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        font-size: 18px !important; /* Más legible según solicitado */
        color: #e2e8f0 !important;
        line-height: 1.5 !important;
        max-width: 320px !important;
    }

    /* Botones Gigantes Acotados */
    #pie_tel {
        background-color: #2563eb !important;
        padding: 10px 20px !important;
        border-radius: 40px !important;
        margin: 10px auto !important;
        max-width: 250px !important; /* No ocupará todo el celular a lo ancho */
    }
    #pie_tel_letra {
        color: #ffffff !important;
        font-size: 21px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        display: block !important; 
        padding: 5px 0 !important;
        line-height: 1.2 !important;
        margin: 0 auto !important;
        float: none !important;
    }
    #pie_tel_letra br {
        display: none !important; /* Ocultar el salto de línea roto del segundo teléfono */
    }

    #pie_wassp {
        background-color: #16a34a !important;
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        padding: 15px 20px !important;
        border-radius: 40px !important;
        line-height: 1.4 !important;
        max-width: 250px !important; /* No ocupará todo el celular a lo ancho */
        margin: 10px auto !important;
    }
    
    #pielys {
        font-size: 15px !important;
        color: #cbd5e1 !important;
        margin-top: 15px !important;
        line-height: 1.6 !important;
    }
    #pielys strong {
        color: #ffffff !important;
        font-size: 22px !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
    #pielys_letrachica {
        font-size: 14px !important;
        color: #94a3b8 !important;
        margin-top: 5px !important;
    }
    
    #afip img {
        margin: 0 auto !important;
        display: block !important;
    }

    /* 8.5 Ocultar logotipos publicitarios sobrantes en Index */
    .banner-marcas {
        display: none !important;
    }

    /* 9. Layout Páginas de Categoría (Rectos, Anatómicos, etc) */
    
    /* A) Botonera de Categorías (Carrusel Deslizable) */
    #menu, #menu02 {
        width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
        clear: both !important;
        transform: none !important;
    }
    #menu ul, #menu02 ul {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prohíbe salto de línea */
        overflow-x: auto !important; /* Activa Scroll horizontal */
        -webkit-overflow-scrolling: touch !important; /* Deslizamiento con inercia nativa móvil */
        scrollbar-width: none !important; /* Esconde scroll Firefox */
        gap: 15px !important;
        padding: 5px 15px !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    #menu ul::-webkit-scrollbar, #menu02 ul::-webkit-scrollbar {
        display: none !important; /* Esconde scroll en Chrome/Safari */
    }
    #menu li, #menu02 li {
        display: block !important;
        flex: 0 0 95px !important; /* Reducido de 110px para que el 4to ítem asome un 30% */
        margin: 0 !important;
        float: none !important;
    }
    .boto_prodi {
        width: 100% !important;
        height: 85px !important;
        float: none !important;
        margin: 0 !important;
        display: block !important;
        
        /* 1) Hiding text properly to avoid line-wrapping bugs of text-indent */
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0 !important;
        text-indent: 0 !important; /* resets the buggy -9999px */
        overflow: hidden !important; 
        
        /* 2) Background scaling */
        background-size: contain !important;
        background-position: center;
        background-repeat: no-repeat !important;
        transition: transform 0.2s ease !important;
    }
    .boto_prodi:active {
        transform: scale(0.95) !important;
    }
    
    /* B) Imagen/Ilustración del producto genérico y Texto */
    #texto_rectos,
    div[id*="texto_"] {
        width: 100% !important;
        height: auto !important;
        padding: 5px 15px !important;
        margin: 10px auto !important;
        float: none !important;
        text-align: center !important; /* Centra el párrafo narrativo */
        box-sizing: border-box !important;
    }

    #cont_img_menu {
        display: block !important;
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin: 20px auto 30px auto !important;
        clear: both !important;
        position: static !important;
    }
    #img_menu {
        display: inline-block !important;
        max-width: 80% !important;
        height: auto !important;
        margin: 0 auto !important;
        float: none !important;
    }

    
    /* Separadores horizontales (#line y #line_02) */
    #line, #line_02 {
        display: block !important;
        width: 90% !important;
        float: none !important; /* Cancela el left pull de escritorio */
        margin: 20px auto !important; /* Centra perfectamente */
        clear: both !important;
    }

    /* C) Grilla de Productos Individuales (2 por fila exactamente) */
    #tabla_boton, #tabla_boton tbody {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #tabla_boton tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: space-evenly !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tabla_linea_boton {
        display: block !important;
        width: 46% !important; /* Asegura que entren justo 2 por fila con algo de espacio */
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        float: none !important;
    }
    .productos_boton {
        max-width: 100% !important;
        height: 157px !important; /* Mantenemos el height original o lo hacemos fluido */
        background-size: contain !important;
        background-position: center top !important;
        margin: 0 auto !important;
    }

    /* D) Mejoras para Quienes Somos (Solo Móvil) */
    /* D) Mejoras para Quienes Somos (Solo Móvil) */
    #quienes-somos {
        padding: 0 !important;
    }
    .quienes-hero {
        padding: 8px 15px 2px 15px !important; /* Super compacto en móvil */
    }
    .quienes-hero-sub {
        font-size: 100% !important;
        margin-bottom: 5px !important;
    }
    .quienes-content {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 5px 0 !important; /* Espacio casi inexistente para compactar */
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    .quienes-historia {
        width: 100% !important;
        order: 1 !important;
        font-size: 100% !important;
    }
    .quienes-collage {
        width: 100% !important;
        flex: none !important;
        order: 2 !important;
    }
    /* Centrado total de pilares en móvil */
    .quienes-pilares-band {
        width: 100% !important;
        padding: 25px 0 !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
        background-color: #f8fbfc !important;
    }
    .quienes-pilares {
        display: block !important; /* Cambiamos de flex a block para evitar líos de alineación */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    .pilar-item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    .pilar-item:last-child {
        margin-bottom: 0 !important;
    }
    .pilar-item p, .pilar-item h3 {
        text-align: center !important;
        margin: 5px auto !important;
        width: 100% !important;
        display: block !important;
    }
    .pilar-icon {
        display: block !important;
        margin: 0 auto 10px auto !important;
        text-align: center !important;
    }
    .quienes-cierre {
        font-size: 100% !important;
        margin: 20px auto !important;
    }

    /* E) Mejoras para Entregas (Solo Móvil) */
    #entregas-modern {
        background-color: #f4f7f8 !important;
    }
    .entregas-hero {
        padding: 15px 15px !important;
    }
    .entregas-grid {
        margin: 20px auto !important;
        gap: 15px !important;
    }
    .entrega-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 5px !important;
    }
    .costo-valor {
        font-size: 28px !important;
    }
    .entregas-info-extra {
        margin: 30px auto !important;
        padding: 0 15px !important;
    }
    .consulta-ayuda {
        padding: 25px 15px !important;
    }
    .consulta-ayuda p {
        font-size: 100% !important;
    }

    /* F) Mejoras para Donde estamos (Solo Móvil) */
    #donde-modern {
        background-color: #f4f7f8 !important;
    }
    .donde-hero {
        padding: 20px 15px !important;
    }
    .donde-hero h1 {
        font-size: 24px !important;
        margin-bottom: 5px !important;
    }
    .donde-hero-sub {
        font-size: 100% !important;
    }
    .donde-cards-grid {
        margin: 20px auto !important;
        gap: 15px !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    .donde-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px 15px !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }
    /* Horarios en móvil */
    .dia-semana { font-size: 14px !important; }
    .hora-rango { font-size: 18px !important; }
    .horario-grupo { margin-bottom: 15px !important; }

    /* Mapa en móvil - ARREGLO NUCLEAR */
    #donde-modern .donde-mapa-full {
        display: block !important;
        margin: 20px 0 40px 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        float: none !important;
    }
    #donde-modern .mapa-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }
    #donde-modern .iframe-mapa {
        display: block !important;
        height: 350px !important;
        width: 100% !important;
        min-width: 100% !important;
        border: 0 !important;
    }
    .contact-link { font-size: 16px !important; }
    .btn-whatsapp-donde {
        width: 100%;
        box-sizing: border-box;
    }




    /* G) Mejoras para Cambiar Pañal (Solo Móvil) */
    .cambiar-hero {
        padding: 30px 15px !important;
    }
    .cambiar-hero h1 {
        font-size: 24px !important;
    }
    .cambiar-hero-sub {
        font-size: 100% !important;
    }
    .cambiar-pasos-grid {
        gap: 20px !important;
        margin-bottom: 40px !important;
    }
    .paso-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 40px 20px 25px !important;
    }
    .cambiar-video-section {
        margin-bottom: 40px !important;
    }
    .video-container-wrapper {
        padding: 8px !important;
    }
    .ayuda-card-highlight {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }
    .ayuda-card-highlight h3 {
        font-size: 20px !important;
    }
    .btn-whatsapp-modern {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* H) Mejoras para Pizarra Solidaria (Solo Móvil) */
    .pizarra-header {
        padding: 20px 15px 25px !important;
    }
    .pizarra-hero h1 {
        font-size: 24px !important;
    }
    .pizarra-sub {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    #pizarra-search-input {
        padding: 12px 40px 12px 15px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .pizarra-search-box {
        width: 100% !important;
        margin: 0 auto 20px !important;
    }
    .filter-btn {
        padding: 6px 15px !important;
        font-size: 13px !important;
    }
    .pizarra-board-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin: 30px auto !important;
        padding: 0 15px !important;
    }
    .pizarra-card {
        max-width: 100% !important;
    }
    .card-content {
        padding: 20px !important;
    }
    .card-image img {
        height: 180px !important;
    }
    .pizarra-cta-section {
        margin-top: 40px !important;
    }
    .cta-solidario-card {
        padding: 30px 15px !important;
    }
    .cta-solidario-card h2 {
        font-size: 20px !important;
    }
    .btn-whatsapp-pizarra {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* I) Mejoras para Asesoramiento (Solo Móvil) */
    #asesoramiento {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #asesoramiento_texto {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 100% !important;
    }

    /* En móvil: columna única, imagen arriba como banner compacto */
    .aseso-hero {
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    /* Imagen va primero en móvil (orden visual): banner de 190px */
    .aseso-hero-img {
        order: -1 !important;
        width: 100% !important;
        min-height: 190px !important;
        max-height: 210px !important;
        flex: none !important;
    }

    .aseso-hero-foto {
        object-position: center 20% !important; /* Recortar mostrando cara/hombros */
    }

    /* Ocultar el overlay del logo en móvil (demasiado pequeño) */
    .aseso-hero-img::after {
        display: none !important;
    }

    /* Texto debajo de la imagen, con padding */
    .aseso-hero-texto {
        width: 100% !important;
        padding: 15px 18px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        flex: none !important;
    }

    .aseso-confidencial {
        width: 90% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin: 10px auto !important;
        font-size: 90% !important;
    }

    .aseso-consultas-band {
        margin: 15px 0 !important;
        padding: 20px 0 !important;
    }

    .aseso-consultas {
        width: 100% !important;
        padding: 0 18px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        font-size: 95% !important;
    }

    .aseso-consultas ul li {
        padding: 10px 0 !important;
    }

    /* Banda azul: ocupa todo el ancho en móvil */
    .aseso-accion {
        width: 100% !important;
        padding: 25px 15px !important;
        margin: 15px 0 0 0 !important;
        box-sizing: border-box !important;
    }

    .aseso-horarios {
        width: 90% !important;
        flex-direction: row !important;
        margin: 15px auto !important;
        box-sizing: border-box !important;
        font-size: 92% !important;
        padding: 12px 15px !important;
    }

    /* Botones: apilados verticalmente, al 90% del ancho */
    .aseso-botones {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 20px auto !important;
        width: 90% !important;
    }

    .aseso-btn-llamar,
    .aseso-btn-whatsapp {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 20px !important;
        font-size: 110% !important;
        border-radius: 30px !important;
        box-sizing: border-box !important;
        min-height: 54px !important; /* Touch-friendly */
    }

    .aseso-subtexto {
        font-size: 85% !important;
        padding: 0 20px !important;
    }

    .titulo_aseso {
        width: 100% !important;
        font-size: 26px !important;
        margin: 10px 0 !important;
        line-height: 1.2 !important;
    }

    .titulo_aseso02 {
        font-size: 18px !important;
        margin: 8px 0 !important;
        line-height: 1.3 !important;
    }

    .titulo_aseso03 {
        width: 100% !important;
        font-size: 16px !important;
        margin: 8px auto !important;
        line-height: 1.4 !important;
    }


    /* H) Mejoras para Contacto (Solo Móvil) */

    /* Formulario: ancho COMPLETO hasta los bordes */
    #contacto_izq {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* Info de contacto: apilada debajo del formulario */
    #contacto_der {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
        box-sizing: border-box !important;
    }

    /* Título "Contacto" naranja — más ancho */
    #contacto_tit {
        display: none !important; /* Redundante: el formulario ya deja claro que es la sección de contacto */
    }

    /* Campos de texto más grandes y fáciles de tocar */
    input[name=name],
    [name=mail],
    [name=telefono] {
        width: 92% !important;
        height: 40px !important;
        font-size: 16px !important;
        margin: 5px auto !important;
        display: block !important;
        padding: 5px 10px !important;
        box-sizing: border-box !important;
    }

    textarea[name=consulta] {
        width: 92% !important;
        height: 120px !important;
        font-size: 16px !important;
        margin: 5px auto !important;
        display: block !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    /* Números de teléfono más grandes y centrados */
    #contacto_numeros {
        width: 100% !important;
        height: auto !important;
        font-size: 200% !important;
        margin: 10px auto !important;
        color: #444 !important;
    }

    /* WhatsApp: reestructuramos para que llene el botón correctamente */
    #contacto_wassap {
        width: 85% !important;
        height: auto !important;
        margin: 10px auto !important;
        padding: 14px 20px !important;
        font-size: 200% !important;
        border-radius: 30px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* icono izq, número centro, texto der */
        gap: 8px !important;
        text-align: center !important;
    }

    #wassap_img {
        flex-shrink: 0 !important;
        float: none !important;
        margin: 0 !important;
        width: 36px !important;
        height: 36px !important;
    }

    #contacto_msj {
        font-size: 11px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    #wassap_img_nuevo {
        display: none !important; /* Badge "nuevo" — fuera en móvil */
    }

    /* Email */
    #contacto_mail {
        width: 100% !important;
        height: auto !important;
        margin: 10px auto !important;
        font-size: 110% !important;
    }

    /* Redes sociales: solo el logo con link, texto de URL oculto */
    #contacto_facebook,
    #contacto_instagram {
        width: 90% !important;
        height: auto !important;
        margin: 8px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    /* Texto antes del logo ("Seguinos en Facebook/Instagram") — oculto */
    #contacto_facebook,
    #contacto_instagram {
        font-size: 0 !important; /* Ocultar texto del contenedor */
        color: transparent !important;
    }

    /* El logo sí se ve y mantiene su tamaño */
    #contacto_facebook_img {
        float: none !important;
        display: block !important;
        margin: 0 auto !important;
        width: 45px !important;
        height: 45px !important;
        font-size: initial !important;
    }

    /* El link de URL — oculto */
    #contacto_facebook_link,
    #contacto_instagram a {
        display: none !important;
    }

    /* Separamos los dos logos de redes para que queden lado a lado */
    #contacto_facebook,
    #contacto_instagram {
        display: inline-flex !important;
        width: 50px !important;
        margin: 5px 15px !important;
    }

    /* Wrapper centrado para los dos logos de redes */
    #contacto_der {
        text-align: center !important;
    }

    /* Horarios */
    #contacto_horario {
        width: 90% !important;
        height: auto !important;
        margin: 10px auto !important;
        font-size: 100% !important;
    }
    #contacto_horario02 {
        width: 100% !important;
        height: auto !important;
        font-size: 85% !important;
    }

    /* Línea divisoria */
    #linea {
        margin-top: 20px !important;
    }
}
/*=========== 4) PÁGINA DE ERROR 404 ===========*/

.error-404-container {
    padding: 30px 20px 80px 20px; /* Reducido arriba para compactar */
    text-align: center;
    background: #fff;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-img img {
    max-width: 180px; /* Tamaño equilibrado para el dibujo */
    height: auto;
    margin-bottom: 20px;
}

.error-title {
    font-size: 32px;
    color: #298f82; /* Verde azulado del logo */
    margin-bottom: 20px;
    font-weight: 700;
}

.error-text {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.btn-error {
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #298f82;
    color: white;
}

.btn-primary:hover {
    background: #217369;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #d7ce10; /* Amarillo del logo */
    color: #333;
}

.btn-secondary:hover {
    background: #c1b90d;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .error-title {
        font-size: 26px;
    }
    .btn-error {
        width: 100%;
    }
}