/* =========================================================
   HOT.COM.PY - HOJA DE ESTILOS MÓVIL (ALT.CSS FINAL SANEADO)
   Blindaje absoluto: Todas las reglas móviles están encapsuladas.
========================================================= */

@media only screen and (max-width: 768px), (max-device-width: 768px), (device-width: 768px) {

    /* --- 1. RESET Y ESTRUCTURA BÁSICA --- */
    body { font-size: 40px; }
    #wrapper { width: 100%; }
    .contents img:not(.no-pad--sm) { padding-right: 10px; padding-bottom: 10px; }
    
    /* Utility classes strictly require !important to guarantee element visibility toggles */
    .hide-on-phone { display: none !important; }
    .hide-on-desk { display: block !important; }

    /* --- 2. CABECERA, LOGO Y MENÚ PRINCIPAL --- */
    #wrapper #header #logo { width: 100%; float: left; position: absolute; text-align: center; }
    #wrapper #header #logo img { width: 30%; height: auto; object-fit: contain; }
    #wrapper #header .contents { position: relative; width: 100%; float: left; margin-top: 20%; text-align: center; overflow: visible; }
    #wrapper #header .contents iframe { float: none; }
    #wrapper #header .contents h2 { margin: 10px 0px 20px; font-size: 100%; text-align: center; width: 100%; }

    #wrapper #main-menu { display: none; width: 100%; }
    #wrapper #main-menu ul li { width: 100%; padding: 20px 0px; border-radius: 0; }
    #wrapper #main-menu ul li a { font-size: 40px; line-height: 50px; letter-spacing: 1px; }
    #wrapper #top-list { width: 100%; margin-bottom: 20px; }

    /* --- 3. SEPARADORES Y GOOGLE TRANSLATOR --- */
    #wrapper .spacer { width: 90%; margin: 40px auto 0px; }
    #wrapper .spacer img { max-width: 100%; }
    #wrapper .spacer h4 { display: none; }
    #wrapper .spacer .googletranslator { display: none; width: 320px; float: left; clear: both; height: 45px; padding: 30px 0px; margin: 30px 0px 30px 30px; }
    #wrapper .spacer .googletranslator span { font-size: 80px; background: #fff; padding: 5px 0px 5px 30px; }
    #wrapper .spacer .googletranslator span:last-child { display: none; }
    #wrapper .spacer .googletranslator .goog-te-gadget-icon { width: 100px; height: 100px; background: #fff url('http://translate.googleapis.com/translate_static/img/te_ctrl3.gif') no-repeat -350px 0px; background-size: auto 100%; }

    /* --- 4. GRILLA PRINCIPAL INDEX (FLEXBOX MAGICO) --- */
    #wrapper #inner-wrap { width: 100%; }
    #wrapper #inner-wrap .contents-small { width: 100%; padding: 0 2%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 15px; margin: 0 auto; }
    #wrapper #inner-wrap .contents-small img { flex-grow: 1; flex-basis: auto; min-width: 45%; max-width: 100%; height: auto; object-fit: cover; margin: 0; }
    #wrapper #inner-wrap .contents-small a[href*="universitarias.html"] { flex: 0 0 100%; width: 100%; max-width: 100%; display: block; margin: 15px 0 0 0; }
    #wrapper #inner-wrap .contents-small a[href*="universitarias.html"] img { width: 100%; min-width: 100%; height: auto; object-fit: contain; border-radius: 8px; margin: 0; }
    #wrapper #inner-wrap .contents-small .video-item { flex-grow: 1; flex-basis: auto; min-width: 45%; max-width: 100%; margin: 0; width: auto; display: flex; }
    #wrapper #inner-wrap .contents-small .video-item img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
    #wrapper #inner-wrap .contents-small img, .video-item { float: none; max-width: 100%; }

    /* --- 5. PERFILES INDIVIDUALES (DETALLES CHICA) --- */
    #wrapper .spacer { display: none; }
    #wrapper #header .contents h2 { margin: 0 auto; font-size: 80px; line-height: 80px; text-align: center; width: 100%; }
    body:has(.details) .hamburger { margin-left: 25px; }
    #wrapper #inner-wrap .details { width: 90%; padding: 0px 5%; margin: 0 auto; clear: both; overflow: hidden; }
    #wrapper #inner-wrap .details h1 { font-size: 400%; line-height: 110%; margin-top: 40px; margin-bottom: 25px; }
    #wrapper #inner-wrap .details ul li { font-size: 200%; line-height: 130%; margin-bottom: 15px; }
    #wrapper #inner-wrap .details ul li a { font-size: 100%; }
    #wrapper #inner-wrap .details .contact-info { margin-top: 50px; margin-bottom: 50px; }
    #wrapper #inner-wrap .details .contact-info p, #wrapper #inner-wrap .details .contact-info p.address, #wrapper #inner-wrap .details .contact-info a { font-size: 90px; line-height: 1.2; margin: 2rem 0; }
    #wrapper #inner-wrap .details .contact-info span[class$="-ico"], #wrapper #inner-wrap .details .contact-info .arroba { width: 105px; height: 105px; flex: 0 0 105px; margin-right: 40px; }
    #wrapper #inner-wrap .details h2, #wrapper #inner-wrap .details p { font-size: 80px; line-height: 1.4; }
    #wrapper #inner-wrap .details .highlight2 { font-size: 120px; line-height: 1.2; display: inline-block; margin-bottom: 20px; }
    #wrapper #inner-wrap .details .banner { display: none; }
    #wrapper .go-up { display: block; }

    /* --- 6. ELEMENTOS GENÉRICOS --- */
    *[class$="-ico"], .arroba { width: 70px; height: 70px; margin-right: 30px; flex: 0 0 70px; font-size: 3rem; }
    #wrapper .text-top { font-size: 50px; line-height: 45px; }
    #wrapper .text-top2 { font-size: 40px; line-height: 40px; }
    #wrapper #inner-wrap .contents .maintext ul li { display: block; width: 100%; margin-bottom: 30px; }
    #wrapper .generic { padding-left: 30px; box-sizing: border-box; }
    #wrapper .maintext { font-size: 40px; line-height: 50px; }
    .home-text { padding: 30px; }
    .home-text h2, .home-text span { font-size: 40px; line-height: 50px; }
    .home-text h1, .home-text h1 span { font-size: 50px; line-height: 60px; }
    #wrapper #header .contents, .flex-center--sm { display: flex; align-items: center; justify-content: space-around; margin-bottom: 30px; }
    .sidebar h4 { margin-bottom: -20px; }
    .portrait { width: 48%; display: inline-block; }
    .landscape { width: 100%; }

    /* --- 7. MÓDULOS EXTRAÍDOS DE MAIN.CSS --- */
    body:has(.gotoselected) #wrapper #main-banners-container { display: none; }
    body:has(.gotoselected) #wrapper .spacer h4 { display: none; }
    
    /* --- CENTRADO DEL COMBOBOX (COMPATIBLE CON TODOS LOS CELULARES) --- */
    /* Hacemos que el contenedor actúe como un bloque limpio y centrado */
    #wrapper .spacer { display: block; margin: 30px auto 10px; width: 100%; }
    
    #wrapper .spacer div.inline {
        display: block;
        width: 100%;
        text-align: center;
        margin: 30px auto 20px;
        padding: 0;
        font-size: 0; /* Oculta la palabra "Agencias:" suelta */
        color: transparent;
        float: none;
        clear: both;
        position: relative;
        z-index: 999; /* Lo saca de debajo de cualquier margen negativo */
    }

    /* Le damos forma, color y posición a la lista de opciones */
    #wrapper .spacer div.inline .gotoselected {
        display: inline-block;
        width: 90%; 
        max-width: 500px;
        height: 80px; 
        font-size: 35px;
        border-radius: 12px;
        margin: 0 auto;
        background-color: #e22784;
        color: #fff;
        border: 4px solid #ffb3ff;
        float: none; /* Mata el float problemático */
        text-align: center;
        text-align-last: center;
        position: relative;
        z-index: 1000; /* Asegura que la lista reciba el toque del dedo */
        box-shadow: 0 5px 15px rgba(0,0,0,0.4);
        cursor: pointer;
    }

    body:has(.grid_fix) #wrapper #inner-wrap .contents.grid_fix { display: flex; flex-wrap: wrap; gap: 15px; width: calc(100% - 50px); margin: 30px 25px; padding: 0; justify-content: flex-start; }
    body:has(.grid_fix) #wrapper #inner-wrap .contents.grid_fix a { flex: 0 0 calc(33.333% - 10px); max-width: calc(33.333% - 10px); margin: 0; display: block; }
    body:has(.grid_fix) #wrapper #inner-wrap .contents.grid_fix a img { width: 100%; height: auto; border-radius: 8px; display: block; padding: 0; }
    body:has(.grid_fix) #wrapper .sidebar { display: none; }
    body:has(.gotoselected) .hamburger { margin-left: 25px; }
    body:has(.gotoselected) #wrapper #header .contents h2, body:has(.details) #wrapper #header .contents h2 { color: #ffb3ff; }

    /* Fallback para grid_fix */
    #wrapper .grid_fix { display: flex; align-items: center; gap: 1rem; flex-flow: row wrap; margin-left: 1rem; }
    #wrapper .grid_fix a { width: 30%; min-width: 25%; display: inline-block; }
    #wrapper .grid_fix img { width: 100%; height: auto; }

    /* B) OPTIMIZACIÓN DE PÁGINA INDEPENDIENTES (5 por fila) */
    body:has(.grid_independientes) #wrapper .sidebar { display: none; }
    body:has(.grid_independientes) #wrapper #inner-wrap .contents.grid_independientes { display: flex; flex-wrap: wrap; gap: 10px; width: calc(100% - 50px); margin: 30px 25px; padding: 0; justify-content: flex-start; }
    body:has(.grid_independientes) #wrapper #inner-wrap .contents.grid_independientes a { flex: 0 0 calc(20% - 8px); max-width: calc(20% - 8px); margin: 0; display: block; }
    body:has(.grid_independientes) #wrapper #inner-wrap .contents.grid_independientes a img { width: 100%; height: auto; border-radius: 8px; display: block; padding: 0; }

    /* C) ACORDEÓN SEO */
    .seo-accordion { width: 90%; margin: 40px auto 60px; background-color: transparent; clear: both; }
    .seo-accordion summary { background-color: #e22784; color: #fff; font-size: 35px; font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; padding: 25px; border-radius: 10px; text-align: center; cursor: pointer; list-style: none; outline: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
    .seo-accordion summary::-webkit-details-marker { display: none; }
    .seo-accordion .seo-content { background-color: #2a0b1f; border-radius: 0 0 10px 10px; padding: 30px; margin-top: -10px; padding-top: 40px; border: 1px solid #3f172c; }
    
    #wrapper #inner-wrap .seo-accordion .seo-content h1,
    #wrapper #inner-wrap .seo-accordion .seo-content h2 { color: #ffb3ff; font-size: 48px; margin-bottom: 20px; line-height: 1.3; font-family: "Roboto Condensed", sans-serif; display: block; font-weight: normal; }
    #wrapper #inner-wrap .seo-accordion .seo-content p { color: #e0e0e0; font-size: 38px; line-height: 1.5; margin-bottom: 30px; font-family: Arial, sans-serif; }
    #wrapper #inner-wrap .seo-accordion .seo-content strong { color: #fff; font-weight: bold; }

    /* D) BARRA DE BÚSQUEDA INDEX */
    body #wrapper #inner-wrap .search-bar { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 2%; width: 100%; padding: 0; margin: 0 0 30px 0; background: transparent; box-sizing: border-box; clear: both; }
    body #wrapper #inner-wrap .search-bar .textfield { flex: 0 0 58%; width: 58%; max-width: 58%; height: 80px; font-size: 35px; border: 4px solid #e22784; border-radius: 10px; padding: 0 15px 0 65px; margin: 0; box-sizing: border-box; }
    body #wrapper #inner-wrap .search-bar select,
    body #wrapper #inner-wrap .search-bar select.index-combo { flex: 0 0 38%; width: 38%; max-width: 38%; height: 80px; font-size: 36px; border: 4px solid #e22784; border-radius: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 50px 0 10px; margin: 0; box-sizing: border-box; color: #fff; font-weight: bold; -webkit-appearance: none; appearance: none; background: #e22784 url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center; background-size: 40px 40px; }
    
    /* E) PLUGIN BUSQUEDA */
    html, body, html body #ss360-layer { overflow-x: hidden; }
    html body .ss360-layer-content { padding: 20px 0; overflow-x: hidden; box-sizing: border-box; width: 100%; }
    html body #unibox-suggest-box, html body #unibox-suggest-box *, html body #ss360-layer, html body #ss360-layer * { font-size: 50px; line-height: 1.3; box-sizing: border-box; }
    html body .unibox__selectable { display: flex; align-items: center; gap: 30px; padding: 30px; text-align: left; }
    html body #unibox-suggest-box [class*="image"], html body #unibox-suggest-box [class*="media"], html body #unibox-suggest-box figure, html body #unibox-suggest-box .unibox__selectable > div:first-child { width: 180px; min-width: 180px; max-width: 180px; height: auto; flex: 0 0 180px; margin: 0; }
    html body #unibox-suggest-box img { width: 180px; min-width: 180px; max-width: 180px; height: auto; max-height: none; border-radius: 15px; object-fit: cover; margin: 0; }
    html body #ss360-layer .ss360-grid, html body #ss360-layer .ss360-results-container { display: block; width: 100%; margin: 0; padding: 0; }
    html body .ss360-result { display: flex; flex-direction: column; align-items: center; width: 900px; max-width: 95%; padding: 40px 0 0 0; margin: 0 auto 60px auto; background: #fff; border-radius: 20px; overflow: hidden; }
    html body #ss360-layer .ss360-result-media, html body #ss360-layer .ss360-result-image-container, html body #ss360-layer .ss360-result [class*="image"], html body #ss360-layer .ss360-result [class*="media"], html body #ss360-layer .ss360-result figure, html body #ss360-layer .ss360-result a { flex: 0 0 auto; margin: 0 auto; }
    html body #ss360-layer .ss360-result img { border-radius: 15px; }
    html body #ss360-layer .ss360-result-content, html body #ss360-layer .ss360-result-title { display: block; width: 100%; padding: 40px 30px; text-align: center; box-sizing: border-box; }
    html body #ss360-layer .ss360-result-snippet, html body #ss360-layer .ss360-result-url { display: none; }

    /* --- BOTÓN DEL FORO: GIGANTE Y TÁCTIL --- */
    #wrapper .foro-cta-container { 
        margin: 60px 0 80px 0; 
        text-align: center; 
        width: 100%;
        clear: both;
        display: block;
    }
    #wrapper .btn-foro { 
        display: block; 
        width: 90%; 
        margin: 0 auto;
        font-size: 50px; 
        padding: 40px 20px; 
        border-radius: 20px; 
        border-width: 5px; 
        white-space: normal; 
        box-sizing: border-box; 
    }

    /* F) CABECERA APP NATIVA */
    body:has(.banner-hot) #wrapper { position: relative; }
    body:has(.banner-hot) #wrapper #header { position: relative; height: 145px; width: 100%; padding: 0; margin: 0; display: block; }
    body:has(.banner-hot) #wrapper #header .contents { position: static; width: 100%; margin: 0; display: block; }
    body:has(.banner-hot) .hamburger { position: absolute; top: 70px; left: 20px; margin: 0; z-index: 1000; }
    body:has(.banner-hot) #wrapper #header #logo { position: absolute; top: 20px; left: 50%; transform: translateX(calc(-50% - 90px)); width: auto; margin: 0; float: none; z-index: 998; white-space: nowrap; }
    body:has(.banner-hot) #wrapper #header #logo img { height: 105px; width: auto; max-width: none; object-fit: contain; }
    body:has(.banner-hot) .banner-hot img { display: none; }
    body:has(.banner-hot) .banner-hot { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; right: 15px; top: 24px; background: #25D366; border-radius: 20px; padding: 16px 28px; text-decoration: none; z-index: 999; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3), 0 4px 10px rgba(0,0,0,0.6); width: auto; height: auto; gap: 12px; }
    body:has(.banner-hot) .banner-hot::before { content: ""; display: block; width: 60px; height: 60px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23ffffff"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zM223.9 413.2c-33.1 0-65.5-8.9-94-25.7l-6.7-4-69.8 18.3L72 334.3l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184-186.6 184zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>') no-repeat center center; background-size: contain; }
    body:has(.banner-hot) .banner-hot::after { content: "PUBLICAR"; color: #ffffff; font-size: 34px; font-family: "Roboto Condensed", sans-serif; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-top: 0; }

    /* G) HAMBURGUESA */
    body .hamburger { display: block; width: 55px; height: 40px; position: relative; cursor: pointer; z-index: 1000; }
    body .hamburger span, body .hamburger span:before, body .hamburger span:after { background-color: #ffffff; display: block; position: absolute; height: 8px; width: 55px; border-radius: 8px; content: ""; transition: all 0.3s ease; }
    body .hamburger span { top: 50%; margin-top: -4px; }
    body .hamburger span:before { top: -18px; }
    body .hamburger span:after { bottom: -18px; top: auto; }
    body .hamburger.active span { background-color: transparent; }
    body .hamburger.active span:before { top: 0; transform: rotate(45deg); }
    body .hamburger.active span:after { bottom: auto; top: 0; transform: rotate(-45deg); }

    /* H) EQUILIBRIO VISUAL */
    body:has(.banner-hot) #wrapper #header #logo a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
    body:has(.banner-hot) #wrapper #header #logo a::before { content: "PARAGUAY"; color: #ffb3ff; font-size: 40px; font-family: "Roboto Condensed", sans-serif; font-weight: 400; letter-spacing: 3px; margin-right: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
    
    /* I) BARRA MODERNA INDEX */
    body #wrapper #inner-wrap .search-bar-modern { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin: 20px 0 20px 0; padding: 0; box-sizing: border-box; clear: both; flex-wrap: nowrap; gap: 2%; }
    body #wrapper #inner-wrap .search-bar-modern .search-col { flex: 1 1 auto; width: auto; max-width: none; margin: 0; padding: 0; }
    body #wrapper #inner-wrap .search-bar-modern .search-col input#searchBox,
    body #wrapper #inner-wrap .search-bar-modern .search-col > div { width: 100%; max-width: 100%; height: 80px; font-size: 32px; border: 4px solid #e22784; border-radius: 10px; padding: 0 15px 0 60px; margin: 0; box-sizing: border-box; }
    body #wrapper #inner-wrap .search-bar-modern .agency-col { flex: 0 0 35%; width: 35%; max-width: 35%; margin: 0; padding: 0; }
    body #wrapper #inner-wrap .search-bar-modern .agency-col select.index-combo { width: 100%; height: 80px; font-size: 32px; border: 4px solid #e22784; border-radius: 10px; background-color: #e22784; color: #fff; font-weight: bold; margin: 0; padding: 0 40px 0 10px; -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20fill%3D%22%23ffffff%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 35px 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

} /* FIN BLOQUE 768px */

/* =========================================================
   REGLAS ESPECÍFICAS PARA TABLETS
========================================================= */
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px), (device-width: 768px) {
    #wrapper #inner-wrap .contents-small { text-align: center; overflow: hidden; margin: 0 auto; float: none; }
    #wrapper #inner-wrap .contents-small img, .video-item { float: none; }
}

/* =========================================================
   REGLAS ESPECÍFICAS PARA TELÉFONOS MUY PEQUEÑOS (ANTIGUOS)
========================================================= */
@media only screen and (min-width: 240px) and (max-width: 480px), (min-device-width: 240px) and (max-device-width: 480px) {
    .mr { float: left; }
    #wrapper #main-menu ul li a { font-size: 75px; line-height: 90px; letter-spacing: 1px; }
    .clearfix { float: left; clear: both; width: 100%; overflow: hidden; }
    .modal .plyr--video { flex: 1 1 100%; }
	
    /* --- CENTRADO MATEMÁTICO DEL TÍTULO EN PÁGINAS INTERNAS --- */
    body:has(.gotoselected) #wrapper #header .contents,
    body:has(.details) #wrapper #header .contents {
        justify-content: center;
        position: relative;
    }

    /* Hamburguesa levitante */
    body:has(.gotoselected) .hamburger,
    body:has(.details) .hamburger {
        position: absolute;
        left: 20px;
        margin: 0;
        z-index: 1000;
    }	
}