@charset "UTF-8";
/* Interfaz experimental "showroom de tecnología", inspirada en la referencia "seven":
   lienzo plano y bloques invertidos que se alternan, una palabra gigante detrás de cada portada,
   titulares en mayúsculas ligeras, enunciados en dos tonos, filas de índice con botones circulares
   y objetos 3D de cerámica blanca presentados sobre tarjetas blancas.
   Se carga después de styles.css: reorganiza y cambia el aspecto, sin tocar los textos.
   El modo oscuro (por defecto) usa lienzo negro y bloques gris claro; el modo claro los invierte.
   El prefijo :root:root:root solo sube la especificidad sobre reglas anteriores ligadas al tema. */

:root{
  --c-bg:#050505;--c-ink:#f2f2f2;--c-muted:#8c8c8c;--c-line:rgba(255,255,255,.14);--c-soft:#161616;
  --b-bg:#ececec;--b-ink:#0a0a0a;--b-muted:#6f6f6f;--b-line:rgba(0,0,0,.12);--b-soft:#dcdcdc;
  --giant:#151515;
}
:root[data-theme="light"]{
  --c-bg:#979797;--c-ink:#0a0a0a;--c-muted:#262626;--c-line:rgba(0,0,0,.2);--c-soft:#8a8a8a;
  --b-bg:#000;--b-ink:#f2f2f2;--b-muted:#8c8c8c;--b-line:rgba(255,255,255,.14);--b-soft:#1a1a1a;
  --giant:rgba(255,255,255,.4);
}
:root,:root[data-theme="light"]{
  --font-sans:"Urbanist","Segoe UI Variable",system-ui,sans-serif;
  --font-mono:"Geist Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --radius:10px;--radius-sm:8px;--pill:999px;
  --pad-x:max(var(--gutter),calc((100% - 1280px) / 2));
  --surface:var(--c-bg);--soft:var(--c-soft);
  --page:var(--c-bg);--page-raised:var(--c-soft);--page-soft:var(--c-soft);
  --ink:var(--c-ink);--muted:var(--c-muted);--quiet:var(--c-muted);
  --line:var(--c-line);--line-strong:var(--c-line);--hairline:var(--c-line);
  --accent:var(--c-ink);--accent-strong:var(--c-ink);--accent-soft:var(--c-soft);--accent-ink:var(--c-bg);
  --brand-blue:var(--c-ink);--brand-violet:var(--c-muted);--header:var(--c-bg);
  font-family:var(--font-sans)
}
/* Bloques invertidos. */
:root:root :is(.services-stage,.process-layout,.faq-layout,.prc-pay-card,.site-footer,.svc-item){
  --surface:var(--b-bg);--soft:var(--b-soft);--ink:var(--b-ink);--muted:var(--b-muted);--quiet:var(--b-muted);
  --line:var(--b-line);--line-strong:var(--b-line);--hairline:var(--b-line);
  --accent:var(--b-ink);--accent-ink:var(--b-bg);--accent-soft:var(--b-soft);--brand-blue:var(--b-ink);--brand-violet:var(--b-muted);
  color:var(--ink)
}
/* Portadas: siempre sobre gris claro, para que el logo y la escultura negro pizarra resalten. */
:root:root :is(.hero-track,.svc-hero){
  --surface:#979797;--soft:#8a8a8a;--ink:#0a0a0a;--muted:#262626;--quiet:#262626;--line:rgba(0,0,0,.2);--line-strong:rgba(0,0,0,.2);
  --accent:#0a0a0a;--accent-ink:#979797;--brand-blue:#0a0a0a;--brand-violet:#6a6a6a;--giant:rgba(255,255,255,.4);color:var(--ink)
}
/* Tarjetas de producto: siempre blancas, con tinta negra. */
:root:root :is(.service-visual,.statement-illustration,.process-stage,.about-art,.faq-stage,.prc-value){
  --surface:#fff;--soft:#efefef;--ink:#0a0a0a;--muted:#6f6f6f;--quiet:#6f6f6f;--line:rgba(0,0,0,.12);--line-strong:rgba(0,0,0,.2);
  --accent:#0a0a0a;--accent-ink:#fff;--brand-blue:#0a0a0a;--brand-violet:#5a5a5a;color:#0a0a0a
}

/* Base */
body,:root[data-theme="light"] body{background:var(--c-bg);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.45;letter-spacing:0}
::selection{color:var(--surface);background:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:var(--c-muted);border-color:var(--c-bg)}
.skip{border-radius:var(--pill);color:var(--c-bg);background:var(--c-ink)}

/* Navegación: marca a la izquierda, enlaces pequeños al centro y la llamada en mayúsculas a la derecha. */
:root:root:root .site-header,:root:root:root .site-header.is-scrolled{padding-inline:var(--pad-x);background:var(--c-bg);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand{font-family:var(--font-sans);font-size:24px;font-weight:600;letter-spacing:-.05em;text-transform:lowercase}
:root:root:root .primary-nav{position:absolute;left:50%;transform:translateX(-50%);gap:clamp(18px,2.4vw,34px);margin:0;padding:0;border:0;background:none}
:root:root:root .primary-nav a{padding:6px 0;border-radius:0;background:none;color:var(--muted);font-size:13px;font-weight:500}
:root:root:root .primary-nav a[aria-current="page"],:root:root:root .primary-nav a:hover{color:var(--ink);background:none}
.header-actions{margin-left:auto}
:root:root:root .site-header .header-cta{min-height:32px;margin-right:18px;padding:0;border:0;border-radius:0;background:none;color:var(--ink);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font:700 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
@media(hover:hover) and (pointer:fine){:root:root:root .site-header .header-cta:hover{background:none;box-shadow:none;text-decoration:underline;text-underline-offset:.4em}}
:root:root .theme-toggle{color:var(--muted)}
:root:root .theme-switch-track{border-color:var(--line);background:transparent}
:root:root .theme-switch-knob{background:var(--ink);box-shadow:none}
:root:root .menu-toggle{border-color:var(--line);background:transparent}
:root:root .menu-toggle span{background:var(--ink)}
:root:root .mobile-nav:not([hidden]){background:var(--c-bg);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.mobile-nav a{border-bottom-color:var(--line);color:var(--ink);font-size:20px;font-weight:500}
.mobile-nav .mobile-contact{color:var(--ink)}
/* Barra de secciones: píldoras, la activa rellena. */
:root:root:root .section-nav{background:var(--c-bg);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.section-nav-inner{padding-inline:var(--pad-x)}
.section-nav-title{font-size:18px;font-weight:600;letter-spacing:-.04em;text-transform:lowercase}
.section-nav-links{gap:8px}
:root:root:root .section-nav-links a{padding:6px 16px;border:1px solid var(--line);border-radius:var(--pill);color:var(--ink);font-size:13px;font-weight:500;transition:background .2s ease,color .2s ease}
:root:root:root .section-nav-links a.is-active{border-color:var(--ink);background:var(--ink);color:var(--c-bg)}
.section-nav-links a::after{content:none}
.section-nav-progress{background:var(--ink)}

/* Botones: píldora rellena con la tinta del bloque; secundarios en contorno; enlaces en mayúsculas. */
:root:root:root :is(.button,.contact-cta,.section-nav-cta,.hero-actions .button.primary){
  align-items:center;justify-content:center;gap:12px;width:auto;min-height:46px;padding:0 24px;
  border:0;border-radius:var(--pill);background:var(--ink);color:var(--surface);
  font:600 14px/1 var(--font-sans);letter-spacing:0;white-space:nowrap;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:opacity .18s ease,transform .16s var(--ease-out)
}
:root:root:root .section-nav-cta{min-height:32px;padding:0 16px;font-size:13px;color:var(--c-bg)}
@media(hover:hover) and (pointer:fine){:root:root:root :is(.button,.contact-cta,.section-nav-cta,.hero-actions .button.primary):hover{background:var(--ink);box-shadow:none;opacity:.86;transform:translateY(-1px)}}
:root:root:root:root :is(.hero-pill,.service-pause){
  min-height:34px;padding:0 16px;border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--ink);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font:500 13px/1 var(--font-sans)
}
@media(hover:hover) and (pointer:fine){:root:root:root:root :is(.hero-pill,.service-pause):hover{border-color:var(--ink);background:transparent;box-shadow:none}}
:root:root :is(.text-link,.service-detail-link,.statement-link),:root:root .hero-actions .text-link{gap:10px;padding:0;border:0;color:var(--ink);font:700 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
@media(hover:hover) and (pointer:fine){:root:root :is(.text-link,.service-detail-link):hover{text-decoration:underline;text-underline-offset:.4em}}

/* Tipografía */
:is(.hero-copy h1,.contact-copy h2,.svc-hero h1,.statement-heading,.tech-heading h2,.about-copy h2,.prc-intro h2){font-family:var(--font-sans);font-weight:400;letter-spacing:-.025em;line-height:.92;text-transform:uppercase;text-wrap:balance}
:is(.services-intro h2,.section-intro h2,.faq-intro h2,.svc-item h2,.prc-pay h2,.service-others h2,.service-empty-state p){font-family:var(--font-sans);font-weight:500;letter-spacing:-.035em;line-height:1;text-transform:none;text-wrap:balance}
/* Las tildes necesitan aire arriba porque cada palabra recorta su caja al animarse. */
:is(.hero-copy h1,.contact-copy h2,.svc-hero h1,.statement-heading,.services-intro h2,.tech-heading h2,.section-intro h2,.about-copy h2,.faq-intro h2,.svc-item h2,.prc-intro h2,.prc-pay h2) .word{padding-top:.16em;margin-top:-.16em}
/* Enunciados en dos tonos: las palabras clave en gris. */
:root:root :is(.key-blue,.key-violet),:root:root:not([data-theme="light"]) .key-violet{color:var(--quiet);font-weight:inherit;text-shadow:none}
.hl,:root[data-theme="light"] .hl{color:var(--ink);font-weight:600;background:none}
/* Etiquetas pequeñas en mayúsculas. */
:is(.svc-eyebrow,.svc-kicker,.svc-label,.service-kicker,.statement-copy .statement-step,.service-fact .statement-step,.service-detail-label,.service-detail-ideal span:first-child,.service-detail-subhead,.prc-get span,.tech-index,.process-index,.about-figure figcaption span,.about-figure .about-name span){
  font:600 11px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)
}
:is(.contact-number,.contact-copy .contact-number,.about-tech code,.svc-index a span){font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Portada de inicio: lienzo plano, la palabra "astroly" gigante detrás del logo de cerámica,
   el titular en bloque abajo a la izquierda y la descripción con las acciones a su derecha. */
/* La intro corre como la original: escenario oscuro, logo de cromo negro y el nombre ASTROLY
   encendido. Al asentarse el logo, el escenario pasa a gris claro y aparece la palabra gigante. */
:root:root:root .hero-sticky{background:#050608;transition:background-color 1.1s ease}
:root:root:root .hero-sticky.is-settled{background:var(--surface)}
:root[data-theme="dark"] .hero-sticky::before{content:none}
:root:root .hero-wordmark{font-family:"Segoe UI Variable","Segoe UI",-apple-system,sans-serif;color:#f4f6fb;text-shadow:0 0 18px rgba(223,232,255,.55),0 0 60px rgba(183,201,255,.4),0 0 120px rgba(54,122,223,.35)}
.hero-giant{position:absolute;z-index:0;top:46%;right:0;left:0;margin:0;color:var(--giant);font:500 clamp(150px,33vw,540px)/.8 var(--font-sans);letter-spacing:-.08em;text-align:center;text-indent:-.06em;white-space:nowrap;pointer-events:none;opacity:0;translate:0 -50%;transition:opacity 1.1s ease .2s}
.hero-sticky.is-titled .hero-giant{opacity:1}
:root:root:root .hero-copy{top:auto;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-rows:auto auto auto;align-items:end;column-gap:clamp(24px,5vw,80px);width:auto;max-width:none;margin:0;padding:0 var(--hero-align-right,var(--pad-x)) clamp(28px,5svh,52px) var(--hero-align,var(--pad-x));text-align:left;translate:none;pointer-events:none}
.hero-copy>*{pointer-events:auto}
:root:root:root .hero-pill{grid-column:1;grid-row:1;justify-self:start;margin:0 0 22px}
:root:root:root .hero-copy h1{grid-column:1;grid-row:2/4;align-self:end;display:block;max-width:none;margin:0;color:var(--ink);font-size:clamp(44px,6.2vw,108px)}
:root:root:root .hero-copy{grid-template-rows:auto minmax(0,1fr) auto}
:root:root:root .hero-description{align-self:end}
:root:root:root .hero-copy h1>span{display:block}
:root:root:root .hero-copy h1>span:last-child{color:var(--ink)}
:root:root:root .hero-description{grid-column:2;grid-row:2;max-width:30ch;margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.45}
:root:root:root .hero-copy .hero-actions{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-start;gap:16px;margin:0}

/* Secciones: lienzo transparente, sin líneas divisorias; los bloques invertidos llevan el contraste. */
:root:root:root :is(.statement-section,.services-section,.tech-rail,.process-section,.about-section,.faq-section,.contact-section,.svc-detail,.prc-steps,.prc-pay,.prc-values,.service-page,.service-page .process-section,.service-others,.service-facts){background:transparent;border-top:0;border-bottom:0;box-shadow:none}
/* Bloques invertidos a todo lo ancho, sin esquinas: bandas duras que alternan con el lienzo. */
:root:root:root :is(.services-section,.process-section,.faq-section,.prc-pay){padding:0}
:root:root:root :is(.tech-rail,.about-section,.prc-steps,.prc-values){padding:clamp(120px,13vw,200px) var(--pad-x) clamp(72px,9vw,128px)}
:root:root:root :is(.services-stage,.process-layout,.faq-layout,.prc-pay-card,.svc-item){border:0;border-radius:var(--radius);background:var(--surface);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
:root:root:root :is(.services-stage,.process-layout,.faq-layout,.prc-pay-card){border-radius:0;padding:clamp(64px,8vw,128px) var(--pad-x)}
/* Palabras gigantes recortadas por el borde superior de cada sección del lienzo. */
:root:root:root :is(.statement-section,.tech-rail,.about-section,.contact-section,.prc-steps,.prc-values){position:relative;overflow:clip}
:root:root:root :is(.tech-rail,.about-section,.contact-section,.prc-steps,.prc-values)>:not(.prc-defs){position:relative;z-index:1}
:root:root:root :is(.statement-section,.tech-rail,.about-section,.contact-section,.prc-steps,.prc-values)::after{
  content:var(--giant-word,"");position:absolute;z-index:0;top:0;right:auto;bottom:auto;left:calc(var(--pad-x) - .04em);width:auto;height:auto;aspect-ratio:auto;
  margin:0;border:0;border-radius:0;background:none;box-shadow:none;transform:translateY(clamp(14px,2.4vw,40px));
  color:var(--giant);font:500 clamp(112px,20.25vw,330px)/.8 var(--font-sans);letter-spacing:-.08em;white-space:nowrap;pointer-events:none
}
.statement-section{--giant-word:"Enfoque" / ""}
.tech-rail{--giant-word:"Herramienta" / ""}
.about-section{--giant-word:"Desarrollo" / ""}
.contact-section{--giant-word:"Resolver" / ""}
.prc-steps{--giant-word:"Etapa" / ""}
.prc-values{--giant-word:"Equipo" / ""}
:root:root:root .statement-section>*{position:relative;z-index:1}
:root:root:root :is(.tech-layout,.about-layout,.contact-layout){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
:root:root:root :is(.service-visual,.process-stage,.faq-stage,.prc-value){border:0;border-radius:var(--radius);background:#fff;box-shadow:none}
.service-visual::before,.service-visual-shadow{content:none;display:none}

/* Enfoque: etiqueta a la izquierda, enunciado escalonado a la derecha y tres tarjetas de producto. */
:root:root:root .statement-section{
  --statement-surface:transparent;--statement-text:var(--ink);--statement-secondary:var(--ink);--statement-copy:var(--muted);--statement-separator:var(--line);
  --statement-outline:#6f6f6f;--statement-plane-back:#f4f4f4;--statement-plane-mid:#e4e4e4;--statement-plane-top:#fff;--statement-guide:#c9c9c9;--statement-line:#8a8a8a;
  --statement-mark:#0a0a0a;--statement-connector:#a8a8a8;--statement-node:#fff;--statement-node-top:#0a0a0a;--statement-node-top-outline:#0a0a0a;--statement-node-side:#ececec;--statement-node-outline:#6f6f6f;--statement-dot:#2a2a2a;
  --statement-review-surface:#fff;--statement-review-side:#e4e4e4;--statement-review-badge:#0a0a0a;--statement-review-badge-check:#fff;--statement-review-option:#fff;--statement-review-option-selected:#0a0a0a;--statement-review-option-check:#fff;
  display:grid;grid-template-columns:minmax(200px,.42fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:clamp(48px,6vw,96px);
  min-height:0;padding:clamp(88px,11vw,160px) var(--pad-x) clamp(48px,6vw,88px);color:var(--ink)
}
:root:root:root .statement-section::before{content:"Enfoque" / "";position:relative;z-index:1;grid-column:1;grid-row:1;padding-top:.9em;background:none;font:600 11px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
:root:root:root .statement-heading{grid-column:2;grid-row:1;max-width:none;margin:0;font-size:clamp(40px,6vw,104px);text-align:left}
:root:root:root .statement-heading>span{display:block;white-space:normal}
:root:root:root .statement-heading>span+span{padding-left:2.4em;color:var(--ink)}
:root:root:root .statement-grid{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);max-width:none;margin:0}
:root:root:root .statement-section .statement-card,:root:root:root .statement-section .statement-card:first-child,:root:root:root .statement-section .statement-card:last-child{display:flex;flex-direction:column;gap:22px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
:root:root:root .statement-section .statement-illustration{display:block;width:100%;height:auto;aspect-ratio:4/3.2;margin:0;padding:clamp(18px,2.6vw,40px);border-radius:var(--radius);background:#fff;transform:none}
:root:root:root .statement-copy{max-width:none;margin:0;padding:0}
:root:root:root .statement-copy .statement-step{margin:0 0 10px}
:root:root:root .statement-copy h3{margin:0;color:var(--ink);font:600 15px/1.25 var(--font-sans);letter-spacing:.02em;text-transform:uppercase}
:root:root:root .statement-copy p{max-width:36ch;margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
:root:root:root .statement-points{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
:root:root:root .statement-points li{padding:3px 0 3px 14px;color:var(--muted);font-size:13px}
:is(.statement-points li,.service-detail-list li,.svc-notes li)::before{background:var(--ink);box-shadow:none}
:root:root:root .statement-points li::before{top:11px;width:4px;height:4px}
@media(hover:hover) and (pointer:fine){:root:root:root .statement-section .statement-card:hover{transform:none;box-shadow:none}}

/* Servicios: bloque invertido con el índice de servicios y la tarjeta del objeto 3D. */
:root:root:root .services-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,320px);align-items:end;justify-items:start;gap:24px 48px;margin:0 0 clamp(36px,5vw,72px);text-align:left}
:root:root:root .services-intro h2{max-width:16ch;font-size:clamp(34px,4.4vw,70px)}
:root:root:root .services-intro p{max-width:34ch;margin:0;color:var(--muted);font-size:14px;line-height:1.45}
:root:root:root .service-explorer{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"picker visual" "picker detail";align-items:start;column-gap:clamp(24px,4.4vw,72px);row-gap:28px;min-height:0;padding:0;border:0;background:transparent}
:root:root:root .service-picker{grid-area:picker;display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch;counter-reset:svc;border-top:1px solid var(--line)}
:root:root:root .service-picker .service-choice,:root:root:root .service-picker .service-choice:first-child,:root:root:root .service-picker .service-choice:nth-child(2){
  counter-increment:svc;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:8px;min-height:0;margin:0;padding:22px 0;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none
}
.service-choice::before{content:"0" counter(svc);grid-column:1;font:600 10px/1 var(--font-sans);letter-spacing:.08em;color:var(--quiet)}
:root:root:root .service-choice strong{grid-column:1;color:var(--muted);font:500 clamp(22px,2.3vw,34px)/1.05 var(--font-sans);letter-spacing:-.03em;transform:none}
:root:root:root .service-picker .service-choice.is-active strong{color:var(--ink)}
:root:root:root .service-arrow,:root:root:root .service-picker .service-choice .service-arrow{grid-column:2;grid-row:1/3;width:42px;height:42px;padding:13px;border-radius:50%;background:var(--soft);stroke:var(--ink);opacity:1;transform:none}
:root:root:root .service-picker .service-choice.is-active .service-arrow{background:var(--ink);stroke:var(--surface)}
@media(hover:hover) and (pointer:fine){:root:root:root .service-picker .service-choice:hover{background:transparent;border-color:var(--line)}:root:root:root .service-picker .service-choice:hover strong{color:var(--ink);transform:none}}
:root:root:root .service-visual{grid-area:visual;height:clamp(300px,30vw,460px);margin:0}
:root:root:root .service-detail{grid-area:detail;min-height:0;padding:0}
:root:root:root .service-empty-state p{font-size:clamp(26px,2.6vw,38px)}
.service-empty-state span{color:var(--muted)}
.service-map{display:none}
.service-detail-copy{font-size:clamp(18px,1.5vw,22px);line-height:1.3;font-weight:500}
.service-detail-ideal{color:var(--ink)}
.service-detail-list li{color:var(--muted)}
.service-detail-note{border-left-color:var(--line);color:var(--muted)}
:root:root .service-detail-link{margin-top:24px}
:root:root:root .service-playback{margin:32px 0 0;padding:6px 6px 6px 18px;border:1px solid var(--line);border-radius:var(--pill);background:transparent}
.service-dots span{background:var(--line)}
.services-note{margin-top:20px;text-align:left;color:var(--muted)}

/* Tecnologías: enunciado a la izquierda y las píldoras en movimiento a la derecha. */
:root:root:root .tech-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px)}
:root:root:root .tech-layout .tech-heading h2{max-width:14ch;font-size:clamp(32px,3.8vw,58px)}
:root:root:root .tech-layout .tech-heading p{color:var(--muted);font-size:14px}
:root:root:root .tech-marquees .tech-chip{min-height:52px;border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--ink);font-size:14px;font-weight:500}
@media(hover:hover) and (pointer:fine){:root:root:root .tech-marquees .tech-chip:hover{background:var(--soft);color:var(--ink)}}

/* Proceso (inicio): bloque invertido, pasos como filas de índice y la ilustración en una tarjeta. */
:root:root:root .process-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;gap:clamp(28px,4.4vw,72px)}
:root:root:root .process-layout .section-intro{justify-items:start;gap:16px;text-align:left}
:root:root:root .process-layout .section-intro h2{max-width:14ch;font-size:clamp(32px,4vw,62px)}
:root:root:root .process-layout .section-intro>p{max-width:44ch;color:var(--muted);font-size:14px}
:root:root:root .process-layout .process-steps{gap:0;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.process-layout .process-steps::before,.process-layout .process-steps::after,.process-layout .process-node{display:none}
:root:root:root .process-layout .process-step,:root:root:root .process-layout .process-step:last-child{padding:20px 56px 20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
:root:root:root .process-layout .process-step.is-active{border-color:var(--line);background:transparent}
:root:root:root .process-layout .process-index{top:24px;right:0}
:root:root:root .process-layout .process-step h3{margin:0 0 6px;color:var(--muted);font:500 clamp(20px,1.8vw,26px)/1.1 var(--font-sans);letter-spacing:-.025em}
:root:root:root .process-layout .process-step.is-active h3{color:var(--ink)}
:root:root:root .process-layout .process-step p{color:var(--muted);font-size:14px}
:root:root:root .process-stage{align-self:stretch;min-height:clamp(300px,32vw,460px)}
:root:root:root .pa-line{stroke:#0a0a0a}
:root:root:root .pa-dim{stroke:#9a9a9a}
:root:root:root .pa-accent,:root:root:root .pa-check{stroke:#0a0a0a}
:root:root:root .pa-accent-dim{stroke:#9a9a9a}
:root:root:root .pa-violet{stroke:#5a5a5a}
:root:root:root .pa-violet-dim{stroke:#c9c9c9}
:root:root:root .pa-accent.pa-fill{fill:#ececec}
.process-note{margin:20px 0 0;text-align:left;color:var(--muted)}

/* Sobre Astroly: texto a la izquierda; el nombre enorme y la ilustración en tarjeta a la derecha. */
:root:root:root .about-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,96px)}
:root:root:root .about-copy h2{font-size:clamp(34px,4.2vw,66px)}
.about-lead{color:var(--muted);font-size:16px;line-height:1.5}
.about-tech{color:var(--muted)}
:root:root .about-tech code{padding:2px 10px;border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--ink);font-size:12px}
.about-facts,.about-facts li{border-color:var(--line)}
.about-facts strong{font-weight:600}
.about-facts span{color:var(--muted)}
.about-note{color:var(--muted)}
:root:root:root .about-figure{align-items:stretch;gap:24px}
:root:root:root .about-figure .about-name{align-items:flex-start;text-align:left}
:root:root:root .about-figure .about-name strong{font:500 clamp(56px,7vw,120px)/.86 var(--font-sans);letter-spacing:-.055em}
:root:root:root .about-figure .about-art{width:100%;max-width:none;margin:0;padding:clamp(20px,3vw,40px);border-radius:var(--radius);background:#fff}
:root:root .about-art .shirt{fill:#ececec;stroke:#0a0a0a}
:root:root .about-art .hair{fill:#2a2a2a;stroke:#2a2a2a}
:root:root .about-art .face{fill:#5a5a5a}
:root:root .about-art .pen{stroke:#0a0a0a}
:root:root .about-art .device{fill:#f4f4f4;stroke:#0a0a0a}
:root:root .about-art .card-accent,:root:root .about-art .tag-box-accent{fill:#0a0a0a;stroke:#0a0a0a}
:root:root .about-art .tag-box-blue{fill:#ececec;stroke:#0a0a0a}
:root:root .about-art .tag-box{fill:#fff;stroke:#bdbdbd}
:root:root .about-art .card-label{fill:#5a5a5a}
:root:root .about-art .card-label-strong{fill:#fff}
:root:root .about-art .tag-box-blue+.card-label-strong{fill:#0a0a0a}
:root:root .code-violet{fill:#0a0a0a}
:root:root .code-blue{fill:#8a8a8a}
:root:root .code-dim{fill:#d4d4d4}
:root:root .code-cursor{fill:#0a0a0a}

/* Preguntas: bloque invertido, filas con un botón circular de "+" y el cubo en una tarjeta blanca. */
:root:root:root .faq-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4.4vw,72px)}
:root:root:root .faq-intro h2{font-size:clamp(32px,3.8vw,58px)}
.faq-intro>p{color:var(--muted);font-size:14px}
:root:root:root .faq-stage{height:clamp(280px,26vw,400px);margin-top:28px}
:root:root:root .faq-list{gap:0;border-top:1px solid var(--line)}
:root:root:root .faq-list details,:root:root:root .faq-list details[open]{padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
:root:root:root .faq-list summary{min-height:0;padding:22px 0;color:var(--ink);font:500 clamp(17px,1.5vw,21px)/1.25 var(--font-sans);letter-spacing:-.015em}
:root:root:root .faq-list summary::after,:root:root:root .faq-list details[open] summary::after{content:"+";display:grid;place-items:center;width:38px;height:38px;flex:none;margin:0;border:0;border-radius:50%;background:var(--soft);color:var(--ink);font:300 22px/1 var(--font-sans);transform:none;transition:transform .25s var(--ease-out),background .2s ease,color .2s ease}
:root:root:root .faq-list details[open] summary::after{transform:rotate(45deg);background:var(--ink);color:var(--surface)}
:root:root:root .faq-list details p{margin:-6px 56px 22px 0;color:var(--muted);font-size:15px}
.faq-list summary:hover{color:var(--ink)}

/* Contacto: titular en bloque en mayúsculas y los canales como filas; WhatsApp es la píldora rellena. */
:root:root:root .contact-section{margin:0;padding:clamp(88px,11vw,170px) var(--pad-x) clamp(64px,8vw,120px);border-radius:0;text-align:left}
:root:root:root .contact-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:end;gap:clamp(32px,5vw,96px)}
:root:root:root .contact-copy h2{max-width:13ch;margin:0;font-size:clamp(42px,6vw,100px)}
:root:root:root .contact-copy>p{margin-inline:0}
.contact-copy>p{max-width:40ch;color:var(--muted);font-size:15px}
:root:root:root .contact-channels{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
:root:root:root .channel{flex-direction:row;align-items:center;gap:16px;min-height:0;padding:16px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);box-shadow:none}
:root:root:root .channel .channel-icon{width:40px;height:40px;border:0;border-radius:50%;background:var(--soft)}
:root:root:root .channel .channel-icon svg{width:20px;height:20px}
:root:root:root .channel-text span{color:var(--muted)}
:root:root:root .channel-whatsapp{grid-column:auto;margin:16px 0;padding:12px 22px 12px 12px;border:0;border-radius:var(--pill);background:var(--ink);color:var(--surface)}
:root:root:root .channel-whatsapp .channel-icon{width:44px;height:44px;background:color-mix(in srgb,var(--surface) 14%,transparent)}
:root:root:root .channel-whatsapp .channel-icon svg{color:var(--surface)}
:root:root:root .channel-whatsapp .channel-text strong{font-size:18px}
:root:root:root .channel-whatsapp .channel-text span{color:color-mix(in srgb,var(--surface) 62%,transparent)}
.channel-pulse{border-color:color-mix(in srgb,var(--surface) 45%,transparent)}
:root:root:root .channel[data-pending] .channel-text span{color:var(--muted)}
@media(hover:hover) and (pointer:fine){
  :root:root:root .channel:hover{transform:none;border-color:var(--line)}
  :root:root:root .channel:not(.channel-whatsapp):hover{background:transparent}
  :root:root:root .channel:not(.channel-whatsapp):hover .channel-icon{background:var(--ink);color:var(--surface)}
  :root:root:root .channel-whatsapp:hover{background:var(--ink);opacity:.88}
}
.contact-copy .contact-number{color:var(--ink)}

/* Pie: banda invertida con el nombre gigante. */
:root:root:root .site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;gap:28px 40px;min-height:0;padding:clamp(40px,5vw,72px) var(--pad-x) 0;border:0;background:var(--surface);overflow:hidden}
:root:root:root .site-footer>p{grid-column:1;grid-row:1;margin:0;color:var(--muted);font-size:14px}
:root:root:root .site-footer nav{grid-column:2;grid-row:1;justify-self:end;gap:24px}
:root:root:root .site-footer nav a{color:var(--ink);font-size:13px;font-weight:500}
:root:root:root .site-footer .brand{grid-column:1/-1;grid-row:2;display:block;width:auto;margin:0;padding-bottom:.06em;color:var(--ink);font:600 clamp(96px,23vw,360px)/.9 var(--font-sans);letter-spacing:-.075em}

/* Páginas de Servicios y de Proceso: la palabra gigante detrás de la escultura y el titular en bloque. */
:root:root:root .svc-hero{background:var(--surface)}
:root:root .svc-hero::before{content:none}
:root:root:root .svc-word{top:47%;height:1em;color:var(--giant);font:500 clamp(75px,16.5vw,285px)/.8 var(--font-sans);letter-spacing:-.075em;text-transform:lowercase;transform:translateY(-50%)}
:root:root:root .svc-word span{padding-left:0}
:root:root:root .svc-hero-copy{grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);align-items:end;padding:0 var(--pad-x) clamp(28px,5vh,56px)}
:root:root:root .svc-hero h1{max-width:16ch;color:var(--ink);font-size:clamp(36px,4.6vw,78px)}
:root:root:root .svc-eyebrow{margin:0 0 18px}
:root:root:root .svc-hero-side p{max-width:32ch;color:var(--muted);font-size:14px}
:root:root:root .svc-hero-side .hero-actions{flex-direction:column;align-items:flex-start;gap:16px}
:root:root:root .svc-detail{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3.6vw,56px);padding:clamp(40px,5vw,80px) var(--pad-x)}
:root:root:root .svc-aside .svc-stage{border:0;border-radius:var(--radius);background:#fff;box-shadow:none}
:root:root:root .svc-index{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
:root:root:root .svc-index a{min-height:0;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font-size:16px;font-weight:500;box-shadow:none}
:root:root:root .svc-index a:hover,:root:root:root .svc-index a.is-current{border-color:var(--line);background:transparent;color:var(--ink)}
:root:root:root .svc-index a span,:root:root:root .svc-index a.is-current span,:root:root:root .svc-index a:hover span{color:var(--quiet)}
.svc-list{gap:16px}
:root:root:root .svc-item{padding:clamp(28px,3.6vw,56px)}
:root:root:root .svc-item h2{max-width:20ch;font-size:clamp(28px,3vw,46px)}
.svc-lead{color:var(--muted);font-size:clamp(16px,1.3vw,19px)}
.svc-block{border-top-color:var(--line)}
.svc-block>p:not(.svc-label){color:var(--ink);font-size:16px}
:root:root .svc-pills details{border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent}
:root:root .svc-pills details:not([open]){border-radius:var(--pill)}
:root:root .svc-pills details[open]{border-color:var(--ink);background:transparent}
.svc-pills summary{color:var(--ink);font-weight:500}
:root:root .svc-pills summary::before{background:var(--soft);color:var(--ink)}
@media(hover:hover) and (pointer:fine){:root:root .svc-pills details:not([open]):hover{border-color:var(--ink)}}
.svc-pills details p{color:var(--muted)}
.svc-notes li{color:var(--muted)}
:root:root:root .service-other{border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--ink)}
:root:root:root .service-other:hover,:root:root:root .service-other.is-current{border-color:var(--ink);background:var(--ink);color:var(--surface)}

/* Proceso: pasos como filas de índice, pagos en bloque invertido y valores en tarjetas blancas. */
.prc-intro h2,.prc-pay h2{font-size:clamp(32px,4vw,62px)}
.prc-intro>p:not(.svc-eyebrow){color:var(--muted);font-size:16px}
:root:root:root .prc-timeline{gap:0;border-top:1px solid var(--line)}
.prc-timeline::before{content:none}
:root:root:root .prc-step{grid-template-columns:72px minmax(0,1.3fr) minmax(220px,.7fr);align-items:start;padding:28px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
:root:root:root .prc-num{display:block;width:auto;height:auto;margin:6px 0 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--quiet);font:600 12px/1 var(--font-sans);letter-spacing:.08em}
.prc-body h3{font:500 clamp(22px,2vw,30px)/1.1 var(--font-sans);letter-spacing:-.025em}
.prc-body p{color:var(--muted);font-size:15px}
:root:root:root .prc-get{margin:0;padding:14px 16px;border:0;border-radius:var(--radius-sm);background:var(--soft);color:var(--ink);font-size:14px}
:root:root:root .prc-get span{display:block;margin-bottom:6px;color:var(--quiet)}
:root:root:root .prc-after{margin-top:0;padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.prc-after p:last-child{color:var(--muted)}
.prc-after strong{color:var(--ink)}
:root:root:root .prc-pay-bar{border:1px solid var(--line);border-radius:var(--pill);background:transparent}
:root:root:root .prc-pay-first{background:var(--ink);color:var(--surface);box-shadow:none}
.prc-pay-rest{color:var(--muted)}
.prc-value-grid{gap:16px}
:root:root:root .prc-value{min-height:240px;padding:24px;color:#0a0a0a}
:root:root:root .prc-value-mark{border-radius:8px;background:#0a0a0a;box-shadow:none}
.prc-value h3{font:600 15px/1.25 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;color:#0a0a0a}
.prc-value p{color:#5a5a5a;font-size:14px}
@media(hover:hover) and (pointer:fine){:root:root:root .prc-value:hover{border-color:transparent}}

/* Objetos 3D añadidos por la página (objects.mjs): flotan sin tarjeta, sobre el lienzo o los bloques. */
.fx-object{position:relative;z-index:1;pointer-events:none}
.fx-object canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
:root:root:root .fx-object-statement{grid-column:1;grid-row:1;align-self:end;width:calc(100% + 6vw);height:clamp(300px,32vw,500px);margin:40px 0 -60px -3vw}
/* "enfoque" baja para que no se recorten sus letras bajo la barra. */
:root:root:root .statement-section::after{transform:translateY(clamp(20px,3vw,48px))}
:root:root:root .tech-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"heading marquees";align-items:center;column-gap:clamp(28px,4vw,72px)}
/* "herramienta" más pequeña y más abajo para que se lea completa. */
:root:root:root .tech-rail::after{font-size:clamp(60px,10.1vw,172px);transform:translateY(clamp(20px,3vw,48px))}
:root:root:root .tech-layout .tech-heading{grid-area:heading}
:root:root:root .tech-layout .tech-heading h2{max-width:13ch;font-size:clamp(40px,5.6vw,96px)}
.fx-object-tech{grid-area:object;height:clamp(260px,28vw,420px)}
:root:root:root .tech-marquees{grid-area:marquees}
:root:root:root .about-copy h2{font-size:clamp(40px,5.2vw,88px)}
.fx-object-about{height:clamp(320px,34vw,520px)}
:root:root:root .contact-layout{grid-template-areas:"copy object" "copy channels";width:100%;justify-self:stretch}
:root:root:root .contact-section{color:var(--ink)}
:root:root:root .contact-copy{grid-area:copy;align-self:end}
.fx-object-contact{grid-area:object;height:clamp(220px,22vw,340px)}
:root:root:root .contact-channels{grid-area:channels}
:root:root:root .site-footer{position:relative}
.fx-object-footer{position:absolute;right:var(--pad-x);bottom:0;z-index:2;width:clamp(150px,22vw,340px);aspect-ratio:1}
:root:root:root .prc-pay-card{grid-template-areas:"title object" "bar object" "notes notes";align-items:center}
:root:root:root .prc-pay-card>div:first-child{grid-area:title}
:root:root:root .prc-pay-bar{grid-area:bar}
.fx-object-pay{grid-area:object;height:clamp(220px,24vw,340px)}
:root:root:root .prc-pay-card .svc-notes{grid-area:notes}
.prc-intro h2{font-size:clamp(40px,5.2vw,88px)}

/* Servicios (inicio): sobre el lienzo, dos tarjetas escalonadas, una clara y una negra, con un
   servicio cada una; debajo, la fila de servicios como píldoras. */
:root:root:root .services-section{padding:clamp(72px,8vw,120px) var(--pad-x)}
:root:root:root .services-stage{--surface:var(--c-bg);--soft:var(--c-soft);--ink:var(--c-ink);--muted:var(--c-muted);--quiet:var(--c-muted);--line:var(--c-line);--line-strong:var(--c-line);--accent:var(--c-ink);color:var(--ink);padding:0;background:transparent}
:root:root:root .service-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"light dark" "picker picker";align-items:start;gap:clamp(20px,3vw,48px);max-width:1100px;margin:0 auto}
.svc-card{position:relative;display:flex;flex-direction:column;gap:24px;min-height:clamp(620px,58vw,760px);padding:clamp(24px,3vw,44px);border-radius:18px;overflow:hidden;visibility:hidden}
.service-cards.is-ready .svc-card{visibility:visible}
.svc-card-light{grid-area:light;margin-top:clamp(48px,7vw,110px);--ink:#0a0a0a;--muted:#555;--quiet:#6a6a6a;--line:rgba(0,0,0,.14);--soft:#e2e2e2;background:#ececec;color:#0a0a0a}
.svc-card-dark{grid-area:dark;--ink:#f2f2f2;--muted:#a3a3a3;--quiet:#8a8a8a;--line:rgba(255,255,255,.16);--soft:#1c1c1c;background:#050505;color:#f2f2f2;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.svc-card-body{display:flex;flex-direction:column;align-items:flex-start}
.svc-card-index{margin:0 0 14px;color:var(--quiet);font:600 11px/1 var(--font-sans);letter-spacing:.08em}
.svc-card-title{max-width:100%;margin:0;color:var(--ink);font:400 clamp(26px,2.9vw,44px)/.95 var(--font-sans);letter-spacing:-.025em;text-transform:uppercase;overflow-wrap:anywhere}
.svc-card-summary{max-width:32ch;margin:18px 0 0;color:var(--ink);font-size:clamp(16px,1.3vw,19px);font-weight:500;line-height:1.3}
.svc-card-ideal{max-width:36ch;margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.svc-card-ideal span,.svc-card-sub{display:block;margin:0 0 6px;color:var(--quiet);font:600 11px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.svc-card-sub{margin-top:18px}
.svc-card-list{margin:0;padding:0;list-style:none}
.svc-card-list li{position:relative;padding:2px 0 2px 14px;color:var(--muted);font-size:13px}
.svc-card-list li::before{content:"";position:absolute;top:10px;left:2px;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.svc-card-note{margin:14px 0 0;color:var(--quiet);font-size:12px}
.svc-card-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding-bottom:4px;border-bottom:1.5px solid currentColor;color:var(--ink);font:700 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.svc-card-figure{position:relative;flex:1;min-height:220px;margin:0 calc(clamp(24px,3vw,44px) * -.5)}
.svc-card-dark .svc-card-figure{border-radius:14px;background:radial-gradient(ellipse 55% 50% at 50% 55%,rgba(255,255,255,.08),transparent 72%)}
.svc-card-figure canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
:root:root:root .service-cards .service-picker{grid-area:picker;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;border:0;counter-reset:none}
:root:root:root .service-cards .service-picker .service-choice,:root:root:root .service-cards .service-picker .service-choice:first-child,:root:root:root .service-cards .service-picker .service-choice:nth-child(2){display:inline-flex;gap:10px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--pill);background:transparent}
:root:root:root .service-cards .service-choice::before{content:none}
:root:root:root .service-cards .service-choice strong{color:var(--ink);font:500 14px/1 var(--font-sans);letter-spacing:0}
:root:root:root .service-cards .service-picker .service-choice .service-arrow{width:14px;height:14px;padding:0;background:none;stroke:var(--ink)}
:root:root:root .service-cards .service-picker .service-choice.is-active{border-color:var(--ink);background:var(--ink)}
:root:root:root .service-cards .service-picker .service-choice.is-active strong{color:var(--c-bg)}
:root:root:root .service-cards .service-picker .service-choice.is-active .service-arrow{background:none;stroke:var(--c-bg)}
:root:root:root .services-stage .service-playback:not([hidden]){display:flex;width:max-content;margin:28px auto 0}
:root:root:root .services-stage .services-note{text-align:center}

/* Proceso (inicio): un monitor grande sobre el lienzo. La pantalla muestra un paso a la vez,
   la descripción a la izquierda y su pieza 3D a la derecha; los botones de abajo cambian de paso. */
:root:root:root .process-section{padding:clamp(72px,8vw,120px) clamp(16px,4vw,64px) clamp(48px,6vw,96px)}
:root:root:root .process-layout{
  --surface:#050505;--soft:#1c1c1c;--ink:#f2f2f2;--muted:#9a9a9a;--quiet:#8a8a8a;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.24);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"intro stage" "step stage" "tabs stage";
  align-items:stretch;gap:clamp(20px,2.6vw,40px) clamp(28px,4vw,72px);width:100%;max-width:1110px;min-height:clamp(390px,37.5vw,585px);margin:0 auto;
  position:relative;padding:clamp(28px,4vw,64px);border:clamp(10px,1.1vw,16px) solid transparent;border-radius:clamp(14px,1.6vw,24px);color:var(--ink);
  /* Marco de aluminio oscuro con luz en el canto superior y el grosor del equipo visto desde abajo. */
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(165deg,#6a6d73 0%,#2a2b2f 18%,#141517 55%,#0b0c0d 80%,#3a3c41 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 18px 40px -20px rgba(255,255,255,.08),0 2px 0 #3a3b3f,0 4px 0 #2b2c30,0 6px 0 #222326,0 8px 0 #1b1c1f,0 10px 0 #151618,0 60px 80px -30px rgba(0,0,0,.55),0 24px 30px -18px rgba(0,0,0,.45)
}
/* Reflejo del vidrio de la pantalla, por encima del contenido y sin bloquearlo. */
:root:root:root .process-layout::before{content:"";position:absolute;inset:0;z-index:3;border-radius:calc(clamp(14px,1.6vw,24px) - 8px);background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 28%,transparent 28.2%,transparent 100%);pointer-events:none}
:root:root:root .process-layout .process-side{display:contents}
:root:root:root .process-layout .section-intro{grid-area:intro;gap:12px}
:root:root:root .process-layout .section-intro h2{max-width:18ch;font-size:clamp(24px,2.4vw,40px)}
:root:root:root .process-layout .section-intro>p{font-size:14px}
:root:root:root .process-layout .process-steps{grid-area:step;align-self:center;margin:0;border:0}
:root:root:root .process-layout.is-stepped .process-steps{display:grid}
:root:root:root .process-layout.is-stepped .process-step{grid-area:1/1;padding:0;border:0;visibility:hidden;opacity:0}
:root:root:root .process-layout.is-stepped .process-step.is-active{visibility:visible;opacity:1}
:root:root:root .process-layout .process-index{position:static;display:block;margin:0 0 18px;font-size:12px}
:root:root:root .process-layout .process-step h3{margin:0 0 18px;color:var(--ink);font:500 clamp(36px,4.2vw,72px)/.95 var(--font-sans);letter-spacing:-.035em;text-transform:uppercase}
:root:root:root .process-layout .process-step p{max-width:34ch;color:var(--muted);font-size:clamp(16px,1.3vw,20px);line-height:1.45}
:root:root:root .process-layout .process-step p .hl{color:var(--ink)}
.process-tabs{grid-area:tabs;display:flex;flex-wrap:wrap;gap:8px}
.process-tab{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 16px;border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--muted);font:500 13px/1 var(--font-sans);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.process-tab span{color:var(--quiet);font-size:11px;letter-spacing:.06em}
.process-tab[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#050505}
.process-tab[aria-pressed="true"] span{color:#5a5a5a}
@media(hover:hover) and (pointer:fine){.process-tab:hover{border-color:var(--ink);color:var(--ink)}.process-tab[aria-pressed="true"]:hover{color:#050505}}
:root:root:root .process-layout .process-stage{grid-area:stage;position:relative;min-height:0;height:auto;border-radius:0;background:radial-gradient(ellipse 50% 46% at 50% 52%,rgba(255,255,255,.07),transparent 72%)}
.process-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* El pie del monitor. */
.process-stand{position:relative;z-index:-1;width:min(16%,220px);height:clamp(40px,4.6vw,72px);margin:-4px auto 0;background:linear-gradient(90deg,#6f7176,#d7d8db 38%,#f0f0f2 46%,#a3a5a9 70%,#64666b);box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.55)}
.process-stand::after{content:"";position:absolute;top:calc(100% - 6px);left:50%;width:240%;height:clamp(14px,1.4vw,20px);border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#f2f2f4,#b9bbbf 55%,#7e8085);box-shadow:0 14px 24px -6px rgba(0,0,0,.45),inset 0 -3px 4px rgba(0,0,0,.25);transform:translateX(-50%)}
:root:root:root .process-note{margin:clamp(36px,4vw,56px) auto 0;max-width:1110px;text-align:center}

@media(max-width:1100px){
  :root:root:root .primary-nav{position:static;transform:none;margin-left:auto;margin-right:24px}
}
@media(max-width:900px){
  :root:root:root .svc-hero-copy{grid-template-columns:1fr;gap:18px}
  :root:root:root .svc-detail{grid-template-columns:1fr}
  :root:root:root .prc-step{grid-template-columns:56px minmax(0,1fr)}
  :root:root:root .prc-get{grid-column:2}
}
@media(max-width:820px){
  :root:root :is(.header-cta,.section-nav-cta){display:none}
  :root:root:root .statement-section{grid-template-columns:1fr}
  :root:root:root .statement-section::before{grid-row:auto}
  :root:root:root .statement-heading{grid-column:1;grid-row:auto}
  :root:root:root .statement-heading>span+span{padding-left:1.2em}
  :root:root:root .statement-grid{grid-template-columns:1fr 1fr}
  :root:root:root .services-intro,:root:root:root .tech-layout,:root:root:root .process-layout,:root:root:root .about-layout,:root:root:root .faq-layout,:root:root:root .contact-layout{grid-template-columns:1fr}
  :root:root:root .service-explorer{grid-template-columns:1fr;grid-template-areas:"picker" "visual" "detail"}
  :root:root:root .service-cards{grid-template-columns:1fr;grid-template-areas:"light" "dark" "picker"}
  .svc-card-light{margin-top:0}
  .svc-card{min-height:0}
  .svc-card-figure{flex:none;height:260px}
  :root:root:root .fx-object-statement{grid-column:1;grid-row:auto;margin:0}
  :root:root:root .tech-layout{grid-template-columns:1fr;grid-template-areas:"heading" "marquees"}
  :root:root:root .process-layout{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"intro" "stage" "step" "tabs";min-height:0}
  :root:root:root .process-layout .process-stage{height:clamp(240px,60vw,360px)}
  :root:root:root .contact-layout{grid-template-areas:"object" "copy" "channels"}
  :root:root:root .prc-pay-card{grid-template-columns:1fr;grid-template-areas:"title" "object" "bar" "notes"}
  :root:root:root .site-footer{grid-template-columns:1fr}
  :root:root:root .site-footer nav{grid-column:1;grid-row:2;justify-self:start;flex-wrap:wrap}
  :root:root:root .site-footer .brand{grid-row:3}
}
@media(max-width:760px){
  :root:root:root .hero-copy,:root:root:root .hero-copy[style]{top:auto;bottom:0;grid-template-columns:1fr;grid-template-rows:none;padding:0 22px 26px}
  :root:root:root .hero-pill{grid-row:auto;margin-bottom:16px}
  :root:root:root .hero-copy h1{grid-column:1;grid-row:auto;font-size:clamp(32px,9.6vw,46px)}
  :root:root:root .hero-description{grid-column:1;grid-row:auto;margin:16px 0 18px}
  :root:root:root .hero-copy .hero-actions{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px}
  .hero-giant{top:30%}
}
@media(max-width:560px){
  :root:root:root .site-header,:root:root:root .site-header.is-scrolled{padding-inline:22px}
  :root:root:root .statement-section{row-gap:28px;padding:76px 16px 40px}
  :root:root:root .statement-heading{font-size:clamp(30px,8vw,38px);text-align:center}
  :root:root:root .statement-heading>span+span{padding-left:0}
  :root:root:root .statement-grid{grid-template-columns:minmax(0,1fr);gap:24px;width:100%;max-width:360px;margin-inline:auto}
  :root:root:root .statement-section .statement-card,:root:root:root .statement-section .statement-card:first-child,:root:root:root .statement-section .statement-card:last-child{align-items:center;gap:12px;width:100%;min-width:0;text-align:center}
  :root:root:root .statement-section .statement-illustration{width:min(100%,280px);aspect-ratio:1.48;padding:clamp(12px,4vw,18px);margin-inline:auto}
  :root:root:root .statement-copy{width:100%;max-width:34ch;margin-inline:auto;text-align:center}
  :root:root:root .statement-copy .statement-step{margin-bottom:6px}
  :root:root:root .statement-copy h3{font-size:14px;line-height:1.25}
  :root:root:root .statement-copy p{max-width:32ch;margin:6px auto 0;font-size:13px;line-height:1.4}
  :root:root:root .statement-points{width:min(100%,32ch);margin:10px auto 0;padding:8px 0 0}
  :root:root:root .statement-points li{width:fit-content;max-width:100%;margin-inline:auto;padding:3px 0 3px 14px;text-align:left;font-size:12px;line-height:1.35}
  :root:root:root :is(.services-section,.process-section,.faq-section,.prc-pay){padding:8px}
  :root:root:root :is(.tech-rail,.about-section,.prc-steps,.prc-values){padding:72px 22px}
  :root:root:root :is(.services-stage,.process-layout,.faq-layout,.prc-pay-card){padding:28px 18px}
  :root:root:root .services-intro h2,:root:root:root .process-layout .section-intro h2,:root:root:root .faq-intro h2,:root:root:root .about-copy h2,:root:root:root .tech-layout .tech-heading h2{font-size:clamp(30px,8.6vw,40px)}
  :root:root:root .service-picker .service-choice,:root:root:root .service-picker .service-choice:first-child,:root:root:root .service-picker .service-choice:nth-child(2){padding:16px 0}
  :root:root:root .service-choice strong{font-size:22px}
  :root:root:root .service-visual{height:300px}
  :root:root:root .contact-section{padding:88px 22px 64px}
  :root:root:root .contact-copy h2{font-size:clamp(36px,10.6vw,52px)}
  :root:root:root .svc-detail{padding:40px 8px}
  :root:root:root .svc-item{padding:28px 18px}
  :root:root:root .svc-hero h1{font-size:clamp(30px,8.6vw,42px)}
  :root:root:root .svc-word{top:32%}
  :root:root:root .prc-step{grid-template-columns:40px minmax(0,1fr)}
  :root:root:root .faq-list details p{margin-right:0}
  :root:root:root .site-footer{padding:40px 22px 0}
}
@media(prefers-reduced-motion:reduce){
  .hero-sticky,.hero-giant{transition:none}
}

/* ── Ajustes del 2 de noviembre ─────────────────────────────────────────────────────────── */
/* Tarjetas de vidrio: translúcidas sobre el gris, con borde claro y desenfoque. */
:root:root{--glass:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.12) 55%,rgba(255,255,255,.2));--glass-edge:rgba(255,255,255,.4);--glass-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 24px 48px -28px rgba(0,0,0,.35)}
:root[data-theme="dark"]{--glass:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 55%,rgba(255,255,255,.06));--glass-edge:rgba(255,255,255,.16);--glass-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px -28px rgba(0,0,0,.6)}
:root:root:root .statement-section .statement-illustration,:root:root:root .prc-value,:root:root:root .tech-marquees .tech-chip{border:1px solid var(--glass-edge);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}

/* Herramientas: la palabra, en plural y un 25 % más grande, queda detrás de "Cada proyecto". */
.tech-rail{--giant-word:"Herramientas" / ""}
:root:root:root .tech-rail::after{top:clamp(120px,13vw,200px);font-size:clamp(75px,12.6vw,215px);transform:translateY(-38%)}

/* "persona" un poco más pequeña. */
:root:root:root .about-section::after{font-size:clamp(90px,16vw,260px)}

/* Preguntas: sobre el lienzo, con la palabra gigante detrás y cada pregunta en una tarjeta de vidrio. */
.faq-section{--giant-word:"Preguntas" / ""}
:root:root:root .faq-section{position:relative;overflow:clip;padding:clamp(120px,13vw,200px) var(--pad-x) clamp(72px,9vw,128px)}
:root:root:root .faq-section::after{content:var(--giant-word,"");position:absolute;z-index:0;top:0;left:calc(var(--pad-x) - .04em);transform:translateY(clamp(14px,2.4vw,40px));color:var(--giant);font:500 clamp(112px,20.25vw,330px)/.8 var(--font-sans);letter-spacing:-.08em;white-space:nowrap;pointer-events:none}
:root:root:root .faq-layout{--surface:var(--c-bg);--soft:var(--c-soft);--ink:var(--c-ink);--muted:var(--c-muted);--quiet:var(--c-muted);--line:var(--c-line);--line-strong:var(--c-line);--accent:var(--c-ink);position:relative;z-index:1;padding:0;background:transparent;color:var(--ink);align-items:start}
:root:root:root .faq-stage{border:1px solid var(--glass-edge);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
:root:root:root .faq-list{display:grid;gap:10px;border:0}
:root:root:root .faq-list details,:root:root:root .faq-list details[open]{padding:0 22px;border:1px solid var(--glass-edge);border-radius:16px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);transition:background .25s ease,border-color .25s ease}
:root:root:root .faq-list details[open]{border-color:rgba(255,255,255,.75);background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,.26))}
:root[data-theme="dark"] .faq-list details[open]{border-color:rgba(255,255,255,.3);background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.06))}
:root:root:root .faq-list summary{padding:20px 0}
:root:root:root .faq-list summary::after{background:rgba(255,255,255,.4)}
:root:root:root .faq-list details[open] summary::after{background:var(--ink);color:var(--c-bg)}
:root:root:root .faq-list details p{margin:-4px 52px 20px 0;color:var(--muted)}

/* Contacto: sin figura; la palabra gigante queda detrás de "Cuéntame qué te gustaría". */
:root:root:root .contact-section::after{content:none}
:root:root:root .contact-layout{grid-template-areas:"copy channels"}
:root:root:root .contact-copy{position:relative;isolation:isolate}
:root:root:root .contact-copy::before{content:"Resolver" / "";position:absolute;z-index:-1;top:0;left:-.04em;transform:translateY(-42%);color:var(--giant);font:500 clamp(112px,20.25vw,330px)/.8 var(--font-sans);letter-spacing:-.08em;white-space:nowrap;pointer-events:none}

/* Monitor de proceso al estilo de la referencia: bisel fino de grafito, pie plano y base trapezoidal. */
:root:root:root .process-layout{border:clamp(7px,.7vw,10px) solid #1d1e21;border-radius:clamp(14px,1.4vw,22px);background:var(--surface);box-shadow:0 0 0 1px #3a3b3f,0 2px 0 1px #2a2b2e,0 34px 60px -30px rgba(0,0,0,.55)}
:root:root:root .process-layout::before{border-radius:clamp(8px,.8vw,12px);background:linear-gradient(115deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%)}
.process-stand{z-index:auto;width:min(17%,190px);height:clamp(70px,8vw,120px);margin:0 auto;background:linear-gradient(90deg,#7c7d80,#9a9b9e 20%,#a8a9ac 55%,#8d8e91 85%,#77787b);box-shadow:inset 0 16px 18px -10px rgba(0,0,0,.5)}
.process-stand::after{top:100%;left:50%;width:210%;height:clamp(28px,3vw,44px);border-radius:0 0 6px 6px;clip-path:polygon(12% 0,88% 0,100% 72%,100% 100%,0 100%,0 72%);background:linear-gradient(180deg,#c9cacd 0%,#dedfe1 60%,#9fa0a3 72%,#8a8b8e 100%);box-shadow:none;transform:translateX(-50%)}
:root:root:root .process-note{margin-top:clamp(64px,7vw,96px)}

@media(max-width:820px){
  :root:root:root .contact-layout{grid-template-areas:"copy" "channels"}
  :root:root:root .contact-copy::before{transform:translateY(-30%)}
  :root:root:root .faq-section{padding:96px 22px 64px}
}
/* Portada final: la frase arriba y la palabra "astroly" debajo, con el logo apoyado sobre ella. */
@media(min-width:761px){
  /* La frase se centra en vertical sobre la mitad izquierda de "Astroly"; el logo, más pequeño, sobre el final. */
  :root:root:root .hero-copy{top:0;bottom:0;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);align-items:end;padding-top:clamp(40px,6svh,72px);padding-bottom:clamp(24px,4svh,48px)}
  :root:root:root .hero-pill{grid-row:2}
  :root:root:root .hero-copy h1{grid-row:3;align-self:start}
  /* La descripción y los botones bajan a la esquina inferior derecha, debajo del logo. */
  :root:root:root .hero-description{grid-row:4;align-self:end;margin-bottom:110px}
  :root:root:root .hero-copy .hero-actions{grid-row:4;align-self:end}
}
/* Palabras de fondo con mayúscula inicial. */
.hero-giant{text-transform:capitalize}
:root:root:root .svc-word span{text-transform:lowercase}
:root:root:root .svc-word span::first-letter{text-transform:uppercase}
/* El texto junto a "Una necesidad concreta..." más grande para que no se pierda. */
:root:root:root .services-intro p{max-width:30ch;font-size:clamp(17px,1.5vw,22px);line-height:1.4}
/* Página de Servicios: cada servicio es una tarjeta de vidrio sencilla. Arriba el título y la
   descripción; debajo, "Ideal para" y "Antes de empezar" lado a lado, y lo que puede incluir en píldoras. */
:root:root:root .svc-item{
  --surface:transparent;--soft:rgba(255,255,255,.3);--ink:var(--c-ink);--muted:var(--c-muted);--quiet:var(--c-muted);--line:rgba(255,255,255,.45);--line-strong:rgba(255,255,255,.6);--accent:var(--c-ink);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(28px,3.4vw,48px);border:1px solid var(--glass-edge);border-radius:24px;background:var(--glass);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);color:var(--ink)
}
:root:root:root .svc-item>:not(.svc-block){grid-column:1/-1}
:root:root:root .svc-item .svc-kicker{margin:0}
:root:root:root .svc-item h2{max-width:22ch;margin:0;font-size:clamp(30px,3.2vw,48px)}
:root:root:root .svc-item .svc-lead{max-width:52ch;margin:0 0 8px;color:var(--ink);font-size:clamp(16px,1.3vw,19px)}
:root:root:root .svc-item .svc-block{margin:0;padding:20px 22px;border:1px solid rgba(255,255,255,.4);border-radius:16px;background:rgba(255,255,255,.16)}
:root:root:root .svc-item .svc-block:nth-of-type(1){grid-column:1;grid-row:4}
:root:root:root .svc-item .svc-block:nth-of-type(3){grid-column:2;grid-row:4}
:root:root:root .svc-item .svc-block:nth-of-type(2){grid-column:1/-1;grid-row:5}
:root:root:root .svc-item .svc-label{margin:0 0 10px}
:root:root:root .svc-item .svc-block>p:not(.svc-label){font-size:15px}
:root:root:root .svc-item .svc-notes li{font-size:14px}
:root:root:root .svc-item .svc-pills details{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.22)}
:root:root:root .svc-item .svc-pills details[open]{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.4)}
:root:root:root .svc-item .svc-pills summary::before{background:var(--c-ink);color:#fff}
:root[data-theme="dark"] .svc-item .svc-pills details[open] summary,:root[data-theme="dark"] .svc-item .svc-pills details[open] p{color:var(--c-bg)}
:root[data-theme="dark"] .svc-item .svc-pills details[open] summary::before{background:var(--c-bg);color:var(--c-ink)}
:root:root:root .svc-item .svc-quote{grid-row:6;justify-self:start;margin-top:8px;background:var(--c-ink);color:var(--c-bg)}
:root[data-theme="dark"] .svc-item .svc-block{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
/* El estudio de la izquierda también es de vidrio. */
:root:root:root .svc-aside .svc-stage{border:1px solid var(--glass-edge);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(max-width:700px){
  :root:root:root .svc-item{grid-template-columns:1fr}
  :root:root:root .svc-item .svc-block:nth-of-type(1),:root:root:root .svc-item .svc-block:nth-of-type(2),:root:root:root .svc-item .svc-block:nth-of-type(3){grid-column:1;grid-row:auto}
  :root:root:root .svc-item .svc-quote{grid-row:auto}
}
/* Portadas: las palabras de fondo en MAYÚSCULAS, a un tamaño que cabe completo en la pantalla. */
.hero-giant{text-transform:uppercase;font-size:clamp(90px,19.5vw,330px);letter-spacing:-.05em;text-indent:-.04em}
:root:root:root .svc-word{top:36%;font-size:clamp(56px,12.5vw,210px);letter-spacing:-.05em}
:root:root:root .svc-word span{text-transform:uppercase}
:root:root:root .svc-word span::first-letter{text-transform:none}
/* "Resolver" en contacto, más pequeña. */
:root:root:root .contact-copy::before{font-size:clamp(70px,12vw,200px)}
/* Página de Proceso: cada paso es una tarjeta de vidrio, con su número en un círculo translúcido
   y lo que recibes en un recuadro de vidrio a la derecha. */
:root:root:root .prc-timeline{display:grid;gap:12px;border:0}
:root:root:root .prc-step{align-items:center;padding:22px 24px;border:1px solid var(--glass-edge);border-radius:20px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
:root:root:root .prc-num{display:grid;place-items:center;width:46px;height:46px;margin:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(255,255,255,.28);color:var(--ink);font-size:13px}
:root:root:root .prc-get{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.18)}
:root:root:root .prc-after{margin-top:12px;padding:20px 24px;border:1px dashed rgba(255,255,255,.55);border-radius:20px;background:rgba(255,255,255,.08)}

/* Pagos: vidrio oscuro translúcido en lugar del bloque negro, con menos contraste. */
:root:root:root .prc-pay{padding:clamp(24px,3vw,48px) var(--pad-x)}
:root:root:root .prc-pay-card{
  --ink:#f2f2f2;--muted:rgba(242,242,242,.72);--quiet:rgba(242,242,242,.6);--line:rgba(255,255,255,.18);--soft:rgba(255,255,255,.12);
  max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,56px);border:1px solid rgba(255,255,255,.16);border-radius:24px;
  background:linear-gradient(150deg,rgba(20,20,22,.62),rgba(20,20,22,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.45);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);color:var(--ink)
}
:root:root:root .prc-pay-bar{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
:root:root:root .prc-pay-first{background:rgba(255,255,255,.24);color:#fff}
:root:root:root .prc-pay-card .svc-notes li::before{background:#f2f2f2}
/* Menú: el isotipo 2D junto al nombre, y las páginas dentro de una cápsula de vidrio; al pasar
   por una página, su píldora se oscurece. */
:root:root:root .site-header .brand{display:inline-flex;align-items:center;gap:10px}
:root:root:root .site-header .brand img{display:block;width:24px;height:22px;object-fit:contain}
:root:root:root .primary-nav{gap:2px;padding:4px;border:1px solid var(--glass-edge);border-radius:var(--pill);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
:root:root:root .primary-nav a{padding:8px 16px;border-radius:var(--pill);color:var(--ink);transition:background .2s ease,color .2s ease}
:root:root:root .primary-nav a[aria-current="page"]{background:rgba(255,255,255,.35);color:var(--ink)}
@media(hover:hover) and (pointer:fine){:root:root:root .primary-nav a:hover{background:rgba(10,10,10,.82);color:#f2f2f2}}
/* Ajustes responsive: nada se sale de la pantalla en teléfonos de 320 px. */
:root:root:root :is(.svc-detail,.svc-list,.svc-item,.tech-layout,.tech-heading,.service-cards,.svc-card,.faq-layout,.contact-layout){min-width:0}
@media(max-width:900px){:root:root:root .svc-detail{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){:root:root:root .svc-item{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){
  :root:root:root .tech-layout .tech-heading{flex-wrap:wrap;max-width:100%}
  :root:root:root .svc-item .svc-pills summary{white-space:normal}
}
/* Tools: pointing at a tool neither stops the ribbon nor changes its look. */
@media(hover:hover) and (pointer:fine){
  .motion-ready .tech-marquee:hover .tech-track[data-motion-running="true"]{animation-play-state:running}
  :root:root:root .tech-marquees .tech-chip:hover{background:var(--glass);color:var(--ink)}
  :root:root:root .tech-chip:hover::before{opacity:0;transform:scale(.82)}
  :root:root:root .tech-chip:hover img{opacity:.58}
  :root:root:root .tech-chip:hover span{transform:none}
}

/* Contact: "Resolver" sits just above the heading so it reads on its own. */
:root:root:root .contact-copy::before{transform:translateY(-105%)}

/* Services page quote buttons: the section clears --c-bg, so the label gets its own contrast colour. */
:root:root:root .svc-item a.button.svc-quote{color:#f2f2f2}
:root:root:root[data-theme="dark"] .svc-item a.button.svc-quote{color:#0a0a0a}