/* =========================================================
   Digital Buho — motivos.css · el lenguaje óptico en un solo archivo
   buho-design v2.4.0 — tiene que coincidir con tokens.css

   Se carga DESPUÉS de tokens.css (y de brands.css si hay sub-marca).
   Un solo set de clases; se recolorea entero con dos variables por
   marca. Los nombres son los que ya usa buho.la en producción.

   Presupuesto por página (docs/12-reglas-de-pagina.md):
     · atmósfera (Ojo, Iris, Aurora o Bokeh): 2, hero y cierre navy;
       la sección de elección o de precio puede llevar la versión clara
     · énfasis (Lente o Resplandor): 2, y una por titular
     · eyebrow con Cápsula: 3, hero y cambios de marca · Corte: 2
     · Pupila al 0 % en reposo · cifras sin degradado · iconos sueltos
   ========================================================= */

/* ---------- 0 · Recolor por marca ----------
   --motif-a envuelve, --motif-b complementa. Cada uno con su tinta
   legible sobre claro (-ink), su tinte pastel (-soft) y su versión
   legible sobre navy (-light). Mismos valores que brands.css. */
:root, .theme-buho, .motif-buho {
  --motif-a: var(--buho-pink-600);
  --motif-b: var(--buho-blue-600);
  --motif-a-ink: var(--buho-pink-700);
  --motif-b-ink: var(--buho-blue-600);
  --motif-a-soft: var(--buho-pink-100);
  --motif-b-soft: var(--buho-blue-100);
  --motif-a-light: var(--buho-pink-300);
  --motif-b-light: var(--buho-blue-300);
}
/* Fastura: teal envuelve, ámbar complementa */
.theme-fastura, .motif-fastura {
  --motif-a: #00BFA5; --motif-b: #FFB400;
  --motif-a-ink: #00796B; --motif-b-ink: #946400;
  --motif-a-soft: #CFEFE9; --motif-b-soft: #FFE8B0;
  --motif-a-light: #6FE0CF; --motif-b-light: #FFD470;
}
/* Waya: lima envuelve, violeta complementa (como brands.css y el sitio) */
.theme-waya, .motif-waya {
  --motif-a: #8FD400; --motif-b: #6D4AFF;
  --motif-a-ink: #557A00; --motif-b-ink: #5333E0;
  --motif-a-soft: #E4FBE1; --motif-b-soft: #ECE4FB;
  --motif-a-light: #B6E84D; --motif-b-light: #9B82FF;
}

/* ---------- 1 · Atmósferas (dos por página) ---------- */

/* Campo Aurora: dos radiales a sección completa. Oscuro para cierres
   navy; claro solo en la sección de elección o de precio. */
.aurora-light { position: relative; }
.aurora-light::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb, var(--motif-a) 11%, transparent), transparent 58%),
    radial-gradient(90% 80% at 8% 108%, color-mix(in srgb, var(--motif-b) 9%, transparent), transparent 60%);
}
.aurora-dark { position: relative; background: var(--buho-navy-950); }
.aurora-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(110% 90% at 12% -10%, color-mix(in srgb, var(--motif-a) 30%, transparent), transparent 60%),
    radial-gradient(100% 80% at 92% 112%, color-mix(in srgb, var(--motif-b) 34%, transparent), transparent 62%);
}
.aurora-dark > * { position: relative; z-index: 1; }

/* El Ojo: la silueta del halo del isotipo como luz. El desenfoque va
   horneado en la máscara SVG: no hay filter en tiempo real. Aparece una
   vez al cargar y se queda quieto. Dos posiciones: abajo a la derecha
   (por defecto) y arriba a la izquierda, espejado (.ojo--izq). */
.ojo {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(72%, 620px); aspect-ratio: 835 / 720;
  right: -12%; bottom: -38%;
}
.ojo::before, .ojo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, var(--motif-a) 12%, var(--motif-b) 96%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-120%20-120%20835%20720'%3E%3Cfilter%20id='b'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20stdDeviation='34'/%3E%3C/filter%3E%3Cpath%20d='M314.635%2019.0078C394.053%20-2.48435%20472.223%20-3.70311%20536.877%205.24514C549.562%2022.0118%20557.323%2029.2423%20566.568%2049.0645C637.256%20200.622%20571.597%20380.81%20419.915%20451.525C268.233%20522.241%2087.9676%20456.706%2017.2803%20305.148C8.03635%20285.329%204.69303%20283.762%200%20263.272C34.5345%20208.266%2086.9187%20144.548%20154.754%2095.0742C126.948%20139.827%20121.011%20194.199%20144.94%20245.506C182.641%20326.337%20278.782%20361.289%20359.679%20323.574C440.575%20285.859%20475.593%20189.759%20437.894%20108.928C413.888%2057.4589%20367.006%2026.3567%20314.635%2019.0078Z'%20fill='black'%20filter='url(%23b)'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-120%20-120%20835%20720'%3E%3Cfilter%20id='b'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20stdDeviation='34'/%3E%3C/filter%3E%3Cpath%20d='M314.635%2019.0078C394.053%20-2.48435%20472.223%20-3.70311%20536.877%205.24514C549.562%2022.0118%20557.323%2029.2423%20566.568%2049.0645C637.256%20200.622%20571.597%20380.81%20419.915%20451.525C268.233%20522.241%2087.9676%20456.706%2017.2803%20305.148C8.03635%20285.329%204.69303%20283.762%200%20263.272C34.5345%20208.266%2086.9187%20144.548%20154.754%2095.0742C126.948%20139.827%20121.011%20194.199%20144.94%20245.506C182.641%20326.337%20278.782%20361.289%20359.679%20323.574C440.575%20285.859%20475.593%20189.759%20437.894%20108.928C413.888%2057.4589%20367.006%2026.3567%20314.635%2019.0078Z'%20fill='black'%20filter='url(%23b)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ojo::before { opacity: .55; transform: scale(1.12); }
.ojo::after  { opacity: .42;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-120%20-120%20835%20720'%3E%3Cfilter%20id='b'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20stdDeviation='8'/%3E%3C/filter%3E%3Cpath%20d='M314.635%2019.0078C394.053%20-2.48435%20472.223%20-3.70311%20536.877%205.24514C549.562%2022.0118%20557.323%2029.2423%20566.568%2049.0645C637.256%20200.622%20571.597%20380.81%20419.915%20451.525C268.233%20522.241%2087.9676%20456.706%2017.2803%20305.148C8.03635%20285.329%204.69303%20283.762%200%20263.272C34.5345%20208.266%2086.9187%20144.548%20154.754%2095.0742C126.948%20139.827%20121.011%20194.199%20144.94%20245.506C182.641%20326.337%20278.782%20361.289%20359.679%20323.574C440.575%20285.859%20475.593%20189.759%20437.894%20108.928C413.888%2057.4589%20367.006%2026.3567%20314.635%2019.0078Z'%20fill='black'%20filter='url(%23b)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-120%20-120%20835%20720'%3E%3Cfilter%20id='b'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20stdDeviation='8'/%3E%3C/filter%3E%3Cpath%20d='M314.635%2019.0078C394.053%20-2.48435%20472.223%20-3.70311%20536.877%205.24514C549.562%2022.0118%20557.323%2029.2423%20566.568%2049.0645C637.256%20200.622%20571.597%20380.81%20419.915%20451.525C268.233%20522.241%2087.9676%20456.706%2017.2803%20305.148C8.03635%20285.329%204.69303%20283.762%200%20263.272C34.5345%20208.266%2086.9187%20144.548%20154.754%2095.0742C126.948%20139.827%20121.011%20194.199%20144.94%20245.506C182.641%20326.337%20278.782%20361.289%20359.679%20323.574C440.575%20285.859%20475.593%20189.759%20437.894%20108.928C413.888%2057.4589%20367.006%2026.3567%20314.635%2019.0078Z'%20fill='black'%20filter='url(%23b)'/%3E%3C/svg%3E"); }
.ojo--izq { right: auto; bottom: auto; left: -14%; top: -40%; transform: scaleX(-1); }
.ojo--sm  { width: min(58%, 440px); }
.ojo--claro::before, .on-light .ojo::before, .aurora-light .ojo::before { opacity: .28; }
.ojo--claro::after,  .on-light .ojo::after,  .aurora-light .ojo::after  { opacity: .22; }

/* El Iris: orbe difuso de un solo radial. Alternativa al Ojo. La posición
   y el tamaño van en línea o con las clases de posición del proyecto. */
.iris {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-a) 30%, transparent),
              color-mix(in srgb, var(--motif-b) 15%, transparent) 48%, transparent 74%);
  filter: blur(90px); animation: motivo-respira 18s ease-in-out infinite;
}
.iris--b {
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-b) 34%, transparent),
              color-mix(in srgb, var(--motif-a) 14%, transparent) 50%, transparent 74%);
}

/* Bokeh: seis puntos de luz. Solo encima de la aurora clara en la
   sección de elección; nunca sobre navy. Markup: <span class="bokeh"
   aria-hidden="true"><i></i>×6</span> */
.bokeh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bokeh i {
  position: absolute; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-a) 42%, transparent), transparent 70%);
  animation: motivo-respira 16s ease-in-out infinite;
}
.bokeh i:nth-child(2n) {
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-b) 46%, transparent), transparent 70%);
  animation-duration: 21s; animation-delay: -4s;
}
.bokeh i:nth-child(1) { width: 220px; height: 220px; left: 6%;  top: 12%; }
.bokeh i:nth-child(2) { width: 150px; height: 150px; left: 34%; top: 62%; }
.bokeh i:nth-child(3) { width: 190px; height: 190px; left: 62%; top: 8%;  }
.bokeh i:nth-child(4) { width: 120px; height: 120px; left: 82%; top: 54%; }
.bokeh i:nth-child(5) { width: 90px;  height: 90px;  left: 20%; top: 84%; }
.bokeh i:nth-child(6) { width: 160px; height: 160px; left: 48%; top: 30%; }
.bokeh i:nth-child(3n) { animation-duration: 24s; animation-delay: -8s; }
.bokeh--light i { filter: blur(38px);
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-a) 20%, transparent), transparent 70%); }
.bokeh--light i:nth-child(2n) {
  background: radial-gradient(circle, color-mix(in srgb, var(--motif-b) 22%, transparent), transparent 70%); }

@keyframes motivo-respira {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ---------- 2 · Énfasis (dos por página, uno por titular) ---------- */

/* La Lente: itálica ligera en el acento. Sobre navy, la versión clara. */
.lente, em.lente { font-style: italic; font-weight: 300; color: var(--motif-a); }
.lente--dark, .on-dark .lente, .aurora-dark .lente, .sec--navy .lente { color: var(--motif-a-light); }

/* Resplandor: la palabra clave proyecta un halo. Solo sobre fondo oscuro.
   Markup: <span class="gw"><span class="g" aria-hidden="true">nunca</span><span class="t">nunca</span></span> */
.gw { position: relative; display: inline-block; white-space: nowrap; }
.gw .g {
  position: absolute; inset: 0; color: var(--motif-a-light);
  filter: blur(18px); opacity: .75; pointer-events: none;
  font-style: italic; font-weight: 300;
}
.gw .t { position: relative; font-style: italic; font-weight: 300; }

/* ---------- 2b · La Mirada: el titular se ilumina siguiendo al cursor ----------
   Una copia del titular, pintada con el degradado de la marca y recortada por una
   máscara radial que sigue al puntero. Solo en el h1 del hero, una por página; con
   puntero fino y sin «menos movimiento». Lo arma un script corto (ver el Lab v4 o
   site.js, módulo 4, en buho.la): envuelve el titular en .spot, añade .spot__rev
   con el mismo HTML y fija --mx / --my en cada mousemove.
   Markup: <h1><span class="spot" data-spot>Texto <span class="spot__rev" aria-hidden="true">Texto</span></span></h1> */
.spot { position: relative; display: inline-block; cursor: default; }
.spot__rev {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(100deg, var(--motif-b), var(--motif-a));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transition: opacity .28s var(--ease-out);
  -webkit-mask: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .35) 55%, transparent 78%);
          mask: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .35) 55%, transparent 78%);
}
/* Todo lo que herede color dentro de la copia tiene que desaparecer:
   si un <em class="lente"> conserva su color, tapa el degradado. */
.spot__rev * { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.spot:hover .spot__rev { opacity: 1; }
.on-dark .spot__rev, .aurora-dark .spot__rev, .sec--navy .spot__rev, .phero--dark .spot__rev {
  background-image: linear-gradient(100deg, var(--motif-b-light), var(--motif-a-light));
}
@media (hover: none) { .spot__rev { display: none; } }

/* ---------- 3 · Cifra de dos tintas ----------
   Dígitos en mono, navy sobre claro y blanco sobre navy. Un solo
   elemento en el acento: el signo, la moneda, la unidad o el decimal.
   Markup: <div class="cifra"><b><i>S/</i> 30,000</b><small>de ventas al año</small></div> */
.cifra { display: inline-grid; gap: 4px; justify-items: start; }
.cifra > b {
  font: 600 clamp(26px, 2.6vw, 34px) / 1 var(--font-mono);
  letter-spacing: -.03em; color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cifra > small {
  font: 600 10.5px / 1 var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.cifra i, .cifra em { font-style: normal; color: var(--motif-a-ink); }
.cifra--c { justify-items: center; text-align: center; }
.on-dark .cifra > b, .aurora-dark .cifra > b, .sec--navy .cifra > b, .cifra--dark > b { color: #fff; }
.on-dark .cifra i, .aurora-dark .cifra i, .sec--navy .cifra i, .cifra--dark i { color: var(--motif-a-light); }
.on-dark .cifra > small, .aurora-dark .cifra > small, .sec--navy .cifra > small, .cifra--dark > small { color: rgba(255, 255, 255, .66); }

/* Cifra E (v2.0 a v2.3): retirada el 22 de septiembre de 2026. La clase
   sigue declarada, ya sin degradado, para las piezas en circulación. */
.num-grad {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: -.03em;
  color: var(--color-text); background: none;
  -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums;
}
.num-grad i { font-style: normal; color: var(--motif-a-ink); }
.on-dark .num-grad, .aurora-dark .num-grad, .sec--navy .num-grad, .num-grad--dark { color: #fff; }
.on-dark .num-grad i, .aurora-dark .num-grad i, .sec--navy .num-grad i, .num-grad--dark i { color: var(--motif-a-light); }

/* ---------- 4 · La Cápsula: eyebrow, Corte y estado activo ----------
   El eyebrow vive en tokens.css (.eyebrow::before). Aquí, el objeto y
   sus otros dos roles. El Corte abre una sección sin rótulo: nunca va
   junto a un eyebrow. */
.capsula {
  display: inline-block; width: 16px; height: 8px; border-radius: 999px; flex-shrink: 0;
  vertical-align: middle; background: linear-gradient(90deg, var(--motif-a), var(--motif-b));
}
.corte {
  height: 3px; width: 160px; border: 0; margin: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--motif-a), var(--motif-b), transparent);
}
.corte--centro { background: linear-gradient(90deg, transparent, var(--motif-a), var(--motif-b), transparent); }
/* Estado activo: la cápsula bajo la pestaña, el paso o el ítem actual */
.activo { position: relative; }
.activo::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 16px; height: 8px;
  border-radius: 999px; background: linear-gradient(90deg, var(--motif-a), var(--motif-b));
}
.activo--centro::after { left: 50%; transform: translateX(-50%); }

/* ---------- 5 · La Pupila: el aura de dos acentos al actuar ----------
   Al 0 % en reposo; completa al pasar el ratón, al enfocar con teclado
   o en el estado activo. El plan recomendado puede quedarse encendido. */
.pupila { position: relative; overflow: hidden; isolation: isolate; }
.pupila::after {
  content: ""; position: absolute; inset: -35%; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(58% 58% at 84% 6%, color-mix(in srgb, var(--motif-a) 34%, transparent), transparent 63%),
    radial-gradient(62% 62% at 10% 98%, color-mix(in srgb, var(--motif-b) 28%, transparent), transparent 66%);
  opacity: 0; transform: scale(.86) rotate(-2deg);
  transition: opacity .55s var(--ease-out), transform .65s var(--ease-out);
}
.pupila:hover::after, .pupila:focus-visible::after, .pupila.on::after, .pupila--fija::after {
  opacity: 1; transform: scale(1) rotate(0deg);
}
.on-dark .pupila::after, .aurora-dark .pupila::after, .sec--navy .pupila::after, .pupila--dark::after {
  background:
    radial-gradient(58% 58% at 84% 6%, color-mix(in srgb, var(--motif-a) 46%, transparent), transparent 64%),
    radial-gradient(62% 62% at 10% 98%, color-mix(in srgb, var(--motif-b) 44%, transparent), transparent 66%);
}

/* ---------- 6 · Iconos sueltos; vidrio solo para logotipos ----------
   El icono Tabler va sin cuadro, en la tinta legible del acento, en
   línea con el título (24 px en tarjetas, 20 px en listas y menús). */
.icono { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 24px; flex-shrink: 0; color: var(--motif-b-ink); }
.icono--a { color: var(--motif-a-ink); }
.icono--sm { width: 20px; height: 20px; font-size: 20px; }
.on-dark .icono, .aurora-dark .icono, .sec--navy .icono { color: var(--motif-a-light); }
/* El vidrio sostiene un logotipo sobre navy. No es para iconos. */
.vidrio {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* ---------- 7 · Retícula (solo secciones técnicas) ----------
   Su retiro quedó pendiente de decisión el 22 de septiembre de 2026. */
.reticula { position: relative; }
.reticula::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(0, 17, 68, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 17, 68, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(80% 70% at 50% 40%, #000, transparent 78%);
          mask: radial-gradient(80% 70% at 50% 40%, #000, transparent 78%);
}
.on-dark .reticula::before, .aurora-dark .reticula::before, .sec--navy .reticula::before {
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
}

/* ---------- 8 · Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ojo::after { animation: ojo-abre 1.1s var(--ease-out) both; }
  @keyframes ojo-abre { from { opacity: 0; transform: scale(.94); } }
}
@media (prefers-reduced-motion: reduce) {
  .iris, .bokeh i { animation: none; }
  .spot__rev { display: none; }
  .pupila::after { transition: opacity .2s linear; transform: none; }
  .pupila:hover::after { transform: none; }
}