/*
 * Solufin — Soluciones Financieras y Fiscales
 * Diseno del sitio. Tema hijo de Astra.
 * Desarrollado por Codesmic · codesmic.com
 *
 * Este archivo salio del diseño aprobado por el cliente.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --vino: #4d0e12;        /* rojo vino del hero real */
    --vino-dark: #350a0d;
    --rojo: #C00000;        /* rojo de marca (S roja del logo) */
    --rojo-bright: #D80000;
    --carbon: #2A2A2A;      /* gris oscuro (S gris del logo) */
    --carbon-dark: #1c1c1c;
    --gris: #787878;
    --bg: #F7F7F8;
    --text: #2A2A2A;
    --muted: #6B6B6B;
    --border: #E4E4E7;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════ HEADER ══════════════ */
header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
nav {
    max-width: 1280px; margin: 0 auto;
    padding: 0.85rem 2rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; }
.logo img { height: 44px; width: auto; }
/* El margin: 0 no es cosmetico. Astra da 'margin: 0 0 24px 48px' a todo <ul>,
   y ese margen inferior descentra el menu 12px hacia arriba respecto del logo
   y del boton, que si quedan centrados. */
.nav-menu { display: flex; gap: 1.6rem; list-style: none; align-items: center; margin: 0; }
.nav-menu a {
    color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.9rem;
    transition: color 0.2s ease; position: relative; white-space: nowrap;
}
.nav-menu a:hover { color: var(--rojo); }
.nav-menu a::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 0; height: 2px; background: var(--rojo); transition: width 0.3s ease;
}
.nav-menu a:hover::after { width: 100%; }
.cta-header {
    background: var(--rojo); color: white;
    padding: 0.6rem 1.3rem; border-radius: 6px;
    text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    transition: all 0.2s ease; cursor: pointer; border: none;
}
.cta-header:hover { background: var(--rojo-bright); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(192,0,0,0.35); }

/* ══════════════ HERO ══════════════ */
.hero {
    background-color: var(--vino);
    background-image:
        linear-gradient(90deg, rgba(53,10,13,0.92) 0%, rgba(77,14,18,0.78) 40%, rgba(77,14,18,0.25) 75%, transparent 100%),
        url("../img/hero/hero-banner.jpg");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    color: white; padding: 7rem 2rem 7.5rem; position: relative; overflow: hidden;
    min-height: 560px;
}
@media (max-width: 768px) {
    .hero {
        background-image:
            linear-gradient(180deg, rgba(53,10,13,0.85) 0%, rgba(77,14,18,0.7) 100%),
            url("../img/hero/hero-banner.jpg");
        background-position: center center;
    }
}
.hero-content { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; }
.hero-inner { max-width: 620px; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.3rem;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--rojo); }
.hero h1 {
    /* El color va declarado aqui y no heredado de .hero a proposito: Astra
       declara un color para h1, y un valor explicito del padre siempre le gana
       a la herencia, sin importar la especificidad. Sin esta linea el titulo
       sale gris oscuro sobre el vino y desaparece. */
    color: #fff;
    font-family: 'Poppins', sans-serif; font-size: 3.4rem; font-weight: 800;
    line-height: 1.08; margin-bottom: 1.3rem; letter-spacing: -1.5px;
}
.hero h1 span { color: #ff5a5a; }
.hero p {
    font-size: 1.2rem; color: rgba(255,255,255,0.82);
    margin-bottom: 2.2rem; font-weight: 300; max-width: 520px; line-height: 1.7;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta-primary {
    background: var(--rojo); color: white;
    padding: 1rem 2.4rem; border-radius: 8px;
    text-decoration: none; font-weight: 600; font-size: 1rem;
    cursor: pointer; border: none; transition: all 0.3s ease; display: inline-block;
}
.cta-primary:hover { background: var(--rojo-bright); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(192,0,0,0.45); }
.cta-secondary {
    background: transparent; color: white;
    padding: 1rem 2.4rem; border: 2px solid rgba(255,255,255,0.35);
    border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem;
    cursor: pointer; transition: all 0.3s ease; display: inline-block;
}
.cta-secondary:hover { background: white; color: var(--vino); border-color: white; }

/* ══════════════ CONÓCENOS + TRAYECTORIA ══════════════ */
.about {
    max-width: 1280px; margin: 0 auto; padding: 5rem 2rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rojo); margin-bottom: 0.8rem;
}
.about-block h2 {
    font-family: 'Poppins', sans-serif; font-size: 2.2rem; font-weight: 700;
    color: var(--carbon); margin-bottom: 1.2rem; letter-spacing: -0.5px;
}
.about-block p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.about-block p strong { color: var(--text); font-weight: 600; }
.trayectoria-card {
    background: linear-gradient(155deg, #1f1f1f 0%, var(--carbon) 60%, #2f1517 100%);
    color: white; padding: 2.5rem 2.4rem; border-radius: 20px;
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4);
}
.trayectoria-card::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(192,0,0,0.28) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.trayectoria-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 60%;
    background: linear-gradient(180deg, var(--rojo) 0%, transparent 100%);
}
.trayectoria-head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.2rem; position: relative; z-index: 1; }
.trayectoria-years {
    font-family: 'Poppins', sans-serif; font-size: 4.6rem; font-weight: 800;
    color: var(--rojo); line-height: 0.9; letter-spacing: -3px;
    background: linear-gradient(135deg, #ff5050 0%, var(--rojo) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.trayectoria-meta { padding-bottom: 0.4rem; }
.trayectoria-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.15rem; }
.trayectoria-card .label { font-size: 1.15rem; font-weight: 700; color: white; font-family: 'Poppins', sans-serif; }
.trayectoria-card .lead { color: rgba(255,255,255,0.75); font-size: 0.97rem; line-height: 1.65; position: relative; z-index: 1; margin-bottom: 1.6rem; }
.trayectoria-card .lead strong { color: #ff8585; font-weight: 600; }
.trayectoria-pillars {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
    position: relative; z-index: 1;
    padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.08);
}
.pillar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.2rem; transition: transform 0.25s ease;
}
.pillar:hover { transform: translateX(3px); }
.pillar-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: rgba(192,0,0,0.15);
    border: 1px solid rgba(192,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
.pillar-icon svg { width: 16px; height: 16px; stroke: #ff7575; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillar span { font-size: 0.85rem; color: rgba(255,255,255,0.88); font-weight: 500; line-height: 1.25; }

/* ══════════════ SECTION HEADER ══════════════ */
.section-header { text-align: center; max-width: 1280px; margin: 0 auto 3.5rem; }
.section-header .eyebrow { display: block; }
.section-header h2 {
    font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 700;
    color: var(--carbon); margin-bottom: 1rem; letter-spacing: -0.5px;
}
.section-header.on-dark h2 { color: white; }
.section-header p { font-size: 1.1rem; color: var(--muted); max-width: 620px; margin: 0 auto; }
.section-header.on-dark p { color: rgba(255,255,255,0.7); }

/* ══════════════ SERVICIOS ══════════════ */
.services { background: white; padding: 5rem 2rem; }
.services-grid {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.4rem;
    /* Sin esto, al abrir una tarjeta las demas de su fila crecen igual y quedan
       con un hueco enorme: por defecto el grid estira todas al alto de la mas
       alta. Asi cada una conserva su propio alto. */
    align-items: start;
}
.service-card {
    background: white; border: 1px solid var(--border); border-radius: 16px;
    padding: 2.2rem 2rem; transition: all 0.35s cubic-bezier(.2,.8,.2,1); cursor: pointer;
    position: relative; overflow: hidden; text-decoration: none; display: block;
}
.service-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(192,0,0,0.025) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.35s ease;
}
.service-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--rojo) 0%, #ff6b6b 100%);
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.service-card:hover { border-color: rgba(192,0,0,0.25); box-shadow: 0 18px 40px -12px rgba(77,14,18,0.18); transform: translateY(-6px); }
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { transform: scaleX(1); }
.service-num {
    position: absolute; top: 1.4rem; right: 1.6rem;
    font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 1.5px; color: var(--muted); opacity: 0.45;
}
.service-icon {
    width: 58px; height: 58px; border-radius: 14px;
    background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.3rem; position: relative; transition: all 0.35s ease;
    box-shadow: 0 1px 0 rgba(192,0,0,0.06) inset, 0 6px 16px -8px rgba(192,0,0,0.18);
}
.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--rojo) 0%, #a30000 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 10px 24px -8px rgba(192,0,0,0.5);
}
.service-icon svg { width: 28px; height: 28px; color: var(--rojo); transition: color 0.35s ease; position: relative; z-index: 1; }
.service-icon svg .icon-fill { fill: var(--rojo); fill-opacity: 0.15; transition: all 0.35s ease; }
.service-icon svg .icon-stroke { stroke: var(--rojo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.35s ease; }
.service-card:hover .service-icon svg .icon-fill { fill: #ffffff; fill-opacity: 0.2; }
.service-card:hover .service-icon svg .icon-stroke { stroke: #ffffff; }
.service-card h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.22rem; font-weight: 600;
    color: var(--carbon); margin-bottom: 0.6rem; position: relative; z-index: 1;
}
.service-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; position: relative; z-index: 1; }
/* ── Servicios: tarjetas desplegables ──
 * Cada tarjeta era un <a href="#servicios">, o sea un enlace a la seccion donde
 * ya estabas: el click no hacia nada y el "Conocer mas" prometia algo que no
 * pasaba. Ahora abre la descripcion completa del servicio.
 */
.service-card > summary { display: block; list-style: none; cursor: pointer; }
.service-card > summary::-webkit-details-marker { display: none; }
.service-card > summary::marker { content: ''; }

/* El header es sticky: sin esto la tarjeta abierta queda debajo de la barra. */
.service-card { scroll-margin-top: 92px; }

.service-arrow__cerrar { display: none; }
.service-card[open] .service-arrow__abrir { display: none; }
.service-card[open] .service-arrow__cerrar { display: inline; }

.service-card[open] {
    border-color: rgba(192,0,0,0.35);
    box-shadow: 0 18px 40px -12px rgba(77,14,18,0.2);
}
.service-card[open]::after { transform: scaleX(1); }
/* Abierta no se levanta con el mouse: al cambiar de alto, el salto se siente mal. */
.service-card[open]:hover { transform: none; }

.service-card__detail {
    margin-top: 1.1rem; padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    position: relative; z-index: 1;
}
.service-card__detail p {
    color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.1rem;
}
.service-card__cta {
    display: inline-block; background: var(--rojo); color: white;
    padding: 0.65rem 1.3rem; border-radius: 8px;
    text-decoration: none; font-weight: 600; font-size: 0.88rem;
    /* Sin esto la flecha se va sola al segundo renglon en pantallas angostas. */
    white-space: nowrap;
    transition: all 0.25s ease;
}
.service-card__cta:hover {
    background: var(--rojo-bright); transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(192,0,0,0.35);
}

/* Resalte del formulario al llegar desde "Me interesa".
 * El salto al ancla es silencioso: sin esto el usuario aterriza en el
 * formulario sin darse cuenta de que ya llego a donde tiene que escribir.
 */
@keyframes solufin-resalte {
    0%   { box-shadow: 0 0 0 0 rgba(192,0,0,0.5); }
    70%  { box-shadow: 0 0 0 18px rgba(192,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(192,0,0,0); }
}
.contact-form.is-resaltado {
    animation: solufin-resalte 1.3s ease-out 2;
    border-color: rgba(192,0,0,0.45);
}
/* A quien pidio menos movimiento se le marca el borde, sin latido. */
@media (prefers-reduced-motion: reduce) {
    .contact-form.is-resaltado { animation: none; }
}

.service-arrow {
    margin-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 600; color: var(--rojo);
    transition: all 0.3s ease; position: relative; z-index: 1;
}
/* El efecto de aparecer va solo donde hay puntero. Estaba en opacity 0 con
   hover, y en telefono no hay hover: el "Conocer mas" quedaba invisible y
   nadie sabia que la tarjeta abre. */
@media (hover: hover) {
    .service-arrow { opacity: 0; transform: translateX(-6px); }
    .service-card:hover .service-arrow,
    .service-card[open] .service-arrow { opacity: 1; transform: translateX(0); }
}

/* ══════════════ SUMAPAY ══════════════ */
.sumapay { padding: 6rem 2rem; background: var(--bg); position: relative; overflow: hidden; }
.sumapay::before {
    content: ''; position: absolute; top: -8%; right: -6%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(192,0,0,0.07) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.sumapay::after {
    content: ''; position: absolute; bottom: -10%; left: -8%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(77,14,18,0.05) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.sumapay-intro {
    max-width: 1280px; margin: 0 auto 4.5rem;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;
    position: relative; z-index: 1;
}
.sumapay-intro .eyebrow { color: var(--rojo); }
.sumapay-intro h2 {
    font-family: 'Poppins', sans-serif; font-size: 2.8rem; font-weight: 800;
    color: var(--carbon); margin-bottom: 1.2rem; letter-spacing: -1.2px; line-height: 1.05;
}
.sumapay-intro .lead {
    font-size: 1.18rem; color: var(--vino); font-weight: 600;
    margin-bottom: 1rem; line-height: 1.4;
}
.sumapay-intro p { color: var(--muted); font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.8rem; }
.sumapay-hero-img {
    position: relative; display: flex; justify-content: center; align-items: center;
    min-height: 440px;
}
.sumapay-hero-img::before {
    content: ''; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
    width: 280px; height: 50px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.25) 0%, transparent 70%);
    filter: blur(20px); z-index: 0;
}
.sumapay-hero-img::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(192,0,0,0.12) 0%, rgba(192,0,0,0.04) 40%, transparent 70%);
    border-radius: 50%; z-index: 0;
}
.sumapay-hero-img img {
    max-width: 360px; width: 100%; height: auto; position: relative; z-index: 1;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.22));
}
.sumapay-modes {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    position: relative; z-index: 1;
}
.mode-card {
    background: white; border: 1px solid var(--border); border-radius: 20px;
    padding: 2rem 1.8rem 2.2rem; text-align: center;
    transition: all 0.35s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden;
}
.mode-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--rojo) 0%, #ff6b6b 100%);
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.mode-card:hover {
    border-color: rgba(192,0,0,0.25);
    box-shadow: 0 22px 50px -18px rgba(77,14,18,0.22);
    transform: translateY(-6px);
}
.mode-card:hover::before { transform: scaleX(1); }
.mode-num {
    font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 2.5px; color: var(--muted); opacity: 0.5;
    margin-bottom: 0.8rem; display: block;
}
.mode-card-img {
    position: relative; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.mode-card-img::before {
    content: ''; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 140px; height: 30px;
    background: radial-gradient(ellipse, rgba(192,0,0,0.2) 0%, transparent 70%);
    filter: blur(14px);
}
.mode-card img {
    width: 160px; height: 160px; object-fit: contain;
    position: relative; z-index: 1; transition: transform 0.4s ease;
}
.mode-card:hover img { transform: scale(1.06); }
.mode-card h4 {
    font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 700;
    color: var(--rojo); margin-bottom: 0.5rem;
}
.mode-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.65; }

/* SumaPay features (4 beneficios técnicos) */
.sumapay-features-wrap { max-width: 1280px; margin: 4.5rem auto 0; position: relative; z-index: 1; }
.sumapay-features-head { text-align: center; margin-bottom: 2rem; }
.sumapay-features-head .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--rojo); margin-bottom: 0.5rem; display: block;
}
.sumapay-features-head h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.7rem; font-weight: 700;
    color: var(--carbon); letter-spacing: -0.5px;
}
.sumapay-features {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.feature-pill {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 1.15rem 1.2rem; background: white;
    border: 1px solid var(--border); border-radius: 14px;
    transition: all 0.3s ease;
}
.feature-pill:hover {
    border-color: rgba(192,0,0,0.3);
    box-shadow: 0 10px 24px -10px rgba(77,14,18,0.18);
    transform: translateY(-2px);
}
.feature-icon {
    width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
    display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; stroke: var(--rojo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-pill p { font-size: 0.88rem; font-weight: 500; color: var(--carbon); line-height: 1.4; margin: 0; }
.feature-pill p strong { color: var(--rojo); font-weight: 700; }

/* Trust strip (12 meses + 24 hrs + VISA + Mastercard) */
.sumapay-trust {
    max-width: 1280px; margin: 2rem auto 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--carbon) 0%, #2f1517 100%);
    border-radius: 16px; position: relative; z-index: 1;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.3);
}
.trust-group { display: flex; align-items: center; gap: 1rem; }
.trust-num {
    font-family: 'Poppins', sans-serif; font-size: 2.6rem; font-weight: 800;
    line-height: 1; letter-spacing: -1.5px;
    background: linear-gradient(135deg, #ff5050 0%, var(--rojo) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; display: flex; align-items: baseline;
}
.trust-num small {
    font-size: 0.95rem; -webkit-text-fill-color: var(--rojo);
    color: var(--rojo); margin-left: 0.25rem; font-weight: 700;
}
.trust-text strong {
    color: white; font-size: 1rem; font-family: 'Poppins', sans-serif;
    font-weight: 700; display: block; margin-bottom: 0.1rem;
}
.trust-text span { color: rgba(255,255,255,0.6); font-size: 0.82rem; }
.trust-divider { width: 1px; height: 46px; background: rgba(255,255,255,0.12); }
.trust-cards { display: flex; align-items: center; gap: 1rem; }
.trust-cards-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.trust-cards-logos { display: flex; gap: 0.9rem; align-items: center; }
.trust-cards-logos svg { height: 28px; width: auto; }
.visa-text {
    font-family: 'Poppins', sans-serif; font-weight: 800; font-style: italic;
    font-size: 1.45rem; color: white; letter-spacing: -1.5px; line-height: 1;
    padding: 0.15rem 0;
}
.visa-text-accent { color: #f9a51a; }

/* SumaPay "En acción" — banner con foto real */
.sumapay-scene {
    max-width: 1280px; margin: 4rem auto 0;
    border-radius: 22px; overflow: hidden;
    position: relative; z-index: 1; min-height: 380px;
    background-color: var(--vino);
    background-image:
        linear-gradient(95deg, rgba(53,10,13,0.95) 0%, rgba(77,14,18,0.7) 50%, rgba(77,14,18,0.15) 100%),
        url('../img/hero/sumapay-banner.jpg');
    background-size: cover; background-position: center right;
    color: white; display: flex; align-items: center;
    padding: 3rem 3.5rem;
    box-shadow: 0 24px 50px -18px rgba(77,14,18,0.4);
}
.sumapay-scene-content { max-width: 500px; position: relative; z-index: 1; }
.sumapay-scene .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: #ff8585; margin-bottom: 0.6rem; display: block;
}
.sumapay-scene h3 {
    font-family: 'Poppins', sans-serif; font-size: 2.1rem; font-weight: 800;
    margin-bottom: 1.1rem; letter-spacing: -0.7px; line-height: 1.1; color: white;
}
.sumapay-scene p { color: rgba(255,255,255,0.85); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.6rem; }
.sumapay-scene .cta-primary { background: white; color: var(--vino); }
.sumapay-scene .cta-primary:hover { background: var(--rojo); color: white; }

/* Banda "Para cualquier giro" */
.sumapay-segments-wrap { max-width: 1280px; margin: 4rem auto 0; position: relative; z-index: 1; }
.sumapay-segments {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem;
}
.segment {
    text-align: center; padding: 1.6rem 1rem 1.4rem;
    background: white; border: 1px solid var(--border); border-radius: 14px;
    transition: all 0.3s ease;
}
.segment:hover {
    border-color: rgba(192,0,0,0.3); transform: translateY(-3px);
    box-shadow: 0 10px 22px -10px rgba(77,14,18,0.18);
}
.segment-icon {
    width: 44px; height: 44px; margin: 0 auto 0.7rem;
    border-radius: 11px;
    background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
    display: flex; align-items: center; justify-content: center;
}
.segment-icon svg { width: 22px; height: 22px; stroke: var(--rojo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.segment span { font-size: 0.88rem; font-weight: 600; color: var(--carbon); }

/* ══════════════ FÁCILCARD ══════════════ */
.facilcard {
    padding: 6rem 2rem;
    background: linear-gradient(155deg, var(--carbon-dark) 0%, #1a1a1a 50%, #2a0e10 100%);
    color: white; position: relative; overflow: hidden;
}
.facilcard::before {
    content: ''; position: absolute; top: -10%; right: -5%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(192,0,0,0.18) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.facilcard::after {
    content: ''; position: absolute; bottom: -10%; left: -8%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}

/* Hero asimétrico FacilCard */
.facilcard-intro {
    max-width: 1280px; margin: 0 auto 4.5rem;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: center;
    position: relative; z-index: 1;
}
.facilcard-intro-content { max-width: 520px; }
.facilcard-intro .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: #ff7a7a; margin-bottom: 0.7rem; display: block;
}
.facilcard-intro h2 {
    font-family: 'Poppins', sans-serif; font-size: 2.7rem; font-weight: 800;
    color: white; margin-bottom: 1.1rem; letter-spacing: -1.1px; line-height: 1.08;
}
.facilcard-intro h2 em { color: #ff7a7a; font-style: normal; }
.facilcard-intro .lead {
    font-size: 1.18rem; color: rgba(255,255,255,0.92); font-weight: 600;
    margin-bottom: 0.9rem; line-height: 1.5;
}
.facilcard-intro p { color: rgba(255,255,255,0.62); font-size: 1rem; line-height: 1.75; margin-bottom: 1.7rem; }

/* Imagen tarjeta con tratamiento */
.facilcard-intro-img {
    position: relative; display: flex; justify-content: center; align-items: center;
    min-height: 420px; border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.facilcard-intro-img img {
    width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block;
    filter: saturate(0.55) brightness(0.85) contrast(1.05);
}
.facilcard-intro-img::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(28,28,28,0.6) 0%, rgba(192,0,0,0.18) 100%);
    pointer-events: none;
}
.facilcard-intro-img .img-badge {
    position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem 0.9rem; border-radius: 100px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: white;
    display: flex; align-items: center; gap: 0.5rem;
}
.facilcard-intro-img .img-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 8px var(--rojo); }

/* Sección de beneficios premium */
.facilcard-benefits-head { text-align: center; margin-bottom: 2.5rem; position: relative; z-index: 1; }
.facilcard-benefits-head .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: #ff7a7a; margin-bottom: 0.6rem; display: block;
}
.facilcard-benefits-head h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.9rem; font-weight: 700;
    color: white; letter-spacing: -0.5px;
}
.facilcard-benefits-head p { color: rgba(255,255,255,0.55); font-size: 1rem; margin-top: 0.5rem; }
.facilcard-benefits {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem;
    position: relative; z-index: 1;
}
.benefit-card {
    background: linear-gradient(155deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 1.8rem 1.2rem 1.5rem;
    text-align: center; transition: all 0.35s cubic-bezier(.2,.8,.2,1);
    position: relative; overflow: hidden;
}
.benefit-card::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--rojo), transparent);
    opacity: 0; transition: opacity 0.35s ease;
}
.benefit-card:hover {
    background: linear-gradient(155deg, rgba(192,0,0,0.12) 0%, rgba(192,0,0,0.04) 100%);
    border-color: rgba(255,122,122,0.3);
    transform: translateY(-5px);
    box-shadow: 0 18px 36px -16px rgba(192,0,0,0.4);
}
.benefit-card:hover::before { opacity: 1; }
.benefit-num {
    font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 2px; color: rgba(255,122,122,0.7);
    margin-bottom: 0.7rem; display: block;
}
.benefit-icon-wrap {
    width: 88px; height: 88px; margin: 0 auto 1rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,0,0,0.25) 0%, rgba(192,0,0,0.08) 60%, transparent 80%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.benefit-icon-wrap::before {
    content: ''; position: absolute; inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
}
.benefit-card img { width: 56px; height: 56px; object-fit: contain; position: relative; z-index: 1; }
.benefit-card p {
    color: rgba(255,255,255,0.88); font-size: 0.88rem;
    line-height: 1.45; font-weight: 500;
}

/* FacilCard trust strip (badges abajo) */
.facilcard-trust {
    max-width: 1280px; margin: 3rem auto 0;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem;
    position: relative; z-index: 1;
}
.fc-badge {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px; color: rgba(255,255,255,0.85);
    font-size: 0.85rem; font-weight: 500;
}
.fc-badge svg { width: 16px; height: 16px; stroke: #ff7a7a; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-badge strong { color: white; font-weight: 700; }

/* ══════════════ DIAGNÓSTICO CTA ══════════════ */
.diagnostico-wrap { max-width: 1280px; margin: 6rem auto; padding: 0 2rem; }
.diagnostico {
    background-color: var(--vino);
    background-image:
        linear-gradient(95deg, rgba(53,10,13,0.94) 0%, rgba(77,14,18,0.82) 38%, rgba(77,14,18,0.65) 68%, rgba(40,8,12,0.55) 100%),
        radial-gradient(circle at 85% 15%, rgba(192,0,0,0.3) 0%, transparent 55%),
        url('../img/hero/facilcard-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border-radius: 24px; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem;
    padding: 4rem 3.5rem; align-items: center; min-height: 420px;
    box-shadow: 0 24px 50px -18px rgba(77,14,18,0.4);
}
.diagnostico::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--rojo) 0%, transparent 100%);
}
.diagnostico-content { position: relative; z-index: 1; }
.diagnostico-content .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: #ff8585; margin-bottom: 0.8rem; display: block;
}
.diagnostico h2 {
    /* Mismo caso que .hero h1: sin color propio, Astra lo pinta gris y el
       titulo desaparece contra el vino. Ver la nota en .hero h1. */
    color: #fff;
    font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 800;
    margin-bottom: 1rem; letter-spacing: -0.8px; line-height: 1.08;
}
.diagnostico .lead { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 1.8rem; line-height: 1.7; }
.diagnostico .cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.diagnostico .cta-white {
    background: white; color: var(--vino);
    padding: 1rem 2.2rem; border-radius: 8px;
    text-decoration: none; font-weight: 700; font-size: 0.97rem;
    transition: all 0.3s ease; display: inline-block;
}
.diagnostico .cta-white:hover { background: var(--rojo); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(192,0,0,0.5); }
.diagnostico .cta-hint { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.diagnostico-pillars {
    display: grid; gap: 0.7rem; position: relative; z-index: 1;
}
.diag-pillar {
    display: flex; align-items: center; gap: 0.95rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.diag-pillar:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,122,122,0.35);
    transform: translateX(4px);
}
.diag-pillar-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: rgba(192,0,0,0.22);
    border: 1px solid rgba(255,122,122,0.3);
    display: flex; align-items: center; justify-content: center;
}
.diag-pillar-icon svg { width: 20px; height: 20px; stroke: #ff9090; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.diag-pillar-text strong {
    color: white; font-family: 'Poppins', sans-serif;
    font-size: 1rem; font-weight: 700; display: block; margin-bottom: 0.1rem;
}
.diag-pillar-text span { color: rgba(255,255,255,0.6); font-size: 0.83rem; }

/* ══════════════ CONTACTO ══════════════ */
.contacto { padding: 6rem 2rem; background: var(--bg); position: relative; overflow: hidden; }
.contacto::before {
    content: ''; position: absolute; top: -10%; right: -5%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(192,0,0,0.05) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.contacto-container {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center;
    position: relative; z-index: 1;
}
.contacto-info .small-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--rojo); margin-bottom: 0.6rem; display: block;
}
.contacto-info h2 {
    font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 800;
    color: var(--carbon); margin-bottom: 1.1rem; letter-spacing: -0.8px; line-height: 1.1;
}
.contacto-info > p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.8rem; }
.contacto-details { display: grid; gap: 0.7rem; margin-bottom: 1.8rem; }
/* Banda de oficinas: ancho completo debajo de las dos columnas. Dentro de la
   columna de contacto las direcciones se partían a media línea y la columna
   quedaba 344px más alta que el formulario, lo que dejaba la sección chueca. */
.oficinas-banda {
    max-width: 1280px; margin: 3.2rem auto 0;
    padding-top: 2.4rem; border-top: 1px solid var(--border);
    position: relative; z-index: 1;
}
.oficinas-banda-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--rojo); margin-bottom: 1.2rem;
}
.contacto-oficinas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
@media (max-width: 1024px) { .contacto-oficinas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  {
    .contacto-oficinas { grid-template-columns: 1fr; }
    .oficinas-banda { margin-top: 2.4rem; padding-top: 1.8rem; }
}
.contacto-detail {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 0.95rem 1.1rem;
    background: white; border: 1px solid var(--border); border-radius: 12px;
    transition: all 0.25s ease;
    text-decoration: none; color: inherit;
}
.contacto-detail:hover {
    border-color: rgba(192,0,0,0.3);
    box-shadow: 0 8px 20px -10px rgba(77,14,18,0.18);
    transform: translateY(-2px);
}
.contacto-detail-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
    display: flex; align-items: center; justify-content: center;
}
.contacto-detail-icon svg { width: 20px; height: 20px; stroke: var(--rojo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contacto-detail-text { flex: 1; }
.contacto-detail-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--rojo); margin-bottom: 0.2rem;
}
.contacto-detail-value {
    font-size: 0.93rem; color: var(--carbon); font-weight: 500; line-height: 1.45;
}
.contacto-detail-value span { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.contacto-socials {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.contacto-socials-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--muted);
}
.contacto-socials-icons { display: flex; gap: 0.5rem; }
.contacto-socials-icons a {
    width: 40px; height: 40px; border-radius: 50%;
    background: white; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--carbon); transition: all 0.25s ease;
    text-decoration: none;
}
.contacto-socials-icons a:hover {
    background: var(--rojo); border-color: var(--rojo);
    color: white; transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(192,0,0,0.5);
}
.contacto-socials-icons svg { width: 18px; height: 18px; fill: currentColor; }
.contact-form { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; }
.form-group input, .form-group textarea {
    width: 100%; padding: 0.85rem 1rem;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'Open Sans', sans-serif; font-size: 0.95rem;
    background: white; transition: all 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--rojo);
    box-shadow: 0 0 0 3px rgba(192,0,0,0.12);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-submit {
    width: 100%; background: var(--rojo); color: white;
    padding: 1rem; border: none; border-radius: 8px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
    cursor: pointer; transition: all 0.3s ease;
}
.form-submit:hover { background: var(--rojo-bright); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(192,0,0,0.3); }

/* ══════════════ FOOTER ══════════════ */
footer { background: var(--carbon-dark); color: white; padding: 4rem 2rem 2rem; border-top: 4px solid var(--rojo); }
.footer-content {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem;
}
.footer-brand img { height: 50px; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.7; max-width: 280px; }
.footer-section h3 {
    font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600;
    margin-bottom: 1.2rem; color: #ff6b6b;
}
.footer-section ul { list-style: none; margin: 0; }
.footer-section li { margin: 0.6rem 0; }
.footer-section a {
    color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.92rem;
    transition: all 0.2s ease; display: inline-block;
}
.footer-section a:hover { color: #ff6b6b; padding-left: 0.4rem; }
.footer-bottom {
    max-width: 1280px; margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    color: rgba(255,255,255,0.5); font-size: 0.88rem;
}
.footer-bottom-left { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-legal { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; flex-wrap: wrap; }
/* Van prefijadas con footer para ganarle en especificidad a la regla de enlaces
   de Astra, que si no pinta estos dos de rojo sobre el footer oscuro. */
footer .footer-legal a, footer .footer-legal a:visited {
    color: rgba(255,255,255,0.55); text-decoration: none;
    transition: color 0.2s ease;
}
footer .footer-legal a:hover { color: #ff6b6b; }
.footer-legal span { color: rgba(255,255,255,0.25); }
.codesmic-credit { color: rgba(255,255,255,0.4); font-size: 0.82rem; }
.codesmic-credit a, .codesmic-credit a:visited { color: rgba(255,255,255,0.6); text-decoration: none; }
.codesmic-credit a:hover { color: #ff6b6b; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 980px) {
    .nav-menu { display: none; }
}
@media (max-width: 900px) {
    /* Splits a 1 columna */
    .about, .sumapay-intro, .facilcard-intro, .contacto-container, .diagnostico {
        grid-template-columns: 1fr; gap: 2.5rem;
    }
    /* Multi-cols a versiones intermedias */
    .sumapay-modes { grid-template-columns: repeat(3, 1fr); }
    .sumapay-features { grid-template-columns: 1fr 1fr; }
    .sumapay-segments { grid-template-columns: repeat(3, 1fr); }
    .facilcard-benefits { grid-template-columns: repeat(3, 1fr); }
    .footer-content { grid-template-columns: 1fr 1fr; }
    /* Diagnostico */
    .diagnostico { padding: 3rem 2rem; }
}
@media (max-width: 768px) {
    /* Hero */
    .hero { padding: 4rem 1.5rem; min-height: auto; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.05rem; }
    .hero-ctas { flex-direction: column; }
    .cta-primary, .cta-secondary { width: 100%; text-align: center; }

    /* Headings universales */
    .section-header h2, .about-block h2, .contacto-info h2, .diagnostico h2,
    .sumapay-intro h2, .facilcard-intro h2 { font-size: 1.8rem; }
    .about, .services, .sumapay, .facilcard, .contacto { padding: 3rem 1.5rem; }

    /* Trayectoria stack */
    .trayectoria-card { padding: 2rem 1.6rem; }
    .trayectoria-years { font-size: 3.6rem; }
    .trayectoria-pillars { grid-template-columns: 1fr; }

    /* SERVICIOS: 2 columnas mobile */
    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    .service-card { padding: 1.4rem 1.1rem; }
    .service-icon { width: 46px; height: 46px; margin-bottom: 0.8rem; border-radius: 11px; }
    .service-icon svg { width: 22px; height: 22px; }
    .service-card h3 { font-size: 0.98rem; margin-bottom: 0.4rem; }
    .service-card p { font-size: 0.8rem; line-height: 1.5; }
    .service-num { font-size: 0.65rem; top: 0.9rem; right: 1rem; }
    .service-arrow { display: none; }

    /* SUMAPAY MODOS: 2 cols, último ocupa 2 */
    .sumapay-modes { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .sumapay-modes .mode-card:last-child { grid-column: 1 / -1; }
    .mode-card { padding: 1.4rem 1rem 1.6rem; border-radius: 16px; }
    .mode-card img { width: 110px; height: 110px; }
    .mode-card h4 { font-size: 1.1rem; }
    .mode-card p { font-size: 0.82rem; line-height: 1.55; }
    .mode-num { font-size: 0.65rem; }

    /* SumaPay features: 2x2 */
    .sumapay-features { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .feature-pill { padding: 0.85rem 0.9rem; }
    .feature-pill p { font-size: 0.78rem; line-height: 1.35; }
    .feature-icon { width: 38px; height: 38px; }
    .feature-icon svg { width: 18px; height: 18px; }
    .sumapay-features-head h3 { font-size: 1.35rem; }

    /* SumaPay trust stack */
    .sumapay-trust { flex-direction: column; align-items: stretch; gap: 0.9rem; padding: 1.3rem 1.3rem; }
    .trust-divider { display: none; }
    .trust-group { justify-content: flex-start; }
    .trust-num { font-size: 2.2rem; }

    /* SumaPay scene */
    .sumapay-scene { padding: 2.5rem 1.6rem; min-height: 340px; border-radius: 18px; }
    .sumapay-scene h3 { font-size: 1.6rem; }
    .sumapay-scene p { font-size: 0.93rem; }

    /* SumaPay segmentos: 2 cols, último ocupa 2 */
    .sumapay-segments { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
    .sumapay-segments .segment:last-child { grid-column: 1 / -1; }
    .segment { padding: 1.2rem 0.8rem 1rem; border-radius: 12px; }
    .segment-icon { width: 38px; height: 38px; }
    .segment-icon svg { width: 18px; height: 18px; }
    .segment span { font-size: 0.8rem; }

    /* FACILCARD intro imagen */
    .facilcard-intro-img { min-height: 260px; max-height: 320px; border-radius: 16px; }
    .facilcard-intro-img img { min-height: 260px; max-height: 320px; height: 320px; }

    /* FACILCARD beneficios: 2 cols con el 5to abajo */
    .facilcard-benefits { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .facilcard-benefits .benefit-card:last-child { grid-column: 1 / -1; }
    .benefit-card { padding: 1.4rem 1rem 1.2rem; border-radius: 14px; }
    .benefit-icon-wrap { width: 68px; height: 68px; margin-bottom: 0.7rem; }
    .benefit-card img { width: 44px; height: 44px; }
    .benefit-card p { font-size: 0.8rem; line-height: 1.4; }
    .benefit-num { font-size: 0.62rem; margin-bottom: 0.5rem; }
    .facilcard-benefits-head h3 { font-size: 1.4rem; }
    .facilcard-trust { gap: 0.45rem; }
    .fc-badge { font-size: 0.76rem; padding: 0.5rem 0.85rem; }

    /* Diagnóstico */
    .diagnostico { padding: 2.5rem 1.7rem; gap: 2rem; border-radius: 18px; }
    .diagnostico h2 { font-size: 1.7rem; }
    .diagnostico .lead { font-size: 0.95rem; }

    /* Contacto */
    .contacto-detail { padding: 0.85rem 0.95rem; gap: 0.85rem; }
    .contacto-detail-value { font-size: 0.86rem; }
    .contact-form { padding: 1.8rem 1.5rem; border-radius: 14px; }

    /* Footer mobile reorganizado */
    footer { padding: 3rem 1.5rem 1.5rem; }
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1.4rem;
        margin-bottom: 1.5rem;
    }
    /* Brand: full width centered arriba */
    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
        padding-bottom: 1.3rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand img { display: block; margin: 0 auto 0.9rem; }
    .footer-brand p { max-width: 380px; margin: 0 auto; font-size: 0.88rem; }
    /* Servicios → col 1 | Empresa → col 2 | Productos full width abajo */
    .footer-content .footer-section:nth-of-type(1) { order: 1; }
    .footer-content .footer-section:nth-of-type(3) { order: 2; }
    .footer-content .footer-section:nth-of-type(2) {
        order: 3;
        grid-column: 1 / -1;
        padding-top: 1.2rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        text-align: center;
    }
    .footer-content .footer-section:nth-of-type(2) ul {
        display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
    }
    .footer-content .footer-section:nth-of-type(2) li { margin: 0; }
    .footer-section h3 { margin-bottom: 0.9rem; font-size: 0.95rem; }
    .footer-section li { margin: 0.45rem 0; }
    .footer-section a { font-size: 0.86rem; }
    .footer-section a:hover { padding-left: 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-left { align-items: center; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.9rem; }
    .section-header h2, .about-block h2, .contacto-info h2, .diagnostico h2,
    .sumapay-intro h2, .facilcard-intro h2 { font-size: 1.5rem; }
    .sumapay-features-head h3, .facilcard-benefits-head h3 { font-size: 1.25rem; }
    .trayectoria-years { font-size: 3rem; }
    .service-card h3 { font-size: 0.92rem; }
    .service-card p { font-size: 0.76rem; }
    .mode-card img { width: 95px; height: 95px; }
    .benefit-icon-wrap { width: 60px; height: 60px; }
    .benefit-card img { width: 38px; height: 38px; }
}

/* ══════════════ MENU MOVIL ══════════════
 * El diseño aprobado esconde el menú abajo de 980px y no lo repone,
 * así que en móvil el sitio se queda sin navegación. Este bloque agrega
 * el hamburger que la devuelve, con los mismos colores y tipografía.
 *
 * El panel va posicionado en absolute colgando del <header>, no en fixed:
 * el header trae backdrop-filter, y eso lo vuelve bloque contenedor de sus
 * hijos fixed — un panel fixed quedaría recortado a la altura del header.
 *
 * En desktop no cambia nada: .nav-wrap usa display:contents para que
 * el menú y el CTA sigan siendo hijos directos del flex de <nav>.
 */
.nav-wrap { display: contents; }
.nav-toggle,
.nav-close,
.nav-backdrop { display: none; }

@media (max-width: 980px) {
    .nav-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0 10px;
        background: none; border: none; cursor: pointer;
        margin-left: auto;
    }
    .nav-toggle span {
        display: block; height: 2px; width: 100%;
        background: var(--carbon); border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-wrap {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 18px 40px rgba(0,0,0,0.14);
        padding: 0 1.5rem;
        max-height: 0; overflow: hidden;
        opacity: 0; visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s linear 0.3s;
        z-index: 120;
    }
    .nav-wrap.is-open {
        max-height: calc(100vh - 78px); overflow-y: auto;
        opacity: 1; visibility: visible;
        padding: 0.5rem 1.5rem 1.5rem;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, visibility 0s;
    }

    .nav-wrap .nav-menu {
        display: flex; flex-direction: column; align-items: stretch;
        gap: 0; width: 100%; margin: 0 0 1.1rem; padding: 0; list-style: none;
    }
    .nav-wrap .nav-menu li { width: 100%; }
    .nav-wrap .nav-menu a {
        display: block; width: 100%;
        padding: 0.95rem 0; font-size: 1rem;
        border-bottom: 1px solid var(--border);
    }
    .nav-wrap .nav-menu a::after { display: none; }

    .nav-wrap .cta-header { display: block; width: 100%; text-align: center; padding: 0.85rem 1.3rem; }

    /* Oscurece el sitio detrás del panel. Absolute colgando del header por el
     * mismo motivo que el panel: el header es su bloque contenedor. */
    .nav-backdrop {
        display: block; position: absolute; top: 100%; left: 0; right: 0;
        height: 100vh;
        background: rgba(26,26,26,0.45);
        opacity: 0; pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 110;
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    body.nav-open { overflow: hidden; }
}