/* Webs de los talleres: estructura común a todos los temas (docs/TECHNICAL.md §5.2).
   Ningún color ni fuente aquí: todo sale de las variables de /estilos/taller.<version>.css.
   Cada tema (landing/temas/<tema>.css) cambia el carácter encima de esta base. */

:root {
  --suave: color-mix(in srgb, var(--texto) 68%, var(--fondo));
  --linea: color-mix(in srgb, var(--texto) 14%, var(--fondo));
  --superficie: color-mix(in srgb, var(--texto) 4%, var(--fondo));
  --superficie-2: color-mix(in srgb, var(--texto) 8%, var(--fondo));
  --primario-suave: color-mix(in srgb, var(--primario) 14%, var(--fondo));
  --esp: calc(1rem * var(--densidad));
  --seccion: calc(clamp(3.5rem, 9vw, 7rem) * var(--densidad));
  --ancho: 72rem;
  --radio-tarjeta: min(var(--radio), 1.25rem);
  --sombra: 0 1px 2px color-mix(in srgb, var(--texto) 10%, transparent),
    0 12px 32px -12px color-mix(in srgb, var(--texto) 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4.5rem; /* barra de contacto en el móvil */
}
@media (min-width: 48rem) { body { padding-bottom: 0; } }
/* La barra fija del móvil no tapa el elemento con el foco. */
@media (max-width: 47.99rem) { html { scroll-padding-bottom: 5.5rem; } }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
p + p { margin-top: 0.75em; }
a { color: inherit; text-underline-offset: 0.18em; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
/* Foco en dos colores: el contorno se ve sobre fondo claro y el halo, sobre oscuro. */
:focus-visible { outline: 3px solid var(--secundario); outline-offset: 3px; box-shadow: 0 0 0 6px var(--fondo); }

.w-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w-salto { position: absolute; left: -999rem; z-index: 50; }
.w-salto:focus { left: 1rem; top: 1rem; padding: 0.75rem 1rem; background: var(--primario); color: var(--sobre-primario); }
.w-suave { color: var(--suave); }
.w-icono { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.w-aviso-borrador {
  position: sticky; top: 0; z-index: 40; padding: 0.6rem 1rem; text-align: center; font-size: 0.9375rem; font-weight: 600;
  background: var(--secundario); color: var(--sobre-secundario);
}
.w-aviso-borrador a { color: inherit; }
/* Muestras del superadmin: saltar de un tema a otro en una visita comercial. */
.w-muestra { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.875rem; }
.w-muestra a, .w-muestra strong { display: inline-block; padding: 0.3rem 0.25rem; }
.w-muestra strong { padding-inline: 0.75rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); }
.w-muestra span { font-weight: 400; }
@media (max-width: 40rem) { .w-muestra span { display: none; } }

.w-contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.w-estrecho { max-width: 48rem; }
.w-centrado { text-align: center; }
.w-seccion { padding-block: var(--seccion); }
.w-seccion-alterna { background: var(--superficie); }
.w-dos-columnas { display: grid; gap: calc(var(--esp) * 2.5); }
@media (min-width: 56rem) { .w-dos-columnas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.w-rejilla { display: grid; gap: calc(var(--esp) * 1.25); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.w-titulo-seccion { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: calc(var(--esp) * 0.75); }
.w-intro { max-width: 40rem; color: var(--suave); font-size: 1.125rem; margin-bottom: calc(var(--esp) * 2); }
.w-cabeza-seccion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: calc(var(--esp) * 1.5); }
.w-cabeza-seccion .w-titulo-seccion { margin-bottom: 0; }

/* Botones */
.w-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: calc(var(--esp) * 2); }
.w-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.5rem; border: 2px solid var(--primario); border-radius: var(--radio);
  background: var(--primario); color: var(--sobre-primario); font-weight: 700; text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.w-boton:hover { filter: brightness(1.08); }
.w-boton:active { transform: translateY(1px); }
.w-boton-sec { background: transparent; color: var(--texto); border-color: var(--linea); }
.w-boton-sec:hover { border-color: var(--texto); filter: none; }

/* Cabecera */
.w-cabecera { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.w-cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.w-marca { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; text-decoration: none; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 1.25rem; line-height: 1.1; }
.w-monograma { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radio-tarjeta); background: var(--primario); color: var(--sobre-primario); font-size: 1rem; letter-spacing: 0.02em; }
.w-nav { display: none; margin-left: auto; gap: 0.25rem; }
.w-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.8rem; border-radius: var(--radio-tarjeta); text-decoration: none; color: var(--suave); font-weight: 600; font-size: 0.9375rem; }
.w-nav a:hover { color: var(--texto); background: var(--superficie-2); }
.w-boton-cabecera { display: none; min-height: 2.75rem; padding: 0 1rem; margin-left: auto; }
.w-nav + .w-boton-cabecera { margin-left: 0; }
@media (min-width: 48rem) { .w-boton-cabecera { display: inline-flex; } }
@media (min-width: 64rem) { .w-nav { display: flex; } }

/* Portada */
.w-titulo-hero { font-size: clamp(2.75rem, 9vw, 5.75rem); letter-spacing: -0.02em; }
.w-entrada { max-width: 36rem; margin-top: calc(var(--esp) * 1.25); font-size: clamp(1.125rem, 2.4vw, 1.375rem); color: var(--suave); }
.w-hero-rejilla { display: grid; gap: calc(var(--esp) * 3); align-items: center; }
@media (min-width: 56rem) { .w-hero-rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.w-hero-visual { display: grid; gap: calc(var(--esp) * 1.5); justify-items: center; }
.w-reloj {
  position: relative; width: min(100%, 22rem); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--fondo) 0 54%, transparent 54.5%),
    conic-gradient(from 225deg, var(--primario) 0 62%, var(--superficie-2) 62% 75%, transparent 75%);
}
@media (max-width: 40rem) { .w-reloj { display: none; } .w-datos div { padding: 0.75rem; } }
.w-reloj::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed var(--linea); }
.w-reloj-aguja { position: absolute; left: 50%; top: 50%; width: 42%; height: 4px; border-radius: 2px; background: var(--secundario); transform-origin: 0 50%; transform: rotate(-30deg); }
.w-reloj-centro { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: clamp(1.25rem, 4vw, 2rem); }
.w-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.75rem; width: 100%; margin: 0; }
.w-datos div { display: flex; flex-direction: column-reverse; gap: 0.15rem; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.w-datos dd { margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1; color: var(--primario); }
.w-datos dt { font-size: 0.875rem; color: var(--suave); }
.w-datos-fila { margin-top: calc(var(--esp) * 2.5); max-width: 40rem; }

.w-hero-completa { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(88svh, 46rem); padding-block: var(--seccion); background: var(--primario); color: var(--sobre-primario); }
.w-hero-fondo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, color-mix(in srgb, var(--secundario) 55%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 46px, color-mix(in srgb, var(--sobre-primario) 7%, transparent) 46px 48px),
    linear-gradient(160deg, var(--primario), color-mix(in srgb, var(--primario) 55%, #000));
}
/* Con foto: la foto debajo y un degradado para que el texto se lea siempre. */
.w-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-con-foto .w-hero-fondo { background: #111; }
.w-con-foto .w-hero-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.35) 60%, rgb(0 0 0 / 0.15)), linear-gradient(0deg, rgb(0 0 0 / 0.55), transparent 45%); }
.w-hero-completa.w-con-foto { color: #fff; }
.w-hero-completa.w-con-foto .w-entrada { color: rgb(255 255 255 / 0.88); }
.w-hero-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); }
.w-hero-completa .w-entrada { color: color-mix(in srgb, var(--sobre-primario) 82%, transparent); }
.w-hero-completa .w-boton { background: var(--secundario); border-color: var(--secundario); color: var(--sobre-secundario); }
.w-hero-completa .w-boton-sec { background: transparent; color: var(--sobre-primario); border-color: color-mix(in srgb, var(--sobre-primario) 45%, transparent); }
.w-hero-completa .w-datos div { background: color-mix(in srgb, var(--sobre-primario) 8%, transparent); border-color: color-mix(in srgb, var(--sobre-primario) 22%, transparent); }
.w-hero-completa .w-datos dd { color: var(--sobre-primario); }
.w-hero-completa .w-datos dt { color: color-mix(in srgb, var(--sobre-primario) 75%, transparent); }

/* Servicios */
.w-servicio { padding: calc(var(--esp) * 1.5); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--fondo); transition: border-color 0.2s ease, transform 0.2s ease; }
.w-servicio:hover { border-color: var(--primario); transform: translateY(-2px); }
.w-servicio-icono { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: var(--radio-tarjeta); background: var(--primario-suave); color: var(--primario); }
.w-servicio-icono .w-icono { width: 1.5rem; height: 1.5rem; }
.w-servicio h3, .w-tarjeta h3, .w-oferta h3, .w-persona h3 { font-size: 1.375rem; margin-bottom: 0.4rem; }
.w-servicio p, .w-tarjeta p, .w-persona p { color: var(--suave); }
.w-precio { margin-top: 0.75rem; font-weight: 700; color: var(--texto) !important; }
.w-lista-servicios { border-top: 1px solid var(--linea); }
.w-lista-servicios li { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); }
.w-lista-servicios h3 { font-size: 1.25rem; }
.w-lista-servicios p { color: var(--suave); }
.w-lista-servicios .w-precio { margin: 0; white-space: nowrap; }
.w-tarjeta { padding: calc(var(--esp) * 1.75); border-radius: var(--radio-tarjeta); background: var(--fondo); box-shadow: var(--sombra); }
.w-tarjeta-numero { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 2.5rem; line-height: 1; color: var(--primario); margin-bottom: 1rem; }

/* Galería y carrusel (sin JS: scroll-snap) */
.w-galeria { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.w-galeria img, .w-carrusel img { border-radius: var(--radio-tarjeta); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.w-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 24rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.w-carrusel > li { scroll-snap-align: start; }
.w-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.w-parejas figcaption, .w-carrusel figcaption { margin-top: 0.5rem; color: var(--suave); font-size: 0.9375rem; }

/* Equipo */
.w-persona { display: flex; gap: 1rem; align-items: flex-start; padding: calc(var(--esp) * 1.25); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.w-avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 1.5rem; }
.w-puesto { font-weight: 600; color: var(--primario) !important; margin-bottom: 0.25rem; }
.w-nombres { margin-top: 1.5rem; line-height: 1.9; }
.w-foto-grupo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-tarjeta); }
.w-foto-vacia { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--primario-suave) 0 14px, var(--superficie) 14px 28px); }
.w-foto-vacia span { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 4rem; color: var(--primario); }

/* Reseñas */
.w-nota { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.w-nota .w-icono { color: var(--secundario); }
.w-resenas { grid-auto-columns: min(88%, 22rem); }
.w-resena { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: calc(var(--esp) * 1.5); border-radius: var(--radio-tarjeta); background: var(--fondo); border: 1px solid var(--linea); }
.w-resena blockquote { margin: 0; flex: 1; font-size: 1.0625rem; }
.w-estrellas { color: var(--secundario); letter-spacing: 0.12em; font-size: 1.125rem; }
.w-autor { font-weight: 700; }
.w-enlace-mas { margin-top: 1.5rem; }
.w-enlace-mas a { font-weight: 700; color: var(--primario); }
.w-resena-destacada { margin: calc(var(--esp) * 1.5) 0 0; }
.w-resena-destacada blockquote { margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2; }
.w-resena-destacada figcaption { margin-top: 1.5rem; font-weight: 700; }
.w-comillas { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--primario); }
.w-centrado .w-nota { margin-top: 1rem; color: var(--suave); }

/* Cita */
.w-cita-caja { display: grid; gap: calc(var(--esp) * 1.5); align-items: center; padding-block: calc(var(--esp) * 3); padding-inline: clamp(1.5rem, 5vw, 4rem); border-radius: var(--radio-tarjeta); background: var(--primario); color: var(--sobre-primario); }
@media (min-width: 56rem) { .w-cita-caja { grid-template-columns: minmax(0, 1fr) auto; } }
.w-cita { padding-inline: clamp(1rem, 4vw, 2rem); }
.w-cita .w-contenedor { max-width: calc(var(--ancho) - 4rem); }
.w-cita .w-intro { color: color-mix(in srgb, var(--sobre-primario) 82%, transparent); margin-bottom: 0; }
.w-cita .w-botones { margin-top: 0; }
.w-cita .w-boton { background: var(--secundario); border-color: var(--secundario); color: var(--sobre-secundario); }
.w-cita .w-boton-sec { background: transparent; color: var(--sobre-primario); border-color: color-mix(in srgb, var(--sobre-primario) 45%, transparent); }
.w-cita-compacta { padding-block: calc(var(--seccion) * 0.6); border-block: 1px solid var(--linea); }
.w-cita-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.w-cita-fila .w-titulo-seccion { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.w-cita-fila .w-botones { margin: 0; }

/* Ofertas */
.w-oferta { position: relative; padding: calc(var(--esp) * 1.75); border: 2px solid var(--primario); border-radius: var(--radio-tarjeta); }
.w-oferta-precio { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 2.5rem; line-height: 1; color: var(--primario); margin: 0.5rem 0 0.75rem; }
.w-condiciones { margin-top: 1rem; font-size: 0.875rem; color: var(--suave); }
.w-banda { background: var(--secundario); color: var(--sobre-secundario); padding-block: 1.1rem; }
.w-banda-lista { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; justify-content: center; font-size: 1.0625rem; }
.w-banda-lista strong { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); }
.w-banda-lista small { opacity: 0.8; }

/* Preguntas frecuentes */
.w-faq { border-top: 1px solid var(--linea); }
.w-faq details { border-bottom: 1px solid var(--linea); }
.w-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; padding-block: 1rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary .w-icono { transition: transform 0.2s ease; color: var(--primario); }
.w-faq details[open] summary .w-icono { transform: rotate(180deg); }
.w-faq details p { padding-bottom: 1.25rem; color: var(--suave); max-width: 42rem; }

/* Mapa y horario */
.w-direccion { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.125rem; margin-bottom: 1.5rem; }
.w-direccion .w-icono { margin-top: 0.2rem; color: var(--primario); }
.w-horario { width: 100%; max-width: 26rem; border-collapse: collapse; }
.w-horario th, .w-horario td { padding: 0.6rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.w-horario th { font-weight: 600; padding-right: 1.5rem; }
.w-horario td { color: var(--suave); }
.w-mapa { position: relative; display: block; min-height: 20rem; overflow: hidden; border-radius: var(--radio-tarjeta); border: 1px solid var(--linea); background: var(--superficie-2); text-decoration: none; }
.w-mapa-calles {
  position: absolute; inset: 0;
  background:
    linear-gradient(28deg, transparent 0 47%, var(--fondo) 47% 51%, transparent 51%),
    linear-gradient(-62deg, transparent 0 30%, var(--fondo) 30% 33%, transparent 33% 68%, var(--fondo) 68% 70%, transparent 70%),
    linear-gradient(90deg, transparent 0 62%, color-mix(in srgb, var(--fondo) 70%, transparent) 62% 64%, transparent 64%),
    radial-gradient(circle at 20% 80%, var(--primario-suave) 0 12%, transparent 12.5%),
    var(--superficie-2);
}
.w-mapa-pin { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -100%); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--primario); color: var(--sobre-primario); box-shadow: var(--sombra); }
.w-mapa-pin .w-icono { rotate: 45deg; width: 1.5rem; height: 1.5rem; }
.w-mapa-texto { position: absolute; left: 1rem; bottom: 1rem; padding: 0.6rem 1rem; border-radius: var(--radio); background: var(--fondo); color: var(--texto); font-weight: 700; box-shadow: var(--sombra); }
.w-mapa:hover .w-mapa-texto { text-decoration: underline; }

/* Texto libre */
.w-prosa p, .w-prosa ul, .w-prosa ol, .w-prosa blockquote { margin: 0 0 1em; }
.w-prosa ul { list-style: disc; padding-left: 1.25rem; }
.w-prosa ol { padding-left: 1.25rem; }
.w-prosa h3 { font-size: 1.5rem; margin: 1.5em 0 0.5em; }
.w-prosa a { color: var(--primario); font-weight: 600; }

/* Pie */
.w-pie { margin-top: 0; padding-top: calc(var(--seccion) * 0.7); border-top: 1px solid var(--linea); background: var(--superficie); font-size: 0.9375rem; }
.w-pie-rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.w-pie-marca { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 1.5rem; margin-bottom: 0.5rem; }
.w-pie a { text-decoration: none; }
.w-pie a:hover { text-decoration: underline; }
.w-pie-legal { display: flex; flex-direction: column; gap: 0.5rem; }
.w-pie-legal a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--suave); }
.w-pie-final { margin-top: 2rem; padding-block: 1.25rem; border-top: 1px solid var(--linea); color: var(--suave); font-size: 0.875rem; }

/* Barra de contacto fija en el móvil */
.w-barra-movil { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); }
.w-barra-movil .w-boton { min-height: 3rem; padding: 0 0.75rem; }
@media (min-width: 48rem) { .w-barra-movil { display: none; } }

/* Efectos que los temas activan: aparecer al hacer scroll y acercar la foto de portada.
   Solo CSS (la CSP no admite scripts en línea); sin soporte, todo se ve quieto. Con
   «reducir movimiento», nada se mueve (regla de arriba). */
@keyframes w-aparecer { from { opacity: 0.2; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes w-acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
@supports (animation-timeline: view()) {
  .w-efectos .w-seccion .w-contenedor > *, .w-efectos .w-servicio, .w-efectos .w-tarjeta, .w-efectos .w-galeria li {
    animation: w-aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
  }
}
.w-efectos .w-hero-img { animation: w-acercar 14s ease-out both; }