/* =====================================================================
   Nuvelo.IA · piezas comunes de la web (28/10/2026)
   Encima de ui/nuvelo-ui.css (estilo Nuvelo). Aquí solo lo que comparten todas las páginas:
   cabecera, menú, botones sobre noche, secciones, aparición, migas, fuentes, preguntas,
   móvil con WhatsApp, contacto, pie y botón flotante. Lo propio de cada página va en su <style>.
   ===================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--n-sans);background:#07070d;color:#f3f5fb;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img,svg{display:block}
::selection{background:var(--n-azul);color:#fff}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.env{max-width:1180px;margin:0 auto;padding:0 24px}
.sec{position:relative;padding:120px 0}
.dia{background:#f5f6f9}
.cab-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:46px}
.cab-sec .n-h2{max-width:18ch;margin-top:14px}
.cab-sec .n-sub{max-width:46ch}
.n-noche .n-sub,.sec:not(.dia) .n-sub{color:#9aa2b8}
.dia .n-sub{color:var(--n-texto-2)}
.revela{opacity:0;transform:translateY(22px);transition:opacity .8s var(--n-curva),transform .8s var(--n-curva)}
.revela.ver{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revela{opacity:1;transform:none}}

/* ---------- botones sobre fondo de noche ---------- */
.n-btn-borde.oscuro{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#f3f5fb}
.n-btn-borde.oscuro:hover{border-color:rgba(95,176,255,.6);background:rgba(0,128,255,.08)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ctas .n-btn{padding:15px 26px;font-size:15.5px}

/* ---------- cabecera ---------- */
.barra{position:fixed;top:14px;left:14px;right:14px;z-index:50;transition:transform .4s var(--n-curva)}
.barra.esconde{transform:translateY(-130%)}
.barra>nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 10px 10px 18px;border-radius:20px;border:1px solid transparent;transition:background .3s,border-color .3s}
.barra.fija>nav{background:rgba(10,10,20,.74);border-color:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;gap:10px;font:400 23px var(--n-serif);color:#f3f5fb}
.logo em{font-style:normal;color:var(--n-azul-2)}
.logo img{width:34px;height:34px}
.enlaces{display:flex;gap:20px;list-style:none;margin-left:auto;font-size:14.5px;color:#9aa2b8}
.enlaces a{position:relative;transition:color .2s}
.enlaces a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--n-azul-2);transform:scaleX(0);transition:transform .3s var(--n-curva)}
.enlaces a:hover,.enlaces a[aria-current]{color:#fff}.enlaces a:hover::after,.enlaces a[aria-current]::after{transform:scaleX(1)}
.idioma{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.idioma button{font:500 11.5px var(--n-mono);letter-spacing:.06em;padding:5px 9px;border-radius:999px;color:#9aa2b8;transition:all .2s}
.idioma button[aria-pressed=true]{background:#fff;color:#07070d}
.barra .n-btn.hablemos{padding:10px 18px}
.menu-caja{position:relative;display:none}
.menu-movil{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#f3f5fb}
.menu-caja .n-menu{min-width:240px}
.menu-caja .n-menu .n-btn{width:100%;margin-top:4px}

/* ---------- migas ---------- */
.migas{display:flex;align-items:center;gap:8px;font:500 12px var(--n-mono);letter-spacing:.06em;text-transform:uppercase;color:#7a8199;margin-bottom:18px}
.migas a:hover{color:#fff}
.migas span[aria-hidden]{opacity:.5}

/* ---------- portadas de página ---------- */
.portada{position:relative;min-height:100vh;padding:150px 0 80px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.portada .n-h1{font-size:clamp(2.8rem,6vw,5.2rem);line-height:.98;margin:24px 0 22px}
.portada .lead{color:#9aa2b8;font-size:1.12rem;line-height:1.6;max-width:54ch}
.hechos{display:flex;gap:36px;list-style:none;margin-top:44px;flex-wrap:wrap}
.hechos b{font:400 2rem/1 var(--n-serif);display:block;color:#f3f5fb}
.hechos span{font-size:13.5px;color:#7a8199;margin-top:6px;display:block}

/* ---------- móvil con WhatsApp (demos de conversación) ---------- */
.movil{width:min(370px,100%);margin:0 auto;border-radius:42px;padding:11px;background:#0b0c12;box-shadow:0 50px 90px -40px rgba(0,0,0,.8),inset 0 0 0 2px #22242e}
.pantalla-m{border-radius:32px;overflow:hidden;background:var(--n-wa);height:560px;display:flex;flex-direction:column}
.wa-cab{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;background:#1f2c34;color:#e9edef}
.wa-cab .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--n-sans);color:#3a2418;background:#ffe1cf}
.wa-cab b{font-size:15px;display:block;line-height:1.2}
.wa-cab small{font-size:12px;color:#8fa4ad}
.wa-cuerpo{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:18px 18px}
.wa-m{max-width:84%;padding:8px 10px 6px;border-radius:12px;font-size:14px;line-height:1.42;color:#e9edef;animation:entra-wa .45s var(--n-curva) both}
.wa-m small{display:block;text-align:right;font-size:10.5px;color:#8fa4ad;margin-top:2px}
.wa-m{white-space:pre-line}.wa-m b{display:block;font-weight:600;font-size:13.5px}.wa-m b+span{display:block;color:#c8d3d8;font-size:13px;margin-top:2px}
.wa-dia{align-self:center;font:500 11px var(--n-sans);color:#8fa4ad;background:#1f2c34;padding:4px 10px;border-radius:8px}
.wa-m.cli{align-self:flex-start;background:#1f2c34;border-top-left-radius:4px}
.wa-m.ag{align-self:flex-end;background:#005c4b;border-top-right-radius:4px}
.wa-m.ag small{color:#9fd6c9}
.wa-hecho{align-self:center;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c9f3dd;background:rgba(39,209,127,.14);border:1px solid rgba(39,209,127,.3);padding:7px 12px;border-radius:999px;animation:entra-wa .45s var(--n-curva) both;text-align:center}
.wa-escribe{align-self:flex-end;display:flex;gap:4px;padding:11px 12px;border-radius:12px;background:#005c4b}
.wa-escribe i{width:6px;height:6px;border-radius:50%;background:#9fd6c9;animation:n-salta 1s infinite}
.wa-escribe i:nth-child(2){animation-delay:.15s}.wa-escribe i:nth-child(3){animation-delay:.3s}
@keyframes entra-wa{from{opacity:0;transform:translateY(10px)}}
.nota-demo{text-align:center;margin-top:12px;font:500 10.5px var(--n-mono);letter-spacing:.1em;color:#7a8199}

/* ---------- fuentes de datos ---------- */
.fuentes{margin-top:18px;font-size:12.5px;color:#7a8199}
.dia .fuentes{color:var(--n-texto-3)}
.fuentes a{border-bottom:1px solid currentColor}

/* ---------- preguntas ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--n-borde)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;cursor:pointer;font:400 24px/1.2 var(--n-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--n-borde);display:grid;place-items:center;flex:none;transition:background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;width:12px;height:1.6px;background:currentColor;border-radius:2px}
.faq summary i::after{transform:rotate(90deg);transition:transform .35s var(--n-curva)}
.faq details[open] summary i{background:var(--n-azul);border-color:var(--n-azul);color:#fff}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 4px 22px;color:var(--n-texto-2);font-size:15.5px;line-height:1.65;max-width:66ch;animation:n-entra .5s var(--n-curva)}
.faq details p a{color:var(--n-cursiva);border-bottom:1px solid currentColor}

/* preguntas con el título al lado (variante) */
.faq-lado{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.faq-lado>div:first-child{position:sticky;top:110px}
.faq-lado .faq{max-width:none;margin:0}
@media (max-width:1020px){.faq-lado{grid-template-columns:1fr;gap:20px}.faq-lado>div:first-child{position:static}}

/* ---------- contacto ---------- */
.contacto{position:relative;text-align:center;padding:130px 0 120px;overflow:hidden}
.contacto .n-h2{max-width:20ch;margin:18px auto 0;font-size:clamp(2.3rem,4.8vw,3.8rem)}
.contacto .n-sub{max-width:52ch;margin:18px auto 0}
.contacto .ctas{justify-content:center}
.cal-caja{max-width:980px;margin:30px auto 0;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);text-align:left}
.cal-caja p{font:500 11px var(--n-mono);letter-spacing:.08em;color:#7a8199;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
#cal-inline{min-height:540px}
.correo{margin-top:22px;font-size:14.5px;color:#9aa2b8}
.correo a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.voz{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);font-size:14px;color:#cfd4e3}
.voz .ares-m{width:34px;height:34px;position:relative}
.voz b{color:#fff;font-weight:600}

/* ---------- pie ---------- */
.pie{border-top:1px solid rgba(255,255,255,.08);padding:44px 0 90px;color:#7a8199;font-size:13.5px}
.pie .env{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.pie .marca-pie{display:flex;flex-direction:column;gap:10px}
.pie .marca-pie a{color:#cfd4e3}
.pie nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.pie nav a:hover,.pie .marca-pie a:hover{color:#fff}


/* ---------- actividad de ejemplo (.ev) y tarjeta de enlace (.guia) ---------- */
.feed{margin-top:14px;display:flex;flex-direction:column;gap:8px;height:236px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.ev{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);animation:entra-ev .6s var(--n-curva) both}
@keyframes entra-ev{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.ev .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none}
.ev .ic svg{width:16px;height:16px}
.ev p{font-size:13.5px;line-height:1.4;color:#dfe3ee;min-width:0}
.ev p b{font-weight:600;color:#fff}
.ev p span{color:#aab1c4}
.ev time{display:block;font:400 11px var(--n-mono);color:#7a8199;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.guia{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:18px 22px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.guia:hover{border-color:rgba(95,176,255,.45);background:rgba(0,128,255,.06)}
.guia small{font:500 11px var(--n-mono);letter-spacing:.1em;color:var(--n-azul-2);text-transform:uppercase;display:block}
.guia b{font:400 21px/1.2 var(--n-serif);display:block;margin-top:4px}
.guia svg{width:22px;height:22px;flex:none;color:var(--n-azul-2)}
.n-dia .guia{border-color:var(--n-borde);background:#fff}.n-dia .guia b{color:var(--n-texto)}.n-dia .guia small,.n-dia .guia svg{color:var(--n-azul)}
.n-dia .guia:hover{border-color:rgba(0,128,255,.45);background:#fff;box-shadow:0 18px 34px -24px rgba(16,22,48,.35)}

.barra.siempre>nav{background:rgba(10,10,20,.8);border-color:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- WhatsApp flotante ---------- */
.wa-flota{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--n-wa-verde);color:#fff;box-shadow:0 16px 34px -12px rgba(37,211,102,.7);transition:transform .3s var(--n-rebote)}
.wa-flota:hover{transform:scale(1.08)}
.wa-flota svg{width:28px;height:28px;fill:#fff}

@media (max-width:1020px){
  .enlaces,.barra .hablemos,.barra nav>.idioma{display:none}.menu-caja{display:block;margin-left:auto}
  .pie .env{grid-template-columns:1fr}
}
@media (max-width:680px){
  .env{padding:0 16px}.sec{padding:84px 0}.portada{padding:120px 0 56px;min-height:0}
  .hechos{gap:22px}.faq summary{font-size:21px}.pantalla-m{height:520px}.pie nav{grid-template-columns:1fr}
}
/* 11/11/2026: barra de lectura arriba del todo y el WhatsApp de Iris junto al formulario */
.progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progreso i{display:block;height:100%;background:linear-gradient(90deg,var(--n-azul,#0080ff),#7aa7ff);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px rgba(0,128,255,.6)}
.voz a{color:inherit;text-decoration:underline;text-decoration-color:rgba(122,167,255,.55);text-underline-offset:4px;transition:text-decoration-color .2s}
.voz a:hover{text-decoration-color:currentColor}