/* Diseño editorial premium de elebix.com (va después de temas.css).
   Portada, encabezado, contacto y pie en grafito oscuro; el resto en crema con diseño de informe:
   el nombre de cada sección en una columna a la izquierda y el contenido a la derecha. */

/* ---------- Zonas oscuras: se redefinen los colores dentro de cada zona ---------- */
header,.escena,.contacto,footer,.cuadricula{
  --papel:#121417;--blanco:#1A1D21;--tinta:#F2EFE8;--gris:#A4A8AF;--linea:#272B31;--borde:#30353C;
  --acento:#D39A5C;--oscuro:#D39A5C;--oscuro-hover:#E0AC72;--tachado:#7C8087;
  --cuadricula:rgba(242,239,232,.04);
  --sombra-chica:0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.35);
  color:var(--tinta);
}
.escena,.cuadricula{background:var(--papel)}
header{border-bottom-color:var(--linea)}
.btn-cab,.btn.lleno{color:#121417}
.marca-x rect{fill:var(--acento)}

/* ---------- Portada del inicio ---------- */
.titular h1{font-size:clamp(36px,5.4vw,74px);line-height:1.03;max-width:17ch}
.titular .etiqueta{color:var(--acento)}
.para{color:var(--gris)}
.para a{color:var(--tinta);text-decoration-color:var(--acento)}
.nodo{background:var(--blanco);border-color:#3A3F46}
.nodo .antes{color:var(--gris)}
.nodo.orden{border-color:#3A3F46;background:#1E2126}
.nodo .despues i{color:var(--acento)}
.estado .e2 a{color:var(--acento)}

/* ---------- Secciones claras con diseño de informe ---------- */
main{counter-reset:seccion}
main>section.bloque:not(.contacto){counter-increment:seccion;padding:104px 0}
main>section.bloque:not(.contacto)>.contenedor>.etiqueta::before,#somos .somos>div>.etiqueta::before{content:counter(seccion,decimal-leading-zero) "  ·  ";color:var(--gris)}
h2{font-size:clamp(30px,4.4vw,54px);line-height:1.06;max-width:18ch}
@media (min-width:900px){
  main>section.bloque:not(.contacto)>.contenedor:not(.somos){display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:56px}
  main>section.bloque:not(.contacto)>.contenedor:not(.somos)>*{grid-column:2}
  main>section.bloque:not(.contacto)>.contenedor:not(.somos)>.etiqueta{grid-column:1;grid-row:1 / span 3;align-self:start;position:sticky;top:96px;padding-top:14px;border-top:2px solid var(--acento)}
}
@media (max-width:760px){main>section.bloque:not(.contacto){padding:64px 0}}

/* Qué hacemos: filas editoriales, sin bloque negro */
.catalogo{border-top:1px solid var(--borde)}
.fila{border-bottom-color:var(--borde);padding:28px 4px}
.fila h3{font-size:clamp(22px,2.6vw,32px)}
.fila.destacada,a.fila.destacada:hover{background:transparent;color:var(--tinta)}
.fila.destacada p,.fila.destacada .ej{color:var(--gris)}
.fila.destacada .n{color:var(--acento)}
.fila.destacada .ej b{color:var(--acento)}
a.fila:hover{background:var(--blanco)}
.fila .flecha{color:var(--acento)}

/* Proyectos: dos columnas sin cajas */
.proyectos{gap:0 40px}
.proy{background:transparent;border:0;border-top:1px solid var(--borde);border-radius:0;padding:22px 0;box-shadow:none!important;transform:none!important}
.proy b{font-size:26px}
.proy:hover b{color:var(--acento)}

/* Nosotros */
.persona .foto{box-shadow:var(--sombra-media);border-color:var(--borde)}
.persona h3{font-size:22px}

/* ---------- Empresas ---------- */
.portada{padding-top:28px;padding-bottom:88px;max-width:1160px}
.portada h1{font-size:clamp(36px,5vw,66px);line-height:1.04;max-width:19ch}
.portada h1 span{color:var(--acento)}
.portada .bajada{color:var(--gris);font-size:19px}
.portada .btn:not(.lleno){background:transparent;color:var(--tinta);border-color:#3A3F46}
.miga a{border-bottom-color:#3A3F46}
.atajos a{color:var(--gris);border-bottom-color:#3A3F46}
.atajos a:hover{color:var(--acento)}

/* Casos como filas de un informe */
.casos{gap:0;border-top:1px solid var(--borde)}
.caso,.caso.destacado{background:transparent;border:0;border-bottom:1px solid var(--borde);border-radius:0;box-shadow:none;padding:36px 0}
.caso .quien h3{font-size:24px;line-height:1.2}
.caso .quien .chips i{border-color:var(--borde);border-radius:999px;padding:1px 9px}
.cifras{gap:12px 48px}
.cifras b{font-size:clamp(34px,4vw,48px);color:var(--acento);display:block;margin:0 0 2px}
.cifras span{max-width:220px}
.por-dentro{border-top-color:var(--borde)}

/* Diagnóstico */
.sintoma{background:var(--blanco);border-color:var(--borde)}
.sintoma[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.resultado{box-shadow:var(--sombra-grande);border-color:var(--borde)}

/* Método como línea de tiempo */
.pasos{position:relative;border-top:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:8px}
.pasos::before{content:"";position:absolute;left:18px;right:18px;top:18px;height:1px;background:var(--borde)}
.pasos li{display:block;position:relative;padding:56px 0 0;border:0}
.pasos li::before{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;background:var(--papel);border:1px solid var(--acento);display:grid;place-items:center;color:var(--acento)}
.pasos b{display:block;font-size:22px;margin-bottom:6px}
.pasos span{display:block;font-size:15px}
@media (max-width:900px){
  .pasos{grid-template-columns:1fr;gap:0}
  .pasos::before{left:18px;right:auto;top:18px;bottom:18px;width:1px;height:auto}
  .pasos li{padding:0 0 26px 56px}
}
.condiciones{background:#121417;box-shadow:var(--sombra-grande)}
.comercio{border-color:var(--borde)}

/* Calculadora */
.calc{border-color:var(--borde)}
.calc .total{background:#121417}

/* ---------- Contacto y pie ---------- */
.contacto{background:var(--papel);padding:120px 0}
.contacto h2{font-size:clamp(34px,5vw,64px);max-width:16ch}
.correo{font-family:var(--titulos);font-size:clamp(28px,5vw,56px);border-bottom-color:var(--acento)}
.copiar{border-color:#3A3F46}
footer{background:var(--papel);border-top-color:var(--linea)}

/* En las zonas oscuras, los textos que en la versión A usan el color del papel pasan al color del texto */
.contacto h2,.contacto .correo,.contacto .copiar,.contacto .responden{color:var(--tinta)}
.contacto .caras .foto{background:#1E2126;color:var(--tinta);border-color:#3A3F46}

/* Proyectos propios: captura de escritorio con la del celular superpuesta */
.proyectos{gap:48px 40px}
.proy{padding-top:0;border-top:0}
.proy-vista{position:relative;margin:0 0 22px;padding:0 9% 7% 0}
.proy-vista .pantalla{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--borde);box-shadow:var(--sombra-grande);background:#121417}
.proy-vista .celu{position:absolute;right:0;bottom:0;width:24%;height:auto;aspect-ratio:1/2;object-fit:cover;object-position:top;border-radius:16px;border:5px solid #121417;box-shadow:0 10px 30px rgba(18,20,23,.28);background:#121417;transition:transform .3s}
.proy-vista .pantalla{transition:transform .3s}
@media (hover:hover){.proy:hover .proy-vista .pantalla{transform:translateY(-4px)}.proy:hover .proy-vista .celu{transform:translateY(-8px)}}
@media (max-width:760px){.proyectos{gap:40px}.proy-vista .celu{border-width:4px;border-radius:12px}}

/* Fotos del equipo */
.persona img.foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;padding:0;background:var(--linea)}
.caras img.foto{display:block;width:44px;height:44px;object-fit:cover;object-position:50% 22%;border-radius:50%;border:2px solid #121417;padding:0}

/* WhatsApp: botón flotante discreto */
.flotante{position:fixed;right:20px;bottom:20px;z-index:35;display:flex;align-items:center;height:52px;border-radius:999px;background:#121417;color:#F2EFE8;border:1px solid rgba(242,239,232,.14);box-shadow:0 8px 24px rgba(18,20,23,.22);text-decoration:none;overflow:hidden;transition:opacity .3s,transform .3s,box-shadow .2s}
.flotante-ico{flex:none;width:50px;height:50px;display:grid;place-items:center;color:#D39A5C}
.flotante-ico svg{width:24px;height:24px}
.flotante-txt{max-width:0;opacity:0;white-space:nowrap;font:500 14px var(--sans);transition:max-width .4s ease,opacity .25s ease,padding .4s ease}
.flotante:hover .flotante-txt,.flotante:focus-visible .flotante-txt,.flotante.abierto .flotante-txt{max-width:280px;opacity:1;padding-right:20px}
.flotante:hover{box-shadow:0 10px 28px rgba(18,20,23,.3)}
.flotante:focus-visible{outline:2px solid #D39A5C;outline-offset:3px}
.flotante.oculto{opacity:0;transform:translateY(14px);pointer-events:none}
@media (max-width:760px){.flotante{right:14px;bottom:14px;height:48px}.flotante-ico{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.flotante,.flotante-txt{transition:none}}

/* WhatsApp en el contacto */
.wa-contacto{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--tinta);font-size:15px;text-decoration:none;border-bottom:1px solid var(--borde)}
.wa-contacto svg{width:20px;height:20px;color:var(--acento)}
.wa-contacto:hover span{color:var(--acento)}