/* ===== AGRA TEC-TI — LIGHT MODE =====
   Frutiger Aero · Liquid Glass · Nature + Tech
   Clean, bright, futuristic, farmer-friendly
   ============================================ */

:root {
    /* Greens — matched to logo gradient */
    --green-50:  #f2f9ed;
    --green-100: #e0f2d3;
    --green-200: #c3e6a8;
    --green-300: #8ed164;
    --green-400: #5cb93d;
    --green-500: #3da349;
    --green-600: #2e8b3a;
    --green-700: #256f30;
    --green-800: #1d5727;
    --green-900: #16421e;

    --lime-300: #b8dc4e;
    --lime-400: #a0d34a;
    --lime-500: #8bc34a;

    /* Light palette */
    --bg-body:   #f7fbf4;
    --bg-white:  #ffffff;
    --bg-soft:   #f0f7eb;
    --bg-section:#f3f9ef;

    --text-primary:   #1b2d1a;
    --text-secondary: #3a5938;
    /* Este verde estaba en #688a66 y se quedaba en 3.5 sobre el fondo de la
       página, por debajo del mínimo legible de 4.5. Lo usan los subtítulos de
       sección y el cuerpo de las tarjetas, o sea la mitad del texto del sitio.
       Bajarle dos tonos no cambia la identidad y sí cambia quién puede leerlo:
       con sol de mediodía en la pantalla de un teléfono, la diferencia es
       entre leerlo y adivinarlo.
       Si se quisiera volver al de antes, es esta línea y nada más. */
    --text-muted:     #4f7048;
    --text-light:     #96b894;
    /* Mismo tono. Se conserva el nombre porque las piezas nuevas ya lo usan y
       dice a las claras para qué es. */
    --text-legible:   #4f7048;

    /* Glass (liquid glass) */
    --glass-bg:         rgba(255, 255, 255, 0.45);
    --glass-bg-strong:  rgba(255, 255, 255, 0.55);
    --glass-border:     rgba(255, 255, 255, 0.5);
    --glass-border-str: rgba(255, 255, 255, 0.65);
    --glass-shadow:     0 8px 32px rgba(30, 90, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --glass-shadow-lg:  0 16px 48px rgba(30, 90, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);

    --gradient-primary: linear-gradient(135deg, #3da349, #8bc34a);
    /* El mismo verde de la marca, dos tonos más hondo, para todo lo que
       lleve texto blanco encima. --gradient-primary termina en #8bc34a y
       ahí el blanco se queda en 2.1, muy por debajo del mínimo legible de
       4.5: con sol pegándole a la pantalla, la letra desaparece. El claro
       sigue vivo para rellenos decorativos, donde no hay texto que perder. */
    --gradient-cta:     linear-gradient(135deg, #1d6127, #2b8236);
    --gradient-warm:    linear-gradient(135deg, #8bc34a, #3da349, #2e8b3a);
    --gradient-soft:    linear-gradient(135deg, #e0f2d3, #f2f9ed, #f0f7eb);

    --font-display: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;

    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 16px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-xl: 36px;
}

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
    scroll-padding-bottom: 100px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px; /* space for bottom nav */
}

img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

.container { max-width:1220px; margin:0 auto; padding:0 24px; }

/* ─── Particles ─── */
#particleCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* ─── Organic Shapes ─── */
.organic-shapes { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.shape {
    position:absolute; border-radius:50%; filter:blur(100px); opacity:0.18;
    animation: floatShape 25s ease-in-out infinite;
}
.shape-1 { width:600px; height:600px; background:var(--green-200); top:-200px; right:-100px; }
.shape-2 { width:450px; height:450px; background:var(--cyan-300); bottom:5%; left:-150px; animation-delay:-7s; }
.shape-3 { width:350px; height:350px; background:var(--lime-300); top:50%; right:15%; animation-delay:-12s; }
.shape-4 { width:500px; height:500px; background:var(--green-100); bottom:-150px; left:30%; animation-delay:-18s; }

@keyframes floatShape {
    0%,100% { transform:translate(0,0) scale(1); }
    33%     { transform:translate(30px,-40px) scale(1.04); }
    66%     { transform:translate(-25px,25px) scale(0.96); }
}

/* ─── Gradient text ─── */
.gradient-text {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════
   HERO
   ═══════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
}

.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-img {
    width:100%; height:100%; object-fit:cover; opacity:0.35;
    animation: slowZoom 30s ease-in-out infinite alternate;
}
@keyframes slowZoom { 0%{transform:scale(1)} 100%{transform:scale(1.08)} }

.hero-overlay {
    position:absolute; inset:0;
    background: linear-gradient(
        180deg,
        rgba(248,253,246,0.65) 0%,
        rgba(248,253,246,0.3) 40%,
        rgba(248,253,246,0.5) 70%,
        rgba(248,253,246,0.97) 100%
    );
}

.hero-content {
    position:relative; z-index:2;
    max-width:1220px; margin:0 auto;
    padding: 40px 24px 160px;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
}

.hero-top-logo {
    display:flex; align-items:center; gap:12px; margin-bottom:32px;
    animation: fadeInUp 0.7s var(--ease-out-expo) both;
}
.hero-logo-img {
    width:48px; height:48px; object-fit:contain;
    filter: drop-shadow(0 4px 12px rgba(34,197,94,0.25));
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%,100% { filter: drop-shadow(0 4px 12px rgba(34,197,94,0.25)); }
    50%     { filter: drop-shadow(0 4px 20px rgba(34,197,94,0.5)); }
}
.hero-logo-text {
    font-family:var(--font-display); font-weight:700; font-size:1.3rem;
    letter-spacing:2px; color: var(--text-primary);
}
.hero-logo-text .accent {
    background:var(--gradient-primary); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 24px; font-size:0.85rem; font-weight:500;
    color:var(--green-700);
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:999px;
    box-shadow: 0 4px 20px rgba(30,90,40,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom:24px; animation: fadeInUp 0.7s var(--ease-out-expo) 0.1s both;
}
.badge-dot {
    width:6px; height:6px; background:var(--green-500); border-radius:50%;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,0.4); }
    50%     { box-shadow:0 0 0 8px rgba(34,197,94,0); }
}

.hero-title { font-family:var(--font-display); line-height:1.08; margin-bottom:20px; }
.title-line {
    display:block; animation: fadeInUp 0.7s var(--ease-out-expo) both;
}
.title-line:nth-child(1) {
    font-size:clamp(2.5rem,7vw,4.5rem); font-weight:800; color:var(--text-primary);
    animation-delay:0.15s;
}
.title-line:nth-child(2) {
    font-size:clamp(2.8rem,8vw,5.2rem); font-weight:900;
    animation-delay:0.25s;
}

.hero-description {
    max-width:560px; font-size:1.15rem; color:var(--text-secondary);
    line-height:1.75; margin-bottom:32px; margin-left:auto; margin-right:auto;
    animation: fadeInUp 0.7s var(--ease-out-expo) 0.35s both;
}

.hero-buttons {
    display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px;
    justify-content:center;
    animation: fadeInUp 0.7s var(--ease-out-expo) 0.45s both;
}

/* ─── Buttons ─── */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; font-family:var(--font-body); font-size:0.95rem;
    font-weight:600; border-radius:var(--radius-md); cursor:pointer;
    transition: all 0.4s var(--ease-out-expo); position:relative;
    overflow:hidden; border:none;
}

.btn-primary {
    background:var(--gradient-cta); color:#fff;
    box-shadow: 0 4px 20px rgba(29,97,39,0.28), 0 0 0 0 rgba(29,97,39,0);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow: 0 8px 30px rgba(34,197,94,0.35), 0 0 60px rgba(34,197,94,0.08);
}
.btn-glow {
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.25) 0%,transparent 60%);
    opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.btn-primary:hover .btn-glow { opacity:1; }

.btn-glass-light {
    background:rgba(255,255,255,0.6); backdrop-filter:blur(10px);
    border:1px solid var(--glass-border-str); color:var(--green-700);
}
.btn-glass-light:hover {
    background:rgba(255,255,255,0.8); transform:translateY(-2px);
    box-shadow:var(--glass-shadow);
}

.btn-whatsapp {
    background:linear-gradient(135deg,#25D366,#128C7E); color:#fff;
    box-shadow:0 4px 20px rgba(37,211,102,0.25);
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,0.35); }

.btn-outline-light {
    background:var(--bg-white); color:var(--text-primary);
    border:1.5px solid var(--glass-border-str);
}
.btn-outline-light:hover {
    background:var(--green-50); border-color:var(--green-400); transform:translateY(-2px);
    box-shadow:var(--glass-shadow);
}

.btn-lg { padding:16px 32px; font-size:1rem; }
.btn-full { width:100%; justify-content:center; }

/* ─── Stats ─── */
.hero-stats {
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
    animation: fadeInUp 0.7s var(--ease-out-expo) 0.55s both;
}
.stat-card {
    padding:16px 24px; display:flex; align-items:baseline; gap:2px; flex-wrap:wrap;
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:999px;
    box-shadow: 0 6px 24px rgba(30,90,40,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.stat-number {
    font-family:var(--font-display); font-size:2rem; font-weight:800;
    background:var(--gradient-primary); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-suffix { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--green-600); }
.stat-label {
    width:100%; font-size:0.72rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1px; margin-top:2px;
}

/* ─── Scroll indicator ─── */
.scroll-indicator {
    position:absolute; bottom:100px;
    left:0; right:0;
    margin:0 auto;
    width:fit-content;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    z-index:2; animation: fadeInUp 0.7s var(--ease-out-expo) 0.8s both;
}
.scroll-indicator span { font-size:0.7rem; color:var(--text-light); letter-spacing:2px; text-transform:uppercase; }
.scroll-mouse {
    width:22px; height:36px; border:2px solid var(--text-light);
    border-radius:11px; display:flex; justify-content:center; padding-top:7px;
}
.scroll-wheel {
    width:3px; height:7px; background:var(--green-500); border-radius:2px;
    animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
    0%   { transform:translateY(0); opacity:1; }
    50%  { transform:translateY(10px); opacity:0.2; }
    100% { transform:translateY(0); opacity:1; }
}

/* ═══════════════════════
   SECTIONS BASE
   ═══════════════════════ */
.section { position:relative; z-index:1; padding:100px 0; }

.section-header { text-align:center; max-width:680px; margin:0 auto 64px; }
.section-tag {
    display:inline-block; padding:8px 22px; font-size:0.82rem; font-weight:600;
    color:var(--green-700);
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:999px;
    box-shadow: 0 4px 16px rgba(30,90,40,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
    margin-bottom:18px; letter-spacing:0.3px;
}
.section-title {
    font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem);
    font-weight:800; color:var(--text-primary); line-height:1.2; margin-bottom:14px;
}
.section-subtitle { font-size:1.05rem; color:var(--text-muted); line-height:1.7; }

/* ═══════════════════════
   BENEFITS
   ═══════════════════════ */
.benefits-section { background:var(--bg-white); }

.benefits-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}

.benefit-card {
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:var(--radius-xl); overflow:hidden;
    box-shadow: 0 8px 32px rgba(30,90,40,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.4s var(--ease-out-expo);
}
.benefit-card:hover {
    transform:translateY(-6px);
    background:rgba(255,255,255,0.6);
    box-shadow: 0 16px 48px rgba(30,90,40,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
    border-color:rgba(255,255,255,0.7);
}

.benefit-img-wrap {
    height:220px; overflow:hidden;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
.benefit-img-wrap img {
    width:100%; height:100%; object-fit:cover;
    transition: transform 0.6s var(--ease-out-expo);
}
.benefit-card:hover .benefit-img-wrap img { transform:scale(1.06); }

.benefit-body { padding:28px; }
.benefit-icon { font-size:2rem; margin-bottom:12px; }
.benefit-body h3 {
    font-family:var(--font-display); font-size:1.25rem; font-weight:700;
    color:var(--text-primary); margin-bottom:10px;
}
.benefit-body p { font-size:0.92rem; color:var(--text-muted); line-height:1.7; }
/* ═══════════════════════
   LIBRETA DE CAMPO ⭐
   ═══════════════════════ */
.libreta-section { background:var(--bg-white); }

.libreta-layout {
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
    max-width:1100px; margin:0 auto;
}

.libreta-features { display:flex; flex-direction:column; gap:14px; }

.lf-item {
    display:flex; gap:16px; padding:16px; border-radius:var(--radius-md);
    transition: background 0.3s; cursor:default; text-align:left;
}
.lf-item:hover { background:rgba(255,255,255,0.5); }
.lf-icon {
    font-size:1.5rem; flex-shrink:0;
    width:50px; height:50px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:50%;
    box-shadow: 0 4px 12px rgba(30,90,40,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.lf-item h4 {
    font-family:var(--font-display); font-size:1rem; font-weight:600;
    color:var(--text-primary); margin-bottom:4px;
}
.lf-item p { font-size:0.85rem; color:var(--text-muted); line-height:1.5; }

.libreta-visual { position:relative; }
.libreta-preview-card {
    border-radius:var(--radius-xl); overflow:hidden;
    box-shadow: 0 16px 48px rgba(30,90,40,0.1), inset 0 1px 0 rgba(255,255,255,0.5);
    border:1px solid rgba(255,255,255,0.45);
    max-width:480px; margin:0 auto;
}
.libreta-preview-card img { width:100%; display:block; }

/* ═══════════════════════
   PARCELAS / SENSORES
   ═══════════════════════ */
.parcelas-section { background:var(--bg-soft); }

.parcelas-layout {
    display:flex; flex-direction:column; gap:48px; align-items:center;
    text-align:center; max-width:860px; margin:0 auto;
}

.parcelas-desc {
    font-size:1.05rem; color:var(--text-secondary); line-height:1.75; margin-bottom:28px;
}

.parcelas-features {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
    text-align:left;
}

.pf-item {
    display:flex; gap:16px; padding:16px; border-radius:var(--radius-md);
    transition: background 0.3s; cursor:default;
}
.pf-item:hover { background:rgba(255,255,255,0.7); }
.pf-icon {
    font-size:1.6rem; flex-shrink:0;
    width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:50%;
    box-shadow: 0 4px 12px rgba(30,90,40,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.pf-item h4 {
    font-family:var(--font-display); font-size:1rem; font-weight:600;
    color:var(--text-primary); margin-bottom:4px;
}
.pf-item p { font-size:0.85rem; color:var(--text-muted); line-height:1.5; }

.parcelas-visual { position:relative; }

.parcela-card-main {
    border-radius:var(--radius-xl); overflow:hidden;
    box-shadow:var(--glass-shadow-lg); border:1px solid var(--glass-border);
    max-width:700px; margin:0 auto;
}
.parcela-card-main img { width:100%; display:block; }

.parcela-float {
    position:absolute; display:flex; align-items:center; gap:8px;
    padding:10px 20px; font-size:0.82rem; font-weight:600;
    color:var(--text-primary);
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid rgba(255,255,255,0.55);
    border-radius:999px;
    box-shadow: 0 6px 24px rgba(30,90,40,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: floatCard 4s ease-in-out infinite;
}
.float-1 { top:8%; left:50%; transform:translateX(-50%); animation-delay:0s; }
.float-2 { bottom:22%; left:5%; animation-delay:-1.5s; }
.float-3 { bottom:22%; right:5%; animation-delay:-3s; }

@keyframes floatCard {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-8px); }
}

/* ═══════════════════════
   SATELLITES & DRONES
   ═══════════════════════ */
.sky-section { background:var(--bg-white); }

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

.sky-card {
    position:relative; border-radius:var(--radius-xl); overflow:hidden;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow: 0 8px 32px rgba(30,90,40,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.4s var(--ease-out-expo); cursor:default;
    min-height:320px;
}
.sky-card.sky-card-large { grid-row: span 1; min-height:380px; }

.sky-card img {
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
    transition: transform 0.6s var(--ease-out-expo);
}
.sky-card:hover img { transform:scale(1.06); }

.sky-card-content {
    position:relative; z-index:2; height:100%; display:flex;
    flex-direction:column; justify-content:flex-end; padding:28px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.95) 100%);
}
.sky-card-icon { font-size:2rem; margin-bottom:8px; }
.sky-card-content h3 {
    font-family:var(--font-display); font-size:1.2rem; font-weight:700;
    color:var(--text-primary); margin-bottom:6px;
}
.sky-card-content p { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }

.sky-card:hover {
    transform:translateY(-4px);
    box-shadow: 0 16px 48px rgba(30,90,40,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
    border-color:rgba(255,255,255,0.7);
}

/* ═══════════════════════
   COSECHA / DASHBOARD
   ═══════════════════════ */
.cosecha-section { background:var(--bg-soft); }

.cosecha-layout {
    display:flex; flex-direction:column; gap:48px;
}

.browser-frame {
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow: 0 12px 40px rgba(30,90,40,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    border:1px solid var(--glass-border);
    max-width:900px; margin:0 auto;
}
.frame-header {
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    background:var(--green-50); border-bottom:1px solid var(--glass-border);
}
.frame-dots { display:flex; gap:6px; }
.frame-dots span { width:10px; height:10px; border-radius:50%; }
.frame-dots span:nth-child(1) { background:#ff5f56; }
.frame-dots span:nth-child(2) { background:#ffbd2e; }
.frame-dots span:nth-child(3) { background:#27c93f; }
.frame-url { font-size:0.75rem; color:var(--text-light); }
.frame-img { width:100%; }

.cosecha-features { display:flex; flex-direction:column; gap:16px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.cf-card {
    padding:28px;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:var(--radius-xl);
    box-shadow: 0 8px 28px rgba(30,90,40,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.3s var(--ease-out-expo);
}
.cf-card:hover {
    transform:translateY(-3px);
    background:rgba(255,255,255,0.62);
    box-shadow: 0 14px 40px rgba(30,90,40,0.09), inset 0 1px 0 rgba(255,255,255,0.7);
    border-color:rgba(255,255,255,0.7);
}
.cf-emoji { font-size:2rem; display:block; margin-bottom:12px; }
.cf-card h4 {
    font-family:var(--font-display); font-size:1.05rem; font-weight:600;
    color:var(--text-primary); margin-bottom:6px;
}
.cf-card p { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }

/* ═══════════════════════
   PROCESS
   ═══════════════════════ */
.process-section { background:var(--bg-white); overflow:hidden; }

.process-steps {
    display:flex; align-items:flex-start; gap:0; justify-content:center;
}

.step {
    flex:1; max-width:240px; text-align:center; padding:24px 16px;
    position:relative;
}
.step-num {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    font-family:var(--font-display); font-size:3.5rem; font-weight:900;
    color:var(--green-100); line-height:1; pointer-events:none;
}
.step-icon {
    font-size:2.5rem; margin-bottom:16px;
    animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.08); }
}
.step h4 {
    font-family:var(--font-display); font-size:1rem; font-weight:700;
    color:var(--text-primary); margin-bottom:8px;
}
.step p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }

.step-arrow {
    display:flex; align-items:center; padding-top:60px;
    font-size:1.5rem; color:var(--green-300); font-weight:300;
}

/* ═══════════════════════
   CONTACT
   ═══════════════════════ */
.contact-section {
    background: var(--gradient-soft);
    position:relative; overflow:hidden;
}
.contact-glow {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:700px; height:700px;
    background:radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
    pointer-events:none;
}

.contact-wrapper {
    display:flex; flex-direction:column; gap:48px; align-items:center;
    text-align:center; max-width:720px; margin:0 auto;
}

.contact-desc {
    font-size:1.05rem; color:var(--text-secondary); line-height:1.75; margin-bottom:28px;
}

.contact-checks {
    display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;
    margin-bottom:32px; text-align:left;
}
.check-item {
    display:flex; align-items:center; gap:10px; font-size:0.95rem; color:var(--text-secondary);
}

.contact-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Contact card */
.contact-card {
    background:rgba(255,255,255,0.48);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid rgba(255,255,255,0.55);
    border-radius:var(--radius-xl);
    padding:36px;
    box-shadow: 0 12px 40px rgba(30,90,40,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
    width:100%; max-width:480px;
}
.cc-header {
    display:flex; align-items:center; gap:14px;
    margin-bottom:28px; padding-bottom:20px;
    border-bottom:1px solid var(--glass-border);
}
.cc-logo { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(34,197,94,0.25)); }
.cc-header h4 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); }
.cc-header span { font-size:0.82rem; color:var(--green-700); }
.cc-body { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.cc-item {
    display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--text-secondary);
}
.cc-item svg { stroke:var(--green-600); flex-shrink:0; }

/* ═══════════════════════
   FOOTER
   ═══════════════════════ */
.footer {
    position:relative; z-index:1; padding:50px 0 28px;
    background:var(--bg-white); border-top:1px solid var(--glass-border);
}
.footer-main {
    display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; margin-bottom:40px;
}
.footer-logo { width:110px; margin-bottom:14px; filter:drop-shadow(0 2px 8px rgba(34,197,94,0.2)); }
.footer-brand p { font-size:0.88rem; color:var(--text-muted); line-height:1.6; max-width:280px; }
.footer-links h4 {
    font-family:var(--font-display); font-size:0.8rem; font-weight:700;
    color:var(--text-primary); text-transform:uppercase; letter-spacing:1.5px;
    margin-bottom:16px;
}
.footer-links a {
    display:block; font-size:0.88rem; color:var(--text-muted); padding:5px 0;
    transition:all 0.3s;
}
.footer-links a:hover { color:var(--green-600); transform:translateX(4px); }

.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px; border-top:1px solid var(--glass-border);
}
.footer-bottom p { font-size:0.78rem; color:var(--text-muted); }
.footer-bottom span { font-size:0.78rem; color:var(--text-muted); }

/* ═══════════════════════
   BOTTOM NAVIGATION — FLOATING DOCK
   ═══════════════════════ */
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    width: fit-content;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    box-shadow:
        0 8px 32px rgba(30, 90, 40, 0.1),
        0 2px 6px rgba(30, 90, 40, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.4s var(--ease-out-expo);
}

.bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 16px;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    border-radius: 999px;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    white-space: nowrap;
}
.bnav-item svg { width: 20px; height: 20px; transition: all 0.3s; }

.bnav-item:hover {
    color: var(--green-600);
    background: rgba(61, 163, 73, 0.08);
}
.bnav-item:hover svg { stroke: var(--green-600); }

.bnav-item.active {
    color: var(--green-700);
    background: rgba(61, 163, 73, 0.12);
}
.bnav-item.active svg { stroke: var(--green-700); }
.bnav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 6px rgba(61, 163, 73, 0.5);
}

/* No usa --gradient-primary: su extremo claro (#8bc34a) deja el texto blanco
   en 2.1, y aqui la letra mide 9 px. Mismo verde, dos tonos mas hondo. */
.bnav-cta {
    color: #fff !important;
    background: var(--gradient-cta) !important;
    border-radius: 999px;
    padding: 8px 20px;
}
.bnav-cta svg { stroke: #fff !important; }
.bnav-cta:hover {
    opacity: 0.9;
    transform: scale(1.04);
}
.bnav-cta.active::after { display: none; }
.bnav-cta.active { background: var(--gradient-cta) !important; color: #fff !important; }

/* Floating WA removed — contact is in bottom dock */

/* ═══════════════════════
   ANIMATIONS
   ═══════════════════════ */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}

[data-aos] { opacity:0; transform:translateY(35px); transition:all 0.7s var(--ease-out-expo); }
[data-aos].aos-animate { opacity:1; transform:translateY(0); }
[data-aos="fade-right"] { transform:translateX(-35px); }
[data-aos="fade-right"].aos-animate { transform:translateX(0); }
[data-aos="fade-left"]  { transform:translateX(35px); }
[data-aos="fade-left"].aos-animate  { transform:translateX(0); }
[data-aos="zoom-in"]    { transform:scale(0.92); }
[data-aos="zoom-in"].aos-animate    { transform:scale(1); }

/* ═══════════════════════
   RESPONSIVE
   ═══════════════════════ */
@media (max-width:1024px) {
    .benefits-grid  { grid-template-columns:repeat(2,1fr); }
    .sky-grid { grid-template-columns:1fr 1fr; }
    .sky-card.sky-card-large { grid-column:span 2; }
    .libreta-layout { grid-template-columns:1fr; gap:40px; }
    .footer-main { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .benefits-grid  { grid-template-columns:1fr; }
    .sky-grid { grid-template-columns:1fr; }
    .sky-card.sky-card-large { grid-column:span 1; }
    .cf-row { grid-template-columns:1fr; }
    .process-steps { flex-direction:column; align-items:center; }
    .step-arrow { transform:rotate(90deg); padding:0; }
    .hero-stats { flex-direction:column; }
    .stat-card { justify-content:center; text-align:center; }
    .hero-buttons { flex-direction:column; }
    .libreta-layout { text-align:center; }
    .lf-item { text-align:left; }
    .btn { justify-content:center; }
    .contact-btns { flex-direction:column; }
    .footer-main { grid-template-columns:1fr; gap:32px; }
    .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
    .section { padding:72px 0; }
    .section-header { margin-bottom:44px; }
    .parcelas-features { grid-template-columns:1fr; }
    .contact-checks { grid-template-columns:1fr; }
    .parcela-float { display:none; }
}

@media (max-width:480px) {
    .hero-content { padding:80px 16px 60px; }
    .container { padding:0 16px; }
    /* Con la entrada de Precios la barra pasó a seis botones y a 431 px, que
       no caben en un telefono de 375. Se aprieta el relleno en vez de quitar
       una entrada: seis destinos caben, seis etiquetas anchas no. */
    .bottom-nav { max-width:calc(100vw - 16px); }
    .bnav-item { padding:8px 9px; }
    .bnav-item span { font-size:0.54rem; letter-spacing:0; }
    .bnav-item svg { width:19px; height:19px; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--bg-body); }
::-webkit-scrollbar-thumb { background:rgba(34,197,94,0.25); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(34,197,94,0.45); }

::selection { background:rgba(34,197,94,0.2); color:var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════
   PRECIOS
   ═══════════════════════════════════════════════════════════════════
   Va entre dos secciones blancas (proceso y contacto), así que toma el
   fondo suave para que se despegue y no parezca continuación de la de
   arriba. Todo con los tokens de la marca: ni un color suelto. */

.precios-section { background:var(--bg-soft); }

/* ── El gancho del análisis gratis ── */
.pr-gratis {
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    padding:28px 32px; margin:0 auto 44px; max-width:940px;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid var(--glass-border-str);
    border-radius:var(--radius-lg);
    box-shadow:var(--glass-shadow);
}
.pr-gratis-icono { font-size:2.6rem; line-height:1; flex:0 0 auto; }
.pr-gratis > div { flex:1 1 320px; min-width:0; }
.pr-gratis h3 {
    font-family:var(--font-display); font-size:1.25rem; font-weight:800;
    color:var(--text-primary); margin-bottom:5px;
}
.pr-gratis p { font-size:0.94rem; line-height:1.6; color:var(--text-secondary); margin:0; }
.pr-gratis .btn { flex:0 0 auto; }

/* ── Elegir país ── */
.pr-regiones {
    display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    margin-bottom:36px; padding:6px;
    width:fit-content; margin-left:auto; margin-right:auto;
    background:var(--glass-bg); border:1px solid var(--glass-border);
    border-radius:999px; box-shadow:var(--glass-shadow);
}
.pr-region {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; min-height:44px; border:0; cursor:pointer;
    background:transparent; border-radius:999px;
    font:600 0.88rem/1 var(--font-body); color:var(--text-legible);
    transition:all 0.3s var(--ease-out-expo); white-space:nowrap;
}
.pr-region:hover { color:var(--text-primary); }
.pr-region.act {
    /* No usa --gradient-primary: ese verde aclara mucho hacia el final y el
       blanco encima se despinta. Éste va del mismo color pero más hondo. */
    background:var(--gradient-cta); color:#fff;
    box-shadow:0 6px 18px rgba(29,97,39,0.3);
}
.pr-bandera { font-size:1.15em; line-height:1; }

/* ── Las dos tarjetas de segmento ── */
.pr-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
    gap:24px; max-width:940px; margin:0 auto;
}
.pr-card {
    background:var(--bg-white); border:1px solid var(--green-100);
    border-radius:var(--radius-lg); padding:28px;
    box-shadow:var(--glass-shadow);
    transition:transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.pr-card:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.pr-card-tapa {
    display:flex; gap:14px; align-items:flex-start;
    padding-bottom:20px; margin-bottom:4px; border-bottom:1px solid var(--green-100);
}
.pr-icono { font-size:2rem; line-height:1.1; flex:0 0 auto; }
.pr-card-tapa h3 {
    font-family:var(--font-display); font-size:1.12rem; font-weight:800;
    color:var(--text-primary); margin-bottom:4px;
}
.pr-ejemplos { font-size:0.82rem; line-height:1.5; color:var(--text-legible); margin:0; }

.pr-modos { display:grid; gap:4px; }
.pr-modo { padding:20px 0; border-bottom:1px solid var(--green-50); }
.pr-modo:last-child { border-bottom:0; padding-bottom:4px; }
.pr-modo-tit {
    font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--green-700); margin-bottom:8px;
}
.pr-cifra {
    font-family:var(--font-display); font-size:2.1rem; font-weight:800;
    color:var(--text-primary); line-height:1; letter-spacing:-1px;
}
.pr-sufijo {
    font-size:0.92rem; font-weight:600; color:var(--text-legible);
    letter-spacing:0; margin-left:4px;
}
.pr-incluye { font-size:0.86rem; color:var(--text-secondary); margin-top:7px; }
.pr-extra { font-size:0.84rem; color:var(--text-legible); margin-top:3px; }
.pr-pie {
    font-size:0.82rem; line-height:1.5; color:var(--green-700);
    background:var(--green-50); border-radius:12px;
    padding:9px 12px; margin-top:11px;
}
.pr-nota {
    max-width:820px; margin:26px auto 0; text-align:center;
    font-size:0.84rem; line-height:1.6; color:var(--text-legible);
}

/* ── Bloque para distribuidoras ── */
.pr-b2b {
    max-width:940px; margin:56px auto 0; padding:32px;
    background:var(--glass-bg); border:1px solid var(--glass-border);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border-radius:var(--radius-lg); box-shadow:var(--glass-shadow);
}
.pr-b2b-tapa { text-align:center; margin-bottom:26px; }
.pr-b2b-tapa h3 {
    font-family:var(--font-display); font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800;
    color:var(--text-primary); margin:14px 0 8px;
}
.pr-b2b-tapa p {
    font-size:0.94rem; line-height:1.65; color:var(--text-secondary);
    max-width:620px; margin:0 auto;
}
.pr-b2b-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;
}
.pr-b2b-card {
    background:var(--bg-white); border:1px solid var(--green-100);
    border-radius:var(--radius-md); padding:24px;
}
.pr-b2b-card h4 {
    font-family:var(--font-display); font-size:0.98rem; font-weight:700;
    color:var(--text-primary); line-height:1.35; margin-bottom:14px; min-height:2.7em;
}
/* El precio de lista tachado y el descuento, en la tarjeta de volumen.
   Se llama pr-tachado y no pr-lista porque pr-lista ya es la lista de
   características de la tarjeta: dos cosas con el mismo nombre y una hereda
   los estilos de la otra sin que nadie entienda por qué. */
/* --text-muted y no --text-light: a 21 px el tachado quedaba en 2.19:1 y no se
   leía. Un precio tachado no es decoración, es el ancla del descuento — si no
   se lee, el "−33%" de al lado no significa nada. */
.pr-tachado { color:var(--text-muted); font-weight:500; font-size:0.62em; margin-right:2px; }
.pr-desc {
    display:inline-block; margin-left:9px; padding:3px 10px; border-radius:999px;
    background:rgba(61,163,73,0.14); color:var(--green-700);
    font:700 0.42em/1.6 var(--font-body); vertical-align:middle;
}

.pr-lista { list-style:none; margin:16px 0 0; padding:0; }
.pr-lista li {
    position:relative; padding-left:22px; margin-bottom:8px;
    font-size:0.85rem; line-height:1.5; color:var(--text-secondary);
}
.pr-lista li::before {
    content:'✓'; position:absolute; left:0; top:0;
    color:var(--green-500); font-weight:800;
}
/* Lo que todavía no existe se ve distinto. Prometer de más se paga caro. */
/* Lo que aún no existe se distingue por la viñeta y la etiqueta, NO por
   despintar el texto: son condiciones comerciales y hay que poder leerlas. */
.pr-lista li.pr-pronto { color:var(--text-legible); }
.pr-lista li.pr-pronto::before { content:'○'; color:var(--text-light); font-weight:600; }
.pr-lista li.pr-pronto span {
    display:inline-block; margin-left:5px; padding:1px 8px;
    background:var(--green-50); border-radius:999px;
    font-size:0.72rem; font-weight:700; color:var(--green-700);
}

@media (max-width:600px) {
    .pr-gratis { padding:24px 20px; text-align:center; justify-content:center; }
    .pr-gratis .btn { width:100%; }
    .pr-card, .pr-b2b { padding:22px 18px; }
    .pr-region { padding:10px 14px; font-size:0.8rem; }
}

/* ── Cruces entre páginas y moneda del B2B ── */

/* La liga a la otra página de precios. Va discreta: quien viene por un
   análisis no debería tropezarse con tarifas de distribuidora. */
.pr-otra {
    max-width:820px; margin:34px auto 0; text-align:center;
    font-size:0.9rem; line-height:1.6; color:var(--text-legible);
}
.pr-otra a {
    display:inline-block; margin-left:6px; font-weight:700;
    color:var(--green-700); text-decoration:underline; text-underline-offset:3px;
}
.pr-otra a:hover { color:var(--green-800); }

/* El aviso de moneda del B2B: sus tarifas son en dólares y en una página en
   español un "$" a secas se lee como pesos. La diferencia es de veinte veces,
   así que se dice antes de enseñar un solo número. */
.pr-moneda {
    display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
    max-width:640px; margin:0 auto 30px; padding:14px 22px;
    background:var(--green-50); border:1px solid var(--green-100);
    border-radius:999px; text-align:center;
    font-size:0.9rem; color:var(--text-secondary);
}
.pr-moneda strong { color:var(--green-700); }
.pr-moneda-marca {
    flex:0 0 auto; padding:4px 12px; border-radius:999px;
    background:var(--green-700); color:#fff;
    font:800 0.78rem/1.4 var(--font-display); letter-spacing:1px;
}
/* Junto a la cifra, para que el número nunca viaje solo. En línea y del
   mismo tamaño que el sufijo: en superíndice se lee como una nota al pie y
   aquí es justo lo contrario, es la información que no se puede perder. */
.pr-moneda-cod {
    font:700 0.92rem/1 var(--font-body); color:var(--green-700);
    letter-spacing:0.5px;
}
.pr-mensual {
    margin-top:16px; padding-top:14px; border-top:1px solid var(--green-100);
    font-size:0.82rem; line-height:1.5; color:var(--text-legible);
}

/* El aviso de "esto todavía no se vende" en la página del sistema integral.
   Va arriba del todo: es lo primero que hay que saber. */
.sis-aviso {
    display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
    max-width:940px; margin:-40px auto 0; padding:24px 28px;
    background:var(--bg-white); border:1px solid var(--green-200);
    border-radius:var(--radius-lg); box-shadow:var(--glass-shadow-lg);
    position:relative; z-index:2;
}
.sis-aviso-icono { font-size:2rem; line-height:1.1; flex:0 0 auto; }
.sis-aviso > div { flex:1 1 320px; min-width:0; }
.sis-aviso h3 {
    font-family:var(--font-display); font-size:1.1rem; font-weight:800;
    color:var(--text-primary); margin-bottom:6px;
}
.sis-aviso p { margin:0; font-size:0.92rem; line-height:1.65; color:var(--text-secondary); }
.sis-aviso a { font-weight:700; color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:600px) {
    .sis-aviso { margin-top:-24px; padding:20px 18px; }
    .pr-moneda { border-radius:var(--radius-md); }
}