/* Rediseño Elox, octubre 2026.
   Se carga después de styles.css y enhancements.css y solo ajusta la capa visual:
   no cambia contenido, rutas ni comportamiento. Para volver al diseño anterior,
   basta con quitar el <link> a este archivo y restaurar las fuentes y los tokens de :root. */

:root{
  --paper:#f3f4f6;
  --ink:#0f1530;
  --muted:#535b70;
  --blue:#2b44f0;
  --blue-deep:#1d32c4;
  --line:#dcdfe6;
  --pale:#e3e7fb;
  --night:#0f1530;
  --night-line:#2a3256;
  --signal:#ffc23d;
  --white:#fff;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
}

html{color-scheme:light;touch-action:manipulation}
body{font-size:17px;line-height:1.6;font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
p{color:var(--muted)}
::selection{background:var(--pale)}

/* Tipografía: titulares firmes, interletraje contenido, sin titulares a dos colores */
h1,h2{font-weight:700;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.06}
h3{font-weight:650;letter-spacing:-.02em}
.hero h1 span,.blue-text,h1 span,h2 span,.page-intro h1 span,.about-intro h1 span,.prose h1 span,.audit-page h1 span,.contact-grid h1>span,.contact-grid h2>span{color:inherit}

/* Etiquetas de sección: discretas, en minúscula y con el azul de la marca */
.eyebrow{font-size:14px;letter-spacing:0;font-weight:600;color:var(--blue);margin-bottom:18px}

/* Sin interletraje amplio: las etiquetas ya no van en mayúsculas */
.booking-notice>span,.brand-top,.demo-record>span,.diagram-kicker,.eyebrow,.hero .eyebrow,.index,.mock-logo,.review-label,.sim-context>span,.sim-step,.visual-top,.flow-step small{letter-spacing:0;text-transform:none}
.booking-notice>span,.review-label,.diagram-kicker,.brand-top,.index{font-size:13px;font-weight:600}

/* Enlaces de texto: subrayado en lugar de flecha */
.text-link{gap:0;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--blue)}
.text-link span{display:none}
.text-link:hover{color:var(--blue)}

/* Botones */
.button{border-radius:var(--r-sm);font-size:15px;font-weight:600;padding:16px 22px;gap:14px;transition:background .18s}
.button:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:none}
.button span{font-size:17px}
.button.small{padding:11px 16px;font-size:14px;gap:12px}

/* Cabecera */
.button .cta-text,.button .cta-text span{font-size:inherit;font-weight:inherit;line-height:inherit}
.header{background:rgba(243,244,246,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.nav{height:76px}
/* Logo: misma tipografía y proporciones que el logo original de Elox */
.logo{font-family:'Manrope',Arial,sans-serif;font-size:40px;font-weight:800;letter-spacing:-.09em}
.logo span{color:var(--blue);font-size:.81em;margin:0 0 0 3px;vertical-align:baseline;letter-spacing:0;line-height:0}
.nav nav{font-size:15px;font-weight:500}

/* ---------- Portada ---------- */
.hero{grid-template-columns:1.2fr 1fr;gap:64px;padding-top:80px;padding-bottom:80px;align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(3.2rem,4.9vw,5.1rem);line-height:1;letter-spacing:-.045em;font-weight:750}
.intro{font-size:19px;max-width:30em;line-height:1.6;margin-top:30px}
.actions{margin-top:36px;gap:28px}
.hero-free{font-size:14px;margin-top:18px;color:var(--muted);line-height:1.6}

/* El recorrido: el único elemento llamativo de la página */
.hero-visual{background:var(--night);border:0;border-radius:var(--r-lg);padding:28px 28px 22px;color:#fff;overflow:hidden}
.visual-top{font-size:14px;letter-spacing:0;font-weight:600;color:#fff;align-items:center}
.visual-top>span:first-child{max-width:none}
.example{border-color:var(--night-line);color:#aeb6d6;font-size:12px}
.flow{padding:26px 0 22px;position:relative}
.flow-step{background:#19224d;border:1px solid var(--night-line);box-shadow:none;border-radius:var(--r-md);padding:18px 20px;color:#fff;transition:background .4s,border-color .4s,transform .4s}
.flow-step small{font-size:13px;letter-spacing:0;color:#aeb6d6;font-weight:500}
.flow-step strong{font-size:17px}
.flow-step p{font-size:14px;color:#c9cee6}
.flow-icon{background:#232c5c;color:#fff;border-radius:var(--r-sm)}
.step-number{color:#8f98c2;font-size:12px;top:12px;right:16px}
.flow-step.blue{background:var(--blue);border-color:var(--blue);transform:none;box-shadow:none}
.flow-step.blue .flow-icon{background:#ffffff26}
.flow-step.last{border-color:#7fe0b0}
.flow-step.last .flow-icon{background:#1f3b34;color:#7fe0b0}
.flow-connector{border-left:2px solid var(--night-line);margin-left:37px;height:26px;position:relative}
.flow-connector span{display:none}
.visual-bottom{border-top-color:var(--night-line);color:#aeb6d6;font-size:13px}

/* Una sola animación al cargar: la consulta recorre los cuatro pasos */
@media (prefers-reduced-motion:no-preference){
  .flow-connector::after{content:'';position:absolute;left:-2px;top:0;width:2px;height:0;background:#7f91ff;animation:elox-line .5s ease-out forwards}
  .flow-connector:nth-of-type(2)::after{animation-delay:.4s}
  .flow-connector:nth-of-type(4)::after{animation-delay:1s}
  .flow-connector:nth-of-type(6)::after{animation-delay:1.6s}
  .flow-step.last{animation:elox-done .6s ease-out 2.1s both}
}
@keyframes elox-line{to{height:100%}}
@keyframes elox-done{from{border-color:var(--night-line)}to{border-color:#7fe0b0}}

.principle-strip{font-size:14px;color:var(--ink);font-weight:500;padding-block:22px}
.principle-strip span{display:flex;align-items:center;gap:10px}
.principle-strip span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0}

/* ---------- Secciones ---------- */
.section{padding-block:112px}
.section-head{margin-bottom:52px;gap:48px}
.section-head>p{font-size:17px;max-width:360px}

/* Proceso: aquí sí hay una secuencia y la numeración se mantiene */
.process{gap:0;margin-top:56px;counter-reset:none}
.process li{border-top:2px solid var(--line);padding:26px 28px 0 0;position:relative}
.process li:first-child{border-top-color:var(--blue)}
.process-number{font-size:15px;font-weight:700;letter-spacing:0;color:var(--muted);margin-bottom:22px}
.process li:first-child .process-number{color:var(--blue)}
.process h3{font-size:22px}
.process p{font-size:15px}
.process-note{font-size:14px}

/* Comparativa */
.comparison-section{background:var(--white);border-block:1px solid var(--line)}
.comparison{border-radius:var(--r-lg);box-shadow:none}
.compare-head,.compare-totals{background:var(--paper)}
.time-meter{background:#eceef3}
.time-meter>span{background:#9aa1b4}
.compare-cell.assisted .time-meter>span{background:var(--blue)}
.compare-totals>strong{font-weight:750;font-size:40px;letter-spacing:-.04em}
.compare-bottom p{font-size:14px}

/* Servicios: sin numeración, tarjetas planas con borde */
.service-label{font-size:16px;font-weight:650;color:var(--ink);margin:40px 0 18px}
.service-label:first-of-type{margin-top:0}
.service-card{border-radius:var(--r-md);padding:26px 24px 52px;min-height:0;transition:border-color .18s}
.service-card:hover{background:var(--white);border-color:var(--blue)}
.service-meta{margin-bottom:22px}
.service-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);background:var(--pale);color:var(--blue);font-size:20px}
.service-card h3{font-size:21px;max-width:none}
.service-card p{font-size:15px;max-width:none;line-height:1.6}
.service-arrow{right:22px;bottom:18px;font-size:18px}
.software-intro{font-size:16px;max-width:52em}

/* Software personalizado: bloque destacado, primero en «Lo que hago» */
.software-feature{background:var(--night);color:#fff;border-radius:var(--r-lg);padding:40px;margin-bottom:56px}
.software-feature-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:32px}
.software-tag{font-size:14px;font-weight:600;color:#9fb0ff;margin-bottom:12px}
.software-feature h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.03em;font-weight:700;color:#fff;max-width:18ch}
.software-feature-head p:not(.software-tag){color:#c9cee6;font-size:17px;max-width:38em;margin-top:16px}
.software-feature .button{flex:none}
.software-feature .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.software-feature .service-card{background:#19224d;border-color:var(--night-line);color:#fff}
.software-feature .service-card:hover{background:#1e2859;border-color:#9fb0ff}
.software-feature .service-card h3{font-size:20px;color:#fff;max-width:none;letter-spacing:-.02em}
.software-feature .service-card p{color:#c9cee6}
.software-feature .service-icon{background:#232c5c;color:#fff}
.software-feature .service-arrow{color:#9fb0ff}
.software-feature a:focus-visible{outline-color:var(--signal)}

/* Ejemplos de flujos (bloque oscuro) */
.new-flows{background:var(--night)}
.new-flows .eyebrow{color:#9fb0ff}
.new-flows h2{color:#fff}
.new-flows .text-link{color:#fff;text-decoration-color:#9fb0ff}
.new-flows p{color:#bcc3de}
.flow-row{border-top-color:var(--night-line)}
.flow-row-intro>span{display:none}
.flow-row-intro h3{font-size:22px;font-weight:650}

/* Demostración paso a paso */
.demo-workspace{border-radius:var(--r-lg)}
.demo-record>span{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
.mock-logo{text-transform:none;letter-spacing:0}

/* Fondos unificados con la paleta nueva */
.sim-section{background:var(--white);border-block:1px solid var(--line)}
.contact-section{background:var(--paper);border-top:1px solid var(--line)}
.web-grid .service-card{background:var(--white)}

/* Sectores */
.sector-card{border-radius:var(--r-md);transition:border-color .18s}
.sector-card:hover{border-color:var(--blue)}
.sector-icon{color:var(--blue)}

/* Simulador: el ámbar marca solo el tiempo que se recupera */
.simulator{border-radius:var(--r-lg);overflow:hidden}
.sim-step{font-size:14px;letter-spacing:0;font-weight:600}
.sim-results{background:var(--night);color:#fff}
.sim-results .sim-step{color:#aeb6d6}
.sim-results p,.sim-results span{color:#c9cee6}
.sim-primary strong{color:var(--signal);font-weight:750;letter-spacing:-.04em}
.sim-primary strong small,.sim-primary strong span{color:var(--signal)}
.sim-context strong,.sim-context strong span{color:#fff}
.sim-results .button{background:var(--blue);border-color:var(--blue);color:#fff;font-size:15px}
.sim-results .button:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.sim-results .button span{color:#fff}
.sim-context>span{text-transform:none;letter-spacing:0;font-size:14px;color:#aeb6d6}
.share-scenario span{color:#fff}
input[type=range]{accent-color:var(--blue)}

/* Por qué Elox: sin numeración, son motivos y no pasos */
.why-reasons>div>span{display:none}
.why-reasons h3{font-size:21px}
.why-sign{color:#dfe2ea}
.why-sign span{color:var(--blue)}

/* Preguntas frecuentes */
.faq-section h2{font-size:clamp(2.1rem,3.2vw,3rem)}
.faq-list summary{font-size:18px;font-weight:600;color:var(--ink)}
.faq-list details p{font-size:16px;line-height:1.7}

/* La respuesta se despliega con suavidad al abrir una pregunta */
@media (prefers-reduced-motion:no-preference){
  .faq-list details[open] p{animation:elox-faq .28s ease-out}
  .faq-list summary span{transition:transform .2s ease-out}
  .wa-float{transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s linear .25s}
  .wa-float.is-visible{transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s}
}
@keyframes elox-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Cierre: banda azul a todo el ancho */
.audit-close{background:var(--blue);color:#fff}
.audit-close h2,.audit-close h2 span{color:#fff}
.audit-close p,.audit-close-grid>div>small,.audit-close .scope-note{color:#e4e8ff}
.audit-close-grid>div>small{font-size:14px}
.audit-close .eyebrow{color:#fff;opacity:.85}
.audit-close .button{background:#fff;color:var(--ink);border-color:#fff}
.audit-close .button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.audit-scope>div>span{display:none}
.audit-scope>div{border-color:#ffffff40}
.audit-scope h3{color:#fff}

/* Pie */
.footer{background:var(--paper)}
.footer-top p{font-size:16px;color:var(--ink)}
.footer-top>div{font-size:15px}
.footer-bottom{font-size:13px}

/* WhatsApp: botón flotante solo en móvil */
.wa-float{display:none}

/* Fundador en «Por qué Elox» */
.why-founder{display:flex;align-items:center;gap:18px;margin:36px 0 0;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);max-width:440px}
.why-founder img{width:72px;height:90px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.why-founder strong{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.why-founder span{display:block;font-size:15px;line-height:1.5;color:var(--muted)}

/* Foco visible y coherente */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.hero-visual a:focus-visible,.new-flows a:focus-visible,.audit-close a:focus-visible,.sim-results a:focus-visible{outline-color:var(--signal)}

/* ---------- Pantallas medianas ---------- */
@media(max-width:1100px){
  .software-feature-head{flex-direction:column;align-items:flex-start;gap:24px}
  .hero{gap:40px}
  .hero h1{font-size:clamp(2.8rem,5.6vw,4.2rem)}
  .hero h1 br{display:none}
  .process li{padding-right:18px}
}

/* ---------- Móvil ---------- */
@media(max-width:760px){
  body{font-size:16px}
  .nav{height:66px}
  .logo{font-size:34px}
  .hero{grid-template-columns:1fr;padding-top:44px;padding-bottom:48px;gap:40px}
  .hero h1{font-size:clamp(2.6rem,11.5vw,3.8rem);max-width:none}
  h1 br,h2 br{display:none}
  .nav .button.small{font-size:13px;padding:10px 12px;line-height:1.25}
  .nav .button.small>span[aria-hidden],.nav .cta-extra{display:none}
  .intro{font-size:17px;max-width:none}
  .hero-visual{padding:22px 18px 18px}
  .flow-step{padding:16px}
  .flow-connector{margin-left:33px}
  .principle-strip{font-size:13px}
  .section{padding-block:72px}
  .section-head>p{font-size:16px}
  .process{gap:32px 18px}
  .process li{padding-right:0}
  .service-card{padding:22px 20px 48px}
  .compare-totals>strong{font-size:30px}
  .faq-list summary{font-size:16px}
  .software-feature{padding:26px 20px;margin-bottom:44px}
  .software-feature-head{flex-direction:column;align-items:flex-start;gap:24px}
  .software-feature .service-grid{grid-template-columns:1fr}
  .wa-float{display:inline-flex;align-items:center;gap:8px;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;background:#157a45;color:#fff;font-size:15px;font-weight:600;padding:12px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(15,21,48,.22)}
  .wa-float:focus-visible{outline-color:var(--ink)}
  .wa-wait .wa-float:not(.is-visible){opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none}
  .footer{padding-bottom:72px}
}