/* Cianchino & Asociados — estilos compartidos */
/* ============================================================
   1. TOKENS Y BASE
   ============================================================ */
:root{
  --navy:#0B1F3A; --navy-deep:#071426; --volt:#2F7BFF; --cyan:#22D3EE;
  --chalk:#F8FAFC; --ink:#0B1526;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--chalk); color:var(--ink); overflow-x:clip; }
::selection{ background:#22D3EE55; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
.eyebrow{ letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:600; }
.tnum{ font-variant-numeric:tabular-nums; }

/* Borde con gradiente fino (mask technique) */
.gborder{ position:relative; }
.gborder::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(34,211,238,.55), rgba(47,123,255,.15) 40%, rgba(255,255,255,.06) 70%, rgba(34,211,238,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.gborder-light::before{
  background:linear-gradient(135deg, rgba(47,123,255,.45), rgba(212,220,232,.6) 45%, rgba(34,211,238,.4));
}

/* Grilla técnica de fondo */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
}

/* ============================================================
   2. HERO — revelado de texto y dashboard glass
   ============================================================ */
.reveal-word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.reveal-word > span{ display:inline-block; transform:translateY(110%); opacity:0; transition:transform .9s var(--ease-out), opacity .6s ease; }
.is-ready .reveal-word > span{ transform:translateY(0); opacity:1; }

.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
}
.glass-inner{ background:rgba(7,20,38,.45); border:1px solid rgba(255,255,255,.08); }

@keyframes floaty{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-12px,0) } }
.floaty{ animation:floaty 7s ease-in-out infinite; }

/* barras del gráfico del dashboard */
.bar{ transform-origin:bottom; transform:scaleY(0); transition:transform 1.1s var(--ease-out); }
.is-ready .bar{ transform:scaleY(1); }
.bar:nth-child(2){ transition-delay:.08s } .bar:nth-child(3){ transition-delay:.16s } .bar:nth-child(4){ transition-delay:.24s }
.bar:nth-child(5){ transition-delay:.32s } .bar:nth-child(6){ transition-delay:.40s } .bar:nth-child(7){ transition-delay:.48s } .bar:nth-child(8){ transition-delay:.56s }

/* línea de tendencia dibujándose */
.trend{ stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 2.2s var(--ease-out) .5s; }
.is-ready .trend{ stroke-dashoffset:0; }

@keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,211,238,.55) } 70%{ box-shadow:0 0 0 8px rgba(34,211,238,0) } }
.live-dot{ animation:pulse-dot 2s infinite; }

/* Tarjetas de alerta que "llegan" */
@keyframes slide-in{ from{ opacity:0; transform:translateX(24px) } to{ opacity:1; transform:translateX(0) } }
.alert-card{ animation:slide-in .8s var(--ease-out) both; }

/* ============================================================
   3. SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s } .reveal[data-delay="2"]{ transition-delay:.2s }
.reveal[data-delay="3"]{ transition-delay:.3s } .reveal[data-delay="4"]{ transition-delay:.4s }
.no-js .reveal, .no-io .reveal{ opacity:1; transform:none; }

/* ============================================================
   4. STACKING CARDS (servicios)
   ============================================================ */
.stack{ --top:96px; }
.stack-card{
  position:sticky; top:var(--top);
  transform-origin:top center;
  transition:transform .2s linear, filter .2s linear;
  will-change:transform;
}
@media (max-width:767px){ .stack{ --top:76px; } }

/* ============================================================
   5. BOTONES — magnético + shimmer
   ============================================================ */
.btn-magnetic{ transition:transform .25s var(--ease-out); will-change:transform; }
.btn-shimmer{ position:relative; overflow:hidden; isolation:isolate; }
.btn-shimmer::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out);
}
.btn-shimmer:hover::after, .btn-shimmer:focus-visible::after{ transform:translateX(120%); }

/* Tarjetas de herramientas */
.tool-card{ transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease; }
.tool-card:hover, .tool-card:focus-within{ transform:translateY(-6px); }

/* Tabs de perfil */
.tab-btn[aria-selected="true"]{ background:#0B1F3A; color:#fff; box-shadow:0 8px 24px -8px rgba(11,31,58,.5); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade-up .5s var(--ease-out); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* Marquee de sectores */
@keyframes marquee{ to{ transform:translateX(-50%) } }
.marquee{ animation:marquee 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }

/* Menú móvil */
#mobile-menu{ position:absolute; top:100%; left:0; right:0; transition:opacity .3s ease, transform .35s var(--ease-out), visibility 0s; }
#mobile-menu[hidden]{ display:block; opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; transition-delay:0s,0s,.35s; }

/* Foco visible y accesibilidad */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* Barra móvil: respetar safe-area */
.safe-bottom{ padding-bottom:max(.75rem, env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-word > span, .bar{ opacity:1; transform:none; }
  .trend{ stroke-dashoffset:0; }
}

/* ============================================================
   6. PÁGINAS INTERNAS — fotos, acordeón FAQ, tablas
   ============================================================ */
.photo{ position:relative; overflow:hidden; background:
  radial-gradient(120% 90% at 20% 10%, rgba(47,123,255,.35), transparent 60%),
  radial-gradient(90% 80% at 90% 90%, rgba(34,211,238,.28), transparent 55%),
  linear-gradient(160deg,#0B1F3A,#071426); }
.photo::after{ content:""; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:48px 48px; pointer-events:none; }
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.photo figcaption{ position:absolute; left:1rem; bottom:1rem; z-index:2; }
details.faq{ border-top:1px solid #D4DCE8; }
details.faq:last-of-type{ border-bottom:1px solid #D4DCE8; }
details.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; font-weight:600; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .plus{ flex:none; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; border:1px solid #D4DCE8; transition:transform .3s var(--ease-out), background .2s; }
details.faq[open] summary .plus{ transform:rotate(45deg); background:#0B1F3A; color:#fff; border-color:#0B1F3A; }
details.faq .faq-body{ padding:0 0 1.25rem; color:#5B6B84; max-width:60ch; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.cmp{ min-width:520px; }
.cmp th, .cmp td{ padding:.85rem 1rem; text-align:left; vertical-align:top; }
.cmp thead th{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#5B6B84; border-bottom:1px solid #D4DCE8; }
.cmp tbody tr + tr td{ border-top:1px solid #E6EBF3; }
.tick{ color:#0891B2; font-weight:700; }

/* ============================================================
   7. Reset mínimo del shell para páginas SIN preflight (blog, calculadoras)
   (con :where() para que las utilidades de Tailwind sigan ganando)
   ============================================================ */
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(*){ box-sizing:border-box; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(ul,ol){ list-style:none; margin:0; padding:0; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(h1,h2,h3,h4,p,figure){ margin:0; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(a){ text-decoration:none; color:inherit; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(button){ font:inherit; border:0; cursor:pointer; background:none; color:inherit; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(svg){ display:inline-block; vertical-align:middle; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell, .safe-bottom) :where(img){ max-width:100%; display:block; }
:where(.no-preflight) :where(#site-header, footer, .hero-shell, .post-side, .shell){ line-height:1.5; }