/* ═══════════════════════════════════════════════════════════════════
   RE 2026 — capa de diseño «sala de control»
   Nació en /tu-evento y se extiende al sitio entero. Es una CAPA: no
   reescribe las páginas, redefine sus tokens y su tipografía. Para
   revertir, se quita el <link> de componentes/header.php y el sitio
   vuelve al azul anterior tal cual estaba.

   Los tokens van en `html:root` (0,1,1) y no en `:root` (0,1,0), para
   ganarle al bloque <style> que cada página declara después del header
   sin tener que recurrir a !important.
   ═══════════════════════════════════════════════════════════════════ */

html:root{
  --color-bg:#0C0B0A;
  --color-bg-soft:#15130F;
  --color-card:#15130F;
  --color-accent:#FF6B1A;
  --color-accent-soft:rgba(255,107,26,.14);
  --color-text-main:#F2EFE9;
  --color-text-muted:#8A8275;
  --color-border-subtle:rgba(242,239,233,.13);

  /* la geometría es la firma: esquinas vivas, nada de pastilla */
  --radius-full:0px; --radius-lg:0px; --radius-md:0px;
  /* el relieve lo dan los bordes, no las sombras */
  --shadow-soft:none; --shadow-card:none;

  --re-verde:#39D98A;
  --re-rojo:#FF4D4D;
  --re-linea:rgba(242,239,233,.13);
  --re-display:Anton,Impact,sans-serif;
  --re-mono:"JetBrains Mono",ui-monospace,monospace;
  --re-texto:Inter,system-ui,-apple-system,sans-serif;
}

/* `html body` y no `body`: varias páginas declaran su propio degradado
   de fondo en un <style> posterior y a igual peso ganaban ellas. */
html body{
  background:var(--color-bg);
  background-image:none;
  color:var(--color-text-main);
  font-family:var(--re-texto);
}
/* trama de sala de control, fija y por debajo de todo */
body::before{
  content:"";position:fixed;inset:-10% 0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--re-linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--re-linea) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 12%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 12%,#000 0%,transparent 72%);
}
body>*{position:relative;z-index:1}

/* ── tipografía ───────────────────────────────────────────────────
   Anton en los titulares. En CAJA ALTA sólo donde el texto es corto:
   los títulos de sección son frases largas escritas para SEO y en
   versales se vuelven un muro ilegible. */
.hero-title,.final-title,h1{
  font-family:var(--re-display);font-weight:400;text-transform:uppercase;
  line-height:1.0;letter-spacing:-.01em;
}
/* Anton sólo en los titulares de sección. Los títulos de tarjeta se
   quedan en Inter: en Anton y a cuerpo chico pierden peso y se leen
   mal, además de que son frases, no rótulos. */
.section-title,.svc-title,.final-title{
  font-family:var(--re-display);font-weight:400;
  line-height:1.06;letter-spacing:0;
}
.solution-card h3,.step-card h3,.faq-question,h3,h4{
  font-family:var(--re-texto);font-weight:600;letter-spacing:-.01em;
}
.section-kicker,.svc-eyebrow,.hero-badge,.trust-pill,.hero-pill,.case-logo-label{
  font-family:var(--re-mono);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);
}
.section-lead,.hero-subtitle,p,li{font-family:var(--re-texto);line-height:1.62}
.section-lead,.hero-subtitle{color:#C9C3B8}

/* ── superficies ─────────────────────────────────────────────────── */
.section-shell{border-top:1px solid var(--re-linea)}
.solution-card,.step-card,.case-logo-card,.svc-slide,.faq-item,.timeline-step{
  background:var(--color-card);
  border:1px solid var(--re-linea);
  border-radius:0;
  box-shadow:none;
}
.hero-badge,.hero-pill,.trust-pill{
  background:transparent;border:1px solid var(--re-linea);border-radius:0;padding:8px 14px;
}
.hero-badge-dot{background:var(--re-verde);border-radius:50%}

/* ── botones ──────────────────────────────────────────────────────
   Relleno que barre de izquierda a derecha, como en la landing. */
.btn-primary-modern,.btn-ghost-modern{
  position:relative;overflow:hidden;border-radius:0;
  font-family:var(--re-texto);font-weight:600;letter-spacing:0;
  transition:color .18s ease,border-color .18s ease;
}
.btn-primary-modern{background:var(--color-accent);color:#190800;border:1px solid var(--color-accent)}
.btn-primary-modern::after{
  content:"";position:absolute;inset:0;background:#FFD2A8;z-index:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.btn-primary-modern:hover::after{transform:scaleX(1)}
.btn-ghost-modern{background:transparent;color:var(--color-text-main);border:1px solid var(--re-linea)}
.btn-ghost-modern::after{
  content:"";position:absolute;inset:0;background:rgba(242,239,233,.09);z-index:0;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.btn-ghost-modern:hover{border-color:var(--color-text-main)}
.btn-ghost-modern:hover::after{transform:scaleY(1)}
.btn-primary-modern>*,.btn-ghost-modern>*{position:relative;z-index:1}

/* ── comparativas: rojo lo que no, verde lo que sí ── */
.cmp-yes{color:var(--re-verde)}
.cmp-no{color:var(--re-rojo)}

/* ── marco de video con escuadras ámbar ── */
.hero-media,.svc-slide{position:relative}
.hero-media::after,.hero-media::before{
  content:"";position:absolute;width:18px;height:18px;border:2px solid var(--color-accent);z-index:3;
}
.hero-media::before{top:14px;left:14px;border-right:0;border-bottom:0}
.hero-media::after{bottom:14px;right:14px;border-left:0;border-top:0}

/* ── enlaces ── */
a{color:inherit}
.section-lead a,p a{color:var(--color-accent);text-decoration:none;border-bottom:1px solid rgba(255,107,26,.35)}
.section-lead a:hover,p a:hover{border-bottom-color:var(--color-accent)}

@media(prefers-reduced-motion:reduce){
  .btn-primary-modern::after,.btn-ghost-modern::after{transition:none}
}

/* ── cabecera y pie: el azul y el verde de marca pasan a ámbar ──
   Están escritos a mano en componentes/header.php y footer.php, así que
   se neutralizan aquí para no reescribir dos componentes vivos. */
#cabezera,.site-header,header nav,.navbar{background:var(--color-bg)}
.navbar-brand{font-family:var(--re-display);letter-spacing:.02em}
.navbar-brand span{color:var(--color-accent)}
.utility-phone i,.utility-bar a i{color:var(--color-accent)}
.utility-cta,.nav-cta,.header-cta,.navbar .btn,.navbar-cta{
  background:var(--color-accent);background-image:none;
  border-color:var(--color-accent);color:#190800;border-radius:0;
}
.nav-link,.navbar-nav a{font-family:var(--re-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
#cabezera a:hover,.nav-link:hover{color:var(--color-accent)}
/* el degradado verde de los botones flotantes pasa al verde de validación */
[style*="linear-gradient(120deg, #22c55e"],.wa-float,.vfab{
  background:var(--re-verde)!important;border-radius:0!important;
}
footer{border-top:1px solid var(--re-linea);background:var(--color-bg)}

/* ── superficies con color escrito a mano ──────────────────────────
   Varias páginas no usan los tokens para sus tarjetas: traen el azul
   marino y el verde metidos a mano. Se corrigen por clase. Si en el
   futuro esas páginas pasan a usar var(--color-card), estas reglas
   dejan de hacer falta. */
.price-card{
  background:var(--color-card);
  border:1px solid var(--re-linea);
  box-shadow:none;
}
.price-card.featured{border-color:var(--color-accent);box-shadow:none}
.price-card.featured::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,107,26,.07),transparent 55%);
}
.price-card{position:relative}
.price-tag{font-family:var(--re-mono);font-weight:700;color:var(--color-text-main);font-variant-numeric:tabular-nums}
.price-badge{font-family:var(--re-mono);color:var(--color-accent)}
.price-card li::before{color:var(--re-verde)}

/* fondos radiales verdes heredados → ámbar tenue sobre carbón */
.hero-precios,.cmp-shell,[class*="-hero"]{
  background-image:radial-gradient(circle at top left,rgba(255,107,26,.10),rgba(12,11,10,.96))!important;
}
/* el mono es más ancho que la tipografía anterior: el "+ IVA" se caía de renglón */
.price-tag{font-size:26px;white-space:nowrap}
.price-tag small{white-space:nowrap}
/* resplandor verde que quedaba bajo el botón destacado */
.price-card .btn-primary-modern,.price-card a[class*="btn"]{box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════
   SUPERFICIES ESCRITAS A MANO
   Siete páginas traen el azul marino y el verde metidos directo en sus
   reglas, sin pasar por los tokens. El vocabulario de clases se repite
   casi igual entre servicios / precios / comparativa / pwa, así que se
   cubren juntas en vez de archivo por archivo.
   ═══════════════════════════════════════════════════════════════════ */

/* servicio.php pinta su propio body::before con dos glows azules. Como
   su <style> va después del header, empata en especificidad y gana; por
   eso aquí se sube a `html body::before`. */
html body::before{
  background-image:linear-gradient(var(--re-linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--re-linea) 1px,transparent 1px);
  background-size:72px 72px;
  background-color:transparent;
}

/* ── tarjetas y paneles ── */
.services-hero-card,.about-hero-card,.service-card,.solution-card,.step-card,
.stat-card,.principle-card,.coverage-card,.timeline-step,.faq-item,
.hero-floating-card,.svc-rel-card,.cta-banner,.cta-ally,.svc-ctab{
  background:var(--color-card);
  border:1px solid var(--re-linea);
  border-radius:0;
  box-shadow:none;
}
.svc-rel-card:hover,.service-card:hover,.solution-card:hover{
  border-color:var(--color-accent);
}
.cta-banner,.cta-ally{background:var(--color-bg-soft)}

/* ── rótulos y acentos ── */
.section-kicker,.hero-badge,.about-hero-badge,.hero-pill,.hero-meta,
.hero-stat-label,.svc-eyebrow{
  font-family:var(--re-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.hero-title span,.about-hero-title span,.section-title span{color:var(--color-accent)}
.hero-badge-dot,.hero-meta-dot{background:var(--re-verde)}
.step-num{
  font-family:var(--re-mono);color:var(--color-accent);
  background:transparent;border:1px solid var(--color-accent);border-radius:0;
}
.hero-stat{font-family:var(--re-mono);font-variant-numeric:tabular-nums}
.hero-quote{border-left:2px solid var(--color-accent);background:transparent}
.hero-quote-author{font-family:var(--re-mono);color:var(--color-text-muted)}

/* ── tablas comparativas ── */
.cmp-table th,.cmp-table td{
  border-color:var(--re-linea);color:var(--color-text-main);background:transparent;
}
.cmp-table thead th{
  background:var(--color-bg-soft);color:var(--color-text-muted);
  font-family:var(--re-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}

/* ── listas de servicio ── */
.svc-body .list-group-item{
  background:var(--color-card);border-color:var(--re-linea);color:#C9C3B8;border-radius:0;
}
.service-list-icon{color:var(--re-verde)}

/* ── enlaces del detalle de servicio (eran azul claro) ── */
.svc-body a,.svc-ctab a{color:var(--color-accent)}

/* ── pie ── */
.site-footer{
  background:var(--color-bg);color:#C9C3B8;
  border-top:1px solid var(--re-linea);
}
.footer-column h3,.footer-column h4,.footer-tags-cloud h5{
  font-family:var(--re-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--color-text-muted);
}
.footer-brand p,.footer-contact p,.footer-mini-contact{color:var(--color-text-muted)}
.footer-links ul li a,.footer-mini-contact a{color:#C9C3B8;text-decoration:none}
.footer-links ul li a:hover,.footer-mini-contact a:hover{color:var(--color-accent)}
.footer-contact i{color:var(--color-accent)}
.footer-cta{
  background:var(--color-accent);background-image:none;color:#190800;border-radius:0;
}
.footer-tags-cloud .badge{background:transparent;border:1px solid var(--re-linea);border-radius:0}
.footer-tags-cloud .badge a{color:var(--color-text-muted)}
.footer-tags-cloud .badge a:hover{color:var(--color-accent)}
.copy-section{background:var(--color-bg);border-top:1px solid var(--re-linea)}
.copy-section p,.copy-section strong{color:var(--color-text-muted)}

/* ── cabecera y pie, con peso suficiente ───────────────────────────
   header.php y footer.php traen su <style> dentro del <body>, o sea
   DESPUÉS de este archivo. A igual especificidad gana el último, así
   que aquí se antepone `html` para sumar un selector de tipo. */
html .navbar-brand span{color:var(--color-accent)}
html .navbar-brand{font-family:var(--re-display);letter-spacing:.02em}
html .nav-cta-primary,html .nav-whatsapp-mobile,html .utility-cta,html .footer-cta{
  background-image:none;background-color:var(--color-accent);
  color:#190800;border-radius:0;border:1px solid var(--color-accent);
}
html .nav-whatsapp-mobile{background-color:var(--re-verde);border-color:var(--re-verde);color:#06301D}
html .utility-phone i,html .nav-link i,html header .fa{color:var(--color-accent)}
html .fa-headphones,html .fa-phone,html .fa-whatsapp{color:inherit}
html .site-footer{background-image:none;background-color:var(--color-bg)}
html .copy-section{background-color:var(--color-bg)}
html .footer-tags-cloud .badge{background-color:transparent}

/* ── blog ──────────────────────────────────────────────────────────
   Vive fuera de componentes/header.php y trae su propio juego de
   clases; su <style> va en el <head>, antes que esta capa, así que
   aquí basta la especificidad normal. */
html .blog-card,html .blog-side,html .blog-side>*{
  background:var(--color-card);
  border:1px solid var(--re-linea);
  border-radius:0;
  box-shadow:none;
}
html .blog-side>*{background:transparent;border:0;border-bottom:1px solid var(--re-linea)}
html .blog-card:hover{border-color:var(--color-accent)}
.blog-card h2,.blog-card h3{font-family:var(--re-texto);font-weight:600}
mark{background:rgba(255,107,26,.22);color:var(--color-text-main)}

/* ═══════════════════════════════════════════════════════════════════
   EL DÍA DEL EVENTO (home)
   La línea de tiempo que separa "te entrego software" de "te lo opero".
   Sin GSAP a propósito: el home ya carga un video en el hero y esta
   sección no justifica otra librería. Revelado con CSS puro.
   ═══════════════════════════════════════════════════════════════════ */
.dia-linea{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--re-linea);
}
.dia-beat{
  display:grid;gap:6px 28px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--re-linea);
  position:relative;
}
@media(min-width:760px){
  .dia-beat{grid-template-columns:150px 1fr}
}
.dia-hora{
  font-family:var(--re-mono);font-weight:700;
  font-size:clamp(28px,4vw,42px);line-height:1;
  color:var(--color-accent);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.dia-malo .dia-hora{color:var(--re-rojo)}
.dia-bien .dia-hora{color:var(--re-verde)}
.dia-cuerpo h3{
  margin:0 0 8px;font-family:var(--re-texto);font-weight:600;
  font-size:clamp(17px,2vw,21px);color:var(--color-text-main);
}
.dia-cuerpo p{margin:0;color:#C9C3B8;font-size:16px;line-height:1.62;max-width:46em}
.dia-cuerpo b{color:var(--color-text-main)}
/* filo de color al borde del beat, como el LED de una estación */
.dia-beat::before{
  content:"";position:absolute;left:-14px;top:30px;width:3px;height:26px;
  background:var(--color-accent);opacity:.55;
}
.dia-malo::before{background:var(--re-rojo)}
.dia-bien::before{background:var(--re-verde)}
@media(max-width:759px){.dia-beat::before{display:none}}

.dia-cierre{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;
  margin-top:32px;padding-top:28px;border-top:1px solid var(--re-linea);
}
.dia-frase{
  margin:0;flex:1 1 320px;color:#C9C3B8;font-size:16px;line-height:1.62;max-width:40em;
}

/* revelado al entrar, sin librerías; se apaga con movimiento reducido */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .dia-beat{animation:diaEntra linear both;animation-timeline:view();animation-range:entry 10% cover 28%}
    @keyframes diaEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

/* ── prueba social ── */
.testis{display:grid;gap:0;border-top:1px solid var(--re-linea)}
@media(min-width:900px){.testis{grid-template-columns:repeat(3,1fr)}}
.testi{
  margin:0;padding:28px 26px;border-bottom:1px solid var(--re-linea);
  background:var(--color-card);display:flex;flex-direction:column;gap:18px;
}
@media(min-width:900px){.testi+.testi{border-left:1px solid var(--re-linea)}}
.testi blockquote{
  margin:0;font-size:17px;line-height:1.6;color:var(--color-text-main);
  position:relative;padding-top:22px;
}
.testi blockquote::before{
  content:"“";position:absolute;top:-6px;left:-2px;
  font-family:var(--re-display);font-size:46px;color:var(--color-accent);line-height:1;
}
.testi figcaption{margin-top:auto;font-family:var(--re-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.testi figcaption b{display:block;color:var(--color-text-main);font-weight:500}
.testi figcaption span{color:var(--color-text-muted)}
.testi-pie{
  margin:22px 0 0;font-family:var(--re-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-text-muted);
}

/* ── franja de marcas del hero ─────────────────────────────────────
   Ya existía, pero en pastillas diminutas que nadie registra. Aquí se
   sube de peso: son las marcas que más trabajo hacen en toda la página
   y EXG Suite nos ganaba justo en esto. */
.hero-proof-label{
  font-family:var(--re-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--color-text-muted);
}
.hero-proof-logos{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px}
.hero-proof-logos span{
  font-family:var(--re-display);text-transform:uppercase;
  font-size:clamp(14px,1.5vw,20px);color:var(--color-text-main);
  letter-spacing:.01em;opacity:.92;background:none;border:0;padding:0;
}
.hero-proof-logos span:last-child{
  font-family:var(--re-texto);text-transform:none;font-size:14px;
  color:var(--color-text-muted);opacity:1;
}
.hero-proof-cifras{
  margin-top:10px;font-family:var(--re-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);
}

/* ── resultados para dirección ── */
.res-grid{display:grid;gap:0;border-top:1px solid var(--re-linea)}
@media(min-width:780px){.res-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.res-grid{grid-template-columns:repeat(3,1fr)}}
.res-item{padding:24px 24px 24px 0;border-bottom:1px solid var(--re-linea)}
@media(min-width:780px){
  .res-item{padding:24px}
  .res-item:nth-child(2n){border-left:1px solid var(--re-linea)}
}
@media(min-width:1100px){
  .res-item:nth-child(2n){border-left:0}
  .res-item:not(:nth-child(3n+1)){border-left:1px solid var(--re-linea)}
}
.res-item b{display:block;font-size:16.5px;color:var(--color-text-main);margin-bottom:8px;font-weight:600}
.res-item p{margin:0;color:#C9C3B8;font-size:15px;line-height:1.6}