/* Efectos de «contacto»: generado desde assets/css/src/fx/ (materiales, contacto). */
/* ---------- Materiales: cada imagen de servicio reacciona a la luz según lo que es ----------
   Hover en ratón; en táctil, la clase .is-hot al entrar en pantalla. Los bucles solo corren con .is-live. */
[data-material] { position: relative; isolation: isolate; }
[data-material] img, .over { transition: transform .9s var(--ease), opacity .6s var(--ease); }
/* Capa de luces registrada sobre la imagen (misma geometría y mismo zoom que ella). */
.over { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.over--wide { inset: 0 auto 0 50%; height: 100%; aspect-ratio: 16 / 9; translate: -50% 0; }
[data-material]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; }

/* Zoom */
.service-card__media.is-hot > :is(img, .over), .explore__media.is-hot > :is(img, .over), .presence__media.is-hot > img { transform: scale(1.05); }
.service-row__media.is-hot { --z: 1.13; }
@media (hover: hover) {
  .service-card:hover [data-material] > :is(img, .over), .explore__card:hover [data-material] > :is(img, .over) { transform: scale(1.05); }
  .motion .service-row__media, .motion .presence__media { transition: transform .35s var(--ease); }
  .motion .service-row__media.is-glow, .motion .presence__media.is-glow { transform: perspective(1100px) rotateY(calc(var(--nx) * 2.4deg)) rotateX(calc(var(--ny) * -2.4deg)); }
  .motion .service-row__media.is-glow { --z: 1.13; }
}

/* Mármol (gráfica de Posicionamiento SEO): los puntos laten en ámbar y las barras en verde, cada uno a su ritmo. */
.glows { opacity: .7; }
.glows i, .glows b { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); opacity: .4; will-change: opacity, transform; }
.glows i { width: 7.5%; aspect-ratio: 1; margin: -3.75% 0 0 -3.75%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 96, .95), rgba(244, 150, 40, .5) 28%, transparent 68%); }
.glows i.g { background: radial-gradient(circle, rgba(196, 240, 156, .95), rgba(120, 196, 104, .5) 28%, transparent 68%); }
.glows b { width: 7%; height: calc((67 - var(--y)) * 1%); margin-left: -3.5%; border-radius: 40% / 12%; background: radial-gradient(ellipse at 50% 42%, rgba(156, 226, 124, .62), rgba(120, 190, 100, .22) 48%, transparent 74%); }
.motion [data-material].is-live .glows :is(i, b) { animation: swf-breathe calc(var(--d) * 1s) ease-in-out calc(var(--o) * -1s) infinite; }
@keyframes swf-breathe { 0%, 100% { opacity: .16; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.14); } }
[data-material].is-hot .glows, a:hover [data-material] .glows, [data-material]:hover .glows { opacity: 1; }

/* ---------- Contacto · astrolabio de luz (solo ≥ 1024 px, en el hueco bajo el correo) ----------
   Tres órbitas de bronce inclinadas en el espacio, cada una con un punto de luz que la recorre a su ritmo,
   alrededor de un núcleo que respira. Firma propia de Contacto: un mensaje en camino hacia su respuesta. */
.astro { display: none; }
@media (min-width: 1024px) {
  .astro { display: block; position: relative; width: min(320px, 86%); aspect-ratio: 1; margin: var(--s-7) 0 0 var(--s-4); perspective: 900px; }
  .astro::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 181, 61, .17), transparent 64%); }
  .astro__ring {
    position: absolute; inset: calc(var(--n) * 11%); border-radius: 50%; border: 1px solid var(--b); transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz, 0deg));
  }
  .astro__ring i { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px 2px var(--c); }
  .astro__ring { border-width: 1.5px; }
  .astro__ring i { width: 11px; height: 11px; top: -6px; margin-left: -5.5px; }
  .astro__ring--1 { --n: 0; --rx: 68deg; --ry: 0deg; --rz: 40deg; --b: rgba(224, 160, 62, .8); --c: var(--amber); --t: 16s; }
  .astro__ring--2 { --n: 1; --rx: 62deg; --ry: 52deg; --rz: 190deg; --b: rgba(200, 134, 42, .62); --c: var(--mint); --t: 23s; }
  .astro__ring--3 { --n: 2; --rx: 24deg; --ry: 66deg; --rz: 300deg; --b: rgba(237, 232, 223, .34); --c: var(--text-1); --t: 31s; }
  .astro__core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 26px 6px rgba(244, 181, 61, .55); }
  .motion .astro.is-live .astro__ring { animation: swf-astro var(--t) linear infinite; }
  .motion .astro.is-live .astro__ring--2 { animation-direction: reverse; }
  .motion .astro.is-live .astro__core { animation: swf-core 4.2s ease-in-out infinite; }
}
@keyframes swf-astro { from { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); } to { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(calc(var(--rz) + 1turn)); } }
@keyframes swf-core { 0%, 100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }

/* ---------- «Sigue explorando» · tarjeta Demos: cuero, plumín y lacre ----------
   El plumín capta un destello, el sello de lacre respira en su verde y una luz rasante cruza el cuero. */
[data-material="cuero"]::after {
  inset: -30%; opacity: .0;
  background: radial-gradient(ellipse 34% 20% at 50% 50%, rgba(232, 178, 94, .3), transparent 72%);
  transform: translate(-34%, -10%) rotate(-16deg);
}
.cuero .nib { position: absolute; left: 38.3%; top: 48.3%; width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%; opacity: .25; transform: scale(.5) rotate(0deg);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 4%, rgba(255, 226, 170, .55) 9%, transparent 24%),
    linear-gradient(90deg, transparent 8%, rgba(255, 240, 210, .9) 50%, transparent 92%) 50% 50% / 100% 2.5% no-repeat,
    linear-gradient(0deg, transparent 8%, rgba(255, 240, 210, .9) 50%, transparent 92%) 50% 50% / 2.5% 100% no-repeat; }
.cuero .seal { position: absolute; left: 72%; top: 70.5%; width: 19%; aspect-ratio: 1; margin: -9.5% 0 0 -9.5%; border-radius: 50%; opacity: .3;
  background: radial-gradient(circle at 38% 32%, rgba(190, 255, 215, .85), rgba(78, 189, 125, .5) 24%, rgba(63, 138, 102, .28) 46%, transparent 68%); }
.motion [data-material="cuero"].is-live::after { opacity: .75; animation: swf-leather 9s ease-in-out infinite alternate; }
.motion [data-material="cuero"].is-live .seal { animation: swf-seal 4.4s ease-in-out infinite; }
.motion [data-material="cuero"].is-live .nib { animation: swf-nib 5.2s ease-in-out infinite; }
.motion [data-material="cuero"].is-hot .nib, .motion a:hover [data-material="cuero"] .nib { animation: swf-nib 2.6s ease-in-out infinite; }
[data-material="cuero"].is-hot .seal, a:hover [data-material="cuero"] .seal { opacity: .95; }
@keyframes swf-leather { from { transform: translate(-34%, -10%) rotate(-16deg); } to { transform: translate(26%, 12%) rotate(-16deg); } }
@keyframes swf-seal { 0%, 100% { opacity: .22; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes swf-nib { 0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 78% { opacity: 1; transform: scale(1.05) rotate(40deg); } 90% { opacity: .4; transform: scale(.6) rotate(70deg); } }