/* =========================================================================
   Reverso Studio — theme.css
   Monocromo absoluto. Negro puro, paneles #1C1C1C / #151515, texto blanco.
   Cero color de acento: todo el color de la página entra por la obra.
   Una sola familia (General Sans, self-hosted) y el display en peso 400.
   Nada con esquina viva. Capa dibujada a mano en tiza blanca.
   Nota de mantenimiento: TODAS las @media viven al final del archivo.
   ========================================================================= */

/* ------------------------------- Fuentes -------------------------------- */
@font-face{
  font-family:"General Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/generalsans-400.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/generalsans-500.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/generalsans-600.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/generalsans-700.woff2") format("woff2");
}

/* ------------------------------- Tokens --------------------------------- */
:root{
  /* El sitio es monocromo oscuro y no tiene modo claro: declararlo acá hace que
     barras de scroll, controles nativos, autofill y el date/color picker salgan
     oscuros en TODO el sitio (antes sólo lo tenía el <select> del wizard). */
  color-scheme:dark;

  /* Superficies */
  --bg:#000;
  --panel:#1C1C1C;
  --panel-2:#151515;
  --panel-hi:#242424;

  /* Tinta */
  --ink:#fff;
  --muted:#9E9E9E;        /* 7.8:1 sobre #000 · 6.3:1 sobre #1C1C1C → AA */
  --placeholder:#8A8A8A;   /* 6.1:1 sobre #000 — el placeholder también es texto */
  --whisper:#292929;       /* sólo decoración aria-hidden (marquee) */
  --rule:#2B2B2B;          /* separadores; NO es un borde */

  /* Único borde del sitio */
  --line:1px solid #fff;

  /* Radios: nada con esquina viva */
  --r-pill:68px;
  --r-card:20px;
  --r-media:14px;
  --r-field:16px;

  /* Movimiento. Curvas del catálogo — valores TEXTUALES.
     entra / sale / se desplaza -> var(--ease-out)
     sólo cambia de color       -> var(--ease-color)  ("ease" nativa)
     movimiento constante       -> linear literal (cinta, sello, shimmer)
     No se declaran acá y se copian TAL CUAL el día que hagan falta:
       morfeo en pantalla -> cubic-bezier(0.77, 0, 0.175, 1)
       panel tipo iOS     -> cubic-bezier(0.32, 0.72, 0, 1) */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-color:ease;
  /* "El día que haga falta" llegó: la grilla del catálogo y la caja del wizard
     se RECOMPONEN en pantalla (una obra que sobrevive al filtro viaja de una
     celda a otra; el paso 4 abre 389px). Eso no es entrar ni salir: es
     morfeo, y el catálogo le asigna esta curva. Valor textual, sin retocar. */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);

  --d-fast:.16s;      /* hover de color, press, controles */
  --d-ui:.24s;        /* estado con desplazamiento + SALIDA del overlay */
  --d-overlay:.32s;   /* ENTRADA del overlay */
  --d-reveal:.6s;     /* aparición al scroll (explicativo, fuera del presupuesto UI a propósito) */
  --d-image:.8s;      /* deriva de la obra: zoom y desaturación */
  --stagger:70ms;
  /* Escalonado de la grilla del catálogo. Los 70ms del reveal son para 3-4
     bloques de página; acá entran hasta 13 obras y 13x70 = 910ms de cola se
     leen como carga lenta, no como escalonado. 40ms está en la banda del
     catálogo (30-80) y con el techo de 8 pasos la cola queda en 320ms. */
  --stagger-grid:40ms;


  /* Tipografía */
  --font:"General Sans","General Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(2.35rem,1.2rem + 4vw,3.5rem);   /* ~56px máx, lh 1.2, w400 */
  --fs-h2:clamp(1.9rem,1.1rem + 2.7vw,2.85rem);
  --fs-h3:clamp(1.35rem,1.05rem + 1vw,2rem);          /* título de ficha ~32px */
  --fs-body:1rem;
  --fs-lead:clamp(1.05rem,1rem + .4vw,1.25rem);
  --fs-micro:.75rem;                                   /* 12px microcaps */

  /* Layout */
  --maxw:1320px;
  --pad:clamp(20px,4vw,52px);
  --gap:clamp(16px,2vw,28px);
  --head-h:clamp(76px,8vw,104px);
}

/* ------------------------------- Reset ---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  overflow-x:clip;                /* NUNCA overflow-x en body: rompe sticky */
  background:var(--bg);
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font);font-weight:400;line-height:1.2;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
::selection{background:#fff;color:#000}

/* Cualquier texto que venga del CMS puede traer palabras kilométricas */
h1,h2,h3,h4,p,li,dd,dt,figcaption,td,th,.rv-prose{overflow-wrap:anywhere}

/* --------------------------- Layout helpers ----------------------------- */
.rv-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.rv-section{padding-block:clamp(64px,9vw,132px)}
.rv-section--tight{padding-block:clamp(44px,6vw,80px)}
.rv-main{min-height:50vh;padding-top:var(--head-h)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rv-skip{
  position:fixed;left:-999px;top:12px;z-index:400;background:#fff;color:#000;
  padding:12px 22px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;
}
.rv-skip:focus{left:16px}

/* Todo hijo de flex/grid puede encoger por debajo de su contenido */
.rv-grid>*,.rv-split>*,.rv-row>*,.rv-card__panel>*{min-width:0}

/* ---------------------------- Tipografía -------------------------------- */
.rv-micro{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.rv-micro--ink{color:var(--ink)}
.rv-display{font-size:var(--fs-display);line-height:1.2;font-weight:400;letter-spacing:0}
.rv-h2{font-size:var(--fs-h2);line-height:1.2;font-weight:400}
.rv-lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.65;max-width:52ch}
.rv-prose p{color:var(--muted);line-height:1.75;margin-bottom:1.15rem;max-width:62ch}
.rv-prose p.lead{color:var(--ink);font-size:var(--fs-lead);line-height:1.6}
.rv-prose a{text-decoration:underline;text-underline-offset:.25em}

/* ---------------------- Capa de tiza (dibujada a mano) ------------------- */
.rv-chalk{position:relative;white-space:nowrap}
.rv-chalk::after{
  content:"";position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:100% 100%;
}
.rv-chalk--under::after{
  left:-2%;width:104%;top:calc(100% - .28em);height:.42em;
  background-image:url("../svg/chalk-underline.svg");
}
.rv-chalk--circle{white-space:nowrap}
/* Una elipse que RODEA una palabra no se resuelve "un poco más grande que la
   caja": para contener un rectángulo de semiejes (w,h) hace falta
   (w/a)² + (h/b)² ≤ 1. Con la tinta real medida (canvas actualBoundingBox) sale
   a ≥ 1,18·w. De ahí el 120% de ancho y los 1,94em de alto, centrados sobre la
   tinta —no sobre la caja de línea, que trae interlineado de más—.
   El ancho va en %, para que acompañe a palabras más largas; el alto en em,
   para que acompañe al cuerpo. El SVG lleva el viewBox ajustado a su trazo. */
.rv-chalk--circle::after{
  left:-10%;width:120%;top:-.24em;height:1.94em;
  background-image:url("../svg/chalk-circle.svg");
}
.rv-chalk-star{
  display:inline-block;width:clamp(30px,3.4vw,46px);aspect-ratio:1;
  background:url("../svg/chalk-asterisk.svg") no-repeat center/contain;
}
.rv-chalk-arrow{
  display:inline-block;width:clamp(52px,5vw,74px);aspect-ratio:96/44;flex:0 0 auto;
  background:url("../svg/chalk-arrow.svg") no-repeat center/contain;
  transition:transform var(--d-fast) var(--ease-out);
}

/* Sello circular de tiza con texto en trayectoria */
.rv-seal{width:clamp(96px,11vw,138px);aspect-ratio:1;position:relative}
.rv-seal svg{width:100%;height:100%;display:block;overflow:visible}
.rv-seal__bg{display:none}          /* por defecto el sello va sin fondo */
.rv-seal__spin{transform-origin:50% 50%;animation:rv-spin 12s linear infinite}
@keyframes rv-spin{to{transform:rotate(360deg)}}

/* ------------------------------ Píldoras -------------------------------- */
.rv-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;padding:1.15em 1.6em;border-radius:var(--r-pill);
  border:var(--line);background:transparent;color:var(--ink);
  /* `opacity` va en la lista porque la píldora tiene estado deshabilitado
     (`:disabled` / `[aria-disabled]` al .4, y el submit del wizard al .55
     mientras envía): sin listarla, ese estado se teletransportaba. */
  transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),opacity var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);white-space:nowrap;
}
.rv-pill:hover,.rv-pill:focus-visible{background:#fff;color:#000}
.rv-pill--solid{background:#fff;color:#000}
.rv-pill--solid:hover,.rv-pill--solid:focus-visible{background:transparent;color:#fff}
.rv-pill--lg{font-size:.8125rem;padding:1.35em 2em;letter-spacing:.12em}
.rv-pill--block{width:100%}
.rv-pill[aria-disabled="true"],.rv-pill:disabled{opacity:.4;pointer-events:none}

/* Chip informativo: sin borde (el único borde del sitio es 1px #fff) */
.rv-chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  line-height:1;padding:.85em 1.1em;border-radius:var(--r-pill);
  background:var(--bg);color:var(--muted);
}
.rv-chip--ink{color:var(--ink)}
.rv-chip--sold{color:var(--muted)}
.rv-chip--sold::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.rv-chip--live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}

/* Enlace con flecha de tiza */
.rv-arrowlink{
  display:inline-flex;align-items:center;gap:.9em;color:var(--ink);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
/* Sin transición propia: en hover no cambia ninguna propiedad suya. Lo que se
   desplaza es la flecha hija (.rv-chalk-arrow), que lleva la suya. */
.rv-arrowlink:hover .rv-chalk-arrow{transform:translateX(8px)}

/* =========================== Cabecera flotante =========================== */
/* Sin barra de nav: tres objetos flotantes + overlay a pantalla completa.   */
.rv-header{
  position:fixed;inset:0 0 auto 0;z-index:210;pointer-events:none;
  padding-top:clamp(14px,1.6vw,22px);
}
.rv-header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rv-header__bar>*{pointer-events:auto}
.rv-header__actions{display:flex;align-items:center;gap:10px;pointer-events:none}
.rv-header__actions>*{pointer-events:auto}

.rv-logo{
  width:clamp(56px,5.6vw,68px);height:clamp(56px,5.6vw,68px);border-radius:50%;
  border:var(--line);background:var(--bg);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:.5625rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.15;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-logo:hover,.rv-logo:focus-visible{background:#fff;color:#000}

.rv-cartbtn{
  width:clamp(48px,4.4vw,56px);height:clamp(48px,4.4vw,56px);border-radius:50%;
  border:var(--line);background:var(--bg);color:var(--ink);position:relative;
  display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-cartbtn svg{width:20px;height:20px}
.rv-cartbtn:hover,.rv-cartbtn:focus-visible{background:#fff;color:#000}
.rv-cartbtn__count{
  position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;
  border-radius:50%;background:#fff;color:#000;font-size:.625rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-cartbtn__count[data-count="0"]{background:var(--bg);color:var(--muted);border:var(--line)}
.rv-cartbtn:hover .rv-cartbtn__count{background:#000;color:#fff}
/* Acuse de recibo de "agregar al carrito". El sitio NO usa AJAX (a propósito:
   `wc-cart-fragments` no está encolado): agregar recarga la página entera y el
   badge simplemente ya decía otro número. Nadie mira la esquina superior en el
   momento en que cambia. theme.js compara el contador contra sessionStorage y
   pone `is-bump` una sola vez cuando cambió de verdad.
   Sin `to` ni fill-mode: termina en el estado natural del badge. Si el JS no
   corre, el badge se ve exactamente igual que hoy. */
@media (prefers-reduced-motion:no-preference){
  .rv-cartbtn__count.is-bump{animation:rv-cart-bump var(--d-ui) var(--ease-out)}
}
@keyframes rv-cart-bump{from{scale:.8}}
/* Variante sin movimiento: ver el bloque de prefers-reduced-motion al final. */
@keyframes rv-cart-bump-flat{from{opacity:.35}}

.rv-menubtn{min-width:112px}
.rv-menubtn__on,.rv-menubtn__off{display:block}
.rv-menubtn__off{display:none}
body.rv-menu-open .rv-menubtn__on{display:none}
body.rv-menu-open .rv-menubtn__off{display:block}
body.rv-menu-open .rv-menubtn{background:#fff;color:#000}

/* --------------------------- Overlay de menú ----------------------------- */
.rv-overlay{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;
  padding:calc(var(--head-h) + 16px) 0 clamp(28px,5vw,56px);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-14px);
  /* LEY: el retardo de `visibility` cerrado vale EXACTAMENTE la duración de
     SALIDA (--d-ui). Si se desfasa, el overlay conserva enlaces focusables
     después de apagarse. Cualquier cambio en la salida se copia acá. */
  transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out),
             visibility 0s linear var(--d-ui);
  overflow-y:auto;overscroll-behavior:contain;
}
body.rv-menu-open .rv-overlay{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity var(--d-overlay) var(--ease-out),transform var(--d-overlay) var(--ease-out),
             visibility 0s;
}
.rv-overlay__inner{
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,72px);
  align-items:start;width:100%;
}
.rv-overlay__nav li+li{margin-top:.1em}
.rv-overlay__nav a{
  display:inline-block;position:relative;font-size:clamp(2rem,1rem + 5vw,4rem);
  line-height:1.22;font-weight:400;padding-block:.06em;
}
.rv-overlay__nav a::after{
  content:"";position:absolute;left:-1%;width:102%;top:calc(100% - .3em);height:.4em;
  background:url("../svg/chalk-underline.svg") no-repeat center/100% 100%;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out);
}
.rv-overlay__nav a:hover::after,.rv-overlay__nav a:focus-visible::after,
.rv-overlay__nav .current-menu-item>a::after,.rv-overlay__nav .current_page_item>a::after{opacity:1;transform:none}
.rv-overlay__aside{display:grid;gap:clamp(20px,3vw,32px);padding-top:.8em}
.rv-overlay__block .k{margin-bottom:.55rem}
.rv-overlay__block .v{color:var(--ink);line-height:1.6}
.rv-overlay__block .v a:hover{text-decoration:underline;text-underline-offset:.25em}
.rv-overlay__cta{margin-top:.4rem}

/* ================================ Hero =================================== */
.rv-hero{padding-block:clamp(24px,4vw,56px) clamp(48px,7vw,96px)}
.rv-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
/* El ancho del titular se mide en su PROPIO cuerpo (em), no en ch del body */
.rv-hero h1{margin:.9rem 0 0;max-width:12em}
.rv-hero__lead{margin-top:clamp(20px,2.4vw,32px)}
.rv-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}
.rv-hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,48px);
  margin-top:clamp(30px,4vw,54px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--rule);
}
.rv-hero__stats .num{display:block;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);line-height:1}
.rv-hero__stats .lbl{display:block;margin-top:.5rem}

.rv-hero__art{position:relative}
.rv-hero__panel{
  background:var(--panel);border-radius:var(--r-card);padding:clamp(14px,1.4vw,20px);
  transition:background-color var(--d-fast) var(--ease-color);
}
.rv-hero__panel:hover{background:var(--panel-hi)}
.rv-hero__media{
  position:relative;border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/5;background:#0b0b0b;
}
/* Asimetría deliberada, mismo principio que el overlay: la obra entra con la
   deriva larga (--d-image) y VUELVE rápido (--d-ui). Con 0.8s en los dos
   sentidos, barrer el ratón por la grilla dejaba tres o cuatro obras
   des-zoomándose detrás del cursor. */
.rv-hero__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-ui) var(--ease-out)}
.rv-hero__panel:hover .rv-hero__media img{transform:scale(1.04);transition:transform var(--d-image) var(--ease-out)}
.rv-hero__cap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:clamp(14px,1.4vw,18px) 6px 4px}
.rv-hero__cap .t{font-size:1.0625rem;line-height:1.25}
/* El sello iba montado a caballo de la esquina del panel: medio anillo caía
   sobre la pintura (blanco sobre naranja = ilegible) y el corte de la esquina
   r20 lo hacía leer como recortado. Ahora entra COMPLETO dentro de la obra,
   como un sello estampado, y lleva disco opaco para ser legible pase lo que
   pase detrás. Los offsets están medidos para que el rect quede contenido en
   el rect de la imagen en todo el barrido. */
.rv-hero__seal{
  position:absolute;z-index:2;
  top:clamp(22px,2.6vw,36px);right:clamp(22px,2.6vw,36px);
}
.rv-hero__seal .rv-seal__bg{display:block}

/* ============================== Marquee ================================== */
.rv-marquee{
  overflow:hidden;padding-block:clamp(18px,2.6vw,34px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  -webkit-user-select:none;user-select:none;
}
.rv-marquee__track{
  display:flex;width:max-content;will-change:transform;
  animation:rv-marquee var(--rv-dur,40s) linear infinite;
}
.rv-marquee__group{display:flex;flex:0 0 auto}
.rv-marquee__item{
  flex:0 0 auto;padding-inline:clamp(18px,2.4vw,34px);
  font-size:clamp(2.4rem,1.4rem + 4vw,5rem);line-height:1.05;font-weight:400;
  color:var(--whisper);letter-spacing:-.01em;white-space:nowrap;
}
@keyframes rv-marquee{to{transform:translateX(-50%)}}

/* ============================= Manifiesto ================================ */
/* Asimetría 50/50 con la mitad izquierda casi vacía. */
.rv-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.rv-split__aside{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.rv-manifest__text{
  font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);line-height:1.28;font-weight:400;color:var(--ink);
}
.rv-manifest__text+.rv-manifest__text{margin-top:1.1em;font-size:var(--fs-lead);color:var(--muted);line-height:1.7}

/* ========================= Cabeceras de sección ========================== */
.rv-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,54px);
}
.rv-sechead__t{max-width:min(100%,660px)}
.rv-sechead__t h2{margin-top:.7rem}
.rv-sechead__t p{color:var(--muted);margin-top:.9rem;max-width:48ch}

/* ============================ Ficha de obra ============================== */
/* Panel #1C1C1C r20 → imagen → título → fila de pills. */
/* auto-fit (no auto-fill): con 3 obras destacadas las columnas vacías se
   colapsan y las tarjetas llenan el ancho en vez de dejar un hueco a la derecha */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.rv-grid>*{display:flex}

.rv-card{position:relative;display:flex;width:100%}
.rv-card__panel{
  display:flex;flex-direction:column;width:100%;
  background:var(--panel);border-radius:var(--r-card);padding:clamp(12px,1.1vw,16px);
  transition:background-color var(--d-fast) var(--ease-color);
}
.rv-card:hover .rv-card__panel{background:var(--panel-hi)}
.rv-card__media{
  position:relative;border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/5;background:#0b0b0b;
}
.rv-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-ui) var(--ease-out),opacity var(--d-ui) var(--ease-out)}
.rv-card:hover .rv-card__media img{transform:scale(1.06);transition:transform var(--d-image) var(--ease-out),opacity var(--d-ui) var(--ease-out)}
.rv-card__state{position:absolute;left:10px;top:10px;z-index:2}
.rv-card__peek{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
.rv-card:hover .rv-card__peek,.rv-card:focus-within .rv-card__peek{opacity:1;transform:none}
.rv-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(14px,1.3vw,18px) 6px 6px}
.rv-card__title{
  font-size:var(--fs-h3);line-height:1.2;letter-spacing:.06em;font-weight:400;
  min-height:2.4em;                     /* fila reservada: hermanos uniformes */
}
.rv-card__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(12px,1.2vw,16px)}
.rv-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:clamp(14px,1.3vw,18px);
}
.rv-card__price{font-size:1.0625rem;line-height:1.2;color:var(--ink)}
.rv-card__price del{color:var(--muted);opacity:.7;margin-right:.4em;font-size:.85em}
.rv-card__price ins{text-decoration:none}
.rv-card__link{position:absolute;inset:0;z-index:3;border-radius:var(--r-card)}
.rv-card__link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.rv-card.is-sold .rv-card__media img{opacity:.55}
.rv-card.is-sold .rv-card__price{color:var(--muted)}

/* ============================== Carrusel ================================= */
.rv-carousel{position:relative}
.rv-carousel__viewport{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.rv-carousel__viewport::-webkit-scrollbar{display:none}
.rv-carousel__track{display:flex;gap:var(--gap);width:max-content;padding-right:var(--pad)}
.rv-carousel__slide{flex:0 0 clamp(240px,26vw,330px);scroll-snap-align:start;display:flex}
.rv-carousel.is-dragging{cursor:none}
.rv-carousel.is-dragging .rv-carousel__viewport{scroll-snap-type:none}
.rv-carousel.is-dragging .rv-card__link{pointer-events:none}
.rv-carousel__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px)}
.rv-carousel__hint{color:var(--muted)}

/* Cursor circular de 140px, sólo sobre el carrusel */
.rv-cursor{
  position:fixed;top:0;left:0;z-index:300;width:140px;height:140px;border-radius:50%;
  border:var(--line);background:rgba(0,0,0,.28);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  /* scale(.4) hacía que el círculo apareciera casi de la nada: nada en el
     mundo real surge de un punto. .92 es una entrada, no una aparición. */
  opacity:0;transform:translate(-50%,-50%) scale(.92);
  /* La posición la escribe el JS en la propiedad `translate`, que se compone
     ANTES que `transform` y por eso no se pelea con el centrado ni la escala.
     ⚠️ `translate` NO entra en esta lista y no debe entrar nunca: si entra,
     el círculo persigue al puntero con --d-ui de retraso en vez de seguirlo. */
  transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
.rv-cursor.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.rv-cursor-hidden .rv-carousel__viewport,
body.rv-cursor-hidden .rv-carousel__viewport *{cursor:none}

/* ============================ Acuerdo (3 puntos) ========================= */
.rv-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rv-term{
  background:var(--panel-2);border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:.9rem;transition:background-color var(--d-fast) var(--ease-color);
}
.rv-term:hover{background:var(--panel)}
.rv-term__n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;color:var(--muted)}
.rv-term h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.25;font-weight:400}
.rv-term p{color:var(--muted);font-size:.9375rem;line-height:1.65}

/* ============================ Bloque de cierre =========================== */
.rv-closing{background:var(--panel-2)}
.rv-closing__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.rv-closing__left{display:flex;justify-content:center}
.rv-closing__left .rv-seal{width:clamp(140px,17vw,230px)}
.rv-closing h2{margin:.9rem 0 0}
.rv-closing__meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);
  margin-top:clamp(24px,3vw,36px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--rule);
}
.rv-closing__meta .v{margin-top:.45rem;line-height:1.55}
.rv-closing__cta{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:12px}

/* ============================ Tienda / filtros =========================== */
/* La cabecera del catálogo es la portada de esta página: no hay hero detrás.
   Lleva la misma anatomía que el hero de la home —microcaps, titular en
   --fs-display con UNA marca de tiza, bajada en .rv-lead— y cierra con la
   misma regla de 1px que el sitio usa para separar un bloque de meta
   (.rv-hero__stats, .rv-closing__meta). Esa línea es la que convierte a la
   grilla en una pared: arriba la ficha de sala, abajo la obra colgada. */
.rv-shophead{
  padding-block:clamp(30px,4vw,56px) clamp(26px,3.2vw,44px);
  border-bottom:1px solid var(--rule);
}
.rv-shophead h1{margin:.9rem 0 0;max-width:12em}
.rv-shophead p{color:var(--muted);margin-top:1rem;max-width:52ch}
/* Aire antes de la pared: 40px dejaban la grilla pegada a los filtros y el
   catálogo entraba como una lista, no como una sección. */
.rv-hang-section{padding-top:clamp(40px,6vw,88px)}
.rv-filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:clamp(26px,3vw,42px);
}
/* Son <a href="?serie=…">: sin JS filtran en servidor, con JS el JS intercepta.
   Un <a> es inline, así que el padding necesita un display explícito. */
.rv-filter{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:1.05em 1.5em;border-radius:var(--r-pill);border:var(--line);background:transparent;color:var(--ink);
  transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);white-space:nowrap;
}
.rv-filter:hover,.rv-filter:focus-visible{background:#fff;color:#000}
.rv-filter.is-active,.rv-filter[aria-current]{background:#fff;color:#000}
.rv-filter .c{opacity:.55;margin-left:.5em}
.rv-shopcount{margin-left:auto;color:var(--muted);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* Grilla nativa de Woo → nuestra grilla */
.woocommerce ul.products,.woocommerce-page ul.products,ul.products{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap);
  margin:0;padding:0;list-style:none;width:auto;
}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,ul.products li.product,
.woocommerce ul.products li.product.first,.woocommerce ul.products li.product.last{
  width:auto!important;float:none!important;margin:0!important;padding:0!important;list-style:none;clear:none!important;display:flex;
}
li.product{margin:0;padding:0;list-style:none}
/* Ocultar una obra al filtrar. La regla de arriba pone `display:flex` con
   `.woocommerce ul.products li.product` (0,3,2): un `li.product.is-hidden`
   (0,2,1) PIERDE aunque venga después. Hay que igualar la especificidad y
   además declararlo DESPUÉS. Verificado con getComputedStyle, no a ojo. */
.woocommerce ul.products li.product.is-hidden,
.woocommerce-page ul.products li.product.is-hidden,
ul.products li.product.is-hidden,
li.product.is-hidden{display:none}

/* --- Transición del filtro (la coreografía la lleva theme.js) ------------
   Antes de esto, pasar de "Todas" a "Retratos" mandaba 13 obras a 3 y el alto
   del documento de 4110 a 2118 px EN UN FRAME: el pie subía 1992px de golpe.
   Tres piezas, y el JS sólo pone/quita clases y la altura:
     1. `is-leaving`  — la obra que deja de coincidir se apaga ANTES de que la
        grilla se recomponga (si no, desaparece de un frame al otro).
     2. `is-entering` — la que aparece arranca apagada y el JS la suelta
        escalonada (`transition-delay` inline).
     3. el `transform` del FLIP, que el JS escribe inline sobre las obras que
        SOBREVIVEN al filtro para que se deslicen a su nueva celda.
   El reparto de propiedades no es cosmético: el FLIP se queda con `transform`,
   así que la entrada y la salida van en `scale`, que COMPONE en vez de pelear.
   `overflow:clip` sólo mientras dura: la altura de la grilla se anima y el
   contenido puede rebasarla un instante al crecer. El JS quita el atributo al
   terminar, con lo que el estado en reposo queda idéntico al de antes. */
ul.products li.product.is-leaving,
ul.products li.product.is-entering{opacity:0;scale:.97}
@media (prefers-reduced-motion:no-preference){
  ul.products[data-rv-filtering]{
    transition:height var(--d-ui) var(--ease-in-out);
    overflow:clip;
  }
  ul.products[data-rv-filtering] li.product{
    transition:opacity var(--d-fast) var(--ease-out),
               scale var(--d-fast) var(--ease-out),
               transform var(--d-ui) var(--ease-in-out);
    will-change:opacity,scale,transform;
  }
}
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after,
ul.products::before,ul.products::after{display:none!important;content:none!important}
.woocommerce ul.products li.product a img{margin:0}

/* ------------------------- La pared (.rv-hang) ---------------------------
   El catálogo colgaba las 13 obras en 13 tarjetas de 283x632 px exactas: una
   galería no cuelga así. Ahora la maqueta la dicta la FICHA de cada obra
   (`_reverso_dimensiones`, ANCHO x ALTO — la convención está verificada
   contra las fotos, ver content-product.php):
     · la caja toma la PROPORCIÓN REAL de la pieza (`--obra-ar`), así que una
       vertical se ve vertical y una apaisada, apaisada;
     · las apaisadas de un metro o más de ancho se llevan DOBLE columna
       (`.is-wide`, más abajo en @media): en una pared lo que una obra ancha
       pide es ancho.
   `align-items:center` es la LÍNEA DE CENTRO de la sala: una galería cuelga
   piezas de distinto tamaño alineadas por su eje horizontal, no por el borde
   de arriba. Es además lo que hace que las alturas sean distintas de verdad
   —con el `stretch` por defecto la fila estira cada tarjeta hasta la más alta
   y el aire sobrante aparece DENTRO de la tarjeta, entre las pills y el
   precio— sin el efecto de `start`, que deja todo el sobrante colgando abajo
   y se lee como si las tarjetas cortas se hubieran caído hacia arriba.
   Regla dura: nada de esto puede depender de la POSICIÓN del item
   (`:nth-child`) ni del filtro activo. El FLIP del filtro mide posiciones y
   las anima con `transform`, pero NO anima tamaños: si el tamaño de una obra
   cambiara al filtrar, saltaría de golpe en medio del deslizamiento. Cada
   obra trae su tamaño puesto y al filtrar sólo cambia dónde cae. */
.rv-hang{align-items:center}
.rv-hang .rv-card__media{aspect-ratio:var(--obra-ar,4/5)}
/* Woo pisa el título de la tarjeta con `.woocommerce ul.products li.product h3`
   (0,3,3): lo dejaba en font-size:1em con padding .5em, así que la misma
   tarjeta se veía distinta en la home y en el catálogo. Hay que igualar la
   especificidad, no bajarla. */
.woocommerce ul.products li.product h3.rv-card__title,
.woocommerce-page ul.products li.product h3.rv-card__title,
ul.products li.product h3.rv-card__title{
  font-size:var(--fs-h3);line-height:1.2;letter-spacing:.06em;font-weight:400;
  min-height:2.4em;padding:0;margin:0;
}

/* ============================ Estado vacío =============================== */
.rv-empty{
  background:var(--panel-2);border-radius:var(--r-card);
  padding:clamp(38px,6vw,80px) clamp(24px,4vw,56px);
  display:grid;justify-items:start;gap:1rem;max-width:56ch;
}
.rv-empty h2{font-size:var(--fs-h2)}
.rv-empty p{color:var(--muted);max-width:44ch}
.rv-empty .rv-pill{margin-top:.8rem}

/* ============================== Skeleton ================================= */
.rv-skel{position:relative;overflow:hidden;background:var(--panel-hi);border-radius:var(--r-media)}
.rv-skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:rv-shimmer 1.5s infinite;
}
@keyframes rv-shimmer{100%{transform:translateX(100%)}}
.rv-skel-card{background:var(--panel);border-radius:var(--r-card);padding:14px;width:100%}
.rv-skel-card .rv-skel-media{aspect-ratio:4/5}
.rv-skel-card .rv-skel-line{height:14px;margin-top:16px;width:70%;border-radius:var(--r-pill)}
.rv-skel-card .rv-skel-line.sm{width:42%;margin-top:10px}

/* ========================= Ficha de obra (single) ======================== */
.rv-single{padding-block:clamp(16px,2.5vw,34px) clamp(56px,8vw,110px)}
.woocommerce-breadcrumb,.rv-crumbs{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(22px,3vw,36px);
}
.woocommerce-breadcrumb a{color:var(--muted);transition:color var(--d-fast) var(--ease-color)}
.woocommerce-breadcrumb a:hover{color:var(--ink)}

.single-product div.product{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
/* OJO 1: Woo declara `.woocommerce div.product div.images.woocommerce-product-gallery
   {position:relative}` (0,4,2) y gana por especificidad a cualquier selector más
   corto; sin !important el `top` se aplicaba sobre ese `relative` y empujaba la
   galería 116px hacia abajo.
   OJO 2: NO usar position:sticky acá. Medido en Chrome: el ítem de grid no queda
   acotado a su celda y se monta encima de las pestañas y de "otras obras de la
   serie" (que ocupan 1/-1 en las filas siguientes). */
.woocommerce div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery{
  opacity:1!important;float:none!important;width:100%!important;max-width:100%!important;
  margin:0!important;position:relative;
  background:var(--panel);border-radius:var(--r-card);padding:clamp(12px,1.2vw,18px);
}
.single-product div.product .woocommerce-product-gallery__wrapper{transform:none!important;margin:0;width:100%!important}
.single-product div.product .flex-viewport{width:100%;border-radius:var(--r-media);overflow:hidden;background:#0b0b0b}
.single-product div.product .woocommerce-product-gallery__image{border-radius:var(--r-media);overflow:hidden;width:100%!important}
.single-product div.product .woocommerce-product-gallery__image img{width:100%!important;aspect-ratio:4/5;object-fit:cover;display:block}
.single-product div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:not(:first-child){display:none}
.single-product div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper{border-radius:var(--r-media);overflow:hidden;background:#0b0b0b}
.single-product div.product .flex-control-thumbs{display:flex;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.single-product div.product .flex-control-thumbs li{width:68px;margin:0;list-style:none}
.single-product div.product .flex-control-thumbs img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;opacity:.5;cursor:pointer;
  transition:opacity var(--d-fast) var(--ease-color);
}
.single-product div.product .flex-control-thumbs img:hover,
.single-product div.product .flex-control-thumbs img.flex-active{opacity:1}
.woocommerce div.product .woocommerce-product-gallery__trigger{display:none}
.single-product div.product .summary.entry-summary{margin:0;float:none;width:auto}
.single-product div.product .rv-relacionadas{grid-column:1 / -1}

.rv-badge-unica{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--ink);margin-bottom:1.1rem;
}
.rv-badge-unica::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.summary .rv-summary__serie,.rv-summary__serie{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem;
}
.woocommerce div.product .product_title,.summary .product_title{
  font-size:clamp(2rem,1.3rem + 2.4vw,3rem);line-height:1.2;font-weight:400;letter-spacing:.02em;margin:0 0 1.1rem;
}
.woocommerce div.product p.price,.woocommerce div.product span.price,.summary .price{
  font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);line-height:1.2;color:var(--ink);margin:0 0 1.4rem;display:block;font-weight:400;
}
.summary .price del{color:var(--muted);font-size:.7em;margin-right:.5em;opacity:.7}
.summary .price ins{text-decoration:none}
.woocommerce div.product p.stock{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.9em 1.2em;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:.5em;
  margin:0 0 1.2rem;background:var(--panel);
}
.woocommerce div.product p.stock.in-stock{color:var(--ink)}
.woocommerce div.product p.stock.out-of-stock{color:var(--muted)}
.woocommerce div.product p.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.summary .woocommerce-product-details__short-description{color:var(--muted);line-height:1.75;margin:1.4rem 0}
.summary .woocommerce-product-details__short-description p{margin-bottom:1rem}

/* Ficha técnica → fila de pills (mismo lenguaje que la tarjeta) */
.rv-ficha{display:flex;flex-wrap:wrap;gap:8px;margin:1.5rem 0 0}
.rv-ficha__pill{
  display:inline-flex;align-items:baseline;gap:.6em;
  padding:.9em 1.2em;border-radius:var(--r-pill);background:var(--panel);
  font-size:var(--fs-micro);line-height:1.2;transition:background-color var(--d-fast) var(--ease-color);
}
.rv-ficha__pill .k{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rv-ficha__pill .v{font-weight:500;letter-spacing:.04em;color:var(--ink)}
.rv-ficha__pill a{color:var(--ink)}
.rv-ficha__pill:hover{background:var(--panel-hi)}

.summary form.cart{margin:1.8rem 0 0}
.summary form.cart .quantity{display:none}
.woocommerce div.product form.cart .button,
.summary form.cart .button,.summary .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:#fff;color:#000;border:var(--line);border-radius:var(--r-pill);
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:1.45em 2em;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),border-color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);
}
.woocommerce div.product form.cart .button:hover,
.summary form.cart .button:hover,.summary .single_add_to_cart_button:hover{background:transparent;color:#fff}

.rv-assurance{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:grid;gap:12px}
.rv-assurance li{display:flex;gap:12px;align-items:center;font-size:.9375rem;color:var(--muted)}
.rv-assurance svg{width:16px;height:16px;color:var(--ink);flex:0 0 auto}

.woocommerce div.product .product_meta{
  margin-top:1.6rem;font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:grid;gap:.5rem;
}
.woocommerce div.product .product_meta a{color:var(--ink)}

/* CTA "Consultar por esta obra" — píldora secundaria: el sólido es "Agregar
   al carrito". En una obra VENDIDA no hay carrito, así que ahí pasa a sólida
   (es el único camino posible). */
.rv-consultar-obra{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  width:100%;margin-top:clamp(18px,2.2vw,26px);text-align:center;
  border:var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:1.45em 2em;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);
}
.rv-consultar-obra:hover,.rv-consultar-obra:focus-visible{background:#fff;color:#000}
.single-product div.product.is-sold .rv-consultar-obra{background:#fff;color:#000}
.single-product div.product.is-sold .rv-consultar-obra:hover,
.single-product div.product.is-sold .rv-consultar-obra:focus-visible{background:transparent;color:#fff}

/* ==================== Navegación anterior / siguiente ==================== */
/* Circular dentro de la serie. Vive dentro del grid de `div.product`, así que
   necesita las dos columnas enteras (igual que .rv-relacionadas). */
.rv-obra-nav{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3.6vw,44px);
  border-top:1px solid var(--rule);
}
.rv-obra-nav__link{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);min-width:0;
  background:var(--panel);border-radius:var(--r-card);padding:clamp(12px,1.2vw,16px);
  transition:background-color var(--d-fast) var(--ease-color);
}
.rv-obra-nav__link:hover{background:var(--panel-hi)}
/* Si sólo existe "siguiente", va igual a la derecha: la posición comunica
   la dirección tanto como la flecha. */
.rv-obra-nav__link--next{grid-column:2;justify-content:flex-end}
.rv-obra-nav__thumb{
  flex:0 0 auto;width:clamp(62px,7vw,84px);display:block;
  border-radius:var(--r-media);overflow:hidden;background:#0b0b0b;
}
.rv-obra-nav__thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.rv-obra-nav__meta{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.rv-obra-nav__link--next .rv-obra-nav__meta{align-items:flex-end;text-align:right}
.rv-obra-nav__label{
  display:flex;align-items:center;gap:.7em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
/* La flecha de tiza va como caja propia dentro del flex: nunca encima del texto. */
.rv-obra-nav__label::before{
  content:"";flex:0 0 auto;width:clamp(26px,2.6vw,34px);aspect-ratio:96/44;
  background:url("../svg/chalk-arrow.svg") no-repeat center/contain;
  transition:transform var(--d-fast) var(--ease-out);
}
.rv-obra-nav__link--prev .rv-obra-nav__label::before{transform:scaleX(-1)}
.rv-obra-nav__link--next .rv-obra-nav__label{flex-direction:row-reverse}
.rv-obra-nav__link--prev:hover .rv-obra-nav__label::before{transform:scaleX(-1) translateX(6px)}
.rv-obra-nav__link--next:hover .rv-obra-nav__label::before{transform:translateX(6px)}
.rv-obra-nav__title{
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.25;letter-spacing:.04em;
  overflow-wrap:anywhere;
}

/* Pestañas Woo */
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:clamp(36px,5vw,64px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,2.4vw,30px);padding:0;list-style:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none;content:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:var(--line);border-radius:var(--r-pill);margin:0;padding:0;
  transition:background-color var(--d-fast) var(--ease-color);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:1.05em 1.6em;font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#000}
.woocommerce div.product .woocommerce-tabs .panel{
  background:var(--panel-2);border-radius:var(--r-card);padding:clamp(22px,3vw,40px);margin:0;color:var(--muted);
}
.woocommerce div.product .woocommerce-tabs .panel h2{color:var(--ink);font-size:var(--fs-h3);margin-bottom:1rem}
.woocommerce div.product .woocommerce-tabs .panel p{margin-bottom:1rem;max-width:70ch}

/* Relacionadas */
.rv-relacionadas{margin-top:clamp(56px,8vw,104px);padding-top:clamp(36px,5vw,64px);border-top:1px solid var(--rule)}
.rv-relacionadas__titulo,.rv-relacionadas h2{font-size:var(--fs-h2);font-weight:400;margin-bottom:clamp(24px,3vw,40px)}
.rv-relacionadas__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap)}
.rv-relacionadas__item{position:relative;list-style:none;display:flex}
.rv-relacionadas__link{
  display:flex;flex-direction:column;width:100%;background:var(--panel);
  border-radius:var(--r-card);padding:12px;transition:background-color var(--d-fast) var(--ease-color);
}
.rv-relacionadas__link:hover{background:var(--panel-hi)}
.rv-relacionadas__img{
  aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:var(--r-media);background:#0b0b0b;
}
.rv-relacionadas__nombre{
  display:block;font-size:1.0625rem;line-height:1.25;letter-spacing:.04em;margin:.9rem 4px .5rem;
}
.rv-relacionadas__precio{font-size:var(--fs-micro);letter-spacing:.06em;color:var(--muted);margin:0 4px .3rem}
.rv-relacionadas__vendida{font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 4px .3rem}
.rv-relacionadas__item.is-sold .rv-relacionadas__img{opacity:.55}

/* ================================ 404 ==================================== */
.rv-404{padding-block:clamp(60px,10vw,140px)}
/* `.rv-404 p` (0,1,1) le gana a `.rv-404__code` (0,1,0): hay que subir el selector */
.rv-404 .rv-404__code{
  font-size:clamp(5rem,3rem + 14vw,13rem);line-height:.92;font-weight:400;letter-spacing:-.02em;color:var(--whisper);
}
.rv-404 h1{margin:1.2rem 0 0;max-width:12em}
.rv-404 p{color:var(--muted);max-width:46ch;margin-top:1.2rem}
.rv-404__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}

/* ============================ Sobre el estudio =========================== */
.rv-about__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.rv-about__hero h1{margin:.9rem 0 1.4rem}
.rv-about__media{background:var(--panel);border-radius:var(--r-card);padding:clamp(12px,1.2vw,18px)}
.rv-about__media .im{border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/5;background:#0b0b0b}
.rv-about__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter var(--d-image) var(--ease-out)}
.rv-about__media:hover img{filter:grayscale(0) contrast(1)}
.rv-about__cap{padding:clamp(12px,1.2vw,16px) 6px 4px}
.rv-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(44px,6vw,84px)}
.rv-value{background:var(--panel-2);border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px);display:grid;gap:.85rem;transition:background-color var(--d-fast) var(--ease-color)}
.rv-value:hover{background:var(--panel)}
.rv-value h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);font-weight:400;line-height:1.25}
.rv-value p{color:var(--muted);font-size:.9375rem;line-height:1.65}

/* ============================== Contacto ================================= */
.rv-contact{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:start}
.rv-contact__aside h1{margin:.9rem 0 1.2rem}
.rv-contact__info{display:grid;gap:1.4rem;margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.rv-contact__info .v{color:var(--ink);margin-top:.4rem;line-height:1.6}
.rv-contact__info .v a:hover{text-decoration:underline;text-underline-offset:.25em}

.rv-form{background:var(--panel);border-radius:var(--r-card);padding:clamp(24px,3vw,44px)}
.rv-field{margin-bottom:1.2rem}
.rv-field label{
  display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;
}
.rv-field input,.rv-field textarea{
  width:100%;font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--rule);border-radius:var(--r-field);padding:1em 1.2em;
  /* `all` haría que el contorno de foco también se animara: el indicador
     aparecería en 400ms en vez de al instante. Se listan las propiedades. */
  transition:border-color var(--d-fast) var(--ease-color),background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-field input::placeholder,.rv-field textarea::placeholder{color:var(--placeholder)}
/* Un único indicador de foco en todo el sitio: contorno de 2px con separación.
   El borde blanco queda como señal secundaria. */
.rv-field input:focus,.rv-field textarea:focus{border-color:#fff}
.rv-field input:focus-visible,.rv-field textarea:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rv-field textarea{min-height:150px;resize:vertical}
.rv-form .rv-pill{margin-top:.4rem}
.rv-form__note{font-size:.8125rem;color:var(--muted);margin-top:1rem}
.rv-alert{
  background:var(--bg);border-radius:var(--r-field);padding:1.1em 1.3em;margin-bottom:1.5rem;
  color:var(--ink);font-size:.9375rem;border-left:3px solid #fff;
}
.rv-alert--error{color:var(--muted);border-left-color:var(--muted)}

/* ========================= Wizard de consulta ============================ */
/* El marcado nace SIN JS como un formulario largo con los 4 bloques visibles
   y un solo submit (fallback por admin_post). Por eso NADA de lo que oculta
   pasos vive acá: todo eso cuelga de `.is-wizard`, clase que agrega el JS
   recién cuando toma el control. */

/* Honeypot anti-spam. Fuera de pantalla, JAMÁS display:none (los bots lo
   detectan y saltean el campo). El input ya trae tabindex="-1" y el bloque
   aria-hidden, así que no está en el orden de tabulación ni se anuncia. */
.rv-field.rv-field--hp{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;margin:0;padding:0;
}

.rv-wizard-wrap{position:relative}

/* Progreso. Sin JS es un índice de los 4 bloques; con JS pasa a barra de pasos. */
.rv-wizard__progress{
  display:flex;flex-wrap:wrap;gap:10px 22px;counter-reset:rvstep;
  margin:0 0 clamp(24px,3vw,34px);padding:0 0 clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--rule);
}
.rv-wizard__progress li{
  counter-increment:rvstep;display:flex;align-items:baseline;gap:.6em;min-width:0;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color var(--d-fast) var(--ease-color),border-color var(--d-fast) var(--ease-color);
}
.rv-wizard__progress li::before{content:"0" counter(rvstep);color:var(--ink);flex:0 0 auto}

/* Estado textual del paso (lo inyecta el JS con aria-live). */
.rv-wizard__status{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem;
}
/* El nombre del paso ya está en la barra de progreso: en pantallas donde esa
   barra se lee, el texto queda sólo para el lector de pantalla. Debajo de
   640px la barra pierde sus etiquetas y este es el único indicador legible. */
.rv-wizard__status-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Los <fieldset> pierden el borde y el legend de 2005. En grid, el legend
   participa como un ítem más y acepta márgenes (el legend en flujo normal
   los ignora en varios navegadores). */
.rv-wizard__step{
  border:0;margin:0;padding:0;min-width:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:12px;align-content:start;
}
.rv-wizard__step>*{grid-column:1 / -1;min-width:0}
.rv-wizard__step+.rv-wizard__step{
  margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(24px,3.2vw,38px);
  border-top:1px solid var(--rule);
}
.rv-wizard__legend{
  padding:0;margin:0 0 clamp(16px,2vw,22px);
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.25;font-weight:400;
  letter-spacing:.01em;color:var(--ink);
}

/* Opciones grandes: el radio nativo sigue en el flujo (navegación con flechas
   intacta), la caja es el label. */
.rv-wizard__radio-group{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
  margin-bottom:.2rem;
}
.rv-wizard__radio{
  display:flex;align-items:center;gap:.85em;cursor:pointer;min-width:0;
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-field);
  padding:1.15em 1.3em;color:var(--ink);font-size:1rem;line-height:1.35;
  transition:border-color var(--d-fast) var(--ease-color),background-color var(--d-fast) var(--ease-color);
}
.rv-wizard__radio span{min-width:0;overflow-wrap:anywhere}
.rv-wizard__radio:hover{border-color:var(--muted)}
.rv-wizard__radio:has(input:checked){border-color:#fff;background:var(--panel-hi)}
.rv-wizard__radio:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}

/* Obra de origen (?rv_obra=ID) */
.rv-wizard__obra-ref{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em .7em;
  background:var(--bg);border-radius:var(--r-field);padding:1em 1.2em;
  margin:0 0 clamp(16px,2vw,22px);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.rv-wizard__obra-ref strong{
  font-size:1.0625rem;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ink);
  overflow-wrap:anywhere;
}

/* El <select> nativo no existía en el sistema: mismo tratamiento que el input. */
.rv-field select{
  width:100%;font-size:1rem;color:var(--ink);background-color:var(--bg);color-scheme:dark;
  border:1px solid var(--rule);border-radius:var(--r-field);
  padding:1em 3.2em 1em 1.2em;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.25em center;background-size:12px 8px;
  transition:border-color var(--d-fast) var(--ease-color),background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-field select:hover{border-color:var(--muted)}
.rv-field select:focus{border-color:#fff}
.rv-field select:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Error de campo. Cero color de acento: el error se marca con el borde blanco,
   un punto y el texto en tinta plena contra el resto en gris. */
.rv-field__error{
  display:flex;align-items:flex-start;gap:.55em;
  margin-top:.6rem;font-size:.8125rem;line-height:1.5;color:var(--ink);
}
.rv-field__error::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#fff;margin-top:.5em;
}
.rv-field.has-error input,.rv-field.has-error textarea,.rv-field.has-error select{border-color:#fff}
.rv-field.has-error label{color:var(--ink)}
.rv-wizard__radio-group.has-error .rv-wizard__radio{border-color:#fff}

/* Botones de paso */
.rv-wizard__nav{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:1.25em 1.9em;border-radius:var(--r-pill);border:var(--line);
  background:transparent;color:var(--ink);white-space:nowrap;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);
}
/* Los botones de paso nacen con el atributo `hidden` y sólo el JS los muestra.
   El `display:none` del navegador para [hidden] es de especificidad 0: una
   regla de autor con clase le gana, y sin JS aparecían tres "Siguiente"
   inertes en el formulario largo. Hay que devolverle la prioridad. */
.rv-wizard__nav[hidden]{display:none}
.rv-wizard__nav:hover,.rv-wizard__nav:focus-visible{background:#fff;color:#000}
.rv-wizard__nav--next{background:#fff;color:#000}
.rv-wizard__nav--next:hover,.rv-wizard__nav--next:focus-visible{background:transparent;color:#fff}

/* Estado de éxito (lo pinta el JS al recibir success) */
.rv-wizard__done{
  background:var(--panel);border-radius:var(--r-card);padding:clamp(28px,3.4vw,48px);
  display:grid;justify-items:start;gap:1rem;
}
.rv-wizard__done h2{font-size:var(--fs-h2);font-weight:400;line-height:1.2}
.rv-wizard__done p{color:var(--muted);max-width:44ch;line-height:1.7}
.rv-wizard__done .rv-pill{margin-top:.6rem}

/* Llegar acá es el momento más raro y más emocional del sitio: se atravesaron
   cuatro pasos. Antes el formulario se apagaba y el bloque aparecía en el
   MISMO frame, sin gastar un miligramo del presupuesto de delight que le toca
   por ser un evento único (catálogo §1: "rare / first-time -> can add delight").
   Fundido de salida del form, entrada del bloque, y el asterisco de tiza —el
   único gesto dibujado a mano del sistema— entra 80ms después para que se lea
   como firma y no como parte del bloque.
   `backwards` y NO `both`: el primer keyframe se aplica durante el retardo
   (sin eso el asterisco se ve 80ms y recién entonces parpadea a opacity 0),
   pero al terminar no queda transform establecido — que es lo que rompe
   `position:sticky` en cualquier ancestro. */
@media (prefers-reduced-motion:no-preference){
  .rv-wizard.is-leaving{opacity:0;transition:opacity var(--d-fast) var(--ease-out)}
  .rv-wizard__done{animation:rv-done-in var(--d-overlay) var(--ease-out) backwards}
  .rv-wizard__done .rv-chalk-star{animation:rv-star-in var(--d-ui) var(--ease-out) 80ms backwards}
}
/* Sin `to`: la animación termina en el estado natural del elemento. Si el
   navegador la interrumpe, nada queda en opacity:0. */
@keyframes rv-done-in{from{opacity:0;transform:translateY(12px)}}
@keyframes rv-star-in{from{opacity:0;scale:.9}}

/* --------- Modo wizard: un paso por vez (sólo con el JS al mando) --------- */
.rv-wizard.is-wizard .rv-wizard__step{display:none}
.rv-wizard.is-wizard .rv-wizard__step.is-active{display:grid}
.rv-wizard.is-wizard .rv-wizard__step+.rv-wizard__step{margin-top:0;padding-top:0;border-top:0}
.rv-wizard.is-wizard .rv-wizard__step:focus{outline:none}

/* Amortigua el salto de alto entre un paso corto y uno largo (medidos con el
   contenido real: 190 / 333 / 228 / 648 px). Sin aspect-ratio a la vista, acá
   min-height no empuja el ancho de nadie. */
.rv-wizard.is-wizard .rv-wizard__step{min-height:clamp(210px,22vw,260px)}

.rv-wizard.is-wizard .rv-wizard__progress{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  border-bottom:0;padding-bottom:0;margin-bottom:clamp(24px,3vw,34px);
}
.rv-wizard.is-wizard .rv-wizard__progress li{
  display:block;border-top:2px solid var(--rule);padding-top:.85em;
  font-size:.6875rem;letter-spacing:.08em;overflow-wrap:anywhere;
}
.rv-wizard.is-wizard .rv-wizard__progress li::before{content:none}
.rv-wizard.is-wizard .rv-wizard__progress li.is-done{border-top-color:var(--muted)}
.rv-wizard.is-wizard .rv-wizard__progress li[aria-current="step"]{border-top-color:#fff;color:var(--ink)}

.rv-wizard.is-wizard .rv-wizard__nav--prev{
  grid-column:1;justify-self:start;margin-top:clamp(20px,2.4vw,28px);
}
.rv-wizard.is-wizard .rv-wizard__nav--next,
.rv-wizard.is-wizard .rv-wizard__step [type="submit"]{
  grid-column:2;justify-self:end;width:auto;margin-top:clamp(20px,2.4vw,28px);
}
/* Paso 1: no hay "Atrás", el "Siguiente" queda solo a la derecha. */
.rv-wizard.is-wizard .rv-wizard__step [type="submit"][aria-busy="true"]{opacity:.55;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .rv-wizard.is-wizard .rv-wizard__step.is-active{animation:rv-step-in var(--d-ui) var(--ease-out)}
  /* El `min-height` de arriba amortigua los pasos cortos entre sí, pero el
     salto 3->4 (443 -> 831 px) queda entero: la caja crecía 388px en un frame
     mientras `keepInView()` deslizaba la página, y las dos cosas se peleaban.
     El JS fija la altura de partida, escribe la de destino y esta transición
     hace el resto; `keepInView()` se dispara recién al terminar.
     `overflow:clip` porque al ABRIR el contenido del paso nuevo ya mide lo
     final mientras la caja todavía no: sin esto rebasa sobre el pie. El JS
     quita el atributo al terminar y el reposo queda como antes.
     OJO al auditar: mientras el atributo está puesto, `ipAudit()` reporta este
     form como recortado. Es correcto que lo reporte (la caja SÍ recorta esos
     240ms) y hay dos cosas dentro que lo disparan: el rebase vertical, que es
     el efecto buscado, y el honeypot offscreen, que ya vivía a -9999px. En
     reposo el barrido da 0 en las 65 combinaciones. */
  .rv-wizard.is-wizard[data-rv-sizing]{
    transition:height var(--d-ui) var(--ease-in-out);
    overflow:clip;
  }
}
/* La animación termina en el estado natural: sin fill-mode, nada queda en
   opacity:0 si el navegador la interrumpe. */
@keyframes rv-step-in{from{opacity:0;transform:translateY(10px)}}

/* ================================ Pie ==================================== */
.rv-footer{background:var(--bg);padding-top:clamp(56px,8vw,110px)}
.rv-footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(26px,3.6vw,56px);
  padding-bottom:clamp(40px,5vw,70px);
}
.rv-footer__brand p{color:var(--muted);max-width:34ch;font-size:.9375rem;line-height:1.7;margin-top:1.1rem}
.rv-footer h4{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.2rem;
}
.rv-footer__col ul{display:grid;gap:.8rem}
.rv-footer__col a{font-size:.9375rem;transition:color var(--d-fast) var(--ease-color)}
.rv-footer__col a:hover{color:var(--muted)}
.rv-footer__contact p{font-size:.9375rem;line-height:1.75;color:var(--muted)}
.rv-footer__contact a:hover{color:var(--ink)}
.rv-social{display:flex;gap:10px;margin-top:1.4rem}
.rv-social a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:var(--line);border-radius:50%;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-social a:hover{background:#fff;color:#000}
.rv-social svg{width:17px;height:17px}
.rv-news{display:flex;gap:8px;margin-top:1.2rem;max-width:320px;flex-wrap:wrap}
.rv-news input{
  flex:1;min-width:150px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:1em 1.3em;color:#fff;font-size:.9375rem;
  transition:border-color var(--d-fast) var(--ease-color),background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.rv-news input::placeholder{color:var(--placeholder)}
/* Mismo indicador de foco que el resto del sitio (2px + separación), no un
   borde de 1px: el contorno del boletín se veía la mitad de fuerte que el de
   cualquier píldora. El borde blanco se conserva como señal secundaria. */
.rv-news input:focus{border-color:#fff}
.rv-news input:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rv-news button{
  background:#fff;color:#000;border-radius:var(--r-pill);padding:0 1.5em;min-height:48px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:var(--line);transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);
}
.rv-news button:hover{background:transparent;color:#fff}

/* Wordmark gigante del pie: el ancho lo manda el CONTENEDOR (cqw medido) */
.rv-wordmark{container-type:inline-size;padding-block:clamp(18px,2.4vw,30px);overflow:clip}
/* Factor real medido en navegador con General Sans 400 y ls -.02em: 3.478×
   el cuerpo. 100/3.478 = 28.75cqw para llenar exacto; dejamos 1,5% de holgura. */
.rv-wordmark__t{
  font-size:28.3cqw;line-height:.86;font-weight:400;letter-spacing:-.02em;
  color:var(--whisper);white-space:nowrap;text-align:center;
}
@supports not (font-size:1cqw){
  /* Reserva sin container queries: vw NO descuenta el padding del contenedor */
  .rv-wordmark__t{font-size:min(23.5vw,349px)}
}
.rv-footer__bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:clamp(18px,2.4vw,28px);border-top:1px solid var(--rule);
  font-size:var(--fs-micro);letter-spacing:.06em;color:var(--muted);
}
.rv-footer__bottom a:hover{color:var(--ink)}

/* ===================== WooCommerce carrito / checkout ==================== */
.woocommerce,.woocommerce-page{color:var(--ink)}
.woocommerce .cart-empty,.woocommerce-cart .cart-empty{font-size:var(--fs-h3);font-weight:400;color:var(--ink)}
.woocommerce-cart .return-to-shop{margin-top:1.4rem}

.woocommerce table.shop_table,.woocommerce table.cart,
.woocommerce #content table.cart,.woocommerce-page table.cart{
  background:var(--panel);border:0;border-radius:var(--r-card);border-collapse:separate;
  border-spacing:0;overflow:hidden;color:var(--ink);margin-bottom:1.5rem;
}
.woocommerce table.shop_table th,.woocommerce table.shop_table td,
.woocommerce table.cart th,.woocommerce table.cart td{
  border:0;border-top:1px solid var(--rule);padding:1.15em 1.1em;font-size:.9375rem;color:var(--ink);
}
.woocommerce table.shop_table thead th,.woocommerce table.cart thead th{
  background:transparent;border-top:0;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce table.shop_table tbody tr:first-child td{border-top:1px solid var(--rule)}
.woocommerce table.cart .product-name a{font-size:1.0625rem;color:var(--ink);letter-spacing:.03em}
.woocommerce table.cart .product-name a:hover{color:var(--muted)}
.woocommerce table.cart img{width:68px;border-radius:12px}
.woocommerce .quantity input.qty{
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:.7em;width:74px;text-align:center;
  background:var(--bg);color:var(--ink);
}
.woocommerce a.remove{
  color:#fff!important;font-weight:400;border:var(--line);border-radius:50%;
  width:26px;height:26px;line-height:24px;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.woocommerce a.remove:hover{color:#000!important;background:#fff!important}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-cart .cart-collaterals .cart_totals{
  background:var(--panel);border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px);
}
.woocommerce .cart_totals h2{font-size:var(--fs-h3);font-weight:400;margin-bottom:1.2rem;color:var(--ink)}
.woocommerce .cart_totals table,.woocommerce .cart_totals table.shop_table{background:transparent;border-radius:0}
.woocommerce .cart_totals table th,.woocommerce .cart_totals table td{padding:.85em 0;border-top:1px solid var(--rule);background:transparent}
.woocommerce-cart .wc-proceed-to-checkout{padding-top:1.4em}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{width:100%}
.woocommerce .cart .actions{padding:1.2em 0 0!important;background:transparent}
.woocommerce-cart .cart .actions .coupon{display:inline-flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
.woocommerce-cart .coupon input#coupon_code,.woocommerce .cart .coupon input.input-text{
  min-width:210px;width:auto;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:1em 1.3em;color:#fff;
}
.woocommerce-cart .coupon label{display:none}
/* Obra de pieza única: la cantidad es siempre 1 y Woo la manda en un input
   oculto, así que la columna quedaba vacía. La sacamos (el input sigue en el
   formulario: display:none no impide que se envíe). */
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity{display:none}

/* Botones Woo genéricos → píldoras */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#000;border:var(--line);border-radius:var(--r-pill);
  font-family:var(--font);font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;padding:1.35em 1.9em;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color),border-color var(--d-fast) var(--ease-color),transform var(--d-fast) var(--ease-out);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,.woocommerce-page button.button:hover{background:transparent;color:#fff}
.woocommerce a.button.wc-backward,.woocommerce .button.wc-backward{background:transparent;color:#fff}
.woocommerce a.button.wc-backward:hover{background:#fff;color:#000}
.woocommerce .actions .button[disabled],.woocommerce button.button:disabled,
.woocommerce .button[disabled],.woocommerce button.button:disabled[disabled]{
  opacity:1!important;background:var(--panel)!important;color:var(--muted)!important;
  border-color:var(--rule)!important;cursor:not-allowed;
}
.woocommerce .button[disabled]:hover{background:var(--panel)!important;color:var(--muted)!important}

/* Checkout */
.woocommerce-checkout h3,.woocommerce-checkout h2,.woocommerce-account h2{
  font-size:var(--fs-h3);font-weight:400;margin-bottom:1.2rem;color:var(--ink);letter-spacing:.02em;
}
.woocommerce form .form-row{padding:0;margin:0 0 1.1rem}
.woocommerce form .form-row label{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.55rem;display:block;
}
.woocommerce form .form-row label.checkbox,.woocommerce form .form-row .woocommerce-form__label-checkbox{
  text-transform:none;letter-spacing:.02em;font-size:.9375rem;font-weight:400;color:var(--muted);display:flex;gap:.6em;align-items:flex-start;
}
/* OJO: Woo declara `.woocommerce form .form-row .input-text` (0,3,1) con fondo
   blanco y radio 4px. Un selector con `textarea` en vez de `.input-text` es
   (0,2,2) y PIERDE: el textarea de "notas del pedido" quedaba blanco. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection,
.woocommerce-checkout input.input-text,.woocommerce-checkout textarea,.woocommerce-checkout select{
  border:1px solid var(--rule);border-radius:var(--r-field);padding:1em 1.2em;
  background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;width:100%;
  transition:border-color var(--d-fast) var(--ease-color),background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:#fff}
.woocommerce form .form-row input.input-text:focus-visible,.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible{outline:2px solid #fff;outline-offset:3px}
.woocommerce form .form-row ::placeholder{color:var(--placeholder)}
.woocommerce form .form-row textarea{min-height:110px;resize:vertical}
/* Monocromo también en los controles nativos: sin azul de sistema, sin rojo.
   Mismo borde que todo el sitio: 1px #fff. */
input[type=radio],input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:17px;height:17px;margin:0 .1em 0 0;border:var(--line);background:transparent;
  display:inline-grid;place-content:center;cursor:pointer;transition:background-color var(--d-fast) var(--ease-color);
}
input[type=checkbox]{border-radius:5px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:#fff}
input[type=radio]:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:#000}
input[type=checkbox]:checked::after{
  content:"";width:9px;height:5px;border:2px solid #000;border-top:0;border-right:0;
  transform:rotate(-45deg) translateY(-1px);
}
.woocommerce form .show-password-input,.woocommerce form .show-password-input::after{color:var(--muted)}
.woocommerce form .show-password-input{top:.9em;right:1.1em}
.woocommerce .required,.woocommerce abbr.required,.woocommerce form .form-row .required{
  color:var(--muted);border:0;text-decoration:none}
.woocommerce form .form-row.woocommerce-invalid .input-text{border-color:#fff}
.woocommerce form .form-row.woocommerce-invalid label{color:var(--ink)}
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-field);height:auto;padding:.35em .4em;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:2.2}
/* select2 pinta su placeholder en #444 (2,16:1 sobre negro): no pasa AA */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--placeholder)}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--muted) transparent transparent}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px}
.select2-dropdown{background:var(--panel);border:1px solid var(--rule);color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:#fff;color:#000}
.select2-search--dropdown .select2-search__field{background:var(--bg);border:1px solid var(--rule);color:#fff;border-radius:10px;padding:.6em}

.woocommerce-checkout #customer_details{margin-bottom:1.5rem}
.woocommerce-checkout #order_review,.woocommerce-checkout #order_review_heading{background:transparent}
.woocommerce-checkout #order_review_heading{margin:0 0 1rem}
.woocommerce-checkout #order_review{background:var(--panel);border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px)}
.woocommerce-checkout #order_review table.shop_table{background:transparent;border-radius:0;margin-bottom:1.2rem}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{padding:.9em 0;border-top:1px solid var(--rule)}
.woocommerce-checkout #order_review .order-total .amount{color:var(--ink);font-size:1.2rem}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--rule);padding:0 0 1.2em;margin:0 0 1.2em}
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;margin-bottom:.6rem}
.woocommerce-checkout #payment ul.payment_methods label{
  text-transform:none;letter-spacing:.02em;font-size:1rem;font-weight:500;color:var(--ink);display:inline;
}
.woocommerce .payment_box,.woocommerce-checkout #payment div.payment_box{
  background:var(--bg)!important;border:1px solid var(--rule)!important;border-radius:var(--r-field);
  color:var(--muted)!important;font-size:.9375rem;line-height:1.7;padding:1.2em 1.4em;margin:1em 0 0;
}
.woocommerce .payment_box::before,.woocommerce-checkout #payment div.payment_box::before{display:none!important}
.woocommerce-checkout #place_order{width:100%;font-size:.8125rem;padding:1.5em}
.woocommerce-privacy-policy-text p,.woocommerce-terms-and-conditions-wrapper p{color:var(--muted);font-size:.875rem;line-height:1.7}
/* El enlace heredaba color y tamaño del párrafo y quedaba indistinguible del
   texto: contrasta bien contra el fondo, así que ningún chequeo de contraste
   lo delata, pero enlace vs. texto vecino quedaba por debajo de 3:1 y sin
   ninguna señal no cromática. Se marca con subrayado, que no depende del color. */
.woocommerce-privacy-policy-text p a,.woocommerce-terms-and-conditions-wrapper p a{
  color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.woocommerce-privacy-policy-text p a:hover,.woocommerce-terms-and-conditions-wrapper p a:hover{text-decoration-thickness:2px}
.woocommerce-order,.woocommerce-order-details,.woocommerce-customer-details{color:var(--ink)}
.woocommerce ul.order_details{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap);
  background:var(--panel);border-radius:var(--r-card);padding:clamp(20px,2.4vw,32px);margin:0 0 2rem;
}
.woocommerce ul.order_details li{
  border:0;float:none;margin:0;padding:0;list-style:none;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce ul.order_details li strong{
  display:block;margin-top:.5rem;font-size:1.0625rem;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink);
}

/* Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-navigation{width:26%;float:left}
.woocommerce-account .woocommerce-MyAccount-navigation ul{display:grid;gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation li{list-style:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:1.05em 1.5em;border-radius:var(--r-pill);background:var(--panel);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--panel-hi)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:#fff;color:#000}
.woocommerce-account .woocommerce-MyAccount-content{width:70%;float:right}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--muted);line-height:1.75;margin-bottom:1rem}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.woocommerce-account .woocommerce-MyAccount-content a.button{text-decoration:none}
.woocommerce-account .col2-set .col-1,.woocommerce-account .col2-set .col-2{width:100%;float:none}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.checkout_coupon,
.woocommerce-account form.woocommerce-EditAccountForm,.woocommerce-ResetPassword{
  background:var(--panel);border:0;border-radius:var(--r-card);padding:clamp(22px,2.6vw,36px);margin:0 0 1.5rem;
}
.woocommerce form.login .form-row,.woocommerce form.register .form-row{padding:0;margin-bottom:1.1rem}
.woocommerce-form-login__rememberme{color:var(--muted)}
.woocommerce-LostPassword a{color:var(--muted)}
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit{margin-right:1rem}

/* Avisos Woo */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  background:var(--panel);border:0;border-left:3px solid #fff;border-radius:var(--r-field);
  color:var(--ink);padding:1.2em 1.5em;margin:0 0 1.6rem;list-style:none;font-size:.9375rem;line-height:1.6;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-error{border-left-color:var(--muted);color:var(--muted)}
.woocommerce-error li{color:var(--muted)}
.woocommerce-message .button,.woocommerce-info .button{margin:0 0 0 auto;padding:1em 1.5em}

/* Ocultamos ordenación/recuento nativos (usamos filtros propios) */
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{display:none}

/* Paginación */
.woocommerce-pagination ul.page-numbers,.wp-block-query-pagination,.navigation .nav-links{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,4vw,52px);
  border:0!important;
}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.page-numbers,.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 1em;
  border:var(--line);border-radius:var(--r-pill);color:var(--ink);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.06em;background:transparent;transition:background-color var(--d-fast) var(--ease-color),color var(--d-fast) var(--ease-color);
}
.page-numbers:hover,.woocommerce nav.woocommerce-pagination ul li a:hover{background:#fff;color:#000}
.page-numbers.current,.woocommerce nav.woocommerce-pagination ul li span.current{background:#fff;color:#000}

/* ============================ Listado genérico =========================== */
.rv-list{display:grid;gap:0}
.rv-listitem{padding-block:clamp(20px,2.4vw,30px);border-top:1px solid var(--rule)}
.rv-listitem h2{font-size:var(--fs-h3);font-weight:400;letter-spacing:.03em}
.rv-listitem h2 a{transition:color var(--d-fast) var(--ease-color)}
.rv-listitem h2 a:hover{color:var(--muted)}
.rv-listitem p{color:var(--muted);margin-top:.6rem;max-width:70ch}

/* ===================== Reveal on scroll (mejora progresiva) ============== */
/* Failsafe: el contenido es visible por defecto; el JS sólo lo anima. */
.rv-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .rv-reveal{
    opacity:0;transform:translateY(16px);
    transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);
  }
  .js .rv-reveal.is-in{opacity:1;transform:none}
  /* PASO 6 · Escalonado con TECHO. `page-sobre.php` y `home/beneficios.php`
     emiten data-delay="$n+1" SIN tope: con un cuarto item no habia regla y
     aparecia con retardo 0, rompiendo el escalonado. Esta primera regla
     es el piso para cualquier valor. OJO: `[data-delay]` y `[data-delay="1"]`
     pesan LO MISMO (0,3,0) -- un selector de atributo con valor no suma sobre
     uno sin valor. Lo que hace funcionar el techo es que la generica esta
     escrita ANTES: si alguien reordena estas siete lineas, el techo de 420ms
     se traga todos los escalones.
     El techo son 6 pasos = 420ms: mas alla el ultimo item entra tan tarde
     que se lee como un fallo de carga, no como escalonado. */
  .js .rv-reveal[data-delay]{transition-delay:calc(var(--stagger) * 6)}
  .js .rv-reveal[data-delay="1"]{transition-delay:calc(var(--stagger) * 1)}
  .js .rv-reveal[data-delay="2"]{transition-delay:calc(var(--stagger) * 2)}
  .js .rv-reveal[data-delay="3"]{transition-delay:calc(var(--stagger) * 3)}
  .js .rv-reveal[data-delay="4"]{transition-delay:calc(var(--stagger) * 4)}
  .js .rv-reveal[data-delay="5"]{transition-delay:calc(var(--stagger) * 5)}
  .js .rv-reveal[data-delay="6"]{transition-delay:calc(var(--stagger) * 6)}
}

/* ---- Respuesta al toque -------------------------------------------------
   El sitio no acusaba recibo del clic en ningún lado: la píldora se rellena en
   hover y al presionar no pasaba nada. En táctil, donde no hay hover, tocar un
   filtro no devolvía absolutamente nada. Valor del catálogo (AUDIT §3), en el
   extremo sobrio de la banda 0.95–0.98 porque la galería es deliberadamente
   contenida. NO se limita a punteros finos: en táctil es donde más falta hace.
   La duración vive en --d-fast (.16s), que es el valor textual del catálogo
   para press feedback. */
.rv-pill:active,
.rv-filter:active,
.rv-wizard__nav:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.woocommerce button[type=submit]:active,
/* `a.remove` no es `.button`, así que ninguna regla de arriba lo alcanzaba: era
   el único control destructivo del sitio sin acuse de recibo del clic. */
.woocommerce a.remove:active,
.rv-consultar-obra:active,
.rv-news button:active{transform:scale(.98)}

/* =========================== prefers-reduced-motion ====================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Sin movimiento autónomo. No matamos las transiciones de estado:
     sin ellas el overlay se quedaría con links focusables un instante. */
  .rv-marquee{overflow-x:auto}          /* la cinta se recorre a mano, no se recorta */
  .rv-marquee__track{animation:none;transform:none}
  .rv-marquee__item{font-size:clamp(1.4rem,1rem + 2vw,2.4rem)}
  .rv-seal__spin{animation:none}
  .rv-skel::after{animation:none}
  .rv-cursor{display:none}
  .rv-card__peek{opacity:1;transform:none}   /* si no hay hover animado, se ve siempre */
  .rv-card__media img,.rv-hero__media img{transition:none}
  .rv-card:hover .rv-card__media img,.rv-hero__panel:hover .rv-hero__media img{transform:none}
  .rv-overlay__nav a::after{transition:opacity .001ms}
  /* El overlay conserva su fundido (opacidad = comprensión); lo que se va es
     el deslizamiento de 14px. Al no cambiar `transform` entre cerrado y
     abierto, no queda nada que desplazar. */
  .rv-overlay{transform:none}
  /* El press feedback es un cambio de escala, o sea movimiento. Reducir no es
     dejar al usuario sin acuse de recibo del clic (peor que el movimiento que
     evita), así que se cambia el gesto en vez de borrarlo: sin escala, con un
     cambio de opacidad que cumple la misma función. */
  .rv-pill:active,.rv-filter:active,.rv-wizard__nav:active,
  .woocommerce button.button:active,.woocommerce a.button:active,
  .woocommerce button[type=submit]:active,.woocommerce a.remove:active,
  .rv-consultar-obra:active,.rv-news button:active{transform:none;opacity:.72}

  /* Reducir es quitar el MOVIMIENTO, no el aviso. El badge del carrito es la
     única confirmación de que se agregó una obra: sin escala, con un pulso de
     opacidad que cumple la misma función informativa. */
  .rv-cartbtn__count.is-bump{animation:rv-cart-bump-flat var(--d-ui) var(--ease-color)}
}

/* ============================== Responsive =============================== */
/* (Todos los overrides viven acá, DESPUÉS de las reglas base.) */
@media (max-width:1080px){
  .rv-footer__top{grid-template-columns:1fr 1fr}
  .rv-terms{grid-template-columns:1fr 1fr}
  .rv-values{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .rv-hero__grid{grid-template-columns:1fr;gap:clamp(30px,6vw,44px);align-items:start}
  .rv-hero h1{max-width:none}
  .rv-hero__art{max-width:460px}
  .rv-split{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .rv-closing__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .rv-closing__left{justify-content:flex-start}
  .rv-about__hero,.rv-contact{grid-template-columns:1fr;gap:clamp(28px,5vw,42px)}
  .rv-about__media{max-width:460px}
  .single-product div.product{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .woocommerce div.product .woocommerce-product-gallery,
  .single-product div.product .woocommerce-product-gallery{max-width:520px}
  .rv-overlay__inner{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
  .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:1.6rem}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{grid-auto-flow:row}
}
@media (max-width:760px){
  .rv-terms,.rv-values{grid-template-columns:1fr}
  .rv-sechead{flex-direction:column;align-items:flex-start}
  .rv-footer__top{grid-template-columns:1fr}
  /* Con 3 objetos entra cómodo; "Escribinos" vive en el overlay */
  .rv-header__contact{display:none}
  .rv-menubtn{min-width:0}
  .woocommerce table.cart thead{display:none}
  .woocommerce table.cart tbody tr{display:block;background:var(--panel);border-radius:var(--r-card);margin-bottom:1rem;padding:.5em 0}
  .woocommerce table.cart td{display:block;text-align:right;border:0;padding:.7em 1.1em}
  .woocommerce table.cart td::before{content:attr(data-title);float:left;font-weight:600;color:var(--muted);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase}
  .woocommerce table.cart td.product-remove::before,.woocommerce table.cart td.product-thumbnail::before{display:none}
  .woocommerce table.cart td.product-thumbnail img{margin-left:auto}
  .woocommerce table.cart td.actions{text-align:left}
  .woocommerce .cart .actions .coupon{width:100%}
  .woocommerce-cart .coupon input#coupon_code,.woocommerce .cart .coupon input.input-text{min-width:0;flex:1}
}
@media (max-width:760px){
  /* La grilla de Woo se declara con `.woocommerce ul.products` (0,1,2): un
     override sobre `ul.products` (0,1,1) PIERDE aunque venga después. */
  .woocommerce ul.products,.woocommerce-page ul.products,ul.products,.rv-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:560px){
  .woocommerce ul.products,.woocommerce-page ul.products,ul.products,.rv-grid{gap:12px}
  .rv-card__panel{padding:10px}
  .rv-card__body{padding:12px 4px 4px}
  .rv-card__title,
  .woocommerce ul.products li.product h3.rv-card__title,
  ul.products li.product h3.rv-card__title{font-size:1.0625rem;letter-spacing:.04em;min-height:2.4em}
  .rv-card__pills{gap:5px}
  .rv-card__foot{padding-top:12px}
  .rv-chip{padding:.75em .9em;font-size:.6875rem;letter-spacing:.06em}
  .rv-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  /* El contador no cabe junto a la cinta de filtros, pero es un role="status":
     si se pone en display:none deja de anunciarse. Se esconde a la vista y
     sigue existiendo para el lector de pantalla. */
  .rv-shopcount{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .rv-relacionadas__lista{grid-template-columns:1fr 1fr}
  .rv-hero__stats{gap:16px}
  .rv-footer__bottom{flex-direction:column;gap:8px}
  .rv-empty{padding:30px 22px}
}
/* Por debajo de 480 una sola columna: en una galería de pieza única la foto
   grande vende más que ver dos miniaturas. El corte va acá (no en 400) para que
   390 y 414 se comporten igual. */
@media (max-width:479px){
  .woocommerce ul.products,.woocommerce-page ul.products,ul.products,.rv-grid{
    grid-template-columns:minmax(0,1fr);gap:16px}
  .rv-card__panel{padding:12px}
  .rv-card__title,
  .woocommerce ul.products li.product h3.rv-card__title,
  ul.products li.product h3.rv-card__title{font-size:1.5rem;letter-spacing:.05em;min-height:0}
  .rv-card__body{padding:14px 4px 4px}
  .rv-chip{font-size:.75rem;letter-spacing:.08em;padding:.85em 1.1em}
  .rv-relacionadas__lista{grid-template-columns:1fr}
}

/* La doble columna de la pared entra SÓLO con cuatro pistas. Medido, no
   estimado: `repeat(auto-fill,minmax(280px,1fr))` con el contenedor a
   maxw 1320 y gap 2vw llega a 4 pistas a partir de ~1302px (a 1300 son 3).
   El corte va en 1310 con margen. Por qué no antes:
     · con 3 pistas, un item de 2 que no entra en la última celda baja de fila
       y deja un hueco EN MEDIO de la pared — se lee como bug, no como hang;
     · con 1 columna (<480px) `span 2` crearía una segunda columna implícita
       y desbordaría la página.
   Verificado con las 5 vistas del filtro a 1440: ningún hueco intermedio. */
@media (min-width:1310px){
  ul.products.rv-hang li.product.is-wide{grid-column:span 2}
}

/* ------------------- Wizard y navegación de obras ------------------------ */
/* (Overrides DESPUÉS de sus reglas base; verificados con getComputedStyle en
   el ancho objetivo, no asumidos.) */
@media (max-width:680px){
  .rv-obra-nav{grid-template-columns:minmax(0,1fr)}
  /* Con una sola columna, `grid-column:2` crearía una columna implícita y
     empujaría el ancho: hay que devolverlo a la primera. */
  .rv-obra-nav__link--next{grid-column:1}
}
@media (max-width:639px){
  /* Las 4 etiquetas no entran en 4 columnas a 12px sin partirse. La barra
     queda como indicador visual y el texto sigue en el DOM para el lector de
     pantalla; el estado legible lo da `.rv-wizard__status` (aria-live). */
  .rv-wizard.is-wizard .rv-wizard__progress{gap:6px}
  .rv-wizard.is-wizard .rv-wizard__progress li{
    font-size:0;line-height:0;height:0;padding-top:0;letter-spacing:0;
  }
  /* …y acá el nombre del paso vuelve a ser visible. */
  .rv-wizard__status-label{
    position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
    white-space:normal;color:var(--ink);
  }
}
@media (max-width:519px){
  /* "Siguiente" en píldora no entra en media columna a 320px: los botones de
     paso pasan a ancho completo, respetando el orden del DOM (Atrás, Siguiente)
     para no divorciar el orden visual del orden de foco. */
  .rv-wizard.is-wizard .rv-wizard__nav--prev,
  .rv-wizard.is-wizard .rv-wizard__nav--next,
  .rv-wizard.is-wizard .rv-wizard__step [type="submit"]{
    grid-column:1 / -1;justify-self:stretch;width:100%;
  }
  .rv-wizard.is-wizard .rv-wizard__nav--next,
  .rv-wizard.is-wizard .rv-wizard__step [type="submit"]{margin-top:10px}
}

/* Punteros gruesos (táctil): sin cursor custom */
@media (hover:none),(pointer:coarse){
  .rv-cursor{display:none}
  .rv-card__peek{opacity:1;transform:none}
}