/* ============================================================
FNG Financiamiento — MiPyme Negocia LATAM
Paleta base: azul oscuro #0a1f44 · acento #3eb9ca · alt bg #f7f7f7
============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
--fng-azul: #0a1f44;
--fng-acento: #3eb9ca;
--fng-verde: #5acea7;
--fng-blanco: #f7f7f7;
--fng-blanco: #ffffff;
--fng-texto: #000000;
--fng-muted: #666666;
--fng-radius: 14px;
--fng-gap: 40px;
--fng-content-max: 1180px;
--fng-content-wide-max: 1280px;
}

/* ── Contenedor raíz ────────────────────────────────────────── */
.fng-page {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--fng-texto);
background: var(--fng-blanco);
overflow-x: hidden;
padding: 0 10px 32px;
font-size: 18px; /* Aumentado de 16px por defecto */
}

/* ── HERO ───────────────────────────────────────────────────── */
.fng-hero {
position: relative;
width: 100vw;
max-width: none;
margin: 0 calc(50% - 50vw) 22px;
aspect-ratio: 1642 / 610;
background-color: #15356d;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
overflow: hidden;
}

.fng-hero__logos {
display: none;
}

.fng-hero__logo {
max-height: 64px;
object-fit: contain;
}

.fng-hero__logo-sep {
color: rgba(255, 255, 255, 0.35);
font-size: 24px; /* Aumentado de 22px */
font-weight: 300;
}

.fng-hero__text {
position: absolute;
right: 20.5%;
bottom: 10.5%;
}

.fng-hero__title {
font-size: clamp(24px, 3.5vw, 34px); /* Aumentado: antes 20px-28px */
font-weight: 700; /* Cambiado de 00 a 700 para mejor legibilidad */
line-height: 1.3;
margin: 0 0 12px;
}

.fng-hero__accent {
color: var(--fng-acento);
}

.fng-hero__desc {
font-size: 16px; /* Aumentado de 14px */
line-height: 1.7;
opacity: .88;
margin: 0 0 20px;
}

/* ── Botones ────────────────────────────────────────────────── */
.fng-btn {
display: inline-block;
padding: 14px 32px;
border-radius: 40px;
font-weight: 700;
font-size: 18px; /* Aumentado de 16px */
line-height: 1.2;
text-decoration: none;
transition: opacity .25s, background .25s;
cursor: pointer;
}

.fng-btn--cta {
background: var(--fng-acento);
color: #fff;
border: none;
}

.fng-btn--cta:hover {
opacity: .85;
color: #fff;
}

.fng-btn--outline {
background: rgba(255, 255, 255, .15);
color: #fff;
border: 1.5px solid #fff;
flex-shrink: 0;
}

.fng-btn--outline:hover {
background: rgba(255, 255, 255, .25);
color: #fff;
}

/* ── Secciones ──────────────────────────────────────────────── */
.fng-section {
padding: 30px 0;
}

.fng-section--alt {
background: var(--fng-blanco);
}

.fng-divider {
height: 5px;
background: var(--fng-acento);
width: min(100%, var(--fng-content-max));
margin: 0 auto;
/* opacity: .25; */
}

/* ── Layout dos columnas ─────────────────────────────────────── */
.fng-twocol {
display: flex;
align-items: stretch;
gap: var(--fng-gap);
flex-wrap: wrap;
width: min(100%, var(--fng-content-max));
margin: 0 auto;
}

.fng-twocol--reverse {
flex-direction: row-reverse;
}

.fng-twocol__copy {
flex: 1;
min-width: 260px;
display: flex;
flex-direction: column;
justify-content: center;
}

.fng-twocol__img {
flex: 1;
min-width: 260px;
}

.fng-twocol__img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--fng-radius);
display: block;
}

/* ── Tipografía de secciones ─────────────────────────────────── */
.fng-tag {
display: inline-block;
background: #e0f4fa;
color: #0a7c99;
font-size: 13px; /* Aumentado de 11px */
font-weight: 700;
letter-spacing: .6px;
padding: 5px 14px; /* Ajustado de 4px 12px */
border-radius: 20px;
margin-bottom: 12px; /* Aumentado de 10px */
text-transform: uppercase;
}

.fng-section__title {
font-size: clamp(26px, 3.2vw, 36px); /* Aumentado: antes 22px-30px */
font-weight: 700;
color: var(--fng-texto);
line-height: 1.35;
margin: 0 0 18px; /* Aumentado de 16px */
position: relative;
padding-bottom: 14px; /* Aumentado de 12px */
}

.fng-section__title::after {
content: '';
display: block;
width: 500px; /* Aumentado de 44px */
height: 4px; /* Aumentado de 3px */
background: var(--fng-acento);
position: absolute;
bottom: 0;
left: 0;
border-radius: 2px;
}

.fng-twocol__copy p {
font-size: 18px; /* Aumentado de 16px */
line-height: 1.85;
color: #444;
margin: 0;
}

/* ── Lista de ventajas ──────────────────────────────────────── */
.fng-list {
list-style: none;
padding: 0;
margin: 4px 0 0;
}

.fng-list li {
font-size: 18px; /* Aumentado de 16px */
line-height: 1.75;
color: var(--fng-texto);
padding: 10px 0 10px 28px; /* Aumentado padding de 8px a 10px, left de 24px a 28px */
position: relative;
/* border-bottom: 1px solid rgba(62, 185, 202, .2); */
}

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

.fng-list li::before {
content: '•';
color: var(--fng-muted);
font-weight: 700;
position: absolute;
left: 0;
top: 8px; /* Ajustado de 6px */
font-size: 20px; /* Aumentado de 18px */
line-height: 1;
}

.fng-link {
color: var(--fng-acento);
font-weight: 600;
font-size: 17px; /* Añadido tamaño específico */
text-decoration: none;
}

.fng-link:hover {
text-decoration: underline;
}

/* ── Banner alianzas ─────────────────────────────────────────── */
.fng-alianza {
width: min(100%, var(--fng-content-wide-max));
margin: 28px auto 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 40px 0;
min-height: 200px;
border-radius: 18px;
}

/* ── Texto adicional para banners y contenido extra ─────────── */
.fng-alianza p,
.fng-alianza span {
font-size: 18px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.fng-page {
font-size: 16px; /* Un poco más pequeño en móvil pero aún más grande que antes */
}

.fng-hero {
width: 100vw;
margin: 0 calc(50% - 50vw) 22px;
aspect-ratio: auto;
min-height: 240px;
background-size: cover;
background-position: 34% center;
}

.fng-hero__logos {
justify-content: center;
}

.fng-hero__text {
left: 50%;
right: auto;
bottom: 16px;
transform: translateX(-50%);
width: calc(100% - 32px);
display: flex;
justify-content: center;
}

.fng-hero__title {
font-size: clamp(22px, 4vw, 30px);
}

.fng-hero__desc {
font-size: 15px;
}

.fng-section {
padding: 28px 0;
}

.fng-divider {
width: 100%;
}

.fng-twocol,
.fng-twocol--reverse {
flex-direction: column;
}

.fng-twocol__img {
width: 100%;
min-width: 0;
}

.fng-twocol__img img {
height: auto;
}

.fng-alianza {
min-height: 160px;
padding: 28px 16px;
}

.fng-btn {
width: min(100%, 320px);
text-align: center;
padding: 12px 22px; /* Ajustado de 11px 20px */
font-size: 16px; /* Aumentado de 14px */
}

.fng-section__title {
font-size: clamp(24px, 3.8vw, 32px);
}

.fng-twocol__copy p {
font-size: 16px;
}

.fng-list li {
font-size: 16px;
}
}

@media (max-width: 480px) {
.fng-btn {
width: min(100%, 260px);
padding: 10px 18px; /* Aumentado de 9px 16px */
font-size: 14px; /* Aumentado de 12px */
border-radius: 28px;
}

.fng-section__title {
font-size: 22px;
}

.fng-twocol__copy p {
font-size: 15px;
}

.fng-list li {
font-size: 15px;
}
}