/*html, body {width: 100%; height: 100%; padding: 0; margin: 0; font-family: arial; min-width: 805px; }*/
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: arial;
}

.membrana {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); z-index: 99; transition: all 0.5s; visibility: hidden; opacity: 0;}
.membrana .marco {position: absolute; z-index: 100;background-color: #DDD; top: 50%; left: 50%; margin-left: -340px; margin-top: -215px; width: 680px; height: 430px; border-radius: 1px; box-shadow: 0px 0px 3px #666}
.membrana .marco .titulo {font-size: 11px; display: block; float: left; color: #666; margin: 22px; margin-top: 18px; margin-bottom: 0; text-shadow: 0px 1px 1px #FFF}
.membrana .marco .video {margin: 20px; margin-top: 0; border: 1px solid #999}
.membrana .marco .cerrar {display: block; margin: 14px; margin-top: 8px; margin-bottom: 7px; float: right; cursor: pointer}

.deco {position: relative; z-index: 0; display: block; height: 10px; background-color: #DDD; overflow: hidden}
.deco .barra {position: relative;width: 240px; background-color: #05A}

.header {position: relative; z-index: 4; display: block; background-color: #F9F9F9; box-shadow: 0px 0px 3px #333; overflow: hidden; height: 96px}
.header .alogo {display: inline-block; border: 0; padding: 10px; float: left}
.header .isos {display: inline-block; border: 0; margin: 10px; float: right; width: auto; height: 76px; transition: all 0.5s; border-radius: 5px; visibility: visible; opacity: 0.7;}

.fixed {position: fixed; z-index: 99; display: block; background-color: #DDD; text-align: left; box-shadow: 0px 0px 3px #666; top: -2px; width: 100%; overflow: hidden}
.fixed .enlace {position: relative; display: inline-block; padding: 0px; padding-top: 15px; padding-bottom: 15px; color: #777; text-shadow: 1px 1px 1px #FFF; text-decoration: none; font-size: 11px; transition: all 0.2s; width: 130px; text-align: center}
.fixed .enlace:hover {background-color: #CCC; color: #222; text-shadow: 0px 1px 1px #EEE;}
.fixed .enlace .flecha {position: absolute; width: 20px; height: 20px; top: -25px; left: 55px; transform: rotate(45deg); background-color: #EEE; transition: top 0.2s}
.fixed .enlace:hover .flecha {top: -14px;}

.reserva {position: relative; z-index: 3; display: block; height: 42px; width: 100%}

.menu {position: relative; z-index: 3; display: block; background-color: #DDD; text-align: left; box-shadow: 0px 0px 3px #666}
.menu .enlace {position: relative; display: inline-block; padding: 0px; padding-top: 15px; padding-bottom: 15px; color: #777; text-shadow: 1px 1px 1px #FFF; text-decoration: none; font-size: 11px; transition: all 0.2s; width: 130px; text-align: center}
.menu .enlace:hover {background-color: #CCC; color: #222; text-shadow: 0px 1px 1px #EEE;}
.menu .enlace .flecha {position: absolute; width: 20px; height: 20px; top: -25px; left: 55px; transform: rotate(45deg); background-color: #EEE; transition: top 0.2s}
.menu .enlace:hover .flecha {top: -14px;}

.banner {position: relative; z-index: 2; background-image: url('../src/banners/0.png'); background-size: cover; height: 250px; transition: all 2s;}
.portada {position: relative; z-index: 2; background-image: url('../src/portada/0.png'); background-size: cover; height: 550px; transition: all 2s;}
.portada .isos {position: absolute; display: block; z-index: 3; bottom: 10px; right: 10px; opacity: 1; background-color: rgba(255,255,255,0.7);}

.main {position: relative; z-index: 2; display: block; background-color: #F9F9F9; box-shadow: 0px 0px 3px #333; overflow: hidden;}
.main .contenido {position: relative; width: 100%; float: left; height: 100%; background-image: url('../src/barra.png'); background-repeat: repeat-y}
.main .subcontenido {position: relative; width: 100%; float: left; height: 100%; padding-top: 20px; padding-bottom: 20px; background-image: url('../src/cirujano.png'); background-repeat: no-repeat; background-position: bottom right; min-height: 500px}
.main .lateral {position: absolute; z-index: 2; top: 0; left: 0; float: left; display: block; background-color: #DDD; width: 240px; height: 400px; padding-top: 21px}
.main .lateral .opcion {position: relative; display: block; background-color: #CCC; padding: 14px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px; text-decoration: none; color: #555; text-shadow: 1px 1px 1px #FFF; transition: all 0.2s; font-size: 11px; cursor: pointer}
.main .lateral .opcion:hover {position: relative; background-color: #BBB; color: #444;}
.main .lateral .opcion .flecha {position: absolute; background-color: #CCC; transform: rotate(45deg); width: 28px; height: 28px; top: 6px; right: 7px; transition: all 0.2s}
.main .lateral .opcion:hover .flecha {right: -14px; background-color: #BBB}
.main .lateral .actual {position: relative; background-color: #BBB; color: #444; cursor: default}
.main .lateral .actual .flecha {right: -14px; background-color: #BBB}

.main .modulo {position: relative; width: 32%; background: #CCC; color: #222; text-shadow: 0px 1px 1px #EEE; margin-top: 1%; margin-bottom: 1%; margin-left: 1%; float: left; box-shadow: 0px 0px 3px #666; height: 250px}
.main .modulo .titModulo {display: block; padding: 20px; padding-bottom: 10px; font-size: 17px}
.main .modulo .texModulo {display: block; padding: 20px; padding-top: 10px; font-size: 14px; text-align: justify; text-justify: inter-word}
.main .modulo .linkMoculo {position: absolute; display: block; padding: 20px; font-size: 14px; text-align: justify; text-justify: inter-word; float: right; color: #05A; text-decoration: none; bottom: 0; right: 0; transition: all 0.2s}
.main .modulo .linkMoculo:hover {color: #222}

.main .basicos {position: relative; z-index: 2; float: left; display: block; background-color: rgba(255,255,255,0.6); box-shadow: 0px 0px 2px #999 ; width: 32%; height: 500px; margin-left: 1%; padding-bottom: 25px}
.main .basicos .titulo {position: relative; display: block; font-size: 26px; font-weight: bold; color: #05A; padding: 20px}
.main .basicos .empresa {position: relative; display: block; font-size: 16px; font-weight: bold; color: #333; padding: 10px; padding-left: 20px; text-shadow: 1px 1px 1px #FFF}
.main .basicos .datos {position: relative; display: block; font-size: 14px; color: #555; padding-left: 20px; padding-top: 3px; padding-bottom: 3px; padding-right: 0; text-shadow: 1px 1px 1px #FFF}

.main .contenido .lateral {position: absolute; z-index: 3; top: 0; left: 0; float: left; display: block; background-color: #DDD; width: 240px; height: 400px; padding-top: 21px}

.main .contenido .formulario {position: relative; z-index: 2; padding: 10px; padding-left: 280px; padding-right: 40px; color: #333; font-size: 15px; transition: all 0.4s; left: 0px; opacity: 1;}
.main .contenido .formulario .titulo {position: relative; display: block; font-size: 24px; font-weight: bold; color: #05A}
.main .contenido .formulario .etiqueta {display: block; padding: 1%; padding-bottom: 2px; color: #333}
.main .contenido .formulario .textbox {display: block; padding: 1%; margin: 1%; width: 96%; border: 1px solid #CCC}
.main .contenido .formulario .memo {display: block; padding: 1%; margin: 1%; width: 96%; height: 200px; border: 1px solid #CCC}
.main .contenido .formulario .boton {margin: 1%; padding: 1%}

.main .contenido .pestana {position: absolute; z-index: 1; padding: 30px; padding-left: 280px; padding-right: 40px; color: #333; font-size: 15px; transition: all 0.4s; left: 0px; opacity: 0; top: 0; left: 0; width: 100%; height: 100%}
.main .contenido .pestana .titulo {position: relative; display: block; font-size: 24px; font-weight: bold; color: #05A}
.main .contenido .pestana .cuadro {margin: 1%; padding: 1%; display: block; background-image: url('../src/degradado.png'); background-repeat: repeat-y}
.main .contenido .pestana .cuadro .empresa {display: block; padding: 1%; font-size: 18px; padding-bottom: 2px; color: #333}
.main .contenido .pestana .cuadro .texto {display: block; padding: 1%; padding-bottom: 2px; color: #333}
.main .contenido .pestana .cuadro .textoFinal {display: block; padding: 1%; color: #333}

.main .contenido .ficha {position: relative; z-index: 1; padding: 10px; padding-left: 280px; padding-right: 40px; color: #333; font-size: 15px; transition: all 0.4s; left: 0px; opacity: 1;}
.main .contenido .ficha .titulo {position: relative; display: block; font-size: 24px; font-weight: bold; color: #05A}
.main .contenido .ficha .info {position: relative; font-size: 14px; text-align: justify; text-justify: inter-word; line-height: 25px; color: red}
.main .contenido .ficha .texto {position: relative; font-size: 14px; text-align: justify; text-justify: inter-word; line-height: 25px}
.main .contenido .ficha .tarjeta {position: relative; width: 27%; padding: 3%; float: left}
.main .contenido .ficha .tarjeta .cab {display: block; font-size: 18px; padding-bottom: 5px}
.main .contenido .ficha .tarjeta .det {display: block; font-size: 13px}
.main .contenido .ficha .gmap {position: relative; border: 1px solid #CCC; height: 400px; margin-top: 20px}
.main .contenido .ficha .distribuidor {position: relative; display: block; vertical-align: top; overflow: hidden; padding-bottom: 50px;}
.main .contenido .ficha .distribuidor .logotipo {margin-bottom: 30px; padding-right: 20px; margin-right: 20px; float: left; border-right: 1px dotted #CCC}
.main .contenido .ficha .distribuidor .estetico {margin-bottom: 30px; padding-right: 20px; margin-right: 20px; float: left; border-right: 1px dotted #CCC; width: 30%;}
.main .contenido .ficha .distribuidor .nombre {font-size: 18px; font-weight: bold; display: block}
.main .contenido .ficha .distribuidor .texto {font-size: 14px; color: #666}
.main .contenido .ficha .buscador {display: block; padding: 1%; margin-top: 1%; margin-bottom: 1%; width: 97.9%; border: 1px solid #CCC}

.footer {position: relative; z-index: 9; display: block; box-shadow: 0px 0px 3px #333; background-color: #F9F9F9; overflow: hidden}
.footer .aviso {}

.avisoClyco {display: inline-block; font-size: 11px; text-decoration: none; color: #666; padding: 8px; color: #333; visibility: visible; float: right}
.footer .zonalopd {display: inline-block; font-size: 11px; text-decoration: none; color: #666; padding: 8px; color: #333; visibility: visible; float: left}
.footer .zonalopd a {text-decoration: none; color: #666}
.footer .zonalopd a:hover {color: #000}

.check {display: block; padding: 6px}

/* --- ESTILOS DEL BOTÓN --- */
.boton-contacto {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0056a0;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

    .boton-contacto:hover {
        background-color: #003d73;
    }

/* --- ESTILOS DEL CONTENEDOR DE PRODUCTO (VISTA ESCRITORIO) --- */
.producto-container {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-top: 40px;
}

    /* --- ESTILOS PARA LA IMAGEN DEL CARRUSEL (HEMOS QUITADO EL FLOAT) --- */
    /* Esta regla sobreescribe la anterior de .distribuidor .estetico */
    .producto-container .estetico {
        width: 100%; /* La imagen debe ocupar el 100% de su contenedor */
        float: none; /* MUY IMPORTANTE: Desactivamos el float */
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

/* --- ESTILOS PARA EL TEXTO DEL PRODUCTO --- */
.info-producto .nombreProducto {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

.info-producto .textoProducto {
    font-size: 14px;
    color: #666;
}

/* --- MEDIA QUERY PARA PANTALLAS PEQUEÑAS (MÓVIL) --- */
@media (orientation: portrait) {

    /* --- 2. AJUSTES DEL CONTENEDOR DEL PRODUCTO --- */

    .producto-container {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos */
        gap: 20px;
        margin-top: 40px;
    }

        /* El carrusel y el texto ocuparán todo el ancho disponible */
        .producto-container #image-carousel,
        .producto-container .info-producto {
            width: 100%;
            max-width: 100%; /* Anulamos el max-width de escritorio */
        }

        /* --- 3. AJUSTES DE LA IMAGEN DEL CARRUSEL --- */

        /* Esta regla es importante para anular el `float: left` original */
        .producto-container .estetico {
            width: 100%;
            float: none; /* Desactivamos el float conflictivo */
            border-right: none;
            padding-right: 0;
            margin-right: 0;
            margin-bottom: 0;
        }
}

.image-carousel {
    position: relative;
    flex: 1;
    max-width: 400px;
    min-width: 300px;
    overflow: hidden;
}

.carousel-prev, .carousel-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
}

.carousel-prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.carousel-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}