/* ============================================================
   HOME PT-BR — reglas nuevas sobre style.css (v14)
   Copia suelta de lo que va embebido en index_pt.html.
   Solo contiene los bloques que no existen en la home ES.
   ============================================================ */

/* ---- 1. Banner "Abra os olhos" (reemplaza a .block-flc) ---- */

.block-diagnostico {
    background-image: url('../img/block-pt-01.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    /* el .ai da 1102/1920 = 57.4% del ancho. Con 90vh solo el alto
       dependia de la ventana y el fondo se recortaba de mas. */
    /* width:100% es necesario: sin el, con min-height Chrome resuelve la
       aspect-ratio al reves y calcula el ANCHO a partir del alto
       (a 768px daba una seccion de 1098px y scroll horizontal). */
    width: 100%;
    aspect-ratio: 1920 / 1102;
    min-height: 380px;
    max-height: 1100px;
    padding-bottom: 8.8%;   /* 169/1920: deja el CTA donde lo pone el .ai */
}

/* El bloque escala con el ancho, asi que el texto tambien: con px fijos
   la proporcion solo coincidia al ancho del diseño (1185px) y en pantallas
   mas chicas el titulo se veia grande y el CTA pegado.
   Cada vw sale del .ai: medida_artboard / 1920. */

.block-diagnostico h3 {
    font-family: "Saira Semi Condensed", sans-serif;
    color: #fff;
    font-weight: 600;
    font-size: clamp(44px, 7.72vw, 148px);   /* .ai 148.2 */
    line-height: 0.9;
    margin: 0 0 1.2vw;
}

.block-diagnostico h6 {
    font-family: "Saira Semi Condensed", sans-serif;
    color: #fff;
    font-weight: 600;
    font-size: clamp(14px, 1.52vw, 29px);    /* .ai 29.2 */
    letter-spacing: clamp(4px, 0.39vw, 7.5px);
    text-transform: uppercase;
    margin: 0;
}

/* CTA del banner: el .ai lo separa 110/1920 del subtitulo (el compartido
   usa 15px fijos y quedaba pegado) */
.block-diagnostico .hero-slide-btn {
    /* el .ai lo da mas grande (1.25vw / 3.62vw) pero quedaba desparejo
       contra los CTA del hero, que son fijos en 14px */
    font-size: clamp(12px, 1vw, 17px);
    padding: clamp(8px, 0.5vw, 10px) clamp(26px, 2.85vw, 38px);
    margin-top: clamp(24px, 5.73vw, 110px);
}

/* ---- CTA celeste del .ai. Clase propia .pt-cta: no toca .hero-slide-btn,
       que es compartido con la home ES. El :hover lo sigue heredando. ---- */

.pt-cta {
    background-color: #00c2fc;
    border-color: #00c2fc;
}

/* ---- 2. Módulo "Um legado conectado" (usa .extra-mod-flc) ---- */

/* el .ai reparte los 3 elementos a lo ancho de la tarjeta:
   texto 3.8%-33.3% | notebook 36.2%-76.8% | CTA 80.3%-92.8%
   El compartido usa justify-content:center + margenes auto y empujaba
   todo ~15% a la derecha. */
/* el .ai da la tarjeta al 87.5% del ancho; .col-10 la dejaba en 83.3% */
.extra-mod-legado .col-10 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
}

/* El notebook del .ai se superpone al texto y al CTA (arranca en 30.2%
   cuando el texto termina en 33.3%), cosa que flex no puede hacer: los
   ítems sumaban más que la caja y empujaban el CTA fuera del padding.
   Va absoluto y proporcional, y la tarjeta toma el alto del .ai. */
.extra-mod-legado .back-ext-mod {
    position: relative;
    width: 100%;
    aspect-ratio: 1680 / 427;
    justify-content: space-between;
    padding-left: 3.8%;
    padding-right: 7.2%;
}

.extra-mod-legado .back-ext-mod .content-txts-int {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    flex: 0 0 29.5%;
    max-width: 29.5%;
    margin: 0;
}

.extra-mod-legado .back-ext-mod .content-txts-int h4 {
    color: #fff;
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 500;
    line-height: 1.2;
    font-size: 30px;
    max-width: 100%;
    margin: 0 0 12px;
}

.extra-mod-legado .back-ext-mod .content-txts-int p {
    color: #fff;
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 400;
    line-height: 1.15;
    font-size: 22px;
    margin: 0;
}

/* el notebook: 543px es lo que mide en el .ai (el compartido pone 600).
   Los -10px laterales del compartido descuadraban el space-between. */
.extra-mod-legado .back-ext-mod img {
    position: absolute;
    left: 30.2%;      /* centro en 56.5% del ancho de la tarjeta */
    width: 52.26%;
    top: -11.2%;      /* sobresale por arriba como en el .ai */
    max-width: none;
    margin: 0;
}

/* ---- 3. Bloque "EVOLUTION: O cuidado intensivo" (usa .block-hospi-txts) ---- */

.block-evolution h6 {
    color: #000d59;
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 6px;
}

.block-evolution h3 {
    color: #000d59;
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 400;
    font-size: 55px;
    line-height: 1;
    margin: 0 auto 20px;
}

.block-evolution p {
    margin-bottom: 50px;
}

/* ---- 4. Desborde horizontal de los modulos TORI / EVOLUTION ----
   El compartido le pone max-width:600px a la imagen, y como los items
   flex tienen min-width:auto la imagen no puede achicarse: entre ~768px
   y el breakpoint movil la suma (texto 27% + imagen 600px) supera la
   tarjeta y se va de pantalla. La home ES tiene el mismo problema; esto
   lo corrige SOLO en PT via .pt-mod. */

.pt-mod .back-ext-mod {
    max-width: 100%;
}

.pt-mod .back-ext-mod img,
.pt-mod .back-ext-mod .content-txts-int {
    min-width: 0;
}

/* En ese mismo rango el texto queda en 27% del compartido: entra en 5-6
   lineas y se sale por abajo de la tarjeta. Le doy aire hasta que el
   ancho alcanza para el layout de diseño. */
@media (min-width: 768px) and (max-width: 1100px) {

    .pt-mod .back-ext-mod .content-txts-int {
        max-width: 42%;
    }

    .pt-mod .back-ext-mod h4 {
        font-size: 23px;
    }

    .pt-mod .back-ext-mod img {
        margin-top: -25px;
        margin-bottom: -12px;
    }

    /* Mismo rango: los h3 quedan en 85px con max-width 65% y las palabras
       largas se parten al medio ("recuperaç / ão"). Pasa igual en la home
       ES; aca se corrige solo para PT. */
    .block-tori.pt-mod h3,
    .block-hospi.pt-mod h3 {
        font-size: 58px;
        max-width: 92%;
    }

    .block-tori.pt-mod p,
    .block-hospi.pt-mod p {
        max-width: 80%;
    }
}

/* El .ai arma estos dos titulos en 2 lineas. Con el max-width:65% del
   compartido las palabras portuguesas no entran y quedaban en 3 lineas
   (y abajo de 1100px se partian al medio). Los valores salen de medir la
   linea mas larga a 85px: "recuperação precoce" 714px y "segundo conta" 511px, mas el gutter de
   Bootstrap que come ~3%. El tope de tori queda debajo del limite que a
   1920 juntaria todo en una sola linea. */
.block-hospi.pt-mod h3 {
    max-width: 97%;
}

.block-tori.pt-mod h3 {
    max-width: 69%;
}

/* ---- 5. Sin subrayado en los CTA ----
   Ni style.css ni Bootstrap agregan subrayado en :hover, pero el sitio donde
   se embebe (hillrom.lat) tiene estilos globales de enlace que si lo hacen.
   Como no se sabe que especificidad usa el host, va con !important.
   Este archivo lo carga solo index_pt.html, asi que no toca la home ES. */

.hero-slide-btn,
.hero-slide-btn:hover,
.hero-slide-btn:focus,
.explora-home .anclas-btns a,
.explora-home .anclas-btns a:hover,
.explora-home .anclas-btns a:focus,
.content-icons .icon a,
.content-icons .icon a:hover,
.content-icons .icon a:focus,
.extra-mod-flc .back-ext-mod a,
.extra-mod-flc .back-ext-mod a:hover,
.extra-mod-flc .back-ext-mod a:focus,
.extra-mod-cirugia .back-ext-mod a,
.extra-mod-cirugia .back-ext-mod a:hover,
.extra-mod-cirugia .back-ext-mod a:focus {
    text-decoration: none !important;
}

/* ---- 6. Responsive ---- */

@media (max-width:767px) {

    .block-diagnostico {
        aspect-ratio: auto;
        max-height: none;
        /* la foto es apaisada: con alto de contenido quedaba una franja
           finita y no se veian los otoscopios */
        min-height: 60vh;
        align-items: center;
        padding: 80px 0px;
    }

    /* el compartido sube la imagen con margin-top:-30px y en columna
       se montaba sobre el parrafo */
    .extra-mod-legado .back-ext-mod {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .extra-mod-legado .col-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .extra-mod-legado .back-ext-mod {
        position: static;
        aspect-ratio: auto;
    }

    .extra-mod-legado .back-ext-mod img {
        position: static;
        width: auto;
        max-width: 100%;
        margin: 0 0 -10px;
    }

    /* en movil el parrafo se acomoda solo */
    .extra-mod-legado p br {
        display: none;
    }

    .block-diagnostico h3 {
        font-size: 47px;
    }

    .block-diagnostico h6 {
        font-size: 14px;
        letter-spacing: 3px;
    }

    .extra-mod-legado .back-ext-mod .content-txts-int {
        flex: 0 0 auto;
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding: 30px 20px 35px;
    }

    .extra-mod-legado .back-ext-mod .content-txts-int h4 {
        font-size: 23px;
    }

    .extra-mod-legado .back-ext-mod .content-txts-int p {
        font-size: 18px;
    }

    .block-evolution h6 {
        font-size: 18px;
    }

    .block-evolution h3 {
        font-size: 33px;
    }

}