/* ============================================================
   Hoja común de las páginas de servicio, caso y preguntas.
   Valores tomados de Sistema-Oxintia/_clientes/oxintia/design.md:
   texto en .75 / .875 / 1 rem, titulares con clamp, pesos 400/600/800,
   espaciado en escala de 8, radios 14 y 22, un solo acento.
   Nada se mueve: la única firma es el grano estático.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06091a; --bg-2:#0a1029; --bg-card:#0f1630; --bg-card-2:#131d38;
  --blue:#0ea5e9; --blue-2:#38bdf8; --white:#f0f6ff; --gray:#8899b8;
  --gray-2:#4a5c7a; --border:rgba(255,255,255,.07); --border-b:rgba(14,165,233,.35);
  --blue-glow:rgba(14,165,233,.35);
  --shadow:0 20px 60px rgba(0,0,0,.3); --glow:0 0 28px var(--blue-glow);
  --r:14px; --r-lg:22px;
  --wrap:1160px; --pad:clamp(1.25rem,5vw,2rem);
}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--gray);font-family:'Inter',system-ui,sans-serif;font-size:1rem;font-weight:400;line-height:1.6}
a{color:var(--blue)}
strong{color:var(--white);font-weight:600}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:var(--bg)}

/* grano: estático, es la firma de la marca */
.ox-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.narrow{max-width:760px}

/* ── navegación ── */
.top{position:sticky;top:0;z-index:20;background:rgba(6,9,26,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:.5rem;color:var(--white);font-weight:800;font-size:1rem;letter-spacing:-.02em;text-decoration:none;min-height:44px}
.top-links{display:flex;align-items:center;gap:.5rem;list-style:none}
.top-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;color:var(--gray);font-size:.875rem;font-weight:600;text-decoration:none;border-radius:var(--r);transition:color .12s}
.top-links a[aria-current="page"]{color:var(--white)}
@media (hover:hover) and (pointer:fine){.top-links a:hover{color:var(--white)}}
@media (max-width:860px){.top-links .opt{display:none}}
.top-links a.btn-primary{color:var(--bg);padding:0 1rem}
@media (hover:hover) and (pointer:fine){.top-links a.btn-primary:hover{color:var(--bg)}}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.5rem;border-radius:var(--r);font-size:1rem;font-weight:600;text-decoration:none;transition:background .12s,border-color .12s,transform .12s;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.btn-primary{background:var(--blue);color:var(--bg);box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--border)}
.btn-sm{min-height:44px;padding:0 1rem;font-size:.875rem}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--blue-2)}.btn-ghost:hover{border-color:var(--border-b)}}
.btn:active{transform:scale(.97)}

/* ── migas ── */
.crumbs{padding-top:1.5rem;font-size:.75rem;line-height:1.4}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--gray)}
.crumbs ol{align-items:center}
.crumbs a{color:var(--gray);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.crumbs [aria-current]{color:var(--white)}

/* ── cabecera de página ── */
.hero{padding:4rem 0 4rem}
.kicker{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--blue)}
h1{color:var(--white);font-weight:800;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-top:1rem;max-width:18ch}
.lead{font-size:1rem;line-height:1.6;color:var(--gray);margin-top:1.5rem;max-width:62ch}
.note a,.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom a{color:var(--gray)}
@media (min-width:900px){.lead{font-size:1.25rem}}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}

/* ── secciones ── */
.section{padding:6rem 0}
.band{background:var(--bg-2);border-top:1px solid var(--border);
  background-image:linear-gradient(180deg,rgba(14,165,233,.07),transparent 240px)}
h2{color:var(--white);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;letter-spacing:-.02em;max-width:22ch}
h3{color:var(--white);font-weight:600;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.3;letter-spacing:-.01em}
.section-intro{margin-top:1rem;max-width:62ch;line-height:1.7}
.prose p{line-height:1.7;max-width:70ch}
.prose p+p{margin-top:1rem}
.prose h2{margin-bottom:1.5rem}
.prose h3{margin:2.5rem 0 .5rem}
.prose ul{margin:1rem 0 0 1.25rem}
.prose li{line-height:1.7;max-width:68ch}
.prose li+li{margin-top:.5rem}

/* ── rejillas y tarjetas ── */
.grid{display:grid;gap:1.5rem;margin-top:2.5rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g3{grid-template-columns:1fr}}
@media (max-width:700px){.g2{grid-template-columns:1fr}}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.5rem 1.5rem 1.5rem;transition:border-color .12s,box-shadow .12s}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:var(--border-b);box-shadow:var(--shadow)}}
.card p{margin-top:.5rem;font-size:.875rem;line-height:1.6}
.card .n{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--blue);margin-bottom:1rem}
.icon{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;background:rgba(14,165,233,.1);color:var(--blue);margin-bottom:1.5rem}
.icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* tarjeta de cifra: número encima, etiqueta debajo */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
@media (max-width:700px){.stats{grid-template-columns:1fr}}
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
.stat b{display:block;color:var(--white);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:.5rem;font-size:.875rem;font-weight:600;color:var(--gray)}
.note{margin-top:1.5rem;font-size:.75rem;line-height:1.6;color:var(--gray);max-width:70ch}

/* caso destacado */
.proof{margin-top:2.5rem;background:var(--bg-card);border:1px solid var(--border-b);border-radius:var(--r-lg);padding:2.5rem 1.5rem}
.proof .who{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);line-height:1.4}
.proof h3{margin-top:1rem;font-size:clamp(1.1rem,2vw,1.35rem)}
.proof p{margin-top:1rem;font-size:.875rem;max-width:62ch}
.proof .more{display:inline-flex;align-items:center;min-height:44px;margin-top:1rem;font-weight:600;font-size:.875rem;text-decoration:none}

/* pasos */
.steps{counter-reset:s;list-style:none;display:grid;gap:1.5rem;margin-top:2.5rem}
.steps li{position:relative;padding:1.5rem 1.5rem 1.5rem 4rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:1.5rem;top:1.5rem;font-size:.875rem;font-weight:800;color:var(--blue)}
.steps li p{margin-top:.5rem;font-size:.875rem;line-height:1.6}

/* preguntas: <details> nativo, sin JS */
.faq{margin-top:2.5rem;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:1rem 0;color:var(--white);font-weight:600;font-size:1rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--blue);font-weight:400;transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.5rem;line-height:1.7;max-width:70ch}
.faq .a p+p{margin-top:.5rem}
.faq-group{margin-top:4rem}
.faq-group:first-of-type{margin-top:2.5rem}

/* cierre */
.cta-box{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:4rem 1.5rem}
.cta-box h2{margin:0 auto}
.cta-box p{margin:1rem auto 0;max-width:52ch}
.cta-box .hero-cta{justify-content:center}
.cta-box .small{margin-top:1.5rem;font-size:.75rem}

/* enlaces relacionados */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;list-style:none}
@media (max-width:900px){.related{grid-template-columns:1fr}}
.related a{display:flex;flex-direction:column;gap:.5rem;min-height:44px;padding:1.5rem;border:1px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--white);font-weight:600;font-size:1rem;transition:border-color .12s}
.related a span{color:var(--gray);font-weight:400;font-size:.875rem}
@media (hover:hover) and (pointer:fine){.related a:hover{border-color:var(--border-b)}}

/* pie */
.foot{border-top:1px solid var(--border);padding:4rem 0 2.5rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot p{font-size:.875rem;line-height:1.6;max-width:36ch;margin-top:1rem}
.foot h4{color:var(--white);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;margin-bottom:.5rem}
.foot ul{list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--gray);font-size:.875rem;text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot li a:hover{color:var(--white)}}
.foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.75rem}

@media (max-width:700px){.section{padding:4rem 0}.hero{padding:2.5rem 0 4rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}