/* ============================================================================
   w.css — EL SISTEMA VISUAL DE WOOTEN
   Una sola hoja para todas las páginas. Si algo se ve distinto acá, se ve
   distinto en todos lados: ese es el punto.

   Las reglas:
   1. Negro parejo, naranja de detalle. Nunca naranja como fondo grande.
   2. Inter, pesos 550-600, nunca 900. La jerarquía la hacen el tamaño y el aire.
   3. Nada con esquina viva: píldoras y radios grandes.
   4. Todo se mueve al aparecer.
   5. Cero emojis como ícono: dibujos SVG propios.
   ========================================================================== */

/* ── La letra ─────────────────────────────────────────────────────────────
   Inter, la misma de BOLT y de linear.app. Se parece a la del logo de Wooten,
   así que el logo deja de verse como de otro lado que la página.
   Hospedada acá, NUNCA por CDN: una fuente que viene de otro servidor tarda o
   falla, y ahí es cuando el texto se ve mal. Licencia SIL OFL, libre. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fuentes/InterVariable.woff2) format('woff2');
}

/* ── Las constantes ──────────────────────────────────────────────────────── */
:root{
  --w-bg:#080808;
  --w-bg2:#0C0D0E;
  --w-naranja:#FF7A00;
  --w-naranja-claro:#FF9A3C;
  --w-txt:#F4F2EF;
  --w-mut:#9A9691;
  --w-mut2:#6B6763;
  --w-apagado:#3A3734;

  --w-sup:rgba(255,255,255,.035);
  --w-sup2:rgba(255,255,255,.06);
  --w-linea:rgba(255,255,255,.09);
  --w-linea-fuerte:rgba(255,255,255,.16);
  --w-nar-suave:rgba(255,122,0,.12);
  --w-nar-linea:rgba(255,122,0,.28);

  --w-verde:#2BD699;
  --w-rojo:#FF5A5F;

  --w-r-chico:14px;
  --w-r:22px;
  --w-r-grande:32px;
  --w-pill:999px;

  --w-ancho:1180px;
  --w-nav:64px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* 🔴 `overflow-x` acá NO es de adorno (Maxi, 7-ago-2026: "la pantalla está
   cortada, no se ven unos botones", desde el celular).
   El halo mide 120vw, así que se sale a lo ancho. En el celular un desborde
   horizontal ENSANCHA el viewport de maquetación, y como la barra de arriba y
   la de abajo son `position:fixed` con `width:calc(100% - 32px)` y `left/right`,
   se calculaban sobre ese ancho inflado: quedaban más anchas que la pantalla y
   "Quiero mi dije" y el último ícono se cortaban.
   ⚠️ `overflow-x:hidden` en el body NO alcanza: cuando `html` es `visible`, ese
   valor SE PROPAGA al viewport y entonces el body deja de recortar. `clip` sí
   recorta de verdad y no crea un contenedor de scroll. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body.w{
  margin:0;background:var(--w-bg);color:var(--w-txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  font-weight:400;line-height:1.6;overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.w img{max-width:100%;display:block}
body.w a{color:inherit;text-decoration:none}
::selection{background:var(--w-naranja);color:#000}

/* ── Tipografía: el tamaño hace la jerarquía, no la negrita ──────────────── */
/* Con Inter los títulos van en 550-600, nunca 900. La jerarquía la hacen el
   tamaño y el aire, no la negrita. */
.w-h1{font-size:clamp(2.5rem,6.8vw,5rem);font-weight:560;line-height:1.02;letter-spacing:-.038em;margin:0}
.w-h2{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:560;line-height:1.08;letter-spacing:-.032em;margin:0}
.w-h3{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:560;line-height:1.25;letter-spacing:-.022em;margin:0}
.w-nar{color:var(--w-naranja)}
.w-sub{font-size:clamp(1rem,1.7vw,1.16rem);color:var(--w-mut);line-height:1.65;font-weight:400;max-width:56ch;margin:0}
.w-ojo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w-naranja-claro);
  background:var(--w-nar-suave);border:1px solid var(--w-nar-linea);
  border-radius:var(--w-pill);padding:7px 16px;
}
.w-mut{color:var(--w-mut)}

/* El punto que late — el signo de que la red está viva */
.w-late{width:7px;height:7px;border-radius:50%;background:var(--w-naranja);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,122,0,.6);animation:w-latido 2s infinite}
@keyframes w-latido{
  0%{box-shadow:0 0 0 0 rgba(255,122,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,122,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,122,0,0)}
}

/* ── Estructura ──────────────────────────────────────────────────────────── */
.w-wrap{max-width:var(--w-ancho);margin:0 auto;padding:0 24px;width:100%}
.w-sec{padding:clamp(64px,9vw,132px) 0;position:relative}
.w-sec-borde{border-top:1px solid var(--w-linea)}

/* ── El halo que gira: lo único de color del fondo ───────────────────────── */
.w-halo{
  position:absolute;pointer-events:none;z-index:0;
  width:min(120vw,1200px);max-width:100vw;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,122,0,.20),rgba(255,255,255,.07),rgba(255,122,0,.14),
    rgba(255,122,0,0),rgba(255,122,0,.20));
  filter:blur(100px);opacity:.55;
  animation:w-girar 28s linear infinite;
}
@keyframes w-girar{to{transform:rotate(360deg)}}

/* ── Botones: píldoras, sin excepción ────────────────────────────────────── */
.w-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  border-radius:var(--w-pill);padding:14px 28px;cursor:pointer;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.w-btn:active{transform:scale(.975)}
.w-btn-nar{background:var(--w-naranja);color:#120A02;font-weight:600;
  box-shadow:0 8px 24px -12px rgba(255,122,0,.5)}
.w-btn-nar:hover{transform:translateY(-2px);background:#FF8A1C;box-shadow:0 14px 34px -14px rgba(255,122,0,.7)}
.w-btn-fan{background:var(--w-sup);color:var(--w-txt);border-color:var(--w-linea);backdrop-filter:blur(10px)}
.w-btn-fan:hover{background:var(--w-sup2);border-color:var(--w-linea-fuerte);transform:translateY(-2px)}
.w-btn-chico{padding:10px 20px;font-size:.86rem}
.w-btn-grande{padding:17px 34px;font-size:1.02rem}

/* Chips */
.w-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--w-sup);border:1px solid var(--w-linea);border-radius:var(--w-pill);
  padding:9px 18px;font-size:.86rem;font-weight:500;color:var(--w-mut);
  cursor:pointer;transition:.2s;white-space:nowrap;
}
.w-chip:hover{border-color:var(--w-linea-fuerte);color:var(--w-txt);background:var(--w-sup2)}
.w-chip.on{background:var(--w-nar-suave);border-color:var(--w-nar-linea);color:var(--w-naranja-claro)}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.w-card{
  background:var(--w-sup);border:1px solid var(--w-linea);border-radius:var(--w-r);
  padding:26px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s;
}
.w-card:hover{transform:translateY(-4px);border-color:var(--w-linea-fuerte);background:var(--w-sup2)}
.w-card-foto{padding:0}
.w-card-foto .w-card-img{aspect-ratio:4/3;overflow:hidden;background:#141312}
.w-card-foto .w-card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s;filter:saturate(.85)}
.w-card-foto:hover .w-card-img img{transform:scale(1.06);filter:saturate(1.05)}
.w-card-foto .w-card-cuerpo{padding:22px 24px 26px}

/* El dibujo dentro de un círculo con borde — nunca un emoji */
.w-ico{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--w-nar-suave);border:1px solid var(--w-nar-linea);color:var(--w-naranja);
}
.w-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.w-ico-chico{width:34px;height:34px}
.w-ico-chico svg{width:17px;height:17px}

.w-grid{display:grid;gap:20px}
.w-g2{grid-template-columns:repeat(2,1fr)}
.w-g3{grid-template-columns:repeat(3,1fr)}
.w-g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.w-g3,.w-g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.w-g2,.w-g3,.w-g4{grid-template-columns:1fr}}

/* ── EL BANNER: fotos que se acercan solas y pasan de una a otra ─────────── */
.w-banner{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
.w-diapos{position:absolute;inset:0;z-index:-2}
.w-diapo{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.w-diapo.on{opacity:1}
.w-diapo img{width:100%;height:100%;object-fit:cover}
.w-diapo.on img{animation:w-acercar 15s ease-out forwards}
/* Poco acercamiento: con retratos de primer plano, mucho zoom deforma la cara */
@keyframes w-acercar{from{transform:scale(1)}to{transform:scale(1.07)}}
/* El velo en dos capas: sin esto la foto se come el texto */
.w-banner::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.9) 30%,rgba(8,8,8,.42) 62%,rgba(8,8,8,.62) 100%)}
.w-banner::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--w-bg) 1%,rgba(8,8,8,.15) 32%,transparent 55%,rgba(8,8,8,.55) 100%)}
/* El aire de arriba tiene que dejar pasar la barra flotante ENTERA (mide 64 y
   arranca a 14 del borde), y el de abajo, la franja de los puntos. Sin esto el
   primer renglón queda pegado a la barra y los datos se montan sobre las rayitas. */
.w-banner-cont{position:relative;z-index:1;width:100%;
  padding-top:calc(var(--w-nav) + 46px);padding-bottom:76px}

/* La franja de abajo: las rayitas a la izquierda, el nombre de la foto a la
   derecha. Van en su propia fila para que nada se les monte encima. */
.w-banner-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 26px 24px;pointer-events:none}
.w-banner-pie > *{pointer-events:auto}
.w-epigrafe{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-align:right}
.w-puntos{display:flex;gap:7px}
.w-punto{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);
  cursor:pointer;transition:.3s;border:none;padding:0}
.w-punto.on{background:var(--w-naranja);width:38px}
@media(max-width:700px){
  .w-banner{min-height:auto;padding:calc(var(--w-nav) + 48px) 0 64px}
  .w-epigrafe{display:none}

  /* 🔴 LA FOTO TIENE QUE ENTENDERSE (Maxi, 7-ago-2026: "el fondo de las fotos
     quedó grande para cel, no se ve que es el fondo").
     En el celular el banner es angosto y muy alto (390 × ~1600), así que
     `object-fit:cover` sobre una foto apaisada la ampliaba unas 4 veces: se
     veía un borrón de pelo, no un perro. La foto pasa a ocupar sólo la franja
     de arriba —una relación parecida a la de la foto original— y se desvanece
     con una máscara en vez de cortarse con una línea recta. El texto apoya
     sobre el negro, que además se lee mejor. */
  .w-diapos{inset:0 0 auto 0;height:clamp(360px,52%,520px);
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%)}
  .w-diapo img{object-position:50% 30%}   /* la cara, no el lomo */
  .w-banner::before{background:linear-gradient(to top,
    rgba(8,8,8,.9) 30%,rgba(8,8,8,.5) 58%,rgba(8,8,8,.38) 100%)}
  .w-banner::after{background:linear-gradient(to top,
    var(--w-bg) 34%,rgba(8,8,8,.5) 52%,rgba(8,8,8,.1) 72%,rgba(8,8,8,.5) 100%)}
}

/* ── La cabecera de una sección: etiqueta + título a la izquierda, y el enlace
   "ver todas" a la derecha ────────────────────────────────────────────────
   En el celular no entran uno al lado del otro, y apilados contra el margen
   izquierdo quedaban desparejos (Maxi, 7-ago: "las escrituras están todas
   tiradas para el lado izquierdo, quizás centradas estaría bueno"). Se centra
   el bloque entero. El texto largo de las tarjetas NO se centra: un párrafo de
   varias líneas centrado se lee peor. */
.w-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* El pie: el logo a la izquierda y los enlaces a la derecha. Las dos clases
   reemplazan estilos inline repetidos en cada vista — sin ellas no había cómo
   cambiarlo en el celular, porque un `style=` le gana a cualquier hoja. */
.w-pie-fila{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.w-pie-nav{display:flex;gap:22px;flex-wrap:wrap}
/* 🔴 EN EL CELULAR TODO VA CENTRADO (Maxi, 7-ago-2026: "abajo las escrituras
   están todas tiradas para el lado izquierdo, quizás centradas estaría bueno").
   Rige de la primera sección para abajo. El BANNER queda alineado a la
   izquierda a propósito: ahí el título es la pieza principal y contra el margen
   pega más fuerte. */
@media(max-width:700px){
  .w-sec{text-align:center}

  .w-cab{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .w-cab > div{max-width:none}

  /* Lo que no se acomoda solo con `text-align`: los dibujos y las píldoras son
     cajas, y una caja se centra con márgenes automáticos. */
  .w-sec .w-ico,.w-sec .w-ojo,.w-sec .w-chip,.w-sec .w-btn{margin-left:auto;margin-right:auto}
  .w-sec .w-btn{display:inline-flex}

  /* Las listas con tilde: la fila entera se centra, pero el renglón sigue
     leyéndose de izquierda a derecha — un texto de dos líneas centrado al lado
     de un ícono queda en escalera. */
  .pt-lista li{justify-content:center;text-align:left}
  .pt-lista{align-items:center}

  /* Los bloques de dos columnas (foto + texto) ya se apilan; sólo hay que
     centrar el texto que queda debajo.
     ⚠️ `justify-items:center` NO va en `.w-grid`: ahí adentro viven las tarjetas
     (adopciones, tienda), y con `center` cada una toma su ancho de contenido en
     vez de ocupar la columna. Si la foto todavía no cargó, la tarjeta colapsa a
     2 px de ancho y desaparece. Se estiran, y el texto lo centra `text-align`. */
  .wt-grid{justify-items:center}
  .w-grid{justify-items:stretch}

  .w-pie,.w-pie *{text-align:center}
  .w-pie-fila{flex-direction:column;gap:20px}
  .w-pie-nav{justify-content:center;gap:14px 20px}
}

/* ── El título que se arma palabra por palabra ─────────────────────────────
   🔴 El padding-bottom no es decorativo: la caja mide lo que dice line-height
   (1.02em en los títulos) y la cola de la "g", la "j", la "p", la "q" y la "y"
   baja más que eso. Con overflow:hidden quedaban cortadas al ras.
   El margin negativo devuelve ese espacio para que no cambie el interlineado. */
.w-pal{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.18em;margin-bottom:-.18em}
.w-pal>span{display:inline-block;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.w-armar .w-pal>span{transform:translateY(0)}

/* ── Los bloques que entran al aparecer ──────────────────────────────────── */
.w-rev{opacity:0;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.w-rev.ab{transform:translateY(38px)}
.w-rev.iz{transform:translateX(-40px)}
.w-rev.de{transform:translateX(40px)}
.w-rev.esc{transform:scale(.955)}
.w-rev.visto{opacity:1;transform:none}

/* ── El párrafo grande: las palabras se encienden al pasar ───────────────── */
.w-relato{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:500;line-height:1.32;
  letter-spacing:-.028em;max-width:20ch;margin:0}
.w-relato .t{color:var(--w-apagado);transition:color .5s ease}
.w-relato .t.on{color:var(--w-txt)}
.w-relato .t.on.destacado{color:var(--w-naranja)}
.w-relato .t.destacado{color:rgba(255,122,0,.22)}
@media(min-width:700px){.w-relato{max-width:26ch}}

/* ── La cinta que pasa sola ──────────────────────────────────────────────── */
.w-cinta{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.w-cinta-riel{display:flex;gap:14px;width:max-content;animation:w-correr 46s linear infinite}
.w-cinta:hover .w-cinta-riel{animation-play-state:paused}
@keyframes w-correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── La barra de arriba: píldora flotante con blur ───────────────────────── */
.w-nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:900;
  width:calc(100% - 32px);max-width:var(--w-ancho);
  display:flex;align-items:center;gap:10px;
  padding:9px 9px 9px 20px;border-radius:var(--w-pill);
  background:rgba(12,13,14,.72);border:1px solid var(--w-linea);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.w-nav.bajando{background:rgba(12,13,14,.88);box-shadow:0 12px 40px -18px rgba(0,0,0,.9)}
.w-logo{font-size:1.28rem;font-weight:600;letter-spacing:-.045em;color:var(--w-txt);flex-shrink:0}
.w-logo b{color:var(--w-naranja);font-weight:600}
.w-nav-links{display:flex;align-items:center;gap:2px;margin-left:14px;flex:1;min-width:0}
.w-nav-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:500;color:var(--w-mut);
  padding:9px 15px;border-radius:var(--w-pill);transition:.2s;white-space:nowrap;
}
.w-nav-link:hover{color:var(--w-txt);background:var(--w-sup)}
.w-nav-link.on{color:var(--w-txt);background:var(--w-sup2)}
.w-nav-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.w-nav-der{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
@media(max-width:900px){.w-nav-links{display:none}}

/* La barra de abajo, sólo en celular */
.w-tabs{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;
  padding:8px;border-radius:var(--w-pill);
  background:rgba(12,13,14,.86);border:1px solid var(--w-linea);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 14px 44px -16px rgba(0,0,0,.9);
}
@media(max-width:900px){.w-tabs{display:flex}body.w{padding-bottom:84px}}
.w-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px;border-radius:var(--w-pill);color:var(--w-mut2);
  font-size:.63rem;font-weight:600;letter-spacing:-.01em;transition:.2s;min-width:0}
.w-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.w-tab.on{color:var(--w-naranja);background:var(--w-nar-suave)}

/* ── El panel flotante (lo que pasa ahora, encima de la foto) ────────────── */
.w-panel{
  background:rgba(12,13,14,.74);border:1px solid var(--w-linea);border-radius:var(--w-r);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  padding:20px;box-shadow:0 26px 70px -30px rgba(0,0,0,.95);
}
.w-panel-hd{display:flex;align-items:center;gap:9px;
  font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--w-mut2);
  margin-bottom:14px}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.w-campo{
  width:100%;background:var(--w-sup);border:1px solid var(--w-linea);
  border-radius:var(--w-r-chico);color:var(--w-txt);
  font-family:inherit;font-size:1rem;font-weight:400;padding:15px 18px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.w-campo::placeholder{color:var(--w-mut2)}
.w-campo:focus{border-color:var(--w-nar-linea);background:var(--w-sup2);
  box-shadow:0 0 0 4px rgba(255,122,0,.09)}
.w-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--w-mut);margin-bottom:8px}
textarea.w-campo{resize:vertical;line-height:1.55;min-height:110px}
select.w-campo{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9691' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:17px;padding-right:44px}

/* ── El pie ──────────────────────────────────────────────────────────────── */
.w-pie{border-top:1px solid var(--w-linea);padding:56px 0 40px;margin-top:20px}
.w-pie a{color:var(--w-mut);font-size:.9rem;transition:.2s}
.w-pie a:hover{color:var(--w-txt)}

/* ── El paso entre páginas: que una se convierta en la otra ──────────────── */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:w-salir .42s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:w-entrar .52s cubic-bezier(0,0,.2,1) both}
  ::view-transition-group(banner){animation-duration:.62s}
  ::view-transition-group(marca){animation-duration:.5s}
}
@keyframes w-salir{to{opacity:0;transform:translateY(-8px) scale(.995)}}
@keyframes w-entrar{from{opacity:0;transform:translateY(12px) scale(.995)}}
.w-vt-banner{view-transition-name:banner}
.w-vt-marca{view-transition-name:marca}

/* ── Movimiento reducido ─────────────────────────────────────────────────────
   Apagar la animación NO alcanza: si el estado inicial de algo es invisible,
   hay que devolverlo a mano. Si no, con esta opción prendida el título no se
   ve — y mucha gente la tiene prendida en el celular.                        */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .w-pal>span{transform:none !important}
  .w-rev{opacity:1 !important;transform:none !important}
  .w-relato .t{color:var(--w-txt) !important}
  .w-relato .t.destacado{color:var(--w-naranja) !important}
  .w-diapo{opacity:0}
  .w-diapo.on{opacity:1}
  .w-diapo.on img{animation:none !important;transform:scale(1.06)}
  .w-halo{animation:none !important}
}