/* ==========================================================================
   Inicio · diseño "Órbita grafito" (T-56). Solo se carga en index.php ($page['css']).
   Hero con anillos, carrusel de servicios, selector "¿Qué te pasó?", proceso,
   sanciones y preguntas. Los componentes compartidos viven en styles.css.
   Movimiento: solo transform/opacity; nada con prefers-reduced-motion: reduce.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: clamp(46.25rem, 100svh, 62.5rem); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__glow { position: absolute; left: 50%; top: 54%; width: 35rem; height: 35rem; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 68%); transform: translate(-50%, -50%); opacity: .55; }
.hero__ring { position: absolute; left: 50%; top: 54%; border-radius: 50%; border: 1px solid var(--line); transform: translate(-50%, -50%); }
.hero__ring--1 { width: 28.75rem; height: 28.75rem; }
.hero__ring--2 { width: 50rem; height: 50rem; border-style: dashed; }
.hero__ring--3 { width: 72.5rem; height: 72.5rem; }
.hero__orbit-dot { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); transform: translate(-50%, -50%); }
.hero__orbit-dot:nth-child(3n+1) { background: var(--accent-fill); }
.hero__orbit-dot:nth-child(1) { left: 96.19%; top: 69.13%; }
.hero__orbit-dot:nth-child(2) { left: 69.13%; top: 96.19%; }
.hero__orbit-dot:nth-child(3) { left: 30.87%; top: 96.19%; }
.hero__orbit-dot:nth-child(4) { left: 3.81%;  top: 69.13%; }
.hero__orbit-dot:nth-child(5) { left: 3.81%;  top: 30.87%; }
.hero__orbit-dot:nth-child(6) { left: 30.87%; top: 3.81%; }
.hero__orbit-dot:nth-child(7) { left: 69.13%; top: 3.81%; }
.hero__orbit-dot:nth-child(8) { left: 96.19%; top: 30.87%; }

/* Píldoras: el diseño las hacía orbitar por detrás del titular. Aquí quedan fijas en los
   márgenes laterales, fuera de la columna de texto, y solo cuando hay sitio (>= 1240 px). */
.hero__pills { display: none; }
@media (min-width: 1240px) {
    .hero__pills { display: block; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
    .hero__pills li { position: absolute; }
    .hero__pills li:nth-child(1) { left: max(1.5rem, calc(50% - 37rem)); top: 30%; }
    .hero__pills li:nth-child(2) { left: max(1.5rem, calc(50% - 39rem)); top: 48%; }
    .hero__pills li:nth-child(3) { left: max(1.5rem, calc(50% - 37rem)); top: 66%; }
    .hero__pills li:nth-child(4) { right: max(1.5rem, calc(50% - 37rem)); top: 30%; }
    .hero__pills li:nth-child(5) { right: max(1.5rem, calc(50% - 39rem)); top: 48%; }
    .hero__pills li:nth-child(6) { right: max(1.5rem, calc(50% - 37rem)); top: 66%; }
    .hero__pills .pill { opacity: .85; }
}
.hero__veil { position: absolute; left: 50%; top: 52%; width: min(51.25rem, 90%); height: 18.75rem; border-radius: 50%; background: var(--bg); filter: blur(50px); opacity: .82; transform: translate(-50%, -50%); }

.hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8.75rem var(--gutter) 1.875rem; text-align: center; }
.hero__slides { width: 100%; max-width: 61.25rem; }
.hero__slide + .hero__slide { margin-top: var(--sp-10); } /* sin JS se ven los tres mensajes */
.has-js .hero__slides { display: grid; } /* theme.js marca has-js antes de pintar: sin salto al cargar home.js */
.has-js .hero__slides > .hero__slide { grid-area: 1 / 1; margin: 0; transition: opacity .5s ease, visibility 0s linear 0s; }
.has-js .hero__slides > .hero__slide:not(.is-active) { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.hero__title { margin: 1.5rem auto 0; max-width: 52rem; font-size: var(--fs-hero); }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead { margin: 1.375rem auto 0; max-width: 36.25rem; font-size: var(--fs-lg); line-height: 1.65; color: var(--text-muted); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); }

.hero__controls { display: flex; align-items: center; gap: var(--sp-1); margin-top: 1.375rem; }
.hero__controls[hidden], .hero__pause[hidden] { display: none; }
.has-js .hero__controls[hidden] { display: flex; visibility: hidden; } /* reserva su alto hasta que home.js lo muestra */
.hero__dot, .hero__pause { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-strong); }
.hero__dot span { display: block; width: 2rem; height: .375rem; border-radius: var(--r-pill); background: var(--line-strong); transform: scaleX(.3125); transition: transform .5s var(--ease-out), background-color .5s ease; }
.hero__dot[aria-current="true"] span { background: var(--accent-fill); transform: none; }
.hero__pause { border: 1px solid var(--glass-line); border-radius: 50%; width: var(--tap); height: var(--tap); margin-right: var(--sp-2); }
.hero__pause-ico { position: relative; width: .75rem; height: .875rem; }
.hero__pause-ico::before, .hero__pause-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: .25rem; border-radius: 1px; background: currentColor; }
.hero__pause-ico::before { left: 0; }
.hero__pause-ico::after { right: 0; }
.hero__pause[aria-pressed="true"] .hero__pause-ico::before { width: 100%; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero__pause[aria-pressed="true"] .hero__pause-ico::after { display: none; }

.hero__promises { position: relative; z-index: 2; padding-bottom: 2.125rem; }
.hero__promises ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.375rem), 1fr)); gap: var(--sp-3); }
.hero__promises li { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem; border-radius: var(--r-lg); }
.hero__promise-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.hero__promise-ic .icon { width: 1.125rem; height: 1.125rem; }
.hero__promises strong { display: block; font-size: var(--fs-base); line-height: 1.3; color: var(--text-strong); }
.hero__promises small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 1020px) { .hero__ring--2, .hero__ring--3 { display: none; } }
@media (max-width: 640px) {
    .hero__body { padding-top: 6.5rem; }
    .hero__title { margin-top: 1.25rem; }
    .hero__lead { margin-top: 1.125rem; font-size: var(--fs-base); }
    .hero__ctas { width: 100%; margin-top: var(--sp-6); }
    .hero__ctas .btn { width: 100%; }
}

/* ---------- Servicios (carrusel) ---------- */
.svc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }
.svc-nav { display: flex; align-items: center; gap: var(--sp-2); }
.no-js .svc-nav { display: none; }
#o-servicios { overflow-x: clip; }
.svc-track { margin-top: 2.75rem; list-style: none; }
.svc-card { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 17.5rem; }
.svc-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.svc-card__group { letter-spacing: .12em; }
.svc-card__n { font-size: 1.875rem; }
.svc-card__title { margin-top: auto; font-size: 1.5rem; line-height: 1.15; }
.svc-card__text { font-size: var(--fs-base); line-height: 1.55; color: var(--text-muted); }
.svc-card__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); align-self: flex-start; color: var(--accent); font-weight: var(--fw-bold); text-decoration: none; }
.svc-card__link .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .svc-card__link:hover .icon { transform: translateX(3px); } }
#o-servicios .hscroll-bar { margin-top: var(--sp-2); }

/* ---------- ¿Qué te pasó? (hub) ---------- */
.hub { background: var(--bg); }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: var(--sp-10); align-items: center; margin-top: 2.75rem; }
.hub__radar { position: relative; width: 100%; max-width: 33.75rem; aspect-ratio: 1 / 1; margin: 0 auto; }
.hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__svg circle, .hub__svg line { fill: none; stroke: var(--line); stroke-width: .3; }
.hub__svg .hub__dash { stroke-dasharray: 1 2; }
.hub__svg line.is-on { stroke: var(--accent-fill); stroke-width: .6; stroke-dasharray: 3 9; }
.hub__halo { position: absolute; left: 50%; top: 50%; width: 9.375rem; height: 9.375rem; border-radius: 50%; border: 1px solid var(--accent-fill); transform: translate(-50%, -50%); opacity: .5; }
.hub__core { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7.75rem; height: 7.75rem; border-radius: 50%; background: var(--glow); border: 1px solid var(--accent-fill); text-align: center; transform: translate(-50%, -50%); }
.hub__core .ot { font-size: 1.5rem; }
.hub__core span + span { margin-top: .25rem; font-size: .8125rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.hub__opts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hub__opts li { position: absolute; }
.hub__opts li:nth-child(1) { left: 50%;    top: 10%; }
.hub__opts li:nth-child(2) { left: 84.64%; top: 30%; }
.hub__opts li:nth-child(3) { left: 84.64%; top: 70%; }
.hub__opts li:nth-child(4) { left: 50%;    top: 90%; }
.hub__opts li:nth-child(5) { left: 15.36%; top: 70%; }
.hub__opts li:nth-child(6) { left: 15.36%; top: 30%; }
.hub__opt {
    display: flex; align-items: center; justify-content: center; width: max-content; max-width: 10.625rem; min-height: var(--tap);
    padding: .6875rem .9375rem; border-radius: .875rem; border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--text-strong); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.25; text-align: center; text-decoration: none;
    transform: translate(-50%, -50%); transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.hub__opt:hover { border-color: var(--accent-fill); }
.hub__opt.is-on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.hub__details { display: grid; gap: var(--sp-4); }
.hub__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: clamp(1.625rem, 3vw, 2.5rem); scroll-margin-top: var(--header-h); }
.hub__card[hidden] { display: none; }
.hub__title { margin-top: .625rem; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem); }
.hub__text { margin-top: .875rem; font-size: var(--fs-base); line-height: 1.65; color: var(--text-muted); }
.hub__steps { display: flex; flex-direction: column; gap: .625rem; margin: 1.375rem 0 0; padding: 0; list-style: none; }
.hub__steps li { display: flex; gap: var(--sp-3); font-size: var(--fs-base); line-height: 1.5; }
.hub__steps span { flex: none; display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; margin-top: .0625rem; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); font-size: .875rem; font-weight: var(--fw-bold); }
.hub__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
@media (max-width: 640px) {
    .hub__radar { aspect-ratio: auto; max-width: none; }
    .hub__svg, .hub__halo, .hub__core { display: none; }
    .hub__opts { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .hub__opts li { position: static; }
    .hub__opt { width: 100%; max-width: none; height: 100%; transform: none; }
    .hub__actions .btn { width: 100%; }
}

/* ---------- Proceso ---------- */
.proc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 27.5rem), 1fr)); gap: clamp(2.5rem, 5vw, 3.75rem); align-items: start; }
.proc__link { margin-top: var(--sp-6); }
@media (min-width: 1021px) { .proc__intro { position: sticky; top: 8.125rem; } }

/* ---------- Sanciones ---------- */
.sanc { background: var(--bg); }
.sanc__tabs { margin-top: 2.25rem; }
.sanc__panel { margin-top: 1.875rem; }
.sanc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); gap: .875rem; }
.sanc__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-js .sanc__h { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: var(--sp-10) 0 var(--sp-4); font-size: var(--fs-2xl); }
.sanc__rev { margin: var(--sp-5) auto 0; max-width: 50rem; font-size: var(--fs-base); line-height: 1.6; color: var(--text-muted); text-align: center; }
.sanc__rev strong { color: var(--text-strong); }
.sanc__note { margin: var(--sp-8) auto 0; max-width: 46rem; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-dim); text-align: center; }
.sanc__note a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- Preguntas ---------- */
.faq-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
.faq-home__all { margin-top: var(--sp-5); }

/* ---------- Movimiento del inicio ---------- */
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glow-breathe { 0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes halo-out { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes pill-drift { 0%, 100% { transform: none; } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
    .hero__ring--1 { animation: orbit-spin 70s linear infinite; }
    .hero__ring--2 { animation: orbit-spin 110s linear infinite reverse; }
    .hero__ring--3 { animation: orbit-spin 160s linear infinite; }
    .hero__glow { animation: glow-breathe 7s ease-in-out infinite; }
    .hero__pills li { animation: pill-drift 9s ease-in-out infinite; }
    .hero__pills li:nth-child(2n) { animation-duration: 11s; animation-delay: -3s; }
    .hero__pills li:nth-child(3n) { animation-duration: 13s; animation-delay: -6s; }
    .hub__halo { animation: halo-out 6s ease-out infinite; }
    .hub__card.is-shown { animation: fade-in .45s ease both; }
    /* Fuera de pantalla, el fondo del hero se detiene (home.js) */
    .hero.is-offscreen .hero__bg *, .hero.is-offscreen .hero__bg { animation-play-state: paused; }
}