@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --blanco: #fcfcfc;
    --negro: rgb(63, 63, 62);
    --gris: #757575;
    --grisOscuro: rgb(63, 63, 62);
    --rojo: rgb(199, 19, 49);
    --rojoIconos: rgb(194, 19, 48);
    --rojoIconosClaro: rgb(219, 5, 40);
}

body {
    font-family: 'Montserrat', sans-serif;
}

/* ── BIENVENIDA ─────────────────────────────────────────────────── */

.BienvenidaSA {
    display: flex;
    background-color: #f5f5f5;
    padding: 3rem 0;
}

.BienvenidaSA div {
    flex-basis: 50%;
    align-self: center;
    justify-self: center;
}

@media (min-width: 721px) {
    .BienvenidaSA { flex-direction: row; }
    .TituloSA { display: flex; justify-content: center; align-items: center; }
    .MensajePrincipalSA { max-width: 50rem; margin: 0 2rem; }
    .mensajePrincipalSA__centrar { margin: 0 2rem; }
    .SeparacionPlantas { margin-top: 4rem; }
}

@media (max-width: 720px) {
    .BienvenidaSA { flex-direction: column; }
    .TituloSA { display: inline-flex; justify-content: start; align-items: center; margin-left: 3rem; margin-bottom: 5rem; }
    .mensajePrincipalSA__centrar p { margin-bottom: 3rem; }
    .mensajePrincipalSA__centrar { margin: 0 3rem; }
}

.tituloSA__centrar { font-size: 1.3em; line-height: 1.3; color:var(--grisOscuro)}
.mensajePrincipalSA__centrar { font-size: 1.9rem; text-align: justify; }

/* ── SEPARACIÓN PLANTAS ─────────────────────────────────────────── */

.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}

/* PTAR */
/* PTAR */

@media (min-width: 1140px) {
    .PTARcelular {
        display: none;
    }

    .PTAR {
        display: block;
    }
}

@media (max-width: 1139px) {
    .PTARcelular {
        display: block;
    }

    .PTAR {
        display: none;
    }
}

.PTAR__titulo {
    min-height: 15rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
    position: relative;
}

.PTAR__titulo p {
    font-weight: 700;
    font-size: 2em;
    color: var(--grisOscuro);
    position: absolute;
    top: 5rem;
    left: 8rem;
    background-color: white;
    border-radius: 4rem;
    padding: 0 1rem;
}

@media (min-width: 535px) {
    .PTARcelular__titulo {
        margin-bottom: 6rem;
    }
}


@media (max-width: 534px) {
    .PTARcelular__titulo {
        margin-bottom: 12rem;
        text-align: center;
    }
}

.PTARcelular__titulo {
    min-height: 8rem;
    margin-top: -5rem;
    position: relative;
}


.PTARcelular__titulo p {
    font-weight: 700;
    font-size: 2em;
    color: var(--grisOscuro);
    position: absolute;
    top: 5rem;
    background-color: white;
    border-radius: 4rem;
    padding: 0 1rem;
}

@media (min-width: 920px) {
    .PTARcelular__titulo p {
        left: 4rem;
    }
}

/* @media (max-width: 920px) {
    .PTARcelular__titulo p {}
} */


/* TARJETAS */

.PTAR__tarjetas {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(2, 50%);
    margin: 0 4rem;
    column-gap: 1rem;
    row-gap: 2rem;
}

.tarjetas__izquierda,
.tarjetas__derecha {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    height: 38rem;
    overflow: hidden;
    position: relative;
}

.informacion__izquierda {
    /* border: .1rem  solid red; */
    position: absolute;
    width: 45%;
    min-height: 50%;
    background-color: white !important;
    padding: 1.5rem;
    border-radius: 2rem;
    top: 22%;
    left: 35%;
}

.informacion__derecha {
    /* border: .1rem  solid red; */
    position: absolute;
    width: 45%;
    min-height: 50%;
    background-color: white !important;
    padding: 1.5rem;
    border-radius: 2rem;
    top: 22%;
    left: 25%;
}

.informacion__titulo {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--grisOscuro);
    text-transform: uppercase;

}

.informacion__texto {
    color: var(--gris);
    font-size: 1.27rem;
    margin-top: 1rem;
}

.tarjetas__izquierda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.tarjetas__2 img {
    object-position: 40% 0;
}

.tarjetas__derecha img {
    grid-column: 2/3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.tarjetas__3 img {
    object-position: 38% 10%;
}

.tarjetas__4 img {
    object-position: 18% 10%;
}


/*       TARJETAS__CELULAR      */

.PTARcelular__tarjetas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* border: red solid .1rem; */
    margin: auto;
}

@media (min-width: 1090px) {
    .PTARcelular__tarjeta {
        height: 60rem;
    }
}

@media (min-width: 980px) and (max-width:1089px) {
    .PTARcelular__tarjeta {
        height: 59rem;
    }
}

@media (min-width: 940px) and (max-width:979px) {
    .PTARcelular__tarjeta {
        height: 55rem;
    }
}

@media (min-width: 850px) and (max-width:939px) {
    .PTARcelular__tarjeta {
        height: 50rem;
    }
}

@media (min-width: 809px) and (max-width:849px) {
    .PTARcelular__tarjeta {
        height: 40rem;
    }
}

@media (min-width: 650px) and (max-width:808px) {
    .PTARcelular__tarjeta {
        height: 38rem;
    }
}

@media (min-width: 600px) and (max-width: 649px) {
    .PTARcelular__tarjeta {
        height: 35rem;
    }
}

@media (min-width: 430px) and (max-width: 599px) {
    .PTARcelular__tarjeta {
        height: 30rem;
    }
}


@media (min-width: 320px) and (max-width: 429px) {
    .PTARcelular__tarjeta {
        height: 34rem;
    }
}

@media (min-width: 360px) {
    .PTARcelular__tarjeta {
        grid-template-columns: 60% 40%;
    }
}

.PTARcelular__tarjeta {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
}

.PTARcelular__tarjeta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

@media (min-width: 650px) {
    .informacionCelular {
        width: 65%;
        min-height: 50%;
        top: 22%;
        left: 35%;
    }
}

@media (min-width: 550px) and (max-width: 649px) {
    .informacionCelular {
        width: 65%;
        min-height: 30%;
        top: 17%;
        left: 35%;
    }
}

@media (min-width: 500px) and (max-width: 549px) {
    .informacionCelular {
        width: 65%;
        min-height: 30%;
        top: 7%;
        left: 35%;
    }
}

@media (min-width: 400px) and (max-width: 499px) {
    .informacionCelular {
        width: 70%;
        min-height: 30%;
        top: 10%;
        left: 30%;
    }
}

@media (min-width: 360px) and (max-width: 399px) {
    .informacionCelular {
        width: 70%;
        min-height: 30%;
        top: 6%;
        left: 30%;
    }
}

@media (max-width: 359px) {
    .informacionCelular {
        width: 86%;
        min-height: 30%;
        top: 7%;
        left: 7%;
    }
}

.informacionCelular {
    position: absolute;
    background-color: white !important;
    border-radius: 2rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.informacionCelular__titulo {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--grisOscuro);
}


@media (min-width: 320px) and (max-width: 428px) {
    .informacionCelular__titulo {
        font-size: 1.1em;
    }
}

@media (max-width: 429px) {
    .informacionCelular__titulo {
        font-size: 1.2em;
    }
}

@media (min-width: 500px) {
    .informacionCelular__titulo {
        font-size: 1.5em;
    }
}

/* ANIMACIÓN TEXTO */

/* Estado INICIAL (requerido para la animación) */
.focus-in-contract-bck {
    opacity: 1;
    display: inline-block;
    /* Necesario para letter-spacing en elementos inline */
}

/* Estado ACTIVO (aquí va la animación) */
.focus-in-contract-bck-active {
    -webkit-animation: focus-in-contract-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Keyframes (igual que los tuyos) */
@-webkit-keyframes focus-in-contract-bck {
    0% {
        letter-spacing: 2em;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(12px);
        transform: translateZ(12px);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes focus-in-contract-bck {
    0% {
        letter-spacing: 2em;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(12px);
        transform: translateZ(12px);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}


/* ANIMACIÓN TEXTO DESDE ENMEDIO */

.focus-in-expand-fwd {
    opacity: 1;
    display: inline-block;
    will-change: transform, filter, opacity;
}

.focus-in-expand-fwd-active {
    -webkit-animation: focus-in-expand-fwd 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
    animation: focus-in-expand-fwd 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@-webkit-keyframes focus-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-800px);
        transform: translateZ(-800px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes focus-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-800px);
        opacity: 0;
    }

    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}


/* Estado INICIAL - obligatorio */
.focus-in-contract {
    opacity: 1;
    display: inline-block;
    /* Necesario para letter-spacing */
    will-change: opacity, letter-spacing;
    /* Optimización */
}

/* Estado ACTIVO - contiene la animación */
.focus-in-contract-active {
    letter-spacing: 1em;
    animation: focus-in-contract 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

/* Keyframes (mejorados) */
@keyframes focus-in-contract {
    to {
        letter-spacing: normal;
        opacity: 1;
    }
}



.informacionCelular__texto {
    color: var(--gris);
    margin-top: 1rem;
}

.PTARcelular__boton {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;

}

.PTARcelular__prevBtn,
.PTARcelular__nextBtn {
    display: flex;
    justify-self: center;
    align-self: center;
}

@media (min-width: 809px) {
    .PTARcelular__boton svg {
        min-width: 7rem;
    }

    .informacionCelular__texto {
        font-size: 1.3em;
    }
}

@media (min-width: 750px) and (max-width:808px) {
    .PTARcelular__boton svg {
        min-width: 6rem;
    }

    .informacionCelular__texto {
        font-size: 1.1em;
    }
}

@media (min-width: 320px) and (max-width:749px) {
    .informacionCelular__texto {
        font-size: 1em;
    }
}

@media (min-width: 430px) and (max-width:749px) {
    .PTARcelular__boton svg {
        min-width: 5rem;
    }
}

@media (min-width: 320px) and (max-width: 429px) {
    .PTARcelular__boton svg {
        min-width: 4rem;
    }
}

@media (min-width: 600px) {
    .PTARcelular__prevBtn {
        padding: 10rem 2rem;
    }

    .PTARcelular__nextBtn {
        padding: 8rem 2rem;
    }
}

@media (min-width: 499px) and (max-width: 599px) {
    .PTARcelular__prevBtn {
        padding: 10rem .5rem;
    }

    .PTARcelular__nextBtn {
        padding: 8rem .5rem;
    }
}

@media (min-width: 320px) and (max-width: 429px) {

    .PTARcelular__prevBtn,
    .PTARcelular__nextBtn {
        padding: 10rem .5rem;
    }
}

.PTARcelular__boton:hover {
    cursor: pointer;
}

.PTARcelular__boton:hover .PTARcelular__svg {
    fill: var(--rojoIconosClaro);
}

.PTARcelular__boton svg {
    fill: var(--rojoIconos);
}

/* .tarjetasCelular__1 img {} */

.tarjetasCelular__2 img {
    object-position: 40% 0;
}

.tarjetasCelular__3 img {
    object-position: 38% 10%;
}

.tarjetasCelular__4 img {
    object-position: 18% 10%;
}


.tarjeta a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.tarjeta a:hover {
    scale: 1.05;
}

.tarjeta {
    min-width: 28rem;   /* antes: 22rem */
    max-width: 30rem;   /* antes: 24rem */
    padding: 2.2rem 2rem 1.8rem;
}

.tarjeta a img {
    width: 20rem;
    height: 20rem;
    /************************************************* quitar al poner imagenes cuadradas*/
    border-radius: 50%;
}

.tarjeta a .titulo {
    color: var(--negro);
    font-size: 2.3rem;
}

.tarjeta a .descripcion {
    color: var(--negro);
    font-size: 1.3rem;
    text-align: center;
}

.panelTablet {
    display: none;
}

@media (min-width: 501px) and (max-width: 900px) {
    .panelTablet {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 2rem;
        column-gap: 2rem;
    }

    .panelIRS,
    .panelGestionSostenibleA,
    .panelGestionAreasV,
    .panelDisminucionGasesEI,
    .panelConsumoResponsable {
        cursor: pointer;
    }

    .panelIRS:hover .panelISR__titulo,
    .panelGestionSostenibleA:hover .panelGestionSostenibleA__titulo,
    .panelGestionAreasV:hover .panelGestionAreasV__titulo,
    .panelDisminucionGasesEI:hover .panelDisminucionGasesEI__titulo,
    .panelConsumoResponsable:hover .panelConsumoResponsable__titulo {
        color: var(--rojoIconosClaro);
    }
}

.tarjetaT {
    background-color: rgb(255, 255, 255);
    padding: 1.5rem;
    text-align: center;
    border-radius: 1.5rem;
    box-shadow: 0px 0.9rem 1.4rem rgba(0, 0, 0, 0.30), 0px 0.5rem 1.2rem rgba(0, 0, 0, 0.22);
    /* margin-right: 3rem; */
    max-height: 100%;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    /* max-width: 44rem; */

    /* margin: auto 1rem; */
    margin-bottom: 3rem;
    /* min-height: 55rem; */
    display: flex;
}

.tarjetaT a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.tarjetaT:hover {
    scale: 1.05;
}

.tarjetaT a img {
    width: 18rem;
    border-radius: 50%;
}

.tarjetaT a .titulo {
    color: var(--negro);
    font-size: 1.4em;
    margin: 2rem auto;
}

.tarjetaT a .descripcion {
    color: var(--negro);
    font-size: 1em;
    text-align: center;
}

.ocultarPanelTablet {
    opacity: 0;
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, height 0.5s ease;
}

.mostrarPanelTablet {
    opacity: 1;
    transform: scaleY(1);
    height: auto;
    transition: opacity 0.5s ease, transform 0.5s ease, height 0.5s ease;
}

/* ═══════════════════════════════════════════════════════
   PTAR — Barra de navegación inferior (flechas + dots)
   Pegar al final del CSS principal.
═══════════════════════════════════════════════════════ */
 
/* Ocultar los botones en su posición original dentro del flex
   (el JS los mueve al navBar, pero por si acaso) */
.PTARcelular__tarjetas .PTARcelular__prevBtn,
.PTARcelular__tarjetas .PTARcelular__nextBtn {
    display: none !important;
}
 
/* ── Barra inferior ── */
.ptar-nav-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.2rem;
    margin-top:      1.5rem;
    margin-bottom:   1rem;
    padding:         0 1rem;
}
 
/* ── Dots ── */
.ptar-dots {
    display:     flex;
    gap:         0.6rem;
    align-items: center;
}
 
.ptar-dot {
    width:         0.75rem;
    height:        0.75rem;
    border-radius: 50%;
    background:    #d6d0d0;
    border:        0.12rem solid transparent;
    cursor:        pointer;
    transition:    background 0.2s ease, transform 0.2s ease;
    flex-shrink:   0;
}
 
.ptar-dot.activo {
    background:  var(--rojo, rgb(199, 19, 49));
    transform:   scale(1.2);
    border-color: var(--rojo, rgb(199, 19, 49));
}
 
.ptar-dot:hover:not(.activo) {
    background: #bbb;
}
 
/* ── Botones en el navBar — heredan .btn-nav-ptar ── */
.ptar-nav-bar .btn-nav-ptar {
    /* Asegurar que no lleven padding heredado */
    padding: 0 !important;
    /* Tamaño estándar del proyecto */
    width:   2.8rem !important;
    height:  2.8rem !important;
}

.PTARcelular__tarjetas {
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* ── NORMATIVAS CELULAR ─────────────────────────────────────────── */

/* Solo visible en versión responsiva */
@media (min-width: 1140px) {
    .normativasCelular { display: none; }
}

@media (max-width: 1139px) {
    .normativasCelular {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin: 1.5rem 1.5rem 0 1.5rem;
        margin-bottom: 3rem;
    }
}



/* ── NORMATIVAS ─────────────────────────────────────────────────── */

.normativas__lista {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: center;
    height: 100%;
    padding-left: 35%;
}

.normativas__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background-color: #fff;
    border: 0.15rem solid #e0e0e0;
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    box-shadow: 0.1rem 0.1rem 0.8rem rgba(0,0,0,0.07);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.normativas__item:hover {
    box-shadow: 0.1rem 0.1rem 0.8rem rgba(0,0,0,0.07);
    border-color: var(--rojoIconos);
    border-width: 0.2rem;
    transform: translateY(-2px);
}

.normativas__icono {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border: 0.2rem solid var(--rojoIconos);
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rojoIconos);
    padding: 0.6rem;
}

.normativas__icono svg {
    width: 100%;
    height: 100%;
}

.normativas__texto {
    font-size: 0.9em;
    color: var(--gris);
    line-height: 1.5;
    margin: 0;
}

/* ── PTARcelular ────────────────────────────────────────────────── */

@media (min-width: 535px) { .PTARcelular__titulo { margin-bottom: 6rem; } }
@media (max-width: 534px) { .PTARcelular__titulo { margin-bottom: 12rem; text-align: center; } }

.PTARcelular__titulo {
    min-height: 8rem;
    margin-top: -5rem;
    position: relative;
}

.PTARcelular__titulo p {
    font-weight: 700;
    font-size: 2em;
    color: var(--grisOscuro);
    position: absolute;
    top: 5rem;
    background-color: white;
    border-radius: 4rem;
    padding: 0 1rem;
}

@media (min-width: 920px) { .PTARcelular__titulo p { left: 4rem; } }

.PTARcelular__tarjetas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: auto;
}

@media (min-width: 1090px)                        { .PTARcelular__tarjeta { min-height: 60rem; } }
@media (min-width: 980px) and (max-width: 1089px) { .PTARcelular__tarjeta { min-height: 59rem; } }
@media (min-width: 940px) and (max-width: 979px)  { .PTARcelular__tarjeta { min-height: 55rem; } }
@media (min-width: 850px) and (max-width: 939px)  { .PTARcelular__tarjeta { min-height: 50rem; } }
@media (min-width: 809px) and (max-width: 849px)  { .PTARcelular__tarjeta { min-height: 40rem; } }
@media (min-width: 650px) and (max-width: 808px)  { .PTARcelular__tarjeta { min-height: 38rem; } }
@media (min-width: 600px) and (max-width: 649px)  { .PTARcelular__tarjeta { min-height: 35rem; } }
@media (min-width: 430px) and (max-width: 599px)  { .PTARcelular__tarjeta { min-height: 30rem; } }
@media (min-width: 320px) and (max-width: 429px)  { .PTARcelular__tarjeta { min-height: 34rem; } }
@media (min-width: 360px) { .PTARcelular__tarjeta { grid-template-columns: 60% 40%; } }

.PTARcelular__tarjeta {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
}

.PTARcelular__tarjeta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

@media (min-width: 650px)                        { .informacionCelular { width: 65%; min-height: 50%; top: 22%; left: 35%; } }
@media (min-width: 550px) and (max-width: 649px) { .informacionCelular { width: 65%; min-height: 30%; top: 17%; left: 35%; } }
@media (min-width: 500px) and (max-width: 549px) { .informacionCelular { width: 65%; min-height: 30%; top: 7%;  left: 35%; } }
@media (min-width: 400px) and (max-width: 499px) { .informacionCelular { width: 70%; min-height: 30%; top: 10%; left: 30%; } }
@media (min-width: 360px) and (max-width: 399px) { .informacionCelular { width: 70%; min-height: 30%; top: 6%;  left: 30%; } }
@media (max-width: 359px)                        { .informacionCelular { width: 86%; min-height: 30%; top: 7%;  left: 7%;  } }

.informacionCelular {
    position: absolute;
    background-color: white !important;
    border-radius: 2rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.informacionCelular__titulo {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--grisOscuro);
}

@media (min-width: 320px) and (max-width: 428px) { .informacionCelular__titulo { font-size: 1.1em; } }
@media (max-width: 429px)                        { .informacionCelular__titulo { font-size: 1.2em; } }
@media (min-width: 500px)                        { .informacionCelular__titulo { font-size: 1.5em; } }

.informacionCelular__texto { color: var(--gris); margin-top: 1rem; }

@media (min-width: 809px)                        { .PTARcelular__boton svg { min-width: 7rem; } .informacionCelular__texto { font-size: 1.3em; } }
@media (min-width: 750px) and (max-width: 808px) { .PTARcelular__boton svg { min-width: 6rem; } .informacionCelular__texto { font-size: 1.1em; } }
@media (min-width: 320px) and (max-width: 749px) { .informacionCelular__texto { font-size: 1em; } }
@media (min-width: 430px) and (max-width: 749px) { .PTARcelular__boton svg { min-width: 5rem; } }

@media (max-width: 429px) {
    .informacionCelular__titulo {
        font-size: 1em;      /* antes 1.2em */
    }

    .informacionCelular__texto {
        font-size: 0.82em;   /* reduce según necesites */
        line-height: 1.4;
        margin-top: 0.5rem;
    }
}

@media (min-width: 430px) and (max-width: 749px) {
    .informacionCelular__titulo {
        font-size: 1.1em;    /* antes 1.5em en 500px+ */
    }

    .informacionCelular__texto {
        font-size: 0.88em;
        line-height: 1.45;
    }
}

@media (max-width: 700px) {
    .PTAR__tarjetas { grid-template-columns: 1fr; }
    .tarjetas__1 { grid-column: 1; grid-row: 1; }
    .tarjetas__2 { grid-column: 1; grid-row: 2; }
    .tarjetas__cumplir { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
}

@media (min-width: 320px) and (max-width: 429px) { .PTARcelular__boton svg { min-width: 4rem; } }

@media (min-width: 600px) { .PTARcelular__prevBtn { padding: 10rem 2rem; } .PTARcelular__nextBtn { padding: 8rem 2rem; } }
@media (min-width: 499px) and (max-width: 599px) { .PTARcelular__prevBtn { padding: 10rem .5rem; } .PTARcelular__nextBtn { padding: 8rem .5rem; } }
@media (min-width: 320px) and (max-width: 429px) { .PTARcelular__prevBtn, .PTARcelular__nextBtn { padding: 10rem .5rem; } }

.PTARcelular__boton { display: flex; align-items: center; align-self: center; justify-content: center; }
.PTARcelular__prevBtn, .PTARcelular__nextBtn { display: flex; justify-self: center; align-self: center; }
.PTARcelular__boton:hover { cursor: pointer; }
.PTARcelular__boton:hover .PTARcelular__svg { fill: var(--rojoIconosClaro); }
.PTARcelular__boton svg { fill: var(--rojoIconos); }

.tarjetasCelular__2 img { object-position: 40% 0; }
.tarjetasCelular__3 img { object-position: 38% 10%; }

/* ── ANIMACIÓN TEXTO ────────────────────────────────────────────── */

.focus-in-contract {
    opacity: 1;
    display: inline-block;
    will-change: opacity, letter-spacing;
}

.focus-in-contract-active {
    letter-spacing: 1em;
    animation: focus-in-contract 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@keyframes focus-in-contract {
    to { letter-spacing: normal; opacity: 1; }
}

.oculto { opacity: 0; pointer-events: none; }

/* ── CUMPLIR + NORMATIVAS en escritorio ── */
.tarjetas__cumplir {
    grid-column: 1 / -1;   /* ocupa todo el ancho del grid padre */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

/* La tarjeta CUMPLIR ocupa la columna izquierda */
.tarjetas__cumplir .tarjetas__derecha {
    height: 38rem;
}

/* Las normativas ocupan la columna derecha */
.tarjetas__cumplir .normativas__lista {
    padding-left: 0;      /* quita el padding-left: 35% que tenía */
    height: 100%;
    justify-content: center;
}

/* ── ETAPAS ─────────────────────────────────────────────────────── */

.etapas {
    margin: 4rem 4rem 2rem 4rem;
}

.etapas__item {
    display: grid;
    grid-template-columns: 12rem 1fr 20rem;
    gap: 2rem;
    align-items: start;
    min-height: 16rem;
    margin-bottom: 2rem;
}

.etapas__marcador {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.2rem;
}

.etapas__label {
    font-weight: 700;
    font-size: 1em;
    color: var(--grisOscuro);
    margin: 0 0 0.4rem 0;
}

.etapas__linea {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.etapas__circulo {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: white;
    border: 0.2rem solid var(--rojoIconos);
    flex-shrink: 0;
}

.etapas__trazo {
    height: 0.15rem;
    flex-grow: 1;
    background-color: var(--rojoIconos);
    margin-right: 0.3rem;
}

.etapas__texto {
    font-size: 0.95em;
    color: var(--grisOscuro);
    line-height: 1.7;
    text-align: justify;
    margin: 0;
    padding-top: 0.1rem;
}

.etapas__imagen {
    width: 100%;
    height: 14rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #d8d8d8;
}

.etapas__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
}

.etapas__imagen img[src=""],
.etapas__imagen img:not([src]) { display: none; }

@media (max-width: 900px) {
    .etapas { margin: 3rem 2rem; }
    .etapas__item { grid-template-columns: 10rem 1fr; grid-template-rows: auto auto; }
    .etapas__imagen { grid-column: 2 / 3; height: 12rem; margin-top: 1rem; }
}

@media (max-width: 580px) {
    .etapas__item { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .etapas__marcador { flex-direction: row; align-items: center; gap: 1rem; }
    .etapas__linea { flex-direction: row; width: auto; height: 1.5rem; }
    .etapas__trazo { min-height: unset; height: 0.15rem; min-width: 3rem; margin-top: 0; margin-left: 0.3rem; }
    .etapas__imagen { grid-column: 1; height: 12rem; }
}

/* ═══════════════════════════════════════════════════════
   ORGANIGRAMA — Separacción
   Estilo visual de la versión antigua aplicado al HTML
   con SVG funcional. Reemplaza el bloque org-section
   anterior en el CSS principal.
═══════════════════════════════════════════════════════ */
 
/* ── Sección contenedor ── */
.org-section {
    margin:     4rem 6rem;
    padding:    0;
    box-sizing: border-box;
    display:    flex;
    flex-direction: column;
    align-items: center;
}
 
/* ── SVG escritorio ── */
.org-svg {
    width:    100%;
    height:   auto;
    display:  block;
    overflow: visible;
}
 
/* ── Cajas superiores — estilo de .organigrama__tarjeta ── */
.org-box {
    fill:         #ffffff;
    stroke:       #d0d0d0;
    stroke-width: 0.15rem; /* ~2.4px en SVG; usar valor px equivalente */
}
 
/* En SVG stroke-width en rem no funciona bien — usamos px */
.org-box {
    fill:         #ffffff;
    stroke:       #d0d0d0;
    stroke-width: 2px;
    filter: drop-shadow(0 0.2rem 0.8rem rgba(0,0,0,0.06));
}
 
/* ── Tarjeta central con borde rojo ── */
.org-box--central {
    stroke:       #d0d0d0; /* borde gris claro */
    stroke-width: 2px;
    filter: drop-shadow(0 0.2rem 0.8rem rgba(0,0,0,0.06));
}
 
/* ── Texto rol/categoría dentro del SVG ── */
.org-role {
    font-family: 'Montserrat', sans-serif;
    font-size:   11px;         /* ~0.8em del base 14px */
    fill:        var(--gris, #757575);
}
 
/* ── Texto título dentro del SVG ── */
.org-name {
    font-family: 'Montserrat', sans-serif;
    font-size:   13px;         /* ~1em */
    font-weight: 700;
    fill:        var(--grisOscuro, rgb(63, 63, 62));
}
 
/* ── Flechas ── */
.org-arrow {
    fill:         none;
    stroke:       var(--rojoIconos, rgb(194, 19, 48));
    stroke-width: 1.5px;
}
 
/* ── Contenedor del logo (foreignObject) ── */
.org-logo-wrap {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
 
.org-logo-img {
    max-width:  180px;   /* ~18rem — igual que .organigrama__central img */
    max-height: 90px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
}
 
/* ── Visibilidad por breakpoint ── */
.org-desktop { display: block; }
.org-mobile  { display: none;  }
 
@media (max-width: 560px) {
    .org-desktop { display: none;  }
    .org-mobile  { display: flex; flex-direction: column; gap: 1rem; }
}
 
/* ── Tarjetas versión móvil ── */
.org-mobile__card {
    border:        2px solid #d0d0d0;
    border-radius: 1rem;
    padding:       1.2rem 1.5rem;
    background:    #fff;
    text-align:    center;
    box-shadow:    0 0.2rem 0.8rem rgba(0,0,0,0.06);
}
 
.org-mobile__role {
    font-size:   0.8em;
    color:       var(--gris, #757575);
    margin:      0 0 0.4rem;
}
 
.org-mobile__name {
    font-size:   1em;
    font-weight: 700;
    color:       var(--grisOscuro, rgb(63, 63, 62));
    margin:      0;
    line-height: 1.4;
}
 
.org-mobile__central {
    border:          2px solid #d0d0d0;
    border-radius:   1rem;
    padding:         1.5rem 2.5rem;
    background:      #fff;
    box-shadow:      0 0.2rem 0.8rem rgba(0,0,0,0.06);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-top:      0.5rem;
}
 
.org-mobile__central img {
    max-width:  180px;
    height:     auto;
    display:    block;
    object-fit: contain;
}
 
/* ══ DESCRIPCIÓN ══ */
.org-descripcion {
    margin-top: 2.5rem;
    text-align: center;
    max-width:  55rem;
    padding:    0;
}
 
.org-descripcion__texto,
.org-descripcion__destacado {
    font-size:   0.95em;
    color:       var(--grisOscuro, rgb(63, 63, 62));
    line-height: 1.7;
    margin:      0 0 0.8rem 0;
}
 
.org-descripcion__destacado {
    margin-bottom: 0;
}
 
.org-descripcion__destacado strong {
    font-weight: 700;
}
 
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .org-section {
        margin: 3rem 2rem;
    }
}
 
@media (max-width: 560px) {
    .org-descripcion {
        margin-top: 1.5rem;
    }
 
    .org-descripcion__texto,
    .org-descripcion__destacado {
        font-size: 0.88em;
    }
}

/* ═══════════════════════════════════════════════════════
   PARCHE DEFINITIVO — Tamaño organigrama
   Pegar al FINAL del CSS, después de todos los bloques
   .org-section existentes. Usa !important para garantizar
   que sobreescriba cualquier regla anterior.
═══════════════════════════════════════════════════════ */
 
/* 1. El contenedor ocupa todo el ancho de la página
      menos los márgenes, sin restricciones de flex */
.org-section {
    width:          100% !important;
    max-width:      none !important;
    box-sizing:     border-box !important;
    align-items:    stretch !important;
    margin-left:    0 !important;
    margin-right:   0 !important;
    padding-left:   4rem !important;
    padding-right:  4rem !important;
    padding-top:    4rem !important;
    padding-bottom: 4rem !important;
}
 
/* 2. El wrapper del SVG ocupa todo el ancho disponible */
.org-desktop {
    width:  100% !important;
    display: block !important;
}
 
/* 3. El SVG escala al 100% — el viewBox "0 0 760 400"
      se mapea a este ancho, y las cajas llenan el espacio */
.org-svg {
    width:     100% !important;
    height:    auto !important;
    min-width: unset !important;
    max-width: none !important;
    display:   block !important;
}
 
/* 4. Descripción: sigue centrada */
.org-descripcion {
    width:      100% !important;
    max-width:  55rem !important;
    margin-left:  auto !important;
    margin-right: auto !important;
}
 
/* 5. Ajuste en pantallas muy grandes para no estirar en exceso */
@media (min-width: 1400px) {
    .org-section {
        padding-left:  8rem !important;
        padding-right: 8rem !important;
    }
}
 
/* 6. Tablet */
@media (max-width: 900px) {
    .org-section {
        padding-left:  2rem !important;
        padding-right: 2rem !important;
    }
}

/* ═══════════════════════════════════════════════════════
   PARCHE DEFINITIVO — Tamaño organigrama
   Pegar al FINAL del CSS, después de todos los bloques
   .org-section existentes. Usa !important para garantizar
   que sobreescriba cualquier regla anterior.
═══════════════════════════════════════════════════════ */
 
/* 1. El contenedor ocupa todo el ancho de la página
      menos los márgenes, sin restricciones de flex */
.org-section {
    width:          100% !important;
    max-width:      none !important;
    box-sizing:     border-box !important;
    align-items:    stretch !important;
    margin-left:    0 !important;
    margin-right:   0 !important;
    padding-left:   4rem !important;
    padding-right:  4rem !important;
    padding-top:    4rem !important;
    padding-bottom: 4rem !important;
}
 
/* 2. El wrapper del SVG ocupa todo el ancho disponible */
.org-desktop {
    width:  100% !important;
    display: block !important;
}
 
/* 3. El SVG escala al 100% — el viewBox "0 0 760 400"
      se mapea a este ancho, y las cajas llenan el espacio */
.org-svg {
    width:     100% !important;
    height:    auto !important;
    min-width: unset !important;
    max-width: none !important;
    display:   block !important;
}
 
/* 4. Descripción: sigue centrada */
.org-descripcion {
    width:      100% !important;
    max-width:  55rem !important;
    margin-left:  auto !important;
    margin-right: auto !important;
}
 
/* 5. Ajuste en pantallas muy grandes para no estirar en exceso */
@media (min-width: 1400px) {
    .org-section {
        padding-left:  8rem !important;
        padding-right: 8rem !important;
    }
}
 
/* 6. Tablet */
@media (max-width: 900px) {
    .org-section {
        padding-left:  2rem !important;
        padding-right: 2rem !important;
    }
}
 
/* ═══════════════════════════════════════════════════════
   PARCHE ORGANIGRAMA — 2 correcciones
   Pegar al FINAL del CSS, después de todos los bloques
   .org-section / .org-desktop / .org-mobile existentes.
═══════════════════════════════════════════════════════ */
 
/* 1. OCULTAR .org-mobile en escritorio y tablet
      (el SVG ya se ve bien en esas resoluciones) */
.org-mobile {
    display: none !important;
}
 
/* Solo mostrar .org-mobile en móvil real */
@media (max-width: 560px) {
    .org-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }
    /* Y ocultar el SVG en móvil */
    .org-desktop {
        display: none !important;
    }
}
 
 
/* ── LÍNEA DEL TIEMPO ───────────────────────────────────────────── */

.lineaTiempo {
    margin: 4rem 4rem 6rem 4rem;
}

.lineaTiempo__titulo {
    font-size: 1em;
    font-weight: 700;
    color: var(--grisOscuro);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 0.05em;
}

.lineaTiempo__contenedor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Línea roja vertical central */
.lineaTiempo__linea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.2rem;
    background-color: var(--rojoIconos);
    z-index: 0;
}

/* Grid de 3 columnas simétricas: año siempre en col central */
.lineaTiempo__item,
.lineaTiempo__item--der,
.lineaTiempo__item--izq {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    padding: 1.2rem 0;
    position: relative;
    z-index: 1;
}

/* AÑO: columna central, siempre centrado sobre la línea */
.lineaTiempo__anio {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--negro);
    border: 0.18rem solid var(--rojoIconos);
    border-radius: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: #fff;
    white-space: nowrap;
    z-index: 2;
    position: relative;
}

/* DESCRIPCIÓN DER: col 1, texto alineado a la derecha */
.lineaTiempo__item--der .lineaTiempo__descripcion {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-right: 3rem;
}

/* DESCRIPCIÓN IZQ: col 3, texto alineado a la izquierda */
.lineaTiempo__item--izq .lineaTiempo__descripcion {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    padding-left: 3rem;
}

.lineaTiempo__descripcion p {
    font-size: 0.88em;
    color: var(--grisOscuro);
    line-height: 1.6;
    margin: 0 0 0.4rem 0;
}

.lineaTiempo__descripcion p:last-child { margin-bottom: 0; }

/* CONECTOR PUNTEADO */
.lineaTiempo__conector {
    height: 0.15rem;
    width: 2rem;
    border-top: 0.18rem dashed var(--rojoIconos);
    flex-shrink: 0;
}

.lineaTiempo__item--der .lineaTiempo__conector {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.lineaTiempo__item--izq .lineaTiempo__conector {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
}

/* Año clickeable */
.lineaTiempo__anio {
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lineaTiempo__anio:hover {
    background: var(--rojoIconos);
    color: #fff;
}

.lineaTiempo__anio--activo {
    background: var(--rojoIconos);
    color: #fff;
}

/* Descripción oculta por defecto */
.lineaTiempo__descripcion {
    display: none;
    animation: fadeIn 0.3s ease;
}

.lineaTiempo__descripcion--visible {
    display: block;
}

.lineaTiempo__conector {
    display: none; /* también se oculta */
}

.lineaTiempo__conector--visible {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lineaTiempo__vacio { display: none; }

/* ── RESPONSIVO MÓVIL ── */
@media (max-width: 700px) {
    .lineaTiempo { margin: 3rem 1.5rem; }

    .lineaTiempo__linea { left: 3.5rem; transform: none; }

    .lineaTiempo__item,
    .lineaTiempo__item--der,
    .lineaTiempo__item--izq {
        grid-template-columns: auto auto 1fr;
    }

    .lineaTiempo__item--der .lineaTiempo__anio,
    .lineaTiempo__item--izq .lineaTiempo__anio {
        grid-column: 1;
        justify-self: start;
    }

    .lineaTiempo__item--der .lineaTiempo__conector,
    .lineaTiempo__item--izq .lineaTiempo__conector {
        grid-column: 2;
        justify-self: start;
    }

    .lineaTiempo__item--der .lineaTiempo__descripcion,
    .lineaTiempo__item--izq .lineaTiempo__descripcion {
        grid-column: 3;
        text-align: left;
        padding-left: 0.5rem;
        padding-right: 0;
    }
}



/* ── TARJETAS EXTRA (Proyectos / Reportajes) ────────────────────── */

.tarjetasExtra {
    margin: 4rem 4rem 6rem 4rem;
}

.tarjetasExtra__contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.informacion__soloTitulo {
    min-height: auto !important;
    top: 25% !important;
    padding: 1.2rem 1.5rem !important;
}

.informacion__soloTitulo .informacion__titulo {
    font-size: 1.3em;
    line-height: 1.3;
    margin: 0;
}

@media (max-width: 700px) {
    .tarjetasExtra { margin: 3rem 1.5rem; }
    .tarjetasExtra__contenedor { grid-template-columns: 1fr; gap: 2rem; }
}
    

/* ═══════════════════════════════════════════════
   PARCHE PTAR — flechas unificadas
   Pegar al final del CSS principal, después de
   los estilos de .PTARcelular existentes.
   Sobreescribe los estilos de botón anteriores.
═══════════════════════════════════════════════ */
 
/* Anular todos los min-width por breakpoint del svg antiguo */
.PTARcelular__boton svg,
.btn-nav-ptar svg {
    min-width: unset !important;
    width:     1.2rem !important;
    height:    1.2rem !important;
    stroke:    currentColor;
    fill:      none;
    display:   block;
    flex-shrink: 0;
}
 
/* Anular paddings laterales heredados que separaban el svg grande */
.PTARcelular__prevBtn,
.PTARcelular__nextBtn {
    padding: 0 !important;
}
 
/* Estilo del botón — igual que .proyectos__nav-btn */
.btn-nav-ptar {
    width:         2.8rem;
    height:        2.8rem;
    border-radius: 50%;
    border:        0.15rem solid var(--rojo);
    background:    white;
    color:         var(--rojo);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--transicion), color var(--transicion);
    flex-shrink:   0;
    /* Eliminar fill heredado del svg antiguo */
    fill:          none;
}
 
.btn-nav-ptar:hover {
    background: var(--rojo);
    color:      white;
}