/* =====================================================================
   ESTILOS DE CFV - Control de Flota Vehicular
   Cada bloque tiene un comentario que explica qué parte de la página controla.
   El orden es: variables, base, hero, secciones y, al final, ajustes responsive.
   ===================================================================== */

/* VARIABLES DE COLOR: se definen una vez y se usan en todo el CSS con var(--nombre).
   Si quieres cambiar los colores de la página, cámbialos aquí. */
:root{
    --navy:#06283d;
    --navy2:#082f48;
    --blue:#0c5a7e;
    --green:#19d38a;
    --green2:#0ecb7c;
    --mint:#eafbf5;
    --text:#102f49;
    --muted:#6d8296;
    --line:#dce8ef;
    --bg:#f7fbfd;
    --white:#fff;
    --shadow:0 10px 30px rgba(13,53,78,.08);
}

/* RESET: quita márgenes y rellenos por defecto del navegador y hace que el
   ancho de cada caja incluya su borde y relleno (box-sizing). */
*{box-sizing:border-box;margin:0;padding:0}
/* Al hacer clic en un enlace interno (#origen, etc.) la página se desliza suave. */
html{scroll-behavior:smooth}
/* Estilo base de todo el sitio: fuente, color de texto, fondo y altura de línea. */
body{
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.5;
}
/* Los enlaces no se subrayan y toman el color del texto que los rodea. */
a{text-decoration:none;color:inherit}
/* CONTENEDOR: centra el contenido, con un máximo de 1250px o el 92% de la pantalla. */
.container{width:min(1250px,92%);margin:auto}
/* Cada sección es la referencia de posición para sus elementos internos. */
section{position:relative}
/* Espaciado vertical (arriba y abajo) común a todas las secciones. */
.section{
    padding:58px 0;
}
/* ETIQUETA pequeña en mayúsculas sobre cada título (ej. "EL ORIGEN"). */
.section-label{
    display:flex;
    align-items:center;
    gap:10px;
    color:#08bd7b;
    text-transform:uppercase;
    letter-spacing:1.7px;
    font-size:10px;
    font-weight:800;
    margin-bottom:8px;
}
/* La rayita verde que aparece antes del texto de la etiqueta. */
.section-label:before{
    content:"";
    width:22px;
    height:2px;
    background:#14cf88;
}
/* Estilo de los títulos principales de cada sección. */
h2{
    font-size:31px;
    line-height:1.1;
    letter-spacing:-1px;
}
/* Párrafo de introducción debajo de un título (texto gris más grande). */
.lead{
    color:var(--muted);
    font-size:14px;
    max-width:700px;
}
/* BOTÓN verde principal (usado en toda la página). */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:linear-gradient(135deg,#13d889,#1ad7a0);
    color:#043122;
    font-weight:800;
    font-size:12px;
    padding:13px 23px;
    border-radius:999px;
    box-shadow:0 9px 24px rgba(18,210,135,.25);
    transition:.2s;
}
/* Al pasar el mouse, el botón sube 2px. */
.btn:hover{transform:translateY(-2px)}

/* HERO */
/* Contenedor del hero: altura mínima, imagen de fondo y el sombreado azul
   de la izquierda (linear-gradient) que ayuda a leer el texto.
   La foto se cambia en img/hero.jpg. */
.hero{
    
    min-height:500px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:white;
    background:
      linear-gradient(90deg,rgba(3,34,52,.96) 0%,rgba(3,36,56,.88) 24%,rgba(3,38,58,.5) 38%,rgba(3,38,58,.12) 48%,rgba(3,38,58,0) 55%),
      url("../img/hero.jpg") center 62%/cover no-repeat;
}
/* Contenido del hero: va por encima del fondo (z-index) y define su espacio interno. */
.hero-content{padding:44px 0 56px;position:relative;z-index:2}
/* Logo CFV (arriba a la izquierda del hero). */
.logo{
    display:flex;align-items:center;gap:9px;
    font-size:26px;font-weight:800;
    margin-bottom:31px;
}
/* Espacio del logo (a la izquierda del texto CFV). Se adapta al ancho de la imagen. */
.logo-mark{
    min-width:36px;
    height:100px;     
    display:grid;place-items:center;
    color:#19dc94;font-size:27px;
}
/* Solo el ícono de hoja (el de respaldo) va inclinado; la imagen del logo no se gira. */
.logo-mark i{transform:rotate(-10deg)}
/* LOGO EN IMAGEN: altura fija y ancho automático para no deformarla.
   Para hacerla más grande o más pequeña cambia el valor de height. */
.logo-img{
    height:100px;     
    width:auto;       /* mantiene la proporción, no se deforma */
    display:block;
}
/* Texto pequeño "Control de Flota Vehicular" bajo el logo. */
.logo small{
    display:block;
    color:#aac0cd;
    font-size:7px;
    font-weight:500;
    margin-top:-4px;
    letter-spacing:.2px;
}
/* Caja del título y descripción del hero, con una sombra suave en las letras. */
.hero-copy{max-width:520px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* Título grande del hero. */
.hero h1{
    font-size:48px;
    line-height:.99;
    letter-spacing:-2.5px;
    margin-bottom:12px;
}
/* La palabra resaltada en verde ("cambio"). */
.hero h1 span{color:#17dc91}
/* Párrafo descriptivo del hero. */
.hero p{
    color:#d4e2e9;
    font-size:13px;
    max-width:390px;
    margin-bottom:19px;
}
/* Fila de 3 datos pequeños al pie del hero. */
.hero-stats{
    display:flex;
    gap:30px;
    margin-top:22px;
}
/* Cada dato individual (ícono + texto). */
.hero-stat{
    display:flex;align-items:center;gap:9px;
    color:#dce9ef;font-size:10px;
}
.hero-stat i{color:#13da91;font-size:18px}
/* Nota escrita a mano sobre la imagen (solo escritorio) con su flecha. */
.hero-note{
    position:absolute;
    right:3%;
    bottom:35px;
    width:135px;
    color:#fff;
    font-size:12px;
    font-style:italic;
    text-align:center;
    transform:rotate(-3deg);
}
/* La flechita verde de la nota. */
.hero-note:after{
    content:"↙";
    display:block;
    color:#19d993;
    font-size:28px;
    margin-top:-4px;
}

/* ORIGIN */
/* SECCIÓN ORIGEN: fondo claro. */
.origin{
    background:
      radial-gradient(circle at 65% 40%,rgba(20,215,143,.06),transparent 22%),
      #fff;
}
/* Dos columnas: texto a la izquierda y línea de tiempo a la derecha. */
.origin-grid{
    display:grid;
    grid-template-columns:43% 57%;
    gap:35px;
    align-items:center;
}
/* Párrafos de texto de la sección. */
.origin-copy p{font-size:14px;color:var(--muted);margin:10px 0}
/* Línea de tiempo: 4 pasos en fila (Necesidad, Idea, Desarrollo, Solución). */
.timeline{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}
/* Cada paso de la línea de tiempo. */
.step{
    position:relative;
    text-align:center;
    padding:8px 15px;
}
/* La flechita ">" entre pasos (no se pone en el último). */
.step:not(:last-child):after{
    content:"›";
    position:absolute;
    right:-5px;
    top:27px;
    color:#b5d3e1;
    font-size:26px;
}
/* Círculo con el ícono de cada paso. */
.step-icon{
    width:62px;height:62px;
    margin:0 auto 9px;
    display:grid;place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#f1fcfa,#e8f7f5);
    color:#08c988;
    font-size:23px;
    box-shadow:0 9px 22px rgba(13,92,105,.12), 0 2px 5px rgba(13,92,105,.05);
}
/* Título y descripción pequeña de cada paso. */
.step strong{font-size:13px;display:block}
.step span{font-size:10px;color:var(--muted);display:block;margin-top:3px}

/* PROBLEM + SOLUTION */
/* SECCIÓN PROBLEMA + SOLUCIÓN: fondo azul oscuro con texto claro. */
.dark{
    background:linear-gradient(110deg,#05263a,#062e46);
    color:#fff;
}
/* Dos columnas: problemas a la izquierda, solución a la derecha. */
.dark-grid{
    display:grid;
    grid-template-columns:47% 53%;
    gap:28px;
    align-items:center;
}
/* Título de la parte del problema. */
.problem-title{
    font-size:27px;
    max-width:470px;
    margin-bottom:26px;
}
.problem-title span{color:#16da90}
/* Fila de 3 tarjetas con los problemas. */
.problem-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}
/* Cada tarjeta de problema, separada por una línea vertical. */
.problem-card{
    padding:0 19px 0 0;
    margin-right:18px;
    border-right:1px solid rgba(255,255,255,.18);
}
/* La última tarjeta no lleva línea a su derecha. */
.problem-card:last-child{border:0}
.problem-card i{color:#0fda91;font-size:23px;margin-bottom:12px}
.problem-card h3{font-size:13px;line-height:1.2;margin-bottom:5px}
.problem-card p{font-size:11px;color:#a9c0cd}

/* Caja grande de la solución, con el tablero (dashboard) a su derecha. */
.solution-box{
    min-height:205px;
    border:1px solid rgba(23,216,145,.65);
    border-radius:16px;
    padding:23px 250px 22px 23px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(120deg,rgba(7,46,68,.9),rgba(4,39,59,.75));
}
.solution-box h3{
    font-size:20px;
    line-height:1.15;
    max-width:290px;
    margin-bottom:13px;
}
.solution-box h3 span{color:#13d992}
.solution-box p{font-size:11px;color:#bdd0da;max-width:300px}
/* Maqueta decorativa del panel del sistema (posicionada a la derecha). */
.dashboard{
    position:absolute;
    right:8px;
    top:11px;
    width:225px;
    height:184px;
    border-radius:13px;
    background:#08263b;
    border:1px solid rgba(255,255,255,.15);
    overflow:hidden;
    box-shadow:0 18px 35px rgba(0,0,0,.2);
}
/* Barra de pestañas del panel (la primera aparece activa en verde). */
.dash-nav{
    position:absolute;left:0;top:0;bottom:0;width:62px;
    background:#071e30;
    padding:15px 8px;
}
.dash-nav span{
    display:block;font-size:6px;color:#9bb1be;padding:7px 4px;
}
.dash-nav span:first-child{color:#15d88e;background:#0d3945;border-radius:5px}
/* "Mapa" del panel: cuadrícula dibujada con CSS. */
.map{
    position:absolute;left:62px;right:0;top:0;bottom:0;
    background:
      linear-gradient(135deg,transparent 48%,rgba(17,181,219,.22) 49%,transparent 51%),
      linear-gradient(45deg,transparent 52%,rgba(28,206,145,.24) 53%,transparent 55%),
      #0b3a50;
}
/* La línea verde que simula una ruta sobre el mapa. */
.map:after{
    content:"";
    position:absolute;
    width:12px;height:12px;
    border-radius:50%;
    background:#15db92;
    right:28px;top:55px;
    box-shadow:0 0 0 7px rgba(21,219,146,.12);
}
/* Tarjeta flotante "Flota Activa 12 / 15". */
.fleet-badge{
    position:absolute;right:9px;bottom:12px;
    background:#073247;color:white;border-radius:7px;padding:9px 12px;
    font-size:7px;
}
.fleet-badge strong{display:block;color:#19db92;font-size:19px}

/* OBJECTIVES */
/* SECCIÓN OBJETIVOS: fondo blanco. */
.objectives{background:#fff}
/* Rejilla de 4 columnas con los objetivos. */
.objective-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:17px;
}
/* Cada tarjeta de objetivo. */
.objective{
    min-height:105px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px;
    border:1px solid #dce9ef;
    border-radius:12px;
    background:linear-gradient(110deg,#fff,#f9fcfd);
    box-shadow:0 5px 17px rgba(10,64,89,.035);
}
/* Círculo con el ícono del objetivo. */
.objective-icon{
    flex:0 0 48px;
    width:48px;height:48px;
    display:grid;place-items:center;
    background:#e8faf5;
    color:#0dcc88;
    border-radius:13px;
    font-size:20px;
}
/* Texto del objetivo, ocupa el espacio sobrante. */
.objective-content{position:relative;flex:1}
/* Número grande y tenue de fondo (01, 02, ...). */
.objective-number{
    position:absolute;right:0;top:-4px;
    color:#b7d7e4;font-size:10px;
}
.objective h3{font-size:12px;margin-bottom:3px}
.objective p{font-size:9px;color:#61788a;line-height:1.35;max-width:170px}

/* PLANS */
/* SECCIÓN PLANES: fondo claro. */
.plans{
    background:#f6fafc;
    border-top:1px solid #e4edf2;
}
/* Encabezado: título a la izquierda y descripción a la derecha. */
.plans-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:20px;
}
.plans-head .lead{max-width:420px;text-align:right}
/* Rejilla de 4 planes. Cambia gap para separar más o menos las tarjetas. */
.plans-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:stretch;
}
/* TARJETA DE PLAN: tamaño, relleno y sombra. Para agrandarlas o achicarlas
   ajusta padding y min-height. */
.plan{
    background:#fff;
    border:1px solid #c4d9e4;
    border-radius:16px;
    padding:26px 24px;
    min-height:400px;
    display:flex;
    flex-direction:column;
    box-shadow:0 12px 30px rgba(9,58,82,.12), 0 3px 8px rgba(9,58,82,.07);
}
/* El plan "Más popular" lleva borde verde y se ve más destacado. */
.plan.popular{
    border:2px solid #16d88d;
    box-shadow:0 14px 34px rgba(19,214,139,.20), 0 3px 9px rgba(9,58,82,.08);
    position:relative;
}
/* Etiqueta verde "MÁS POPULAR" sobre la tarjeta. */
.badge{
    position:absolute;top:-12px;left:50%;
    transform:translateX(-50%);
    background:#14d38a;color:#063925;
    font-size:9.5px;font-weight:800;padding:5px 13px;border-radius:999px;
    white-space:nowrap;
}
/* Parte superior de la tarjeta: ícono + nombre. */
.plan-top{display:flex;gap:12px;align-items:center}
/* Cuadro del ícono del plan. */
.plan-icon{
    width:50px;height:50px;display:grid;place-items:center;
    background:#eaf8f4;color:#08c986;border-radius:12px;font-size:17px;
}
/* Los planes que no son populares tienen el ícono en gris. */
.plan:not(.popular) .plan-icon{background:#edf3f7;color:#4f687a}
/* Nombre del plan. */
.plan h3{font-size:17px}
/* Subtítulo del plan (ej. "Para empezar"). */
.plan small{display:block;color:#8a9dab;font-size:11px;margin-top:2px}
/* Precio grande del plan. */
.price{
    font-size:28px;font-weight:800;
    margin:20px 0 13px;
}
/* Texto pequeño "/ anual" junto al precio. */
.price span{font-size:11px;font-weight:500;color:#8a9dab}
/* Lista de características de cada plan. */
.features{list-style:none;margin-bottom:17px;flex:1}
/* Cada característica, con una línea que la separa de la siguiente. */
.features li{
    font-size:12px;color:#607688;line-height:1.4;
    padding:9px 0;
    border-bottom:1px solid #edf2f5;
}
/* La última característica no lleva línea. */
.features li:last-child{border:0}
/* Pone el visto ✓ verde antes de cada característica. */
.features li:before{
    content:"✓";color:#10ca82;font-weight:800;margin-right:8px
}
/* Botón "Elegir plan" (borde gris). */
.plan-btn{
    display:flex;align-items:center;justify-content:center;
    padding:13px;border:1px solid #d7e5eb;border-radius:9px;
    font-size:12px;font-weight:800;
    background:#fff;
}
/* En el plan popular el botón es verde sólido. */
.popular .plan-btn{
    background:#13d991;border-color:#13d991;color:#043424
}

/* IMPACTO + CTA: UNA SOLA SECCIÓN CON LA MISMA CIUDAD */
/* IMPACTO + CTA: comparten un mismo fondo (foto de ciudad). Este contenedor
   envuelve las dos secciones para que la imagen sea continua. */
.impact-cta-wrap{
    position:relative;
    overflow:hidden;
    background:url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1800&q=85") center center/cover no-repeat;
}
/* Capa oscura sobre la foto para que el texto blanco se lea bien. */
.impact-cta-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(3,39,55,.72);
    pointer-events:none;
}
/* Las secciones internas son transparentes para dejar ver la foto. */
.impact-cta-wrap > section{
    position:relative;
    z-index:1;
}
/* Sección de impacto ambiental. */
.impact{
    color:#fff;
    background:transparent !important;
    border:0 !important;
}
/* Dos columnas: texto a la izquierda y 3 datos a la derecha. */
.impact-grid{
    display:grid;
    grid-template-columns:42% 58%;
    align-items:center;
    gap:20px;
}
/* Tamaño del título y del párrafo del impacto. */
.impact h2{font-size:34px;line-height:1.15}
.impact p{font-size:15px;line-height:1.65;color:#d4e4ea;max-width:520px;margin-top:12px}
/* Fila de 3 datos (Menos emisiones, Mayor control, Mejores decisiones). */
.impact-items{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
/* Cada dato: ícono al lado de su texto. */
.impact-item{display:flex;gap:14px;align-items:center}
.impact-item i{font-size:34px;color:#12d991}
.impact-item strong{display:block;font-size:16px;color:#fff}
.impact-item span{font-size:13px;color:#c4d9e2}

/* CTA */
/* CTA (llamado a la acción final): sección centrada sobre la misma foto. */
.cta{
    min-height:280px;
    display:flex;
    align-items:center;
    text-align:center;
    overflow:hidden;
    background:transparent !important;
    color:#fff;
}
/* Limita el ancho del contenido del CTA y lo centra. */
.cta-content{max-width:650px;margin:auto}
/* Título, texto y logo final del CTA. */
.cta h2{font-size:25px;margin-bottom:7px;color:#fff}
.cta .lead{margin:0 auto 17px;font-size:11px;color:#d4e4ea}
.cta .logo-bottom{margin-top:20px;color:#fff;font-weight:800;font-size:22px}
.cta .logo-bottom span{color:#11c984}

/* RESPONSIVE (TABLET): cuando la pantalla mide 1000px o menos,
   las rejillas pasan de 3-4 columnas a 2 o 1 y se oculta la nota del hero. */
@media(max-width:1000px){
    .origin-grid,.dark-grid,.impact-grid{grid-template-columns:1fr}
    .solution-box{padding-right:260px}
    .objective-grid,.plans-grid{grid-template-columns:repeat(2,1fr)}
    .hero-note{display:none}
}
/* RESPONSIVE (CELULAR): con 700px o menos, todo se apila en una columna
   y se reducen tamaños de letra y espacios. */
@media(max-width:700px){
    .section{padding:45px 0}
    .hero{min-height:620px}
    .hero h1{font-size:39px}
    .hero-stats{flex-direction:column;gap:10px}
    .timeline{grid-template-columns:repeat(2,1fr);row-gap:20px}
    .step:nth-child(2):after{display:none}
    .problem-cards{grid-template-columns:1fr;gap:18px}
    .problem-card{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:15px}
    .solution-box{padding:22px;min-height:390px}
    .dashboard{position:relative;right:auto;top:auto;width:100%;margin-top:20px}
    .objective-grid,.plans-grid{grid-template-columns:1fr}
    .plans-head{display:block}
    .plans-head .lead{text-align:left;margin-top:7px}
    .impact-items{grid-template-columns:1fr}
}

/* FUNCIONALIDADES */
/* SECCIÓN FUNCIONALIDADES: fondo claro. */
.capabilities{
    background:#f7fbfd;
    border-top:1px solid #e5eef3;
    border-bottom:1px solid #e5eef3;
}
/* Encabezado en dos columnas (título y descripción). */
.capabilities-head{
    display:grid;
    grid-template-columns:48% 52%;
    align-items:end;
    gap:35px;
    margin-bottom:22px;
}
.capabilities-head .lead{
    max-width:560px;
    justify-self:end;
}
/* Rejilla de 3 columnas con las 6 funcionalidades. */
.capability-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}
/* Cada tarjeta de funcionalidad. */
.capability{
    min-height:158px;
    padding:19px;
    display:flex;
    gap:14px;
    background:linear-gradient(145deg,#ffffff 0%,#f8fcfd 100%);
    border:1px solid #c9dce6;
    border-radius:14px;
    box-shadow:0 9px 25px rgba(13,53,78,.10), 0 2px 6px rgba(13,53,78,.05);
    transition:.2s;
}
/* Al pasar el mouse la tarjeta sube y resalta. */
.capability:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 32px rgba(13,53,78,.14), 0 4px 10px rgba(13,53,78,.07);
}
/* Cuadro del ícono de la funcionalidad. */
.capability-icon{
    flex:0 0 42px;
    width:42px;height:42px;
    display:grid;place-items:center;
    color:#08c986;
    background:#e9faf5;
    border-radius:11px;
    font-size:17px;
}
/* Título y texto de la funcionalidad. */
.capability h3{
    font-size:13px;
    margin-bottom:6px;
}
.capability p{
    color:#687f90;
    font-size:10.5px;
    line-height:1.55;
}
/* Funcionalidades en tablet: encabezado de 1 columna y rejilla de 2. */
@media(max-width:1000px){
    .capabilities-head{grid-template-columns:1fr}
    .capabilities-head .lead{justify-self:start}
    .capability-grid{grid-template-columns:repeat(2,1fr)}
}
/* Funcionalidades en celular: una sola columna. */
@media(max-width:700px){
    .capability-grid{grid-template-columns:1fr}
}


/* Planes en pantallas medianas (hasta 1200px): se reducen un poco. */
@media (max-width:1200px){
    .plans-grid{gap:14px}
    .plan{padding:22px 20px;min-height:370px}
    .plan h3{font-size:16px}
    .price{font-size:26px}
    .features li{font-size:11.5px}
}
/* Planes en celular: sin altura mínima para que se ajusten al contenido. */
@media (max-width:700px){
    .plan{min-height:0;padding:24px 22px}
    .price{font-size:28px}
}


/* BOTONES DEL HERO: fila con "Conocer el proyecto" y "Ver video". */
.hero-buttons{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
/* Botón "Ver video": transparente con borde de cristal. */
.btn-video{
    background:rgba(255,255,255,.10);
    color:#fff;
    border:1px solid rgba(255,255,255,.42);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
}
/* Efecto al pasar el mouse sobre "Ver video". */
.btn-video:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.65);
}
/* Círculo blanco con el triángulo de reproducir. */
.play{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#079f70;
    font-size:8px;
}


/* CONTINUIDAD VISUAL: cada sección oculta lo que se salga de ella. */
section{
    position:relative;
    overflow:hidden;
}
/* Línea fina con degradado verde en el borde superior de cada sección
   (menos el hero) para separar visualmente. */
section:not(.hero)::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(21,214,145,.12) 18%,
        rgba(21,214,145,.55) 50%,
        rgba(21,214,145,.12) 82%,
        transparent 100%);
}
/* Franja suave de transición entre secciones (clase opcional, hoy no se usa en el HTML). */
.section-transition{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:70px;
    pointer-events:none;
    z-index:1;
    background:
        radial-gradient(55% 100% at 50% 100%, rgba(19,214,145,.09), transparent 70%),
        linear-gradient(180deg, transparent, rgba(225,244,249,.42));
}
/* Variante de la franja para secciones oscuras. */
.section-transition.dark{
    background:
        radial-gradient(55% 100% at 50% 100%, rgba(19,214,145,.12), transparent 70%),
        linear-gradient(180deg, transparent, rgba(3,38,58,.18));
}
/* isolation:isolate evita que los efectos de una sección se mezclen con otras. */
.capabilities,
.plans,
.objectives,
.origin{
    isolation:isolate;
}


/* MODAL DE VIDEO: capa que cubre toda la pantalla; está oculta por defecto. */
.video-modal{
    position:fixed;
    inset:0;
    z-index:999;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(2,22,34,.78);
    backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.22s ease;
}
/* Cuando JavaScript le agrega la clase "active", el modal se muestra. */
.video-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
/* Caja central donde va el video. */
.video-card{
    position:relative;
    width:min(860px,94vw);
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:18px;
    background:#062437;
    border:1px solid rgba(22,216,141,.55);
    box-shadow:0 30px 90px rgba(0,0,0,.45);
}
/* Botón "×" para cerrar el video. */
.video-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
/* Contenido temporal del modal (ícono y texto) hasta insertar el video real. */
.video-placeholder{
    height:100%;
    display:grid;
    place-content:center;
    text-align:center;
    color:#fff;
    padding:30px;
    background:
        radial-gradient(circle at center, rgba(18,214,143,.12), transparent 45%),
        linear-gradient(135deg,#062437,#0a3147);
}
/* Círculo con el ícono de reproducir dentro del modal. */
.video-play{
    width:66px;
    height:66px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#14d890;
    color:#063a2a;
}
/* Textos del modal de video. */
.video-placeholder h3{font-size:22px;margin:0 0 7px}
.video-placeholder p{font-size:12px;color:#c5d9e2;margin:0 0 6px}
.video-placeholder small{font-size:10px;color:#89a8b7}


/* Botones del hero en celular: ocupan todo el ancho y se reparten el espacio. */
@media(max-width:700px){
    .hero-buttons{
        width:100%;
        gap:9px;
    }
    .hero-buttons .btn{
        flex:1;
        min-width:150px;
    }
}


/* La sección CTA (la que sigue al impacto) tiene una altura mínima. */
.impact + section{
    min-height:300px;
}
/* En celular la sección CTA es un poco más alta. */
@media(max-width:700px){
    .impact + section{
        min-height:330px;
    }
}

/* IMPACTO + CTA MOBILE: MISMA CIUDAD */
@media(max-width:700px){
    .impact-cta-wrap{
        background-position:center center;
    }
}


/* ===== COMO FUNCIONA (RECORRIDO TIPO SERPIENTE) ===== */
/* SECCIÓN PASO A PASO (la serpiente): fondo con degradado blanco a verde muy claro. */
.how{background:linear-gradient(180deg,#fff,#f4fbf8)}
/* Encabezado centrado de la sección. */
.how-head{text-align:center;margin-bottom:44px}
.how-head .section-label{justify-content:center}
.how-head .lead{margin:10px auto 0}
/* Contenedor de la serpiente: los 3 renglones de pasos, uno debajo del otro. */
.snake{display:flex;flex-direction:column;gap:46px;max-width:1000px;margin:0 auto;padding:0 56px}
/* Cada renglón (fila) de 3 pasos. */
.snake-row{display:flex;position:relative}
/* El renglón del medio va en reversa (derecha a izquierda) para hacer el zigzag. */
.snake-row.rev{flex-direction:row-reverse}
.snake{position:relative}
/* Capa SVG transparente encima de los pasos donde JavaScript dibuja la línea y el punto. */
.snake-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Capas de profundidad del SVG ("over" ya no se usa en el HTML). */
.snake-svg.under{z-index:1}
.snake-svg.over{z-index:4}
/* La línea punteada verde que une los pasos. */
.snake-path{fill:none;stroke:#19d38a;stroke-width:3;stroke-dasharray:8 7;opacity:.75;stroke-linecap:round}
/* Cada paso: círculo con ícono + tarjeta con texto. */
.s-step{flex:1;text-align:center;padding:0 14px;position:relative}
/* Círculo verde con el ícono del paso. */
.s-num{
    width:66px;height:66px;margin:0 auto 14px;position:relative;z-index:2;
    display:grid;place-items:center;border-radius:50%;font-size:22px;color:#043122;
    background:linear-gradient(145deg,#13d889,#1ad7a0);border:5px solid #fff;
    box-shadow:0 10px 24px rgba(18,210,135,.32);
}
/* Numerito oscuro (1 a 9) en la esquina del círculo. */
.s-step .n{
    position:absolute;top:-6px;left:calc(50% + 20px);z-index:3;
    width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
    background:#06283d;color:#fff;font-size:11px;font-weight:800;border:2px solid #fff;
}
/* Tarjeta blanca con el título y la descripción del paso. */
.s-card{
    background:#fff;border:1px solid #d3e3ec;border-radius:14px;padding:14px 14px 15px;
    box-shadow:0 8px 22px rgba(10,64,89,.07);transition:.2s;
}
/* ANIMACIÓN: transiciones suaves para cuando el punto resalta un paso. */
.s-num{transition:transform .35s ease,box-shadow .35s ease}
.s-step .s-card{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
/* Clase "active" (la pone JavaScript): el paso crece y brilla mientras el punto está ahí. */
.s-step.active .s-num{transform:scale(1.16);box-shadow:0 0 0 8px rgba(25,220,148,.28),0 0 30px rgba(25,220,148,.75)}
.s-step.active .s-card{transform:translateY(-4px);border-color:#16d88d;box-shadow:0 14px 30px rgba(19,214,139,.25)}
/* También sube la tarjeta al pasar el mouse. */
.s-step:hover .s-card{transform:translateY(-4px);border-color:#16d88d}
/* Textos de la tarjeta del paso. */
.s-card h3{font-size:13.5px;margin-bottom:5px}
.s-card p{font-size:11.5px;color:var(--muted);line-height:1.55}
/* Etiqueta pequeña ("Inicio" / "¡Listo!") sobre algunos pasos. */
.s-flag{
    display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;
    font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    background:#e8faf5;color:#07a873;
}
/* El último paso se ve distinto (azul oscuro) porque es la meta. */
.s-step.end .s-num{background:linear-gradient(145deg,#06283d,#0c4a66);color:#19dc94;box-shadow:0 10px 24px rgba(6,40,61,.35)}
.s-step.end .s-card{border-color:#16d88d;background:linear-gradient(180deg,#fff,#effcf7)}
/* Botón "Comenzar ahora" al final de la serpiente. */
.how-cta{text-align:center;margin-top:40px}

/* ===== QUIENES ESTAMOS DETRAS ===== */
/* Fondo azul oscuro de la sección del equipo. */
.team{background:linear-gradient(120deg,#05263a,#08354f);color:#fff}
/* Encabezado centrado de la sección del equipo. */
.team-head{text-align:center;margin-bottom:34px}
.team-head .section-label{justify-content:center}
.team-head h2{color:#fff}
.team-head .lead{margin:10px auto 0;color:#b9cfdb;font-size:13.5px}
/* Rejilla de 2 tarjetas (una por desarrollador), centradas. */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:22px}
/* Tarjeta de cada integrante. */
.member{
    text-align:center;padding:26px 18px 22px;border-radius:16px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    transition:.2s;
}
/* Al pasar el mouse la tarjeta sube y se ilumina. */
.member:hover{transform:translateY(-4px);border-color:rgba(25,220,148,.6);background:rgba(255,255,255,.09)}
/* Círculo de la foto. Si no hay foto se ve el ícono de persona. */
.member-photo{
    width:92px;height:92px;margin:0 auto 14px;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;font-size:34px;color:#19dc94;
    background:linear-gradient(145deg,#0d4056,#0a2f45);
    border:3px solid #19d38a;box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.member-photo{position:relative}
/* La foto llena todo el círculo, recortada y centrada arriba. */
.member-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* Nombre y rol del integrante. */
.member h3{font-size:14px;margin-bottom:3px}
.member .role{display:block;font-size:10.5px;font-weight:700;color:#19dc94;letter-spacing:.3px}
.member p{font-size:11px;color:#b9cfdb;line-height:1.55}

/* ===== PREGUNTAS FRECUENTES ===== */
/* SECCIÓN PREGUNTAS FRECUENTES: fondo blanco. */
.faq{background:#fff;border-top:1px solid #e4edf2}
/* Dos columnas: introducción a la izquierda y preguntas a la derecha. */
.faq-grid{display:grid;grid-template-columns:36% 64%;gap:44px;align-items:start}
.faq-intro .lead{margin-top:10px;font-size:13.5px}
.faq-intro .btn{margin-top:20px}
/* Lista vertical de preguntas. */
.faq-list{display:flex;flex-direction:column;gap:10px}
/* Cada pregunta es una caja con borde (elemento <details>). */
.faq-item{
    border:1px solid #d3e3ec;border-radius:12px;background:#fff;
    box-shadow:0 5px 16px rgba(10,64,89,.05);overflow:hidden;
}
/* La línea de la pregunta (se puede hacer clic). */
.faq-item summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:15px 18px;font-size:13px;font-weight:700;
}
/* Oculta la flechita nativa del navegador. */
.faq-item summary::-webkit-details-marker{display:none}
/* Botón circular con "+" a la derecha de cada pregunta. */
.faq-item summary:after{
    content:"+";flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;
    border-radius:50%;background:#e8faf5;color:#08c986;font-size:17px;font-weight:700;transition:.2s;
}
/* Cuando la pregunta está abierta el "+" cambia a "−" y se pone verde. */
.faq-item[open] summary:after{content:"\2212";background:#13d991;color:#043424}
/* Borde verde en la pregunta abierta. */
.faq-item[open]{border-color:#16d88d}
/* Texto de la respuesta. */
.faq-item p{padding:0 18px 16px;font-size:12px;color:var(--muted);line-height:1.65}

/* RESPONSIVE (final): preguntas frecuentes en una columna en tablet. */
@media(max-width:1000px){
    .faq-grid{grid-template-columns:1fr;gap:28px}
}
/* RESPONSIVE (final) en celular: la serpiente se vuelve una línea vertical
   (los pasos uno debajo del otro) y el equipo queda en una columna. */
@media(max-width:700px){
    .snake{gap:0;padding:0 0 0 34px}
    .snake-row,.snake-row.rev{flex-direction:column}
    .s-step{display:flex;gap:14px;text-align:left;padding:0 0 22px;align-items:flex-start}
    .s-num{margin:0;flex:0 0 66px;margin-left:-34px}
    .s-step .n{left:10px;top:-6px}
    .s-card{flex:1}
    .team-grid{grid-template-columns:minmax(0,280px)}
}


/* ===== PROBLEMAS DE LOS USUARIOS ===== */
/* Fondo claro con un brillo cálido muy suave arriba, para diferenciarlo de la sección anterior. */
.user-problem{
    background:
      radial-gradient(60% 80% at 50% 0%,rgba(255,138,92,.07),transparent 70%),
      linear-gradient(180deg,#fbfdfe,#f4fbf8);
    border-top:1px solid #e4edf2;
}
/* Encabezado centrado: etiqueta, título y descripción. */
.up-head{text-align:center;margin-bottom:38px}
.up-head .section-label{justify-content:center}
.up-head .lead{margin:12px auto 0}
/* Rejilla de 3 tarjetas, una por problema. */
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Tarjeta de un problema. */
.up-card{
    position:relative;background:#fff;border:1px solid #d3e3ec;border-radius:18px;
    padding:30px 26px 26px;box-shadow:0 10px 28px rgba(10,64,89,.08);transition:.25s;
}
.up-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(10,64,89,.13)}
/* Número grande y tenue en la esquina (01, 02, 03). */
.up-num{position:absolute;top:16px;right:20px;font-size:34px;font-weight:800;color:#e6eff4;letter-spacing:-1px}
/* Ícono dentro de un círculo cálido: el color naranja indica "problema". */
.up-icon{
    width:58px;height:58px;display:grid;place-items:center;border-radius:16px;
    background:#fff1ea;color:#f26a3d;font-size:23px;margin-bottom:18px;
}
.up-card h3{font-size:18px;margin-bottom:8px}
.up-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
/* Frase tipo "lo que piensa el usuario", en cursiva y con una barra verde a la izquierda. */
.up-quote{
    margin-top:18px;padding:11px 14px;border-left:3px solid #19d38a;border-radius:0 10px 10px 0;
    background:#f1fbf7;color:#0b5b45;font-size:12.5px;font-style:italic;font-weight:500;
}
/* Texto final que explica con detalle los problemas de los usuarios (reemplaza la tarjeta azul). */
.up-text{max-width:780px;margin:40px auto 0}
.up-text h3{font-size:21px;text-align:center;margin-bottom:14px}
.up-text p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:12px}
.up-text strong{color:var(--text)}
/* La última frase conecta el problema con CFV y se resalta en verde. */
.up-text .up-cierre{color:#0b5b45;font-weight:600;margin-bottom:0}
/* Tablet y celular: una columna. */
@media(max-width:900px){
    .up-grid{grid-template-columns:1fr}
}


/* ===== BARRA SUPERIOR con el botón "Volver al inicio" ===== */
/* Deja espacio al hacer clic en enlaces internos para que la barra no tape los títulos. */
html{scroll-padding-top:64px}
.topnav{
    position:sticky;top:0;z-index:50;
    background:rgba(6,40,61,.88);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    backdrop-filter:blur(12px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.topnav-name{color:rgba(255,255,255,.75);font-size:14px;font-weight:600;letter-spacing:.02em}
.back-home{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;border-radius:999px;
    border:1.5px solid rgba(255,255,255,.35);
    color:#fff;font-size:14px;font-weight:700;white-space:nowrap;
    transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.back-home:hover{background:var(--green);border-color:var(--green);color:#043122;transform:translateX(-2px)}
@media (max-width:600px){.topnav-name{display:none}}