/* Efectos de «inicio»: generado desde assets/css/src/fx/ (materiales, mat-cristal, mat-bronce-acero, demos, cierre-ascuas). */
/* ---------- 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; }

/* Cristal (láminas de Diseño Web): un destello esmeralda recorre el canto de cada lámina. */
/* Cada canto es una franja estrecha con margen a los lados para que el resplandor esmeralda no se corte. */
.edges i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: max(2.6%, 10px); height: calc(var(--h) * 1%); margin-left: max(-1.3%, -5px); overflow: hidden; }
.edges i.top { left: 53.6%; top: 20.6%; width: 33%; height: max(3.6%, 10px); margin: 0; transform: rotate(-2.4deg); transform-origin: 0 50%; }
.edges i::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-101%);
  background:
    linear-gradient(to bottom, transparent 30%, rgba(237, 232, 223, 1) 50%, transparent 70%) 50% 0 / max(22%, 2px) 100% no-repeat,
    radial-gradient(ellipse 50% 28% at 50% 50%, rgba(120, 240, 160, .95), rgba(78, 189, 95, .45) 55%, transparent 100%);
}
.edges i.top::before {
  transform: translateX(-101%);
  background:
    linear-gradient(to right, transparent 30%, rgba(237, 232, 223, 1) 50%, transparent 70%) 0 50% / 100% max(22%, 2px) no-repeat,
    radial-gradient(ellipse 28% 50% at 50% 50%, rgba(120, 240, 160, .95), rgba(78, 189, 95, .45) 55%, transparent 100%);
}
/* En reposo: una pasada lenta y tenue cada 7 s. */
.motion [data-material].is-live .edges i::before { opacity: .5; animation: swf-edge 7s var(--ease) calc(var(--i) * .28s) infinite; }
.motion [data-material].is-live .edges i.top::before { animation-name: swf-edge-x; }
/* En hover (o al entrar en pantalla en táctil): una pasada nítida, lámina a lámina. */
.motion [data-material].is-hot .edges i::before, .motion a:hover [data-material] .edges i::before, .motion [data-material]:hover .edges i::before { opacity: 1; animation: swf-edge-hot 1.5s var(--ease) calc(var(--i) * .13s) both; }
.motion [data-material].is-hot .edges i.top::before, .motion a:hover [data-material] .edges i.top::before, .motion [data-material]:hover .edges i.top::before { animation-name: swf-edge-hot-x; }
@keyframes swf-edge { 0% { transform: translateY(-101%); } 26%, 100% { transform: translateY(101%); } }
@keyframes swf-edge-x { 0% { transform: translateX(-101%); } 26%, 100% { transform: translateX(101%); } }
@keyframes swf-edge-hot { from { transform: translateY(-101%); } to { transform: translateY(101%); } }
@keyframes swf-edge-hot-x { from { transform: translateX(-101%); } to { transform: translateX(101%); } }

/* Bronce (antena de Publicidad): la antena emite ondas de señal. */
[data-material="bronce"]::after {
  inset: -40%; transform: scale(.7);
  background: repeating-radial-gradient(circle at 50% 42%, transparent 0 26px, rgba(244, 181, 61, .24) 26px 27.5px, transparent 27.5px 54px, rgba(142, 178, 107, .2) 54px 55.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 7%, black 18%, transparent 56%); mask-image: radial-gradient(circle at 50% 42%, transparent 7%, black 18%, transparent 56%);
}
/* Acero (engranajes de Automatizaciones): un haz de luz gira sobre el eje. */
[data-material="acero"]::after {
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0 286deg, rgba(244, 181, 61, .3) 334deg, rgba(237, 232, 223, .14) 350deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, black 0 30%, transparent 60%); mask-image: radial-gradient(circle, black 0 30%, transparent 60%);
}
.motion [data-material="bronce"].is-hot::after { animation: swf-signal 2.2s linear infinite; }
.motion [data-material="acero"].is-hot::after { animation: swf-beam 3.4s linear infinite; }
@media (hover: hover) {
  .motion a:hover [data-material="bronce"]::after, .motion [data-material="bronce"]:hover::after { animation: swf-signal 2.2s linear infinite; }
  .motion a:hover [data-material="acero"]::after, .motion [data-material="acero"]:hover::after { animation: swf-beam 3.4s linear infinite; }
}
@keyframes swf-signal { 0% { transform: scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes swf-beam { 0% { transform: rotate(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: rotate(1turn); opacity: 0; } }

/* ---------- Demos: cada panel realza con SU color ----------
   Acentos por demo. Bloque único, ajustable. */
.demo--casa-aurea   { --panel-accent: #B07A1E; } /* dorado miel */
.demo--hombre-alfa  { --panel-accent: #E0562B; } /* brasa */
.demo--bufete       { --panel-accent: #3F8A66; } /* verde botella */
.demo--dental       { --panel-accent: #E06A52; } /* coral */
.demo--veterinaria  { --panel-accent: #DB7C4E; } /* terracota */
.demo--inmobiliaria { --panel-accent: #9A7440; } /* bronce champán */
/* Fin de los acentos. */
.demo, .demo-mini { position: relative; isolation: isolate; transition: border-color .4s var(--ease), box-shadow .5s var(--ease); }
.demo::before, .demo-mini::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .5; transition: opacity .6s var(--ease);
  background: radial-gradient(70% 95% at 0% 0%, color-mix(in srgb, var(--panel-accent) 24%, transparent), transparent 70%);
}
.demo:hover::before, .demo-mini:hover::before, .demo-mini:focus-visible::before, :is(.demo, .demo-mini).is-hot::before { opacity: 1; }
.demo:hover, .demo-mini:hover, .demo-mini:focus-visible, :is(.demo, .demo-mini).is-hot {
  border-color: var(--panel-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-accent) 40%, transparent), 0 40px 90px -60px var(--panel-accent);
}
.demo__copy h2::before, .demo-mini h3::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: var(--s-5); background: var(--panel-accent); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.demo:hover .demo__copy h2::before, .demo.is-hot .demo__copy h2::before, .demo-mini:hover h3::before, .demo-mini.is-hot h3::before { transform: scaleX(1.9); }
.demo .btn--secondary:hover, .demo--light .btn--secondary:hover { border-color: var(--panel-accent); }
.demo__shot { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease); }
.demo:hover .demo__shot, .demo.is-hot .demo__shot { border-color: color-mix(in srgb, var(--panel-accent) 50%, transparent); }
.demo__shot img, .demo-mini__shot img { transition: transform .6s var(--ease), filter .6s var(--ease); }
.demo:hover .demo__shot img, .demo.is-hot .demo__shot img, .demo-mini:hover .demo-mini__shot img, .demo-mini.is-hot .demo-mini__shot img { filter: saturate(1.14); }
.demo-mini.is-hot .demo-mini__shot img { transform: scale(1.02); }
.demo.is-hot .demo__shot--home { transform: translateY(-5px); box-shadow: 0 26px 54px -30px var(--panel-accent); }
@media (hover: hover) {
  .demo__shot:hover, .demo__shot:focus-visible { transform: translateY(-5px); box-shadow: 0 26px 54px -30px var(--panel-accent); }
}

/* Cierre de Inicio: ascuas de luz que suben (canvas dibujado por main.js). */
.band--ascuas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }