:root {
--azul: #003149;
--azul-md: #0665a5;
--azul-lt: #e6eff6;
--rojo: #aa0d2e;
--rojo-lt: #f9e6ea;
--bg: #f2f5fb;
--card: #ffffff;
--texto: #2d3748;
--suave: #6b7280;
--borde: rgba(0, 49, 73, 0.10);
--sombra: 0 4px 24px rgba(0, 49, 73, 0.08);
--sombra-h: 0 14px 40px rgba(0, 49, 73, 0.16);
--r: 18px;
--r-sm: 10px;
}


/* ============================================================
RESET Y BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}

body {
background: var(--bg);
margin: 0;
font-family: 'Sora', sans-serif;
color: var(--texto);
}


/* ============================================================
HERO COMPARTIDO
============================================================ */
.hero-wrap {
padding: 24px 24px 0;
}

.hero-wrap img {
width: 100%;
border-radius: var(--r);
display: block;
box-shadow: var(--sombra);
transition: transform .5s;
cursor: pointer;
}

.hero-wrap img:hover {
transform: scale(1.01);
}


/* ============================================================
ACCESIBILIDAD (compartido)
============================================================ */
/* ACCESIBILIDAD */
#accesibilidadBtn {
position: fixed;
left: 20px;
bottom: 20px;
width: 52px;
height: 52px;
background: var(--azul);
color: #fff;
font-size: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
box-shadow: 0 6px 20px rgba(26, 51, 88, 0.35);
transition: background .3s, transform .2s;
}

#accesibilidadBtn:hover {
background: var(--rojo);
transform: scale(1.08);
}

#accesibilidadPanel {
display: none;
position: fixed;
left: 20px;
bottom: 84px;
background: var(--card);
border: 1px solid var(--borde);
border-radius: var(--r-sm);
padding: 18px;
z-index: 9998;
box-shadow: var(--sombra-h);
min-width: 185px;
}

#accesibilidadPanel h4 {
font-size: 1.6rem;
font-weight: 700;
color: var(--azul);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
}

#accesibilidadPanel button {
display: block;
width: 100%;
background: var(--azul-lt);
border: none;
border-radius: 8px;
padding: 9px 12px;
margin-bottom: 8px;
font-size: 1.6rem;
color: var(--azul);
cursor: pointer;
text-align: left;
font-family: 'Sora', sans-serif;
transition: background .2s;
font-weight: 500;
}

#accesibilidadPanel button:hover {
background: var(--azul);
color: #fff;
}

#accesibilidadPanel button.activo {
background: var(--rojo);
color: #fff;
}



/* ============================================================
FADE-UP (compartido)
============================================================ */
.fade-up {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}

.fade-up.visible {
opacity: 1;
transform: translateY(0);
}

.fade-in {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease;
}

.fade-in.show {
opacity: 1;
transform: translateY(0);
}

.fadee-in {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease;
}

.fadee-in.show {
opacity: 1;
transform: translateY(0);
}


/* ============================================================
BANNER CIERRE (compartido)
============================================================ */
.banner-cierre {
padding: 0 24px 48px;
}

.banner-cierre img {
width: 100%;
border-radius: var(--r);
box-shadow: var(--sombra);
height: 300px;
object-fit: cover;
}


/* ============================================================
ETIQUETAS DE SECCIÓN (variantes)
============================================================ */
/* Alineada izquierda con línea */
.section-proyec,
.section-expansion,
.section-empresa {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rojo);
margin-bottom: 6px;
}

.section-proyec::before,
.section-expansion::before,
.section-empresa::before {
content: '';
width: 20px;
height: 2px;
background: var(--rojo);
border-radius: 2px;
}

/* Centrada con líneas a los lados */
.section-text {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rojo);
margin-bottom: 6px;
}

.section-text::before,
.section-text::after {
content: '';
flex: 1;
height: 2px;
background: var(--borde);
}

/* Títulos */
.title-proyeccion,
.title-expansion,
.title-empresa {
font-family: 'DM Serif Display', serif;
font-size: 3.0rem;
color: var(--azul);
margin-bottom: 6px;
line-height: 1.2;
}

.title-questions,
.title-transparencia,
.title-revisiones {
font-family: 'DM Serif Display', serif;
font-size: 3.0rem;
color: var(--azul);
margin-bottom: 6px;
line-height: 1.2;
text-align: center;
}

/* Barras decorativas */
.bar-proyec,
.bar-expansion,
.bar-empresa {
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--rojo), var(--azul));
border-radius: 3px;
margin-bottom: 28px;
}

.bar-questions,
.bar-trans,
.bar-regulatorio {
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--rojo), var(--azul));
border-radius: 3px;
margin: 0 auto 40px;
}


/* ============================================================
MÓDULO: PROYECCIÓN
============================================================ */
.main-proyec,
.main-proyec * {
font-family: 'Sora', sans-serif;
color: var(--texto);
}

.main-proyec {
max-width: 1180px;
margin: 48px auto;
padding: 0 24px 80px;
}

/* Intro card */
.intro-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
margin-bottom: 36px;
transition: transform .3s, box-shadow .3s;
}

.intro-card:hover {
transform: translateY(-4px);
box-shadow: var(--sombra-h);
}

.intro-card p {
font-size: 1.4rem;
color: var(--suave);
line-height: 1.85;
text-align: justify;
}

/* Showcase */
.showcase-section {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
margin-bottom: 36px;
}

.showcase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}

.show-card {
border-radius: var(--r-sm);
overflow: hidden;
position: relative;
height: 320px;
box-shadow: var(--sombra);
transition: transform .4s, box-shadow .4s;
cursor: pointer;
}

.show-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--sombra-h);
}

.show-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s;
}

.show-card:hover img {
transform: scale(1.08);
}

.show-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 49, 73, .75) 0%, transparent 55%);
}

.show-info {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
color: #fff;
z-index: 2;
}

.show-info h3 {
font-size: 1.4rem;
font-weight: 600;
margin: 0;
line-height: 1.4;
}

/* Secondary card */
.secondary-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
margin-bottom: 36px;
}

.secondary-card p {
font-size: 1.4rem;
color: var(--suave);
line-height: 1.85;
margin-bottom: 16px;
}

.secondary-card ul {
padding-left: 0;
list-style: none;
margin: 0;
}

.secondary-card ul li {
font-size: 1.6rem;
color: var(--suave);
padding: 8px 0 8px 28px;
border-bottom: 1px solid var(--borde);
position: relative;
line-height: 1.6;
}

.secondary-card ul li:last-child {
border-bottom: none;
}

.secondary-card ul li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--azul), var(--rojo));
}

/* Carrusel */
.carousel-section {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
margin-bottom: 36px;
}

.carrusel {
position: relative;
width: 100%;
max-width: 900px;
height: 420px;
margin: 24px auto 0;
perspective: 1000px;
}

.slide {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 100%;
transform: translate(-50%, -50%) scale(0.7);
opacity: 0;
transition: all 1.2s ease;
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--r-sm);
}

.slide.activo {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
z-index: 5;
}

.slide.anterior {
transform: translate(-125%, -50%) scale(0.6) rotateY(20deg);
opacity: 0.5;
z-index: 3;
filter: blur(2px);
}

.slide.siguiente {
transform: translate(25%, -50%) scale(0.6) rotateY(-20deg);
opacity: 0.5;
z-index: 3;
filter: blur(2px);
}

.texto-nube {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, .92);
padding: 10px 28px;
border-radius: 40px;
font-size: 1.6rem;
color: var(--azul);
font-weight: 600;
box-shadow: var(--sombra);
white-space: nowrap;
}

.flecha-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, .9);
border: none;
font-size: 2.2rem;
color: var(--azul);
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 10;
box-shadow: var(--sombra);
transition: background .3s, color .3s;
display: flex;
align-items: center;
justify-content: center;
}

.flecha-btn:hover {
background: var(--azul);
color: #fff;
}

.flecha-btn.ant {
left: 10px;
}

.flecha-btn.sig {
right: 10px;
}

/* Energía */
.energia-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
margin-bottom: 36px;
}

.energia-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}

.energia-img img {
width: 100%;
border-radius: var(--r-sm);
box-shadow: var(--sombra);
}

.energia-texts p {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.85;
margin-bottom: 16px;
text-align: justify;
}

@media (max-width: 768px) {

.showcase-grid,
.energia-grid {
grid-template-columns: 1fr;
}

.carrusel {
height: 260px;
}

.main-proyec {
padding: 0 16px 40px;
}
}


/* ============================================================
MÓDULO: EXPANSIÓN
============================================================ */
.main-expansion {
max-width: 1180px;
margin: 48px auto;
padding: 0 24px 80px;
}

.content-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 28px;
align-items: start;
}

.info-card {
background: var(--card);
border-radius: var(--r);
box-shadow: var(--sombra);
border: 1px solid var(--borde);
overflow: hidden;
transition: transform .3s, box-shadow .3s;
}

.info-card:hover {
transform: translateY(-4px);
box-shadow: var(--sombra-h);
}

.info-card-head {
background: linear-gradient(90deg, var(--azul), var(--azul-md));
padding: 20px 28px;
border-left: 5px solid var(--rojo);
}

.info-card-head h3 {
color: #fff;
font-family: 'DM Serif Display', serif;
font-size: 1.4rem;
margin: 0 0 4px;
}

.info-card-head p {
color: rgba(255, 255, 255, .60);
font-size: 1.6rem;
margin: 0;
}

.info-card-body {
padding: 28px;
}

.desc-text {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.85;
text-align: justify;
margin-bottom: 24px;
}

.plan-ref {
background: var(--azul-lt);
border-radius: var(--r-sm);
border: 1px solid var(--borde);
padding: 14px 18px;
margin-bottom: 22px;
}

.plan-ref small {
display: block;
font-size: 1.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--suave);
margin-bottom: 4px;
}

.plan-ref span {
font-size: 1.6rem;
font-weight: 700;
color: var(--azul);
}

.doc-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.doc-item {
display: flex;
align-items: center;
gap: 14px;
background: #f8fafc;
border: 1.5px solid #dde3ed;
border-radius: var(--r-sm);
padding: 13px 16px;
text-decoration: none;
color: var(--texto);
font-size: 1.6rem;
font-weight: 500;
transition: all .25s;
}

.doc-item:hover {
border-color: var(--azul);
background: var(--azul-lt);
color: var(--azul);
transform: translateX(4px);
}

.doc-icon {
width: 36px;
height: 36px;
background: var(--azul);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 2.0rem;
}

.doc-arrow {
margin-left: auto;
color: var(--suave);
font-size: 2.0rem;
}

.img-col {
display: flex;
flex-direction: column;
gap: 18px;
}

.img-main {
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
position: relative;
}

.img-main img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
transition: transform .5s;
}

.img-main:hover img {
transform: scale(1.03);
}

.img-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(0, 49, 73, .88) 0%, transparent 100%);
color: #fff;
padding: 18px 16px 12px;
font-size: 1.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
}

.img-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}

.img-sm {
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: 0 3px 14px rgba(0, 49, 73, .10);
border: 1px solid var(--borde);
position: relative;
}

.img-sm img {
width: 100%;
height: 175px;
object-fit: cover;
display: block;
transition: transform .5s;
}

.img-sm:hover img {
transform: scale(1.04);
}

@media (max-width: 900px) {
.content-grid {
grid-template-columns: 1fr;
}

.img-row {
grid-template-columns: 1fr;
}
}


/* ============================================================
MÓDULO: PREGUNTAS FRECUENTES
============================================================ */
.main-questions,
.main-questions * {
font-family: 'Sora', sans-serif;
color: var(--texto);
}

.main-questions {
max-width: 900px;
margin: 48px auto;
padding: 0 24px 80px;
}

.faq-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}

.faq-item {
background: var(--card);
border-radius: var(--r-sm);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
overflow: hidden;
transition: box-shadow .3s;
}

.faq-item:hover {
box-shadow: var(--sombra-h);
}

.faq-trigger {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
cursor: pointer;
gap: 16px;
border-left: 4px solid var(--azul);
transition: border-color .3s;
}

.faq-item.open .faq-trigger {
border-left-color: var(--rojo);
}

.questions {
font-size: 1.4rem;
font-weight: 600;
color: var(--azul);
line-height: 1.4;
}

.faq-icon {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
background: var(--azul-lt);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.0rem;
color: var(--azul);
font-weight: 300;
transition: transform .35s, background .3s;
line-height: 1;
user-select: none;
}

.faq-item.open .faq-icon {
transform: rotate(45deg);
background: var(--rojo);
color: #fff;
}

.content {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease, padding .3s;
padding: 0 24px;
}

.faq-item.open .content {
max-height: 300px;
padding: 0 24px 20px;
}

.answer {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.8;
border-top: 1px solid var(--borde);
padding-top: 14px;
}

.answer strong {
color: var(--azul);
}

.faq-img {
text-align: center;
margin: 40px 0;
}

.faq-img img {
max-width: 280px;
opacity: .85;
}


/* ============================================================
MÓDULO: TRANSPARENCIA
============================================================ */
.main-transp,
.main-transp * {
font-family: 'Sora', sans-serif;
color: var(--texto);
}

.main-transp {
max-width: 1180px;
margin: 48px auto;
padding: 0 24px 80px;
}

.transp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.acc-group {
display: flex;
flex-direction: column;
gap: 12px;
}

.acc-item {
background: var(--card);
border-radius: var(--r-sm);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
overflow: hidden;
transition: box-shadow .3s;
}

.acc-item:hover {
box-shadow: var(--sombra-h);
}

.acc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
cursor: pointer;
gap: 12px;
background: linear-gradient(135deg, var(--azul), var(--azul-md));
transition: background .3s;
}

.acc-item.open .acc-header {
background: linear-gradient(135deg, #001f2e, var(--azul));
}

.acc-header-title {
font-size: 1.6rem;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: .5px;
}

.acc-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2.0rem;
flex-shrink: 0;
transition: transform .35s;
line-height: 1;
}

.acc-item.open .acc-icon {
transform: rotate(45deg);
}

.acc-body {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease, padding .3s;
padding: 0 20px;
}

.acc-item.open .acc-body {
max-height: 600px;
padding: 16px 20px 20px;
}

.acc-body ol,
.acc-body ul {
padding-left: 20px;
margin: 0;
}

.acc-body li {
font-size: 1.6rem;
color: var(--suave);
padding: 5px 0;
line-height: 1.6;
}

.acc-body li a {
color: var(--rojo);
text-decoration: none;
font-weight: 500;
}

.acc-body li a:hover {
text-decoration: underline;
}

.acc-body p {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.7;
margin-bottom: 10px;
}

.acc-body p a {
color: var(--rojo);
text-decoration: none;
font-weight: 500;
}

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

.info-box {
background: var(--azul-lt);
border-radius: var(--r-sm);
padding: 16px;
}

.info-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}

.info-row:last-child {
margin-bottom: 0;
}

.info-icon {
font-size: 2.0rem;
flex-shrink: 0;
margin-top: 2px;
}

.info-label {
font-size: 1.6rem;
font-weight: 700;
color: var(--azul);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}

.info-val {
font-size: 1.6rem;
color: var(--suave);
}

.info-val a {
color: var(--rojo);
text-decoration: none;
}

.pdf-link {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--rojo);
color: #fff;
text-decoration: none;
padding: 8px 18px;
border-radius: 24px;
font-size: 1.6rem;
font-weight: 600;
margin-top: 4px;
transition: background .3s;
}

.pdf-link:hover {
background: var(--azul);
color: #fff;
}

@media (max-width: 768px) {
.transp-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
    /* Título "Transparencia" se corta */
    .title-transparencia {
        font-size: 1.8rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Headers del accordion se cortan */
    .acc-header {
        padding: 12px 14px;
    }

    .acc-header-title {
        font-size: 0.85rem;
        white-space: normal;
        word-break: break-word;
    }

    /* Grid ya pasa a 1 columna en 768px, pero aseguramos padding */
    .main-transp {
        padding: 0 12px 60px;
    }

    /* Contenido interno */
    .acc-body li,
    .acc-body p {
        font-size: 0.9rem;
    }

    .info-label {
        font-size: 0.75rem;
    }

    .info-val {
        font-size: 0.85rem;
    }
}

@media (max-width: 560px) {
    .main-transp {
        padding: 0 12px 60px;
        overflow-x: hidden;  /* ← evita desbordamiento */
    }

    .transp-grid {
        width: 100%;
        overflow-x: hidden;
    }

    .acc-item {
        width: 100%;
        overflow: hidden;
    }

    .acc-header {
        padding: 12px 14px;
        width: 100%;
        overflow: hidden;
    }

    .acc-header-title {
        font-size: 0.85rem;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        flex: 1;        /* ← ocupa el espacio disponible sin empujar el "+" */
    }

    .acc-icon {
        flex-shrink: 0; /* ← el "+" no se mueve */
    }
}


/* ============================================================
MÓDULO: REGULATORIO
============================================================ */
.main-regulatorio,
.main-regulatorio * {
font-family: 'Sora', sans-serif;
color: var(--texto);
}

.main-regulatorio {
max-width: 1060px;
margin: 48px auto;
padding: 0 24px 80px;
}

.reg-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
display: grid;
grid-template-columns: 200px 1fr;
gap: 36px;
align-items: center;
margin-bottom: 28px;
transition: transform .3s, box-shadow .3s;
position: relative;
overflow: hidden;
}

.reg-card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra-h);
}

.reg-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--azul), var(--rojo));
}

.reg-card.reverse {
grid-template-columns: 1fr 200px;
}

.reg-card.reverse .reg-img {
order: 2;
}

.reg-card.reverse .reg-body {
order: 1;
}

.reg-img img {
width: 100%;
border-radius: var(--r-sm);
box-shadow: var(--sombra);
}

.reg-tag {
display: inline-block;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 20px;
background: var(--azul-lt);
color: var(--azul);
margin-bottom: 10px;
}

.reg-title {
font-family: 'DM Serif Display', serif;
font-size: 2.2rem;
color: var(--azul);
margin-bottom: 14px;
}

.reg-text {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.85;
text-align: justify;
margin-bottom: 20px;
}

.btn-doc {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--azul);
color: #fff;
text-decoration: none;
padding: 10px 22px;
border-radius: 30px;
font-size: 1.6rem;
font-weight: 600;
transition: background .3s, transform .2s;
}

.btn-doc:hover {
background: var(--rojo);
transform: translateY(-2px);
color: #fff;
}

.btn-doc-outline {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--azul);
border: 2px solid var(--azul);
text-decoration: none;
padding: 9px 20px;
border-radius: 30px;
font-size: 1.6rem;
font-weight: 600;
transition: all .3s;
margin-left: 10px;
}

.btn-doc-outline:hover {
background: var(--azul);
color: #fff;
}

@media (max-width: 768px) {

.reg-card,
.reg-card.reverse {
grid-template-columns: 1fr;
padding: 24px;
}

.reg-card.reverse .reg-img,
.reg-card.reverse .reg-body {
order: unset;
}
}


/* ============================================================
MÓDULO: EMPRESA
============================================================ */
.main-empresa {
max-width: 1180px;
margin: 48px auto;
padding: 0 24px 80px;
}

.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 48px;
margin-top: 40px;
}

.stat-card {
background: var(--card);
border-radius: var(--r-sm);
padding: 24px 20px;
text-align: center;
border: 1px solid var(--borde);
box-shadow: var(--sombra);
transition: transform .3s, box-shadow .3s;
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--azul), var(--rojo));
}

.stat-card:hover {
transform: translateY(-6px);
box-shadow: var(--sombra-h);
}

.stat-num {
font-family: 'DM Serif Display', serif;
font-size: 2.5rem;
color: var(--rojo);
line-height: 1;
}

.stat-lbl {
font-size: 1.6rem;
color: var(--suave);
margin-top: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.qs-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
margin-bottom: 36px;
transition: transform .3s, box-shadow .3s;
}

.qs-card:hover {
transform: translateY(-4px);
box-shadow: var(--sombra-h);
}

.qs-card img {
width: 100%;
border-radius: var(--r-sm);
box-shadow: var(--sombra);
}

.qs-card p {
font-size: 1.4rem;
color: var(--suave);
line-height: 1.85;
text-align: justify;
}

.mv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 36px;
}

.mv-card {
background: var(--card);
border-radius: var(--r);
padding: 32px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
align-items: start;
position: relative;
overflow: hidden;
transition: transform .3s, box-shadow .3s;
}

.mv-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--azul), var(--rojo));
transform: scaleX(0);
transform-origin: left;
transition: transform .4s;
}

.mv-card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra-h);
}

.mv-card:hover::after {
transform: scaleX(1);
}

.mv-card img {
width: 100%;
border-radius: var(--r-sm);
}

.mv-title {
font-family: 'DM Serif Display', serif;
font-size: 2.2rem;
color: var(--azul);
margin-bottom: 12px;
}

.mv-text {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.8;
text-align: justify;
}

.pol-card {
background: var(--card);
border-radius: var(--r);
padding: 40px;
box-shadow: var(--sombra);
border: 1px solid var(--borde);
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
align-items: start;
margin-bottom: 32px;
transition: transform .3s, box-shadow .3s;
}

.pol-card:hover {
transform: translateY(-4px);
box-shadow: var(--sombra-h);
}

.pol-card img {
width: 100%;
border-radius: var(--r-sm);
}

.pol-intro {
font-size: 1.6rem;
color: var(--suave);
line-height: 1.85;
text-align: justify;
margin-bottom: 20px;
}

.pol-list {
list-style: none;
padding: 0;
counter-reset: pol;
}

.pol-list li {
position: relative;
padding: 10px 0 10px 32px;
border-bottom: 1px solid var(--borde);
font-size: 1.6rem;
color: var(--suave);
line-height: 1.7;
counter-increment: pol;
}

.pol-list li:last-child {
border-bottom: none;
}

.pol-list li::before {
content: counter(pol);
position: absolute;
left: 0;
top: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--azul);
color: #fff;
font-size: 1.6rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-width: 768px) {

.stats-row,
.mv-grid {
grid-template-columns: 1fr;
}

.qs-card,
.pol-card,
.mv-card {
grid-template-columns: 1fr;
padding: 24px;
}
}


/* ============================================================
MÓDULO: FACTURA
============================================================ */
.factura-wrap {
max-width: 800px;
margin: 36px auto 70px;
padding: 0 20px;
}

.section-consulta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}

.section-consulta-line {
flex: 1;
height: 1px;
background: var(--borde);
}

.section-consulta-badge {
background: var(--azul);
color: #fff;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 18px;
border-radius: 20px;
white-space: nowrap;
}

.f-card {
background: var(--card);
border-radius: var(--r);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
margin-bottom: 20px;
overflow: hidden;
transition: box-shadow .3s, transform .3s;
}

.f-card:hover {
box-shadow: var(--sombra-h);
transform: translateY(-3px);
}

.f-card-strip {
height: 3px;
background: linear-gradient(90deg, var(--azul) 0%, var(--rojo) 100%);
}

.f-card-body {
padding: 28px 32px;
}

.f-card-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--azul);
margin: 0 0 22px;
display: flex;
align-items: center;
gap: 10px;
}

.f-card-title .ic {
width: 32px;
height: 32px;
background: var(--azul-lt);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.0rem;
flex-shrink: 0;
}

.items {
list-style: none;
padding: 0;
counter-reset: s;
margin-bottom: 22px;
}

.items li {
position: relative;
padding: 10px 0 10px 38px;
font-size: 1.6rem;
color: var(--suave);
border-bottom: 1px solid var(--borde);
counter-increment: s;
line-height: 1.65;
}

.items li:last-child {
border-bottom: none;
}

.items li::before {
content: counter(s);
position: absolute;
left: 0;
top: 11px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--azul-lt);
color: var(--azul);
font-size: 1.6rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(0, 49, 73, .15);
}

.items li strong {
color: var(--azul);
}

.tip {
background: var(--azul-lt);
border-left: 3px solid var(--azul);
border-radius: var(--r-sm);
padding: 11px 16px;
font-size: 1.6rem;
color: var(--azul);
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 8px;
}

.fields-grid {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 14px;
align-items: end;
margin-top: 8px;
}

.fg label {
display: block;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--azul);
margin-bottom: 6px;
}

.fg input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid rgba(0, 49, 73, .14);
border-radius: var(--r-sm);
font-size: 1.6rem;
color: var(--texto);
background: #f8fafc;
outline: none;
transition: border-color .2s, box-shadow .2s;
}

.fg input:focus {
border-color: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 49, 73, .08);
background: #fff;
}

.btn-exec {
padding: 10px 24px;
background: var(--rojo);
color: #fff;
border: none;
border-radius: 30px;
font-size: 1.6rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
letter-spacing: .3px;
transition: background .25s, box-shadow .25s, transform .2s;
}

.btn-exec:hover {
background: var(--azul);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(170, 13, 46, .22);
}

.pse-wrap {
text-align: center;
padding: 14px 0 4px;
}

.pse-wrap img {
max-width: 130px;
opacity: .80;
transition: opacity .3s, transform .3s;
}

.pse-wrap img:hover {
opacity: 1;
transform: scale(1.05);
}

.modal-header {
background: var(--rojo) !important;
border-bottom: none;
}

.modal-header .heading {
color: #fff;
font-weight: 700;
margin: 0;
font-size: 1.4rem;
}

.modal-content {
border-radius: var(--r);
overflow: hidden;
border: none;
}

.modal-body label {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--rojo);
margin-top: 10px;
display: block;
margin-bottom: 3px;
}

.modal-body .form-control {
border-radius: var(--r-sm);
font-size: 1.6rem;
border: 1px solid var(--borde);
background: #f8fafc;
}

.modal-footer {
background: #f7f9fc;
border-top: 1px solid var(--borde);
}

.btn-dl {
background: var(--rojo);
color: #fff;
border: none;
padding: 9px 20px;
border-radius: 30px;
font-size: 1.6rem;
font-weight: 700;
cursor: pointer;
transition: background .2s;
}

.btn-dl:hover {
background: var(--azul);
}

@media (max-width: 640px) {
.fields-grid {
grid-template-columns: 1fr;
}

.f-card-body {
padding: 20px;
}
}


/* ============================================================
MÓDULO: MASIVA
============================================================ */

  body {
            background: #f2f5fb;
            font-family: 'Sora', sans-serif;
            margin: 0;
        }

        .fm {
            max-width: 860px;
            margin: 100px auto 60px;
            padding: 0 15px;
        }

        .fm-header {
            background: #003149;
            padding: 1.2rem 1.8rem;
            border-radius: 12px 12px 0 0;
            border-bottom: 3px solid #aa0d2e;
        }

        .fm-header h2 {
            font-size: 1.8rem;
            font-weight: 600;
            color: #fff;
            margin: 0 0 2px;
        }

        .fm-header p {
            font-size: 1.4rem;
            color: #7fa8cc;
            margin: 0;
        }

        .fm-body {
            background: #fff;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 2.5rem;
        }

        .fm-body label {
            display: block;
            font-size: 1.6rem;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: .4px;
            margin-bottom: 5px;
        }

        .fm-select {
            width: 100%;
            max-width: 380px;
            border: 1px solid #ced4da;
            border-radius: 8px;
            padding: 11px 14px;
            font-size: 1.6rem;
            font-family: 'Sora', sans-serif;
            color: #212529;
            outline: none;
            appearance: none;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
            transition: border-color .15s, box-shadow .15s;
        }

        .fm-select:focus {
            border-color: #003149;
            box-shadow: 0 0 0 3px rgba(0, 49, 73, .1);
        }

        .fm-btn {
            display: block;
            width: 100%;
            max-width: 380px;
            margin-top: 14px;
            padding: 12px;
            background: #aa0d2e;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1.5rem;
            font-weight: 600;
            font-family: 'Sora', sans-serif;
            cursor: pointer;
            transition: background .15s;
        }

        .fm-btn:hover {
            background: #003149;
        }




/* ============================================================
MÓDULO: CONVENIOS / PAGOS EN LÍNEA
============================================================ */
  :root {
            --azul: #1a3358;
            --azul-mid: #254878;
            --azul-lt: #eef2f8;
            --rojo: #c0392b;
            --rojo-lt: #fdecea;
            --bg: #f2f5fb;
            --card: #ffffff;
            --texto: #2d3748;
            --suave: #6b7280;
            --borde: rgba(26, 51, 88, 0.10);
            --sombra: 0 4px 24px rgba(26, 51, 88, 0.08);
            --sombra-h: 0 14px 40px rgba(26, 51, 88, 0.16);
            --r: 18px;
            --r-sm: 10px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            background: var(--bg);
            margin: 0;
        }

        /* HERO */
        .hero-wrap-convenios {
            padding: 24px 24px 0;
        }

        .hero-wrap-convenios img {
            width: 100%;
            border-radius: var(--r);
            display: block;
            box-shadow: var(--sombra);
            transition: transform .5s;
            cursor: pointer;
        }

        .hero-wrap-convenios img:hover {
            transform: scale(1.01);
        }

        /* MAIN WRAPPER */
        .opys-main-convenios {
            max-width: 1060px;
            margin: 40px auto;
            padding: 0 24px 80px;
            font-family: 'Sora', sans-serif;
        }

        /* SECTION LABELS */
        .section-text-convenios {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--rojo);
            margin-bottom: 6px;
            font-family: 'Sora', sans-serif;
        }

        .section-text-convenios::before,
        .section-text-convenios::after {
            content: '';
            flex: 1;
            height: 2px;
            background: var(--borde);
        }

        .section-title-convenios {
            font-size: 1.95rem;
            font-weight: 700;
            color: var(--azul);
            text-align: center;
            margin-bottom: 6px;
            font-family: 'Sora', sans-serif;
        }

        .section-bar-convenios {
            width: 48px;
            height: 3px;
            background: linear-gradient(90deg, var(--rojo), var(--azul));
            border-radius: 3px;
            margin: 0 auto 40px;
        }

        .section-intro-convenios {
            text-align: center;
            font-size: 1.7rem;
            color: var(--suave);
            margin-bottom: 36px;
            font-family: 'Sora', sans-serif;
        }

        /* PAYMENT CARDS */
        .pay-card-convenios {
            background: var(--card);
            border-radius: var(--r);
            box-shadow: var(--sombra);
            border: 1px solid var(--borde);
            margin-bottom: 28px;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
        }

        .pay-card-convenios:hover {
            transform: translateY(-5px);
            box-shadow: var(--sombra-h);
        }

        .pay-card-convenios-head {
             background: linear-gradient(90deg, var(--azul-mid), #617a9f);
            padding: 18px 28px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .pay-card-convenios-head .head-icon-convenios {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            flex-shrink: 0;
        }

        .pay-card-convenios-head h4 {
            color: #fff;
            font-size: 1.85rem;
            font-weight: 700;
            margin: 0;
            font-family: 'Sora', sans-serif;
            letter-spacing: 0.3px;
        }

        .pay-card-convenios-body {
            padding: 28px;
        }

        .pay-card-convenios-body p {
            font-size: 1.6rem;
            color: var(--suave);
            line-height: 1.85;
            margin-bottom: 20px;
            font-family: 'Sora', sans-serif;
        }

        /* STEPS LIST */
        .steps-list-convenios {
            list-style: none;
            padding: 0;
            counter-reset: step;
            margin-bottom: 24px;
        }

        .steps-list-convenios li {
            position: relative;
            padding: 10px 0 10px 40px;
            font-size: 1.6rem;
            color: var(--suave);
            border-bottom: 1px solid var(--borde);
            counter-increment: step;
            line-height: 1.6;
            font-family: 'Sora', sans-serif;
        }

        .steps-list-convenios li:last-child {
            border-bottom: none;
        }

        .steps-list-convenios li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--azul), var(--rojo));
            color: #fff;
            font-size: 1.6rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* PSE BUTTON */
        .btn-pse-wrap-convenios {
            text-align: center;
            margin-top: 8px;
        }

        .btn-pse-link-convenios {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--azul);
            color: #fff;
            text-decoration: none;
            padding: 12px 28px;
            border-radius: 30px;
            font-size: 1.6rem;
            font-weight: 700;
            font-family: 'Sora', sans-serif;
            transition: background .3s, transform .2s;
            margin-bottom: 20px;
        }

        .btn-pse-link-convenios:hover {
            background: var(--rojo);
            transform: translateY(-2px);
            color: #fff;
            text-decoration: none;
        }

        .pse-logo-wrap-convenios {
            text-align: center;
            margin-top: 12px;
        }

        .pse-logo-wrap-convenios img {
            max-width: 160px;
            transition: transform .3s;
        }

        .pse-logo-wrap-convenios img:hover {
            transform: scale(1.05);
        }

        /* LOGOS GRID */
        .logos-grid-convenios {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            margin-top: 16px;
        }

        .logo-item-convenios {
            background: #f8fafc;
            border: 1px solid var(--borde);
            border-radius: var(--r-sm);
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow .3s, transform .3s;
            min-width: 100px;
        }

        .logo-item-convenios:hover {
            box-shadow: var(--sombra-h);
            transform: translateY(-3px);
        }

        .logo-item-convenios img {
            max-width: 90px;
            max-height: 40px;
            object-fit: contain;
        }

        /* REGION BADGE */
        .region-badge-convenios {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--rojo-lt);
            color: var(--rojo);
            font-size: 1.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 4px 14px;
            border-radius: 20px;
            margin-bottom: 14px;
            font-family: 'Sora', sans-serif;
        }

        .note-text-convenios {
            font-size: 1.3rem;
            color: var(--suave);
            font-style: italic;
            margin-top: 12px;
            padding: 10px 14px;
            background: var(--azul-lt);
            border-radius: var(--r-sm);
            border-left: 3px solid var(--azul);
            font-family: 'Sora', sans-serif;
        }

        /* FADE UP */
        .fade-up {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

   

        @media (max-width: 768px) {
            .logos-grid-convenios {
                justify-content: center;
            }

            .opys-main-convenios {
                padding: 0 16px 40px;
            }
        }

/* ============================================================
MÓDULO: LOGIN 
============================================================ */
     

:root {
    --azul: #003149;
    --azul-mid: #0665a5;
    --azul-lt: #e6eff6;
    --rojo: #aa0d2e;
    --rojo-lt: #f9e6ea;
    --bg: #f2f5fb;
    --card: #ffffff;
    --texto: #2d3748;
    --suave: #6b7280;
    --borde: rgba(0, 49, 73, 0.10);
    --sombra: 0 4px 24px rgba(0, 49, 73, 0.08);
    --sombra-h: 0 14px 40px rgba(0, 49, 73, 0.16);
    --r: 18px;
    --r-sm: 10px;
}
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            background: var(--bg);
            margin: 0;
        }

        /* HERO */
        .hero-wrap-login {
            padding: 24px 24px 0;
        }

        .hero-wrap-login img {
            width: 100%;
            border-radius: var(--r);
            display: block;
            box-shadow: var(--sombra);
            transition: transform .5s;
        }

        .hero-wrap-login img:hover {
            transform: scale(1.01);
        }

        /* LOGIN SECTION */
        .login-section {
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
           
            gap: 80px;
            flex-wrap: wrap;
        }

        /* FORM SIDE */
        .login-box {
            flex: 1;
            min-width: 300px;
            max-width: 420px;
        }

        .login-card {
            background: var(--card);
            border-radius: var(--r);
            box-shadow: var(--sombra);
            border: 1px solid var(--borde);
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
        }

        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--sombra-h);
        }

        .login-card-head {
            background: linear-gradient(90deg, var(--azul), var(--azul-mid));
            padding: 20px 28px;
            border-left: 5px solid var(--rojo);
        }

        .login-card-head h3 {
            color: #fff;
            font-size: 1.7rem;
            font-weight: 700;
            margin: 0 0 4px;
            font-family: 'Sora', sans-serif;
        }

        .login-card-head p {
            color: rgba(255, 255, 255, 0.65);
            font-size: 1.5rem;
            margin: 0;
            font-family: 'Sora', sans-serif;
        }

        .login-card-body {
            padding: 30px 28px;
        }

        .login-card-body .quote {
            font-size: 1.4rem;
            color: var(--suave);
            line-height: 1.7;
            font-style: italic;
            margin-bottom: 24px;
            padding-left: 12px;
            border-left: 3px solid var(--rojo);
            font-family: 'Sora', sans-serif;
        }

        .msj-error {
            margin-bottom: 12px;
        }

        .field-group-login {
            margin-bottom: 14px;
        }

        .field-group-login label {
            display: block;
            font-size: 1.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--azul);
            margin-bottom: 6px;
            font-family: 'Sora', sans-serif;
        }

        .field-group-login input {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid var(--borde);
            border-radius: var(--r-sm);
            font-size: 1.4rem;
            color: var(--texto);
            background: #f8fafc;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
            font-family: 'Sora', sans-serif;
        }

        .field-group-login input:focus {
            border-color: var(--azul);
            box-shadow: 0 0 0 3px rgba(26, 51, 88, 0.10);
            background: #fff;
        }

        .btn-login {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: 30px;
            background: linear-gradient(90deg, var(--azul), var(--azul-mid));
            color: #fff;
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            margin-top: 8px;
            transition: background .3s, transform .2s, box-shadow .3s;
            font-family: 'Sora', sans-serif;
        }

        .btn-login:hover {
            background: linear-gradient(90deg, var(--rojo), #e74c3c);
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(192, 57, 43, 0.30);
        }

        /* IMAGE SIDE */
        .login-image {
            flex: 1;
            min-width: 260px;
            max-width: 360px;
            text-align: center;
        }

        .login-image img {
            width: 220px;
            animation: flotar 3.5s ease-in-out infinite;
            filter: drop-shadow(0 20px 30px rgba(26, 51, 88, 0.18));
        }

        @keyframes flotar {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-14px);
            }
        }

        .login-image h2 {
            margin-top: 20px;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--azul);
            font-family: 'Sora', sans-serif;
        }

        .login-image p {
            font-size: 1.4rem;
            color: var(--suave);
            margin-top: 6px;
            font-family: 'Sora', sans-serif;
        }

        /* FEATURES ROW */
        .login-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 860px;
            margin: 0 auto 60px;
            padding: 0 24px;
        }

        .login-card {
            background: var(--card);
            border-radius: var(--r-sm);
            padding: 20px;
            text-align: center;
            border: 1px solid var(--borde);
            box-shadow: var(--sombra);
            transition: transform .3s, box-shadow .3s;
        }

        .login-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--sombra-h);
        }

        .login-icon {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .section-title-login {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--azul);
            margin-bottom: 4px;
            font-family: 'Sora', sans-serif;
        }

        .section-text-login {
            font-size: 1.4rem;
            color: var(--suave);
            line-height: 1.6;
            font-family: 'Sora', sans-serif;
        }
        
         .ov-recover-login {
            text-align: center;
            margin-top: 20px;
            font-size: 1.1rem;
            color: var(--muted);
        }

        .ov-recover-login a {
            color: var(--blue);
            text-decoration: none;
            font-weight: 600;
        }

        .ov-recover-login a:hover {
            text-decoration: underline;
        }

        /* FADE UP */
        .fade-up {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

         
        @media (max-width: 768px) {
            .login-section {
                gap: 32px;
                padding: 40px 16px;
            }

            .login-row {
                grid-template-columns: 1fr;
            }
        }
        
        
        
        
        
        
        
        
        
/* ============================================================
MÓDULO: CONSUMO 12 MESES
============================================================ */
.section-consumo {
max-width: 960px;
margin: 100px auto 60px;
padding: 0 15px;
}

.header-consumo {
background: var(--azul);
padding: 1.2rem 1.8rem;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 3px solid var(--rojo);
}

.section-text h1 {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
margin: 0 0 2px;
}

.section-text p {
font-size: 1.6rem;
color: #7fa8cc;
margin: 0;
}

.body-consumo {
background: #fff;
border: 1px solid #dee2e6;
border-top: none;
border-radius: 0 0 12px 12px;
padding: 1.5rem;
}

.grid-consumo {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1.5rem;
align-items: start;
}

.oc-chart-card {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.4rem;
}

.card-consumo {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.4rem;
}

.section-info {
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #dee2e6;
}

.field-consumo label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: .4px;
}

.field-consumo input {
width: 100%;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 9px 12px;
font-size: 1.6rem;
color: #495057;
background: #fff;
outline: none;
}

.field-consumo input[readonly] {
background: #e9ecef;
color: #6c757d;
}

.stats-consumo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 1rem;
}

.stat-consumo {
background: #fff;
border-radius: 8px;
padding: .7rem .9rem;
border: 1px solid #e9ecef;
}

.stat-consumo .s-lbl {
font-size: 1.6rem;
color: #6c757d;
margin-bottom: 3px;
}

.stat-consumo .s-val {
font-size: 1.4rem;
font-weight: 600;
color: var(--azul);
}

.icon-consumo {
margin-top: 1.5rem;
text-align: center;
animation: float 3s ease-in-out infinite;
}

.icon-consumo i {
font-size: 2.63rem;
color: var(--azul);
}

.icon-consumo p {
font-size: 1.6rem;
color: #6c757d;
margin-top: 10px;
line-height: 1.5;
}

@media (max-width: 768px) {
.grid-consumo {
grid-template-columns: 1fr;
}
}


/* ============================================================
MÓDULO: LECTURA ACTUAL / MEDIDOR
============================================================ */
.medidor {
max-width: 900px;
margin: 100px auto 60px;
padding: 0 15px;
}

.medidor-header {
background: var(--azul);
padding: 1.2rem 1.8rem;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 3px solid var(--rojo);
}

.medidor-text h1 {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
margin: 0 0 2px;
}

.medidor-text p {
font-size: 1.6rem;
color: #7fa8cc;
margin: 0;
}

.body-medidor {
background: #fff;
border: 1px solid #dee2e6;
border-top: none;
border-radius: 0 0 12px 12px;
padding: 1.5rem;
}

.grid-medidor {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}

.card-medidor {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.4rem;
}

.card-medidor-right {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.4rem;
text-align: center;
}

.oc-section-lbl {
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #dee2e6;
}

.field-medidor label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: .4px;
}

.field-medidor input {
width: 100%;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 9px 12px;
font-size: 1.6rem;
background: #e9ecef;
color: #6c757d;
outline: none;
}

.oc-img-box {
border: 2px dashed #28a745;
border-radius: 12px;
padding: 20px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
transition: .3s;
color: #adb5bd;
font-size: 1.6rem;
}

.oc-img-box:hover {
background: rgba(40, 167, 69, .04);
}

.oc-img-box img {
max-width: 100%;
border-radius: 8px;
}

.oc-float {
animation: float 4s ease-in-out infinite;
}

.oc-float img {
max-width: 75%;
}

.oc-lectura {
margin-top: 1.2rem;
font-size: 1.4rem;
font-weight: 600;
color: var(--azul);
}

.oc-lectura span {
color: #e8960a;
}

.oc-badge {
display: inline-block;
background: #EAF3DE;
color: #27500A;
border-radius: 20px;
padding: 4px 14px;
font-size: 1.6rem;
font-weight: 600;
margin-top: 8px;
}

.oc-hint {
font-size: 1.6rem;
color: #6c757d;
margin-top: 12px;
line-height: 1.5;
}

@media (max-width: 640px) {
.grid-medidor {
grid-template-columns: 1fr;
}
}


/* ============================================================
MÓDULO: CONTÁCTANOS
============================================================ */
.map-container-section {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
border-radius: 15px;
transition: all .3s;
}

.map-container-section iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

.map-container-section:hover {
transform: scale(1.01);
box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
}

.form-card {
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
transition: all .3s;
}

.form-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.md-form input,
.md-form textarea {
border-radius: 8px;
transition: all .3s;
}

.md-form input:focus,
.md-form textarea:focus {
box-shadow: 0 0 10px rgba(170, 13, 46, .3);
border-color: var(--rojo);
}

.btn-primary {
background: var(--azul);
border: none;
border-radius: 30px;
padding: 10px 25px;
transition: all .3s;
}

.btn-primary:hover {
background: var(--rojo);
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}

.alerta-exito {
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: #fff;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
opacity: 0;
transform: translateY(-20px);
transition: all .4s;
z-index: 9999;
}

.alerta-exito.show {
opacity: 1;
transform: translateY(0);
}


/* ============================================================
MÓDULO: CONSULTAR CRÉDITO
============================================================ */
.search-credit {
max-width: 960px;
margin: 40px auto;
padding: 0 15px 3rem;
}

.header-credito {
background: var(--azul);
color: #fff;
padding: 1.2rem 1.8rem;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 3px solid var(--rojo);
}

.portal-credito h1 {
font-size: 2.0rem;
font-weight: 600;
color: #fff;
margin: 0 0 2px;
}

.portal-credito p {
font-size: 1.6rem;
color: #7fa8cc;
margin: 0;
}

.venta {
background: #fff;
border: 1px solid #dee2e6;
border-top: none;
border-radius: 0 0 12px 12px;
padding: 1.5rem;
}

.search-card {
background: #f8f9fa;
border-radius: 8px;
padding: 1.2rem 1.4rem;
margin-bottom: 1.2rem;
border: 1px solid #e9ecef;
}

.section-lbl {
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #dee2e6;
}

.search-row {
display: flex;
gap: 10px;
align-items: flex-end;
}

.field {
flex: 1;
}

.field label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: .4px;
}

.field input {
width: 100%;
border: 1px solid #ced4da;
border-radius: 6px;
padding: 8px 12px;
font-size: 1.6rem;
background: #fff;
color: #212529;
outline: none;
transition: border-color .15s;
}

.field input:focus {
border-color: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 49, 73, .1);
}

.field input[readonly] {
background: #f8f9fa;
color: #6c757d;
}

.btn-main {
background: var(--rojo);
color: #fff;
border: none;
height: 38px;
padding: 0 20px;
border-radius: 6px;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}

.btn-main:hover {
background: var(--azul);
}

.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 1.2rem;
}

.info-card {
background: #f8f9fa;
border-radius: 8px;
padding: .85rem 1rem;
border: 1px solid #e9ecef;
}

.info-card .ic-lbl {
font-size: 1.6rem;
color: #6c757d;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: .3px;
}

.info-card .ic-val {
font-size: 1.4rem;
font-weight: 600;
color: #212529;
}

.obs-card {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.2rem;
border: 1px solid #e9ecef;
font-size: 1.6rem;
color: #6c757d;
}

.obs-card .obs-lbl {
font-size: 1.6rem;
text-transform: uppercase;
letter-spacing: .3px;
margin-bottom: 6px;
color: #adb5bd;
font-weight: 600;
}

.obs-card .obs-txt {
font-size: 1.6rem;
color: #212529;
line-height: 1.5;
}

.summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 1.2rem;
}

.summary-card {
background: #E6F1FB;
border-radius: 8px;
padding: .7rem .9rem;
}

.summary-card .s-lbl {
font-size: 1.6rem;
color: #185FA5;
margin-bottom: 3px;
}

.summary-card .s-val {
font-size: 1.6rem;
font-weight: 600;
color: #0C447C;
}

.table-wrap {
overflow-x: auto;
border-radius: 8px;
border: 1px solid #dee2e6;
}

.table {
width: 100%;
border-collapse: collapse;
font-size: 1.3rem;
}

.table thead th {
background: var(--azul);
color: #fff;
padding: 9px 10px;
text-align: left;
font-size: 1.6rem;
white-space: nowrap;
}

.table tbody tr {
border-bottom: 1px solid #f0f0f0;
}

.oc-table tbody tr:hover {
background: #E6F1FB;
}

.table tbody td {
padding: 7px 10px;
white-space: nowrap;
}

.badge-a {
background: #EAF3DE;
color: #27500A;
padding: 2px 9px;
border-radius: 20px;
font-size: 1.6rem;
font-weight: 600;
}

.badge-p {
background: #FAEEDA;
color: #633806;
padding: 2px 9px;
border-radius: 20px;
font-size: 1.6rem;
font-weight: 600;
}

.badge-n {
background: #f8f9fa;
color: #6c757d;
padding: 2px 9px;
border-radius: 20px;
font-size: 1.6rem;
}

.alert {
background: #FAEEDA;
color: #633806;
border-radius: 6px;
padding: 8px 14px;
font-size: 1.6rem;
margin-bottom: 10px;
display: none;
}

.result-section {
display: none;
}

@media (max-width: 600px) {

.info-grid,
.summary {
grid-template-columns: repeat(2, 1fr);
}

.search-row {
flex-direction: column;
}

.btn-main {
width: 100%;
}
}


/* ============================================================
MÓDULO: DIAN / PANEL BODY
============================================================ */
    *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body.yv-page-dian {
            font-family: 'DM Sans', sans-serif;
            background: #F0F2F5;
            margin: 0;
            padding: 0;
        }


        .yv-header-dian {
            background: #D04439;
            padding: 14px 32px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .yv-logo-mark-dian {
            width: 36px;
            height: 36px;
            background: #D04439;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .yv-logo-mark-dian svg {
            display: block;
        }

        .yv-logo-text-dian {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 500;
            color: #fff;
            letter-spacing: 0.04em;
            line-height: 1.2;
        }

        .yv-logo-sub-dian {
            font-size: 1.6rem;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }


        .yv-body-dian {
            padding: 36px 24px 60px;
            background: #F0F2F5;
        }

        .yv-card-dian {
            background: #fff;
            border-radius: 16px;
            border: 0.5px solid rgba(0, 0, 0, 0.09);
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
            padding: 32px 36px;
            max-width: 660px;
            margin: 0 auto;
        }

        .yv-info-strip-dian {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: rgba(158, 30, 30, 0.07);
            border: 0.5px solid rgba(158, 30, 30, 0.25);
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 28px;
            font-size: 1.3rem;
            color: #D04439;
            line-height: 1.5;
        }

        .yv-info-strip-dian svg {
            flex-shrink: 0;
            margin-top: 1px;
        }

        .yv-section-label-dian {
            font-size: 1.3rem;
            font-weight: 600;
            color: #888;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin: 0 0 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .yv-section-label-dian::after {
            content: '';
            flex: 1;
            height: 0.5px;
            background: #E2E6EA;
        }


        .yv-field-dian {
            margin-bottom: 18px;
        }

        .yv-label-dian {
            display: block;
            font-size: 1.6rem;
            font-weight: 500;
            color: #1A2B3C;
            margin-bottom: 7px;
        }

        .yv-input-dian {
            width: 100%;
            height: 44px;
            border: 1px solid #D1D9E0;
            border-radius: 10px;
            padding: 0 14px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1.5rem;
            color: #942714;
            background: #fff;
            transition: border-color 0.15s, box-shadow 0.15s;
            outline: none;
            -webkit-appearance: none;
        }

        .yv-input-dian::placeholder {
            color: #A8B2BB;
        }

        .yv-input-dian:focus {
            border-color: #D04439;
            box-shadow: 0 0 0 3px rgba(158, 45, 30, 0.13);
        }

        .yv-row-dian {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }


        .yv-divider-dian {
            height: 0.5px;
            background: #E2E6EA;
            margin: 26px 0;
        }


        .yv-consent-box-dian {
            background: #F8FAFB;
            border-radius: 12px;
            border: 0.5px solid #D1D9E0;
            padding: 20px 22px;
            display: flex;
            gap: 22px;
            align-items: flex-start;
        }

        .yv-radio-group-dian {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex-shrink: 0;
            padding-top: 2px;
        }

        .yv-radio-label-dian {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .yv-radio-label-dian input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .yv-radio-custom-dian {
            width: 18px;
            height: 18px;
            border: 2px solid #D04439;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }

        .yv-radio-label-dian input:checked+.yv-radio-custom-dian::after {
            content: '';
            width: 8px;
            height: 8px;
            background: #D04439;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


        .yv-consent-text-dian {
            font-size: 1.5rem;
            color: #5A6A7A;
            line-height: 1.65;
            flex: 1;
        }

        .yv-consent-title-dian {
            font-size: 1.4rem;
            font-weight: 600;
            color: #1A2B3C;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }

        .yv-link-dian {
            color: #D04439;
            text-decoration: none;
            font-weight: 500;
        }

        .yv-link-dian:hover {
            text-decoration: underline;
        }

        .yv-btn-dian {
            width: 100%;
            height: 50px;
            background: #D04439;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1.4rem;
            font-weight: 500;
            cursor: pointer;
            letter-spacing: 0.02em;
            transition: background 0.15s, transform 0.1s;
            margin-top: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .yv-btn-dian:hover {
            background: #853118;
        }

        .yv-btn-dian:active {
            transform: scale(0.99);
        }

        .yv-btn-dian svg {
            flex-shrink: 0;
        }


        .fade-in {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 600px) {
            .yv-card-dian {
                padding: 24px 18px;
            }

            .yv-row-dian {
                grid-template-columns: 1fr;
            }

            .yv-consent-box-dian {
                flex-direction: column;
                gap: 14px;
            }
        }


/* ============================================================
MÓDULO: PQR
============================================================ */
.form-pqr {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
padding: 30px;
margin-bottom: 30px;
border-top: 5px solid var(--rojo);
}

.form-pqr h3 {
color: #333;
font-weight: 600;
margin-bottom: 25px;
font-size: 2.2rem;
}

.form-group label {
font-weight: 600;
color: #555;
}

.text-danger {
color: var(--rojo);
}

.btn-enviar {
background-color: var(--rojo);
border-color: var(--rojo);
border-radius: 30px;
font-weight: bold;
letter-spacing: 1px;
transition: all .3s;
}

.btn-color {
background-color: var(--rojo);
}

.btn-text {
color: #ddd;
}

.btn-enviar:hover {
background-color: var(--azul);
box-shadow: 0 5px 15px rgba(0, 49, 73, .3);
}

.form-control {
border-radius: 6px;
border: 1px solid #ced4da;
box-shadow: none;
}

.form-control:focus {
border-color: var(--azul-md);
box-shadow: 0 0 5px rgba(6, 101, 165, .2);
}

input[type=file] {
padding: 5px;
background: #f8f9fa;
}
/* ── Secciones ── */
.form-section {
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 20px 22px 16px;
margin-bottom: 20px;
background: #fafafa;
}
.form-section-title {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #b00020;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 7px;
}
.form-section-title::after {
content: '';
flex: 1;
height: 1px;
background: #e8e8e8;
}

/* ── Radio cards (Calidad, Asunto, Autorización) ── */
.radio-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.radio-grid.columna {
flex-direction: column;
gap: 8px;
}
.radio-card {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 1.5rem;
color: #444;
padding: 9px 16px;
border-radius: 8px;
border: 1.5px solid #ddd;
background: #fff;
transition: all .2s;
user-select: none;
}
.radio-card input[type="radio"] { display: none; }
.radio-card .radio-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #ccc;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
}
.radio-card .radio-dot::after {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #b00020;
opacity: 0;
transition: opacity .2s;
}
.radio-card:hover {
border-color: #b00020;
background: #fff5f7;
}
.radio-card.activo {
border-color: #b00020;
background: #fde8ec;
color: #7a0015;
font-weight: 600;
}
.radio-card.activo .radio-dot {
border-color: #b00020;
}
.radio-card.activo .radio-dot::after {
opacity: 1;
}

/* ── Radio Sí/No (autorización) ── */
.auth-radio-group { display: flex; gap: 12px; margin-top: 8px; }
.radio-card.si { color: #1a7a3c; border-color: #1a7a3c; }
.radio-card.no { color: #b00020; border-color: #b00020; }
.radio-card.si .radio-dot { border-color: #1a7a3c; }
.radio-card.si .radio-dot::after { background: #1a7a3c; }
.radio-card.si.activo { background: #e8f5ee; box-shadow: 0 0 0 3px rgba(26,122,60,.12); }
.radio-card.no.activo { background: #fde8ec; box-shadow: 0 0 0 3px rgba(176,0,32,.12); }

/* ── Campo "Otro" condicional ── */
.input-otro { margin-top: 10px; display: none; }
.input-otro.visible { display: block; }

/* ── Textarea con contador ── */
.textarea-wrap { position: relative; }
.char-counter {
position: absolute;
bottom: 8px; right: 10px;
font-size: 1.6rem; color: #aaa;
pointer-events: none;
}
.char-counter.warn { color: #e67e22; }
.char-counter.over { color: #b00020; font-weight: 700; }

/* ── Badges ── */
.badge-req {
font-size: 1.3rem;font-weight: 600;
padding: 2px 8px; border-radius: 20px;
}
.badge-req.obli { background:#fde8ec; color:#b00020; }
.badge-req.opci { background:#e8f4fd; color:#0665a5; }

/* ── Auth box ── */
.auth-box {
background: #fff8e1;
border-left: 3px solid #f0a500;
border-radius: 6px;
padding: 12px 14px;
font-size: 1.3rem;
color: #5a4000;
line-height: 1.65;
margin-bottom: 10px;
}

/* ── Aviso impresión ── */
.print-notice {
background: #fff3cd;
border-left: 4px solid #f0a500;
border-radius: 8px;
padding: 14px 16px;
font-size: 1.6rem;
color: #5a4000;
margin-top: 20px;
}
.print-notice a { color: #b00020; font-weight: 600; }

/* ── RESPONSIVE MÓVIL ── */
@media (max-width: 768px) {
.section-text,
.title-revisiones,
.bar-regulatorio {
display: block !important;
text-align: center;
padding: 0 16px;
}
.title-revisiones {
font-size: 1.4rem !important;
}
.form-pqr {
padding: 18px 14px;
}
.radio-grid {
gap: 8px;
}
.radio-card {
font-size: 1.6rem;
padding: 8px 12px;
}
.auth-radio-group {
flex-direction: column;
gap: 8px;
}
/* Accesibilidad en móvil */
#accesibilidadBtn {
left: 12px !important;
bottom: 12px !important;
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
}
#accesibilidadPanel {
left: 12px !important;
bottom: 66px !important;
min-width: 160px !important;
}
.col-sm-6 { width: 100%; }
.btn-enviar { font-size: 1.4rem; }
.print-notice { font-size: 1.6rem; }
}

/* ============================================================
MÓDULO: SERVICIOS
============================================================ */
.img-card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
transition: transform .4s;
width: 100%;
}

.img-card:hover {
transform: scale(1.05);
}


/* ============================================================
MÓDULO: VENTA / CONSULTA VENTA
============================================================ */
.search-venta {
max-width: 860px;
margin: 100px auto 60px;
padding: 0 15px;
}

.header-venta {
background: var(--azul);
padding: 1.2rem 1.8rem;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 3px solid var(--rojo);
}

.portal-venta h1 {
font-size: 2.0rem;
font-weight: 600;
color: #fff;
margin: 0 0 2px;
}

.portal-venta p {
font-size: 1.6rem;
color: #7fa8cc;
margin: 0;
}

.content-venta {
background: #fff;
border: 1px solid #dee2e6;
border-top: none;
border-radius: 0 0 12px 12px;
padding: 2.5rem;
}

.grid-venta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}

.form-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--azul);
margin-bottom: 6px;
}

.form-sub {
font-size: 1.6rem;
color: #6c757d;
margin-bottom: 1.5rem;
}

.field-venta label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: .4px;
}

.field-venta input {
width: 100%;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 11px 14px;
font-size: 1.4rem;
color: #212529;
outline: none;
transition: border-color .15s, box-shadow .15s;
}

.field-venta input:focus {
border-color: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 49, 73, .1);
}

.btn-venta {
width: 100%;
margin-top: 14px;
padding: 12px;
background: var(--rojo);
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
letter-spacing: .3px;
transition: background .15s;
}

.btn-venta:hover {
background: var(--azul);
}

.alert-err {
background: #FCEBEB;
color: #791F1F;
border-radius: 8px;
padding: 10px 14px;
font-size: 1.6rem;
margin-top: 12px;
display: none;
border-left: 3px solid var(--rojo);
}

.result {
background: #EAF3DE;
border-radius: 8px;
padding: 1rem 1.2rem;
margin-top: 14px;
display: none;
border-left: 3px solid #3B6D11;
}

.result .lbl {
font-size: 1.6rem;
color: #3B6D11;
text-transform: uppercase;
letter-spacing: .3px;
margin-bottom: 4px;
font-weight: 600;
}

.result .val {
font-size: 1.63rem;
font-weight: 700;
color: #27500A;
}

.result .sub {
font-size: 1.6rem;
color: #3B6D11;
margin-top: 4px;
}

.img-venta {
text-align: center;
animation: float 4s ease-in-out infinite;
}

.img-venta img {
max-width: 80%;
transition: transform .3s;
}

.img-venta img:hover {
transform: scale(1.04);
}

@media (max-width: 640px) {
.grid-venta {
grid-template-columns: 1fr;
}

.img-venta {
display: none;
}
}


/* ============================================================
MÓDULO: RECONEXIÓN
============================================================ */
.page-title {
color: var(--rojo);
font-weight: 700;
font-size: 1.8rem;
text-align: center;
margin: 40px 0 30px;
}

.info-box {
background: #fff;
border-radius: 12px;
padding: 24px;
border-left: 4px solid var(--rojo);
margin-bottom: 20px;
font-size: 1.6rem;
color: #444;
line-height: 1.7;
}

.img-virtual {
display: block;
margin: 20px auto 0;
max-width: 78%;
border-radius: 10px;
}

.form-card {
background: #fff;
border-radius: 12px;
padding: 28px 30px;
border-top: 5px solid var(--rojo);
box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

.form-card h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}

.form-card .subtitle {
font-size: 1.6rem;
color: #888;
margin-bottom: 22px;
}

.form-card .subtitle span {
color: var(--rojo);
}

.form-group label {
font-weight: 600;
font-size: 1.6rem;
color: #444;
margin-bottom: 4px;
display: block;
}

.form-group label .req {
color: var(--rojo);
}

.file-zone {
background: #f5f8fc;
border: 1.5px dashed #b0bec5;
border-radius: 8px;
padding: 16px 14px;
text-align: center;
cursor: pointer;
position: relative;
transition: border-color .18s, background .18s;
}

.file-zone:hover {
border-color: var(--azul-md);
background: #eef4fb;
}

.file-zone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}

.file-zone .file-label-main {
font-size: 1.6rem;
color: #555;
margin-bottom: 3px;
}

.file-zone .file-label-main strong {
color: var(--azul-md);
}

.file-zone small {
font-size: 1.6rem;
color: #999;
}

.file-zone .file-icon {
font-size: 2.2rem;
margin-bottom: 4px;
}

.btn-enviar {
background: linear-gradient(135deg, var(--rojo) 0%, #d4143a 100%);
color: #fff;
border: none;
border-radius: 8px;
font-weight: 700;
font-size: 1.6rem;
padding: 11px 0;
width: 100%;
letter-spacing: .04em;
transition: opacity .18s, transform .15s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
}

.btn-enviar:hover {
opacity: .88;
transform: translateY(-1px);
color: #fff;
}


/* ============================================================
ANIMACIÓN FLOTANTE (compartida)
============================================================ */
@keyframes float {

0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-10px);
}
}