/* ============================================================
   VEXTO · TEMA DE MARCA (sept. 2026)
   ------------------------------------------------------------
   Este archivo manda sobre los COLORES y las FUENTES de toda la web.
   Cada página conserva su CSS propio para la maquetación; este archivo
   se carga al final del <head> y pisa lo que haga falta.

   Todas las reglas empiezan por "html" a propósito: así ganan a los
   estilos de cada página aunque estos vayan más abajo (p. ej. el pie).

   Lo usan las 18 páginas reales. Las demos de cliente (restaurante,
   peluquería, fisioterapia, carpintería…) NO lo cargan y no se tocan.

   Paleta: naranja #ff9900 · menta #00cc99 · oliva #597931 · verde noche #003300
   Fuentes (auto-alojadas en assets/fonts/):
     League Gothic  → títulos, en mayúsculas (solo tiene un grosor)
     Jost           → subtítulos, menú, botones, etiquetas
     Archivo Narrow → texto
   Reglas de contraste que hay que respetar:
     · Sobre el naranja, el texto va en verde noche (el blanco no se lee).
     · Sobre fondo claro, el naranja y la menta NO se usan como texto;
       los acentos de texto van en oliva (#597931 en títulos grandes,
       #4a6626 en letra pequeña).
   ============================================================ */

@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/league-gothic-latin.woff2') format('woff2');}
@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/archivo-narrow-latin-var.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/jost-latin-var.woff2') format('woff2');}

html:root {
    /* Los 4 colores de la paleta */
    --naranja: #ff9900;
    --menta: #00cc99;
    --oliva: #597931;
    --noche: #003300;
    /* Derivados */
    --noche-2: #002400;          /* pie */
    --noche-3: #0a400a;          /* tarjetas sobre verde noche */
    --claro: #f1f4ea;            /* texto sobre verde */
    --claro-suave: #b9c7b0;

    /* Variables que ya usan las páginas (se redefinen aquí) */
    --bg: #eef0e6;               /* claro gris verdoso (fuera la crema) */
    --bg-light: #eef0e6;
    --bg-soft: #f8f9f4;
    --surface: #f8f9f4;
    --surface-2: #f1f3ea;
    --text-main: #102410;
    --text-muted: #3d4c38;
    --accent-warm: #ff9900;      /* naranja: botones y detalles */
    --accent-warm-2: #4a6626;    /* oliva oscuro: acentos como TEXTO (pasa AA) */
    --neon-violet: #4a6626;
    --neon-cyan: #597931;
    --border-light: #d9ddcf;
    --shadow-soft: none;

    --f-titulo: 'League Gothic', Impact, sans-serif;
    --f-sub: 'Jost', sans-serif;
    --f-texto: 'Archivo Narrow', 'Arial Narrow', sans-serif;
}

html body { font-family: var(--f-texto); font-size: 1.1rem; background-color: var(--bg); color: var(--text-main); overflow-x: hidden; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
/* Títulos: League Gothic en mayúsculas. Solo tiene un grosor: si se le pide
   negrita, el navegador la "engorda" y se emborrona → 400 + font-synthesis:none */
html h1, html h2:not(.mini-page h2), html .trust-num, html .plan-amount, html .calc-price,
html .pq-stat .n, html .stat-num, html .logo, html .vfoot .vlg {
    font-family: var(--f-titulo) !important; font-weight: 400 !important; font-synthesis: none;
    text-transform: uppercase; letter-spacing: .01em !important; line-height: .98 !important;
}
html .calc-price small { font-family: var(--f-texto); text-transform: none; line-height: 1.4; }

/* Subtítulos, menú, botones y etiquetas: Jost */
html h3:not(.mini-page h3), html h4, html .step-title, html .testimonial-author, html .plan-name,
html .nav-links a, html .btn-contact, html .btn-ghost, html .price-btn, html .btn-visit, html .btn-submit,
html .vel-btn, html .vel-chip, html .calc-wa, html .faq-container summary, html .pf-title, html .model-caption,
html .entry-tag, html .badge-recommended, html .tag, html .label-pill, html .svc-nuevo, html .tool-pill,
html .calc-step-label, html .calc-pack, html .calc-rec-label, html .trust-label, html .form-group label,
html .client-info h4, html #accept-cookies, html #reject-cookies, html .vfoot .vcol h3, html .vfoot .vbtn {
    font-family: var(--f-sub) !important;
}
html h3:not(.mini-page h3), html .step-title, html .testimonial-author, html .plan-name, html .client-info h4 {
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em !important; font-size: 1.05rem !important; line-height: 1.3;
}
html .pq-wrap .pq-row:first-child .pq-key h3 { font-size: 1.3rem !important; }
html .trust-label, html .entry-tag, html .badge-recommended, html .calc-rec-label {
    text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
/* Citas largas y el texto de las reseñas: en letra de texto (League Gothic no se lee en párrafos) */
html .testimonial-quote, html .review-text { font-family: var(--f-texto) !important; font-weight: 400 !important; font-style: normal; }

/* Marcadores "—" editoriales */
html .step-card::before, html .svc-num, html .chk-ico, html .feature-list li::before, html .pq-wrap .pq-val::before {
    font-family: var(--f-titulo) !important; font-weight: 400 !important;
}

/* Tamaños de los títulos */
html .section-title { font-size: clamp(3rem, 6vw, 4.4rem); margin-bottom: 22px; color: var(--text-main); }
html .hero h1, html .tema-hero .section-title, html .pq-hero-title { font-size: clamp(3.4rem, 7vw, 6.4rem); margin-bottom: 26px; }
html .about-section h2, html .cta-final h2, html .vel-pitch h2, html .extras-band h2, html .pq-band-head h2 { font-size: clamp(2.8rem, 6vw, 4.2rem); }
html .project-info h2, html .contact-form-wrapper h2 { font-size: clamp(2.4rem, 4vw, 3rem); }
html .legal-container h1 { font-size: clamp(2.8rem, 6vw, 3.6rem); }
html .legal-container h2 { font-size: 1.9rem; }
html .trust-num { font-size: 2.6rem !important; }
html .plan-amount { font-size: 3.2rem; }
html .price-card.eco .plan-amount { font-size: 2.8rem; }
html .calc-price { font-size: 3.2rem; }
html .pq-stat .n { font-size: clamp(2.8rem, 5vw, 3.6rem); }

/* Palabra destacada de los títulos sobre fondo claro: solo color de letra, en oliva
   (el naranja sobre el claro da 1,9:1 y no se lee) */
html .section-title span, html .vel-pitch h2 span, html .extras-band h2 span, html .pq-band-head h2 span {
    color: var(--oliva) !important; background: none;
}

/* ============================================================
   MENÚ (verde noche)
   ============================================================ */
html nav { background: rgba(0, 51, 0, .97); border-bottom-color: rgba(241,244,234,.12); box-shadow: none; }
html .logo { color: var(--claro); font-size: 2.1rem; }
html .logo span { color: var(--naranja); }
html .nav-links a { color: var(--claro-suave); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
html .nav-links a:hover { color: var(--menta); }
html .nav-links a[style] { color: var(--menta) !important; }  /* la página actual */
html .nav-toggle span { background: var(--claro); }
@media (max-width: 768px) { html .nav-links a { border-top-color: rgba(241,244,234,.12); } }

/* ============================================================
   BOTONES (rectos, con barrido)
   Principal: naranja con texto verde noche → barre a verde noche con texto blanco
   ============================================================ */
html .btn-contact, html .price-card.featured .price-btn, html .btn-visit, html .btn-submit, html .vel-btn, html .calc-wa {
    color: var(--noche) !important; background-color: var(--naranja) !important;
    background-image: linear-gradient(var(--noche), var(--noche)) !important;
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    border: 1px solid var(--naranja); border-radius: 2px; box-shadow: none; transform: none;
    text-transform: uppercase; letter-spacing: .1em !important; font-weight: 600; font-size: .95rem !important;
    transition: background-size .45s cubic-bezier(.16, 1, .3, 1), color .3s ease, border-color .3s ease;
}
html .btn-contact:hover, html .price-card.featured .price-btn:hover, html .btn-visit:hover,
html .btn-submit:hover, html .vel-btn:hover, html .calc-wa:hover {
    background-size: 100% 100%; color: #fff !important; border-color: var(--noche); transform: none; box-shadow: none; filter: none;
}
/* Secundario: contorno oliva oscuro */
html .btn-ghost, html .price-btn {
    color: var(--accent-warm-2); background-color: transparent; border-color: var(--accent-warm-2);
    text-transform: uppercase; letter-spacing: .1em; font-size: .95rem !important;
}
html .price-btn { background-color: var(--surface); }

/* ============================================================
   BANDAS A TODO EL ANCHO (sin tocar el HTML)
   box-shadow enorme del mismo color + clip-path para recortarla arriba y abajo
   ============================================================ */
html .hero, html .tema-hero, html .pq-hero, html #proceso, html .testimonial, html .reviews-section,
html .cta-final, html .pq-band { clip-path: inset(0 -100vmax); }

/* Cabecera de cada página en verde noche */
html .hero, html .tema-hero, html .pq-hero { background: var(--noche); box-shadow: 0 0 0 100vmax var(--noche); }
html .hero h1, html .tema-hero h1, html .pq-hero-title { color: var(--claro) !important; }
html .hero h1 span, html .tema-hero h1 span, html .pq-hero-title span { color: var(--naranja) !important; }
html .hero p, html .tema-hero .section-subtitle, html .pq-hero-lead .sub { color: var(--claro-suave); }
html .tema-hero { padding-bottom: 70px !important; margin-bottom: 70px; }
/* Botón secundario sobre el verde noche: en claro (el oliva oscuro ahí no se ve) */
html .hero .btn-ghost, html .tema-hero .btn-ghost, html .pq-hero .btn-ghost {
    color: var(--claro); border-color: rgba(241,244,234,.55); background-image: linear-gradient(var(--claro), var(--claro));
}
html .hero .btn-ghost:hover, html .tema-hero .btn-ghost:hover, html .pq-hero .btn-ghost:hover { color: var(--noche); }
html .pq-hero { padding-bottom: 70px; margin-bottom: 40px; }

/* Franja de cifras en naranja */
html .trust-bar { background: var(--naranja); border: 0; border-radius: 2px; box-shadow: none; }
html .trust-num { color: var(--noche); }
html .trust-label { color: var(--noche); font-size: .72rem; }

/* Reseñas en verde noche */
html .testimonial, html .reviews-section { background: var(--noche); box-shadow: 0 0 0 100vmax var(--noche); }
html .testimonial .section-title, html .reviews-section .section-title { color: var(--claro); }
html .testimonial .section-title span, html .reviews-section .section-title span { color: var(--naranja) !important; }
html .testimonial .section-subtitle, html .reviews-section .section-subtitle { color: var(--claro-suave); }
html .testimonial-card, html .review-card {
    background: var(--noche-3) !important; border: 0; border-top: 3px solid var(--naranja);
    border-radius: 2px; box-shadow: none; text-align: left;
}
html .testimonial-card::before { display: none; }
html .testimonial-stars, html .stars { color: var(--naranja); }
html .testimonial-stars .off, html .stars .off { color: rgba(241,244,234,.25); }
html .testimonial-quote, html .testimonial-author, html .review-text, html .client-info h4 { color: var(--claro); }
html .testimonial-role, html .client-info span { color: var(--claro-suave); }
html .testimonial-role a { color: var(--menta); }
html .client-avatar { background: var(--oliva); }

/* Llamada final en naranja */
html .cta-final { background: var(--naranja); box-shadow: 0 0 0 100vmax var(--naranja); padding-top: 90px; padding-bottom: 90px; }
html .cta-final h2, html .cta-final h2 span, html .cta-final p { color: var(--noche) !important; }
html .cta-final .btn-contact { background-color: var(--noche) !important; border-color: var(--noche); color: var(--claro) !important;
    background-image: linear-gradient(var(--oliva), var(--oliva)) !important; }
html .cta-final .btn-contact:hover { color: #fff !important; border-color: var(--oliva); }
html .cta-final .btn-ghost { color: var(--noche); border-color: var(--noche); background-image: linear-gradient(var(--noche), var(--noche)); }
html .cta-final .btn-ghost:hover { color: var(--naranja); }
html .cta-final.pq-cta .pq-cta-inner { border-top-color: rgba(0, 51, 0, .25); }
/* Si la página acaba con la llamada naranja, el pie va pegado */
html body:has(.cta-final) .vfoot { margin-top: 0; }

/* ============================================================
   INICIO (index.html)
   ============================================================ */
html #proceso { background: var(--oliva); box-shadow: 0 0 0 100vmax var(--oliva); }
html #proceso .section-title, html #proceso .section-subtitle { color: #fff; }
html #proceso .section-title span { color: #fff !important; }
html .step-card { background: transparent; border: 0; border-top: 2px solid var(--noche); border-radius: 0; box-shadow: none; padding: 22px 6px; }
html .step-card:hover { transform: none; box-shadow: none; }
html .step-card::before { color: var(--naranja); }
html .step-title { color: #fff; }
html .step-desc { color: #eef3e4; font-size: 1rem; }

html .about-section { background: var(--noche); border: 0; border-radius: 2px; box-shadow: none; }
html .about-section h2 { color: var(--claro); }
html .about-section h2 span { color: var(--naranja) !important; }
html .about-section p { color: var(--claro-suave); }

html .vent-ico { border-color: var(--oliva); color: var(--oliva); border-radius: 2px; }

html .vel-chip { color: var(--noche); background: rgba(255,153,0,.18); border-color: rgba(255,153,0,.6); border-radius: 2px; }
html .vel-card { border-radius: 4px; box-shadow: none; }
html .vel-list svg path { stroke: #00a37a; }

html .pf-card { border-radius: 4px; box-shadow: none; }
html .pf-card:hover { box-shadow: none; border-color: var(--oliva); }
html .pf-bar { background: #e3e7da; border-bottom-color: #d3d8c8; }
html .pf-overlay span { color: var(--noche); border-radius: 2px; box-shadow: none; }
html .pf-badge { border-radius: 2px; }
html .pf-badge.real { background: var(--menta); color: var(--noche); }
html .pf-badge.demo { background: rgba(89,121,49,.18); color: var(--noche); }

/* ============================================================
   SERVICIOS
   ============================================================ */
html .svc-item:hover, html .pq-row:hover { background: rgba(89,121,49,.06); }
html .svc-nuevo { color: var(--noche); background: var(--naranja); border-radius: 2px; }
html .tool-pill { background: var(--surface-2); border-radius: 2px; }
html .tool-pill:hover { border-color: rgba(89,121,49,.55); box-shadow: none; }
html .models-container { border-radius: 4px; box-shadow: none; }

/* ============================================================
   PROYECTOS
   ============================================================ */
html .project-showcase { border-radius: 4px; box-shadow: none; }
html .tag, html .label-pill { background: rgba(89,121,49,.12); border-color: rgba(89,121,49,.3); color: var(--accent-warm-2); border-radius: 2px; }

/* ============================================================
   PRECIOS
   ============================================================ */
html .price-card { border-radius: 4px; box-shadow: none; }
html .price-card:hover { box-shadow: none; }
html .price-card.featured { border: 2px solid var(--naranja); box-shadow: none; }
html .price-card.mensual { border: 2px solid var(--oliva); }
html .price-card.eco { background: var(--surface); }
html .badge-recommended { background: var(--naranja); color: var(--noche); border-radius: 2px; box-shadow: none; }
html .entry-tag { background: rgba(255,153,0,.2); color: var(--noche); border-radius: 2px; }
html .price-card.mensual .entry-tag { background: rgba(89,121,49,.16); color: var(--noche); }
html .price-card.featured .plan-amount, html .price-card.mensual .plan-amount { color: var(--oliva); }
html .extras-band { background: var(--surface); border: 1px solid var(--border-light); border-radius: 4px; box-shadow: none; }
html .extra-item { border-radius: 2px; }
html .calc-card { border-radius: 4px; box-shadow: none; }
html .calc-chip span { background: var(--surface-2); border-radius: 2px; }
html .calc-chip:has(input:checked) span, html .calc-chip.on span { color: var(--noche); background: var(--naranja); border-color: var(--naranja); }
html .calc-result { background: rgba(89,121,49,.08); border-color: rgba(89,121,49,.35); border-radius: 4px; }
html .calc-price { color: var(--oliva); }
html .calc-stepper { border-radius: 2px; }
html .calc-stepper button { background: #e3e7da; }
html .calc-stepper button:hover:not(:disabled) { background: var(--naranja); color: var(--noche); }
html .calc-save { color: var(--noche); background: rgba(0,204,153,.16); border-color: rgba(0,204,153,.45); border-radius: 2px; }
html .calc-wa { border-radius: 2px; }

/* ============================================================
   POR QUÉ NOSOTROS
   ============================================================ */
html .pq-hero-lead .sub { border-top-color: var(--naranja); }
html .pq-band { background: var(--oliva); box-shadow: 0 0 0 100vmax var(--oliva); border: 0; }
html .pq-band-head h2, html .pq-band-head h2 span { color: #fff !important; }
html .pq-band-head .band-copy, html .pq-stat .l { color: #eef3e4; }
html .pq-stat { border-top-color: rgba(255,255,255,.25) !important; }
html .pq-stat:nth-child(odd) { border-right-color: rgba(255,255,255,.25); }
html .pq-stat .n { color: #fff; }

/* ============================================================
   CONTACTO Y FORMULARIOS
   ============================================================ */
html .method-card, html .contact-form-wrapper { border-radius: 4px; box-shadow: none; }
html .method-card:hover { border-color: var(--oliva); }
html .icon-email { background: rgba(255,153,0,.16); color: var(--noche); }
html .icon-whatsapp { background: rgba(0,204,153,.16); }
html .icon-location { background: #e3e7da; color: var(--text-muted); }
html .form-control { background: var(--surface-2); border-color: var(--border-light); border-radius: 2px; }
html .form-control:focus { background: #fff; border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(89,121,49,.18); }

/* ============================================================
   AGENTES DE IA · PÁGINAS DE CIUDAD · LEGALES
   ============================================================ */
html .answer { border-radius: 2px; box-shadow: none; border-left-color: var(--naranja); }
html .ia-cap-ico { background: rgba(89,121,49,.14); color: var(--accent-warm-2); }
html .zonas-list span, html .zonas-list a { border-radius: 2px; }
html .zonas-list a:hover { color: var(--accent-warm-2); border-color: var(--oliva); }
html .legal-container { border-radius: 4px; box-shadow: none; }

/* FAQ (inicio, precios, agentes de IA) */
html .faq-container details { border-radius: 2px; }
html .faq-container details[open], html .faq-container details.is-open { border-color: var(--oliva); box-shadow: none; }
html .faq-icon::before, html .faq-icon::after { background: var(--oliva); }

/* ============================================================
   PIE (verde noche)
   ============================================================ */
html .vfoot { background: var(--noche-2); font-family: var(--f-texto); }
html .vfoot .vtop, html .vfoot .vbot { border-color: rgba(241,244,234,.14); }
html .vfoot .vtop h2 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .01em; }
html .vfoot .vlg { color: var(--claro); font-size: 1.9rem; }
html .vfoot .vlg span { color: var(--naranja); }
html .vfoot .vcol h3 { color: var(--menta); font-size: .72rem !important; letter-spacing: .16em; }
html .vfoot .vdesc, html .vfoot .vbot, html .vfoot .vbot .lg a { color: var(--claro-suave); }
html .vfoot .vc, html .vfoot .vcol a { color: var(--claro); }
html .vfoot .vc:hover, html .vfoot .vcol a:hover, html .vfoot .vbot .lg a:hover { color: var(--naranja); }
html .vfoot .vbtn { border-color: var(--naranja); color: var(--naranja); }
html .vfoot .vbtn:hover { background: var(--naranja); color: var(--noche); }

/* ============================================================
   FLOTANTES Y BANNER DE COOKIES
   ============================================================ */
html .whatsapp-float { background-color: var(--noche); color: var(--claro); box-shadow: none; }
html .whatsapp-float .wa-ico { stroke: var(--menta); }
html #cookie-banner { background: var(--surface) !important; border: 1px solid var(--border-light) !important; border-radius: 4px !important; }
html #accept-cookies { color: var(--noche) !important; background: var(--naranja) !important; border-color: var(--naranja) !important; }
html :focus-visible { outline-color: var(--menta); }

/* ============================================================
   MÓVIL
   ============================================================ */
@media (max-width: 768px) {
    html .hero h1, html .tema-hero .section-title, html .pq-hero-title { font-size: 3.4rem; }
    html .section-title { font-size: 3rem; }
    html .trust-num { font-size: 2.1rem !important; }
}