/* ==========================================================================
   Olevior Studio: la división de servicios digitales.
   Se apoya en el sistema del sitio (assets/css/site.css). La página alterna
   bandas claras y bandas noche por decisión del dueño: hero noche,
   servicios claro, cómo trabajamos noche, para quién claro, cierre noche.
   Colores: solo los de la marca Studio (noche marino #0B2A4A, azules
   hielo). El azul cielo de Olevior (#5fb3dd, #7db1da) no es de
   Studio y aquí no aparece. Logo: blanco sobre azul Studio o azul Studio
   sobre blanco; el azul de Studio es el noche del fondo (DESIGN.md, «Marca Olevior Studio»).
   ========================================================================== */

/* ---------- 1. Bandas ---------------------------------------------------- */

.band {
  position: relative;
  padding-block: var(--section);
}

/* Noche: el degradado lineal de la marca, sin halos radiales encima. */
.band.surface-night {
  isolation: isolate;
  background: linear-gradient(158deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%);
}
.band--process.surface-night {
  background: linear-gradient(158deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%);
}

/* Dos tonos en los títulos de noche: la primera mitad en voz baja, el
   remate en blanco. Luz, no color: el acento se queda para los marcadores. */
.surface-night .line--quiet,
.surface-night .step__verb { color: var(--text-3); }

/* El campo de estrellas de Studio (assets/js/starfield.js): textura detrás del texto.
   Nada de lo que hay que leer depende de él; sin WebGL el canvas se retira
   y la banda se queda con su noche. */
.studio-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Dentro de un objeto claro sobre la noche, los papeles vuelven a ser los
   del tema claro. */
.surface-night .on-paper {
  --text: var(--ink);
  --text-2: #50667b;
  --text-3: #5b7085;
  --rule: #d7e2ec;
  --rule-2: #c9d7e5;
  --mark: var(--studio-blue);
  --mark-text: var(--studio-blue);
  --mark-soft: var(--studio-ice);
  --mark-ink: #fff;
  --focus: var(--studio-blue);
  color: var(--text);
}


/* ---------- 2. Barra de Studio ------------------------------------------- */

.product-bar.surface-night {
  padding: 8px 20px;
  background: color-mix(in srgb, var(--night-1) 92%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* El margen lateral lo pone la barra: el interior conserva el ancho de
   .wrap para alinearse con la página. */
.product-bar.surface-night .product-bar__inner {
  height: 100%;
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding-inline: 0;
}
.product-bar.surface-night .product-bar__cta { padding: 8px 16px; }
@media (min-width: 477px) {
  .product-bar.surface-night { padding-inline: var(--gutter); }
}

/* En teléfono caben el wordmark y la etiqueta completa del CTA: el wordmark
   se achica, la etiqueta no cambia. */
@media (max-width: 560px) {
  .product-bar__inner { gap: 12px; }
  .product-bar__brand img { height: 20px; }
}
@media (max-width: 400px) {
  .product-bar__brand img { height: 16px; }
  .product-bar.surface-night .product-bar__cta { padding: 8px 12px; font-size: 0.78125rem; }
}
@media (max-width: 340px) {
  .product-bar__inner { gap: 8px; }
  .product-bar__brand img { height: 12px; }
  .product-bar.surface-night .product-bar__cta { padding: 8px 10px; font-size: 0.75rem; }
}


/* ---------- 3. Marcadores legibles en claro y en noche --------------------
   El tema Studio pone --mark-ink en blanco (para el estado encendido) y la
   noche lo pone en tinta: en reposo el número quedaría blanco sobre hielo o
   tinta sobre noche. Cada estado lleva aquí su propia tinta. */

.theme-studio .ref,
.theme-studio .exhibit__caption .ref-num { color: var(--ink); }
.theme-studio .surface-night .ref,
.theme-studio .surface-night .exhibit__caption .ref-num { color: #fff; }
.theme-studio .ref.is-lit,
.theme-studio .ref[aria-expanded='true'],
.theme-studio .exhibit.is-lit .exhibit__caption .ref-num { color: var(--mark-ink); }
@media (hover: hover) and (pointer: fine) {
  .theme-studio .ref:hover { color: var(--mark-ink); }
}


/* ---------- 4. Hero ------------------------------------------------------- */

.band--hero { padding-block: clamp(64px, 8.6vw, 128px); }
.band--hero .display {
  font-size: clamp(2.75rem, 1.3rem + 5.2vw, 6rem);
  line-height: 0.98;
}
.band--hero .display .line { display: block; }
.band--hero .lead { margin-top: clamp(24px, 2.4vw, 34px); }
.band--hero .actions { margin-top: clamp(30px, 3vw, 42px); }


/* ---------- 5. Prueba 1: el mazo de Studio sobre la noche -----------------
   El mazo del sistema (tres franjas) es el objeto; sobre la noche no lleva
   placa alrededor, solo su sombra. */

.exhibit--deck .exhibit__plate,
.exhibit--deck.is-lit .exhibit__plate {
  padding: 0;
  background: none;
  box-shadow: none;
}
.exhibit--deck .studio-deck {
  margin-top: 0;
  border-radius: var(--r-plate);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.7);
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
.exhibit--deck.is-lit .studio-deck {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.16),
    0 26px 50px -28px rgba(0, 0, 0, 0.7);
}
.exhibit--deck .studio-card { padding: 17px 18px; }
/* Rótulos del mazo a 4.5:1 también sobre la franja azul. */
.exhibit--deck .studio-card small { opacity: 0.86; }
.exhibit--deck .studio-card span { opacity: 0.92; }


/* ---------- 6. Servicios: seis servicios en tres familias ----------------- */

.band__head { align-items: end; row-gap: 20px; }
.band__head .lead { max-width: 38ch; }

.families {
  margin-top: clamp(48px, 5.4vw, 80px);
  border-top: 1px solid var(--rule);
}
.family {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: var(--col-gap);
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}
.family__label {
  position: sticky;
  top: calc(var(--sticky-offset) + 32px);
}
.family__line {
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--text);
}
.family__scope {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.family__list { margin: 0; }
.service {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 8px 32px;
}
.service + .service {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.service__name {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.016em;
}
.service__kind {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.service__body > p:first-child { color: var(--text-2); max-width: 46ch; }
.service__outcome {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mark-text);
}
.service__outcome svg { flex: none; width: 13px; height: 13px; }

@media (max-width: 1023px) {
  .family { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .family__label { position: static; }
}
@media (max-width: 760px) {
  .family { padding: 26px 0; }
  .service { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .service + .service { margin-top: 24px; padding-top: 24px; }
  .service__body { margin-top: 8px; }
}


/* ---------- 7. Cómo trabajamos ------------------------------------------- */

.band--process .claim-title + .lead { margin-top: clamp(22px, 2.4vw, 32px); }

.steps {
  margin-top: clamp(40px, 4.4vw, 60px);
  border-top: 1px solid var(--rule);
}
.step {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--rule);
}
.step__title {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.016em;
}
.step p {
  margin-top: 10px;
  max-width: 54ch;
  color: var(--text-2);
}
.step .step__note {
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* Prueba 2: una conversación de ejemplo, una placa clara sobre la noche.
   Sin burbujas dentro de la placa: renglones y filetes, como una nota. */
.surface-night .exhibit--thread .exhibit__plate {
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 26px 50px -28px rgba(0, 0, 0, 0.7);
}
.surface-night .exhibit--thread.is-lit .exhibit__plate {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.16),
    0 26px 50px -28px rgba(0, 0, 0, 0.7);
}
.thread__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--night-2) linear-gradient(158deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%);
  color: #fff;
}
.thread__head img { width: 26px; height: 26px; }
.thread__head strong { display: block; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.thread__head small { display: block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }
.thread__day {
  padding: 16px 20px 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.thread__msg {
  display: grid;
  gap: 6px;
  padding: 14px 20px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}
.thread__msg + .thread__msg { border-top: 1px solid var(--rule); }
.thread__msg:last-child { padding-bottom: 20px; }
.thread__who {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.thread__msg--you .thread__who { color: var(--mark-text); }


/* ---------- 8. Para quién ------------------------------------------------ */

.audiences {
  margin-top: clamp(40px, 4.4vw, 60px);
  border-top: 1px solid var(--rule);
}
.audience {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px 36px;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.audience__name,
.audience__line {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.audience__line { color: var(--text-3); }
.audience__body > p:first-child { color: var(--text-2); }
.audience__tags {
  margin-top: 12px;
  font-size: var(--t-micro);
  color: var(--text-3);
}
@media (max-width: 760px) {
  .audience { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 0 28px; }
}

/* Prueba 3: Olevy, el asistente de Studio. La cabecera noche y el papel son
   la misma placa; las preguntas abren el chat de verdad. */
.exhibit--olevy .exhibit__plate {
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.olevy-demo__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--night-2) linear-gradient(158deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%);
  color: #fff;
}
.olevy-demo__head img { width: 26px; height: 26px; }
.olevy-demo__head strong { display: block; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.olevy-demo__head small { display: block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }
.olevy-demo__line {
  padding: 20px 20px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.olevy-demo__asks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 20px;
}
.olevy-demo__ask {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--studio-card-1);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.olevy-demo__ask:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .olevy-demo__ask:hover { background: var(--studio-blue); color: #fff; box-shadow: none; }
}


/* ---------- 9. Cierre ---------------------------------------------------- */

.band--close .statement {
  margin-top: clamp(24px, 2.6vw, 34px);
  max-width: 24ch;
  line-height: 1.4;
}
.band--close .lead { margin-top: 20px; }
.band--close .actions { margin-top: clamp(30px, 3vw, 42px); }
.band--close .argument__margin {
  display: grid;
  align-items: center;
  justify-items: center;
}
/* Donde el campo de estrellas dibuja la marca (shapeAnchor): el desorden
   se ordena junto a la frase que lo promete. */
.studio-close__emblem {
  width: min(100%, 340px);
  aspect-ratio: 1;
}
@media (max-width: 1023px) {
  .band--close .argument__margin { display: none; }
}



/* ---------- 10. Olevy sin styles.css ---------------------------------------
   assets/css/olevy.css se escribió sobre un reset antiguo (ya borrado): botones sin borde ni
   fondo, enlaces sin subrayado y márgenes en cero. Aquí se repone ese reset
   solo dentro del widget y con especificidad cero, para que sus propias
   reglas sigan mandando igual que antes. */

:where(.olevy) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:where(.olevy) :where(a) { text-decoration: none; }
:where(.olevy) :where(p, form, label, textarea, aside, header, div, span) { margin: 0; }
/* El anillo de foco del sitio redondea a 6px; en Olevy cada control
   conserva su radio. */
.olevy .olevy-launcher:focus-visible { border-radius: 8px; }
.olevy .olevy-chip:focus-visible,
.olevy .olevy-mini:focus-visible { border-radius: 4px; }
.olevy .olevy-teaser__dismiss:focus-visible { border-radius: 50%; }
/* La equis mide 24px a propósito (es una insignia sobre la burbuja); el dedo
   recibe 44px de área sin que la insignia crezca. */
.olevy .olevy-teaser__dismiss::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}


/* ---------- 11. Movimiento reducido -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .exhibit--deck .studio-deck { transition: none; }
}

/* Studio: Sora y cursor independiente. El espacio y su logo siguen originales. */
.theme-studio { --font-sans: 'Sora', sans-serif; --font-mono: 'Sora', sans-serif; --font-voice: 'Sora', sans-serif; }
.theme-studio { isolation: isolate; }
.studio-world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.theme-studio main, .theme-studio .site-footer { position: relative; z-index: 2; }
.theme-studio.studio-world-ready .band.surface-night,
.theme-studio.studio-world-ready .band--process.surface-night { background: transparent; isolation: auto; }
.theme-studio.studio-world-ready .studio-stars { opacity: 0; }

.studio-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.studio-vignette i { position: absolute; left: 0; width: 100%; background: linear-gradient(90deg,rgba(3,11,21,.34),transparent 57%),linear-gradient(0deg,rgba(3,11,21,.7),transparent 20%,transparent 87%,rgba(3,11,21,.22)); }

.studio-cursor-overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483647; pointer-events: none; }