/* =========================================================
   FIELUDOS — preview de sitio
   Construido sobre los tokens reales del design system.
   Dirección: editorial y minimalista (guidelines/aplicaciones.md §3).
   ========================================================= */
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radii.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");

/* ---- medidas propias de esta página ---- */
:root{
  --ancho:1240px;
  --margen:48px;
  --seccion:88px;    /* la marca lo pidió más apretado que los 128px de antes */
}

/* =================== BASE =================== */
*{box-sizing:border-box}
/* El atributo hidden lo pisa cualquier `display:` de una clase. Se refuerza
   una vez aquí para no tener que recordarlo en cada componente nuevo. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--text-body);
  font-family:var(--font-text);
  font-size:var(--size-md);
  line-height:var(--leading-relaxed);
  font-optical-sizing:auto;        /* Inter variable ajusta el opsz solo */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--amarillo-500);color:var(--petroleo-700)}
:focus-visible{
  outline:var(--border-width-strong) solid var(--border-focus);
  outline-offset:3px;border-radius:var(--radius-xs);
}

h1,h2,h3,h4{
  margin:0;color:var(--text-strong);font-family:var(--font-display);
  letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);
}
h1{letter-spacing:var(--tracking-display)}

.eyebrow{
  font-size:var(--size-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);margin:0;
}
.lead{color:var(--text-body);font-size:var(--size-lg);max-width:44ch;margin:0}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.seccion{padding-top:var(--seccion)}

/* enlace con subrayado amarillo: la acción de página del sistema */
.link-amarillo{
  font-size:var(--size-md);font-weight:var(--weight-bold);color:var(--petroleo-700);
  border-bottom:2px solid var(--amarillo-500);padding-bottom:3px;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.link-amarillo:hover{color:var(--naranja-700);border-bottom-color:var(--naranja-500)}

.link-more{
  font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--petroleo-700);
  display:inline-flex;align-items:center;gap:8px;
}
.link-more span{transition:transform var(--dur-base) var(--ease-standard)}
.link-more:hover span{transform:translateX(5px)}

/* =================== BOTONES ===================
   Sólo dentro de diálogo, carrito y formulario. Nunca sueltos en la página. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  white-space:nowrap;font-family:var(--font-text);font-weight:var(--weight-bold);
  letter-spacing:-.005em;text-decoration:none;
  border:var(--border-width) solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;position:relative;overflow:hidden;
  height:44px;padding:0 var(--space-6);font-size:var(--size-md);
  --tx:0px;--ty:0px;                /* los mueve el cursor, muy poco */
  transform:translate(var(--tx),var(--ty));
  transition:transform var(--dur-base) var(--ease-out-soft),
             background-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.btn::after{                      /* brillo que sigue al cursor, apenas perceptible */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 55%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-standard);
}
.btn:hover::after{opacity:1}
.btn:active{transform:translate(var(--tx),var(--ty)) scale(var(--press-scale));box-shadow:none}
.btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--size-sm)}
.btn--lg{height:54px;padding:0 var(--space-8);font-size:var(--size-lg)}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--amarillo-500);color:var(--petroleo-700)}
.btn--primary:hover{background:var(--amarillo-700);transform:translate(var(--tx),calc(var(--ty) + var(--hover-lift)));box-shadow:var(--shadow-sm)}
.btn--secondary{background:var(--naranja-500);color:var(--papel)}
.btn--secondary:hover{background:var(--naranja-700);transform:translate(var(--tx),calc(var(--ty) + var(--hover-lift)));box-shadow:var(--shadow-sm)}
.btn--ghost{background:transparent;color:var(--petroleo-700);border-color:var(--petroleo-500)}
.btn--ghost:hover{background:var(--petroleo-100)}
.btn--block{width:100%}

.icon-btn{
  background:none;border:0;cursor:pointer;color:var(--text-muted);
  width:36px;height:36px;border-radius:var(--radius-pill);
  display:grid;place-items:center;font-size:16px;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast),transform var(--dur-base) var(--ease-standard);
}
.icon-btn:hover{background:var(--hueso);color:var(--petroleo-700);transform:rotate(90deg)}

/* =================== HEADER =================== */
.header{
  position:sticky;top:0;z-index:60;background:var(--papel);
  transition:box-shadow var(--dur-base) var(--ease-standard);
}
.header.compacta{box-shadow:0 1px 0 var(--border-hairline)}
.header-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
  height:116px;transition:height var(--dur-base) var(--ease-standard);
}
.header.compacta .header-in{height:84px}
/* el logotipo manda en el header: al hacer scroll encoge con la barra, no de golpe */
.logo img{
  height:66px;width:auto;
  transition:height var(--dur-base) var(--ease-standard),transform var(--dur-slow) var(--ease-playful);
}
.header.compacta .logo img{height:50px}
.logo:hover img{transform:scale(1.06) rotate(-1.5deg)}
.nav{display:flex;gap:var(--space-8);align-items:center}
.nav a{
  font-size:13px;font-weight:var(--weight-medium);letter-spacing:.04em;
  text-transform:uppercase;color:var(--petroleo-700);position:relative;padding:4px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--amarillo-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-standard);
}
.nav a:hover::after{transform:scaleX(1)}
.btn-bolsa{
  background:none;border:0;cursor:pointer;font-family:var(--font-text);
  font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--naranja-700);position:relative;padding:4px 0;
  transition:color var(--dur-fast) var(--ease-standard);
}
.btn-bolsa:hover{color:var(--petroleo-700)}
.bolsa-n{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:7px;border-radius:var(--radius-pill);
  background:var(--naranja-500);color:var(--papel);
  font-size:11px;font-weight:var(--weight-bold);letter-spacing:0;
}
.bolsa-n.late{animation:late var(--dur-slow) var(--ease-playful)}
@keyframes late{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* =================== HERO =================== */
.hero{padding-top:var(--space-4)}
.hero-in{display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center}
.hero-barra{width:36px;height:4px;background:var(--amarillo-500);margin-bottom:28px}
/* titular largo: el navegador reparte las líneas para que ninguna quede huérfana */
.hero h1{font-size:clamp(2.6rem,5.4vw,64px);line-height:var(--leading-tight);font-weight:var(--weight-black);text-wrap:balance}
.hero .lead{margin:24px 0 32px}
/* Una sola fila ligera: icono y cifra en línea, sin descripciones. Si el ancho
   no alcanza, los datos pasan al renglón de abajo en vez de encogerse. */
.hero-datos{
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);
  margin-top:var(--space-10);padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);
}
.hero-datos div{display:flex;align-items:center;gap:var(--space-2)}
.hero-datos div b{
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--size-lg);color:var(--petroleo-700);letter-spacing:var(--tracking-heading);
  font-variant-numeric:tabular-nums;   /* el contador no cambia de ancho al subir */
  white-space:nowrap;
}

/* --- los iconos de los datos: Lucide en línea, con vida propia ---
   Cada gesto dura 4.2 s y casi todo ese tiempo el icono está quieto: el
   movimiento ocurre en el último tercio, y cada uno arranca desfasado para
   que nunca se muevan los cuatro a la vez. */
.dato-icono{display:block;width:20px;height:20px;flex:none;color:var(--amarillo-700)}
.dato-icono svg{width:100%;height:100%;display:block}
.hero-datos div:hover .dato-icono{color:var(--naranja-500)}
.dato-icono,.dato-icono svg{transition:color var(--dur-base) var(--ease-standard)}

.i-corazon svg{transform-origin:50% 55%;animation:ic-latido 4.2s var(--ease-standard) infinite}
.i-lapiz   svg{transform-origin:20% 80%;animation:ic-trazo  4.2s var(--ease-standard) infinite .5s}
.i-camion  svg{animation:ic-rueda 4.2s var(--ease-standard) infinite 1s}
.i-placa   svg{transform-origin:22% 22%;animation:ic-colgada 4.2s var(--ease-playful) infinite 1.5s}

@keyframes ic-latido{
  0%,64%,100%{transform:scale(1)}
  70%{transform:scale(1.16)}
  76%{transform:scale(1)}
  82%{transform:scale(1.1)}
  88%{transform:scale(1)}
}
@keyframes ic-trazo{
  0%,60%,100%{transform:translate(0,0) rotate(0)}
  70%{transform:translate(1.5px,-1.5px) rotate(-8deg)}
  80%{transform:translate(-1px,1px) rotate(5deg)}
  90%{transform:translate(.8px,-.8px) rotate(-3deg)}
}
/* el camión avanza, se va por la derecha y vuelve a entrar por la izquierda */
@keyframes ic-rueda{
  0%,55%{transform:translateX(-2px);opacity:1}
  72%{transform:translateX(5px);opacity:1}
  80%{transform:translateX(9px);opacity:0}
  81%{transform:translateX(-9px);opacity:0}
  92%,100%{transform:translateX(-2px);opacity:1}
}
/* la placa se columpia desde su argolla, como la del hero */
@keyframes ic-colgada{
  0%,58%,100%{transform:rotate(0)}
  68%{transform:rotate(11deg)}
  78%{transform:rotate(-7deg)}
  86%{transform:rotate(4deg)}
  93%{transform:rotate(-2deg)}
}

/* --- la placa: herraje real, cuelga, se balancea y gira --- */
.placa-escena{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:530px;position:relative;perspective:1500px;
}
.placa-rig{
  position:relative;width:300px;
  transform-origin:50% 8px;          /* cuelga de la parte alta del mosquetón */
  transform-style:preserve-3d;will-change:transform;
}
.placa-herraje{
  display:block;width:130px;margin:0 auto;
  filter:drop-shadow(0 5px 10px rgba(33,81,102,.16));
}
.placa-flip{
  position:relative;display:block;margin:-46px auto 0;
  width:246px;height:298px;padding:0;border:0;background:none;
  cursor:grab;transform-style:preserve-3d;
  transition:transform .85s var(--ease-playful);
}
.placa-rig.agarrando .placa-flip{cursor:grabbing}
.placa-flip.girada{transform:rotateY(180deg)}
.placa-cara{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.placa-reverso{transform:rotateY(180deg)}

/* la lengüeta negra con la ranura por donde entra la argolla */
.placa-oreja{position:relative;width:76px;height:52px;border-radius:9px;background:#242424}
.placa-oreja::after{
  content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:40px;height:15px;border-radius:8px;background:var(--papel);
}
/* bisel de goma negro */
.placa-bisel{
  margin-top:-22px;width:246px;height:246px;border-radius:50%;background:#242424;
  display:grid;place-items:center;box-shadow:0 18px 36px rgba(33,81,102,.28);
}
/* las dos caras son arte impreso: el disco solo recorta el círculo */
.placa-disco{
  position:relative;width:214px;height:214px;border-radius:50%;overflow:hidden;
  background:var(--amarillo-500);
  /* filo interior muy tenue: sobre el arte amarillo no se ve, y evita que un
     disco oscuro se funda con el bisel negro y la placa pierda su forma */
  box-shadow:inset 0 0 0 1px rgba(255,253,247,.16);
}
.placa-disco img{display:block;width:100%;height:100%;object-fit:cover}

.placa-pista{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;
  transition:opacity var(--dur-slow) var(--ease-standard);color:var(--text-muted);
}
.placa-pista.oculta{opacity:0}

/* =================== MARQUESINA =================== */
/* Va justo debajo de los testimonios y se lee como parte de ellos: sin
   margen que la separe y con el filete de arriba transparente. Se
   conserva el borde —transparente, no borrado— para no mover el píxel
   de alto que ya ocupaba. El de abajo sí se ve: es el que separa este
   bloque de «Cómo comprar». */
.marquesina{margin-top:0;border-top:1px solid transparent;border-bottom:1px solid var(--border-hairline);padding:var(--space-6) 0;overflow:hidden}
.marquesina .eyebrow{text-align:center;margin-bottom:var(--space-4)}
.mq{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:var(--space-10);width:max-content;animation:correr 38s linear infinite}
.marquesina:hover .mq-track{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}
.mq-item{
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--size-3xl);letter-spacing:var(--tracking-display);
  color:var(--arena);white-space:nowrap;
  transition:color var(--dur-base) var(--ease-standard);
}
.mq-item:nth-child(3n){color:var(--amarillo-200)}
.mq-item:hover{color:var(--naranja-500)}

/* =================== ENCABEZADO DE SECCIÓN =================== */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--border-hairline);
}
.sec-head h2{font-size:var(--size-3xl);font-weight:var(--weight-extrabold);margin-top:6px}
.buscar-caja{display:flex;align-items:center;gap:8px;color:var(--text-muted)}
.buscar{
  border:0;border-bottom:1.5px solid var(--border-hairline);background:none;
  font-family:var(--font-text);font-size:var(--size-sm);color:var(--text-body);
  padding:6px 2px;width:180px;transition:border-color var(--dur-fast) var(--ease-standard);
}
.buscar::placeholder{color:var(--text-muted)}
.buscar:focus{outline:none;border-bottom-color:var(--naranja-500)}

/* =================== FILTROS =================== */
/* `.chip` sobrevive porque lo usan los filtros de estado del back office.
   La barra de categorías del catálogo y su píldora deslizante se retiraron. */
.chip{
  position:relative;z-index:1;background:none;border:0;cursor:pointer;
  font-family:var(--font-text);font-size:var(--size-sm);font-weight:var(--weight-semibold);
  color:var(--text-muted);padding:9px var(--space-4);border-radius:var(--radius-pill);
  transition:color var(--dur-base) var(--ease-standard);
}
.chip:hover{color:var(--petroleo-700)}
.chip.activo{color:var(--papel)}
/* =================== CATÁLOGO — sin tarjetas =================== */
/* Cada ficha ocupa DOS filas de la rejilla —imagen y texto— y las hereda
   con `subgrid`. Así todas las imágenes de una fila terminan a la misma
   altura y todos los textos empiezan a la misma, aunque la principal sea
   el doble de ancha y aunque un nombre ocupe dos líneas y otro una.
   Antes cada ficha mandaba en su propia altura y la principal, más ancha,
   salía 71px más abajo que sus vecinas. */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--space-10);
  row-gap:var(--space-2);          /* base para las tres filas de cada ficha */
  padding-top:var(--space-10);
}
.ficha{display:block;cursor:pointer;opacity:0;transform:translateY(22px)}
@supports (grid-template-rows: subgrid){
  /* TRES filas por ficha, no dos: imagen, nombre con precio, y línea de
     detalle. Con dos, el detalle se salía de las pistas heredadas y se
     montaba encima del nombre en cuanto ocupaba más de una línea.
     De paso los nombres también quedan alineados entre sí. */
  .ficha{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  /* El row-gap es uno solo para las tres filas, así que se deja pequeño
     y cada parte añade lo suyo con margen. */
  .ficha-pie{margin-top:var(--space-3);margin-bottom:0}
  .ficha-detalle{margin-top:0;margin-bottom:var(--space-8)}

  /* Sólo con tres columnas, que es cuando la principal comparte fila con
     otra ficha. Por debajo ocupa la fila entera y no hay nada con lo que
     alinearse: ahí conserva su propia proporción, o se quedaría sin
     altura, porque la fotografía va fuera del flujo. */
  @media (min-width:1001px){
    /* Lleva `.grid` delante a propósito: más abajo hay un
       `.ficha--principal .ficha-media{aspect-ratio:16/11}` que, con la
       misma especificidad y estando después, le ganaría. Ese sigue ahí
       como respaldo para navegadores sin subgrid. */
    .grid .ficha--principal .ficha-media{aspect-ratio:auto}
    /* Sin proporción fija, la fotografía imponía su altura natural y
       volvía a descolgar la fila. Fuera del flujo, el marco no mide nada
       por sí mismo y adopta la altura que marcan sus vecinas. */
    .grid .ficha--principal .ficha-media img{position:absolute;inset:0}
  }
}
.ficha.dentro{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}
.ficha-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-photo);
  background:var(--surface-photo);
  transition:transform var(--dur-slow) var(--ease-out-soft),box-shadow var(--dur-slow) var(--ease-out-soft);
  transform-style:preserve-3d;
}
.ficha:hover .ficha-media{box-shadow:var(--shadow-photo)}
.ficha-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-soft)}
.ficha:hover .ficha-media img{transform:scale(1.03)}

/* bloque de color: sustituye a la fotografía mientras no la haya */
.bloque{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-6);gap:var(--space-2);
}
.bloque-eyebrow{
  font-size:var(--size-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;opacity:.72;
}
.bloque-titulo{
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--size-2xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-heading);
}
.b-amarillo{background:var(--block-1-bg);color:var(--block-1-fg)}
.b-naranja {background:var(--block-2-bg);color:var(--block-2-fg)}
.b-petroleo{background:var(--block-3-bg);color:var(--block-3-fg)}
.b-azul    {background:var(--block-4-bg);color:var(--block-4-fg)}
.b-rosa    {background:var(--block-5-bg);color:var(--block-5-fg)}
.b-lila    {background:var(--block-6-bg);color:var(--block-6-fg)}
.b-verde   {background:var(--verde-500); color:var(--petroleo-700)}

.ficha-mas{
  position:absolute;top:var(--space-4);right:var(--space-4);
  width:38px;height:38px;border-radius:var(--radius-pill);border:0;cursor:pointer;
  background:rgba(255,253,247,.86);backdrop-filter:blur(6px);color:var(--petroleo-700);
  font-size:19px;line-height:1;display:grid;place-items:center;
  opacity:0;transform:translateY(-6px) scale(.9);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-playful),background-color var(--dur-fast);
}
.ficha:hover .ficha-mas,.ficha-mas:focus-visible{opacity:1;transform:none}
.ficha-mas:hover{background:var(--amarillo-500)}
.ficha-mas.ok{background:var(--verde-500);color:var(--papel)}
@media (hover:none){.ficha-mas{opacity:1;transform:none}}

.ficha-pie{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-top:var(--space-5)}
.ficha-nombre{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--size-xl);color:var(--petroleo-700);letter-spacing:var(--tracking-heading)}
.ficha-precio{font-size:var(--size-md);color:var(--text-body);white-space:nowrap}
.ficha-precio small{display:block;font-size:11px;color:var(--text-muted);text-align:right;letter-spacing:.1em;text-transform:uppercase}
.ficha-detalle{font-size:var(--size-sm);color:var(--text-muted);margin-top:2px}
.vacio{text-align:center;color:var(--text-muted);padding:var(--space-16) 0}

/* =================== BANDA EDITORIAL =================== */
.banda-editorial{
  margin-top:var(--seccion);position:relative;overflow:hidden;color:var(--papel);
  min-height:560px;display:flex;align-items:flex-end;padding:var(--space-16) 0 var(--space-8);
  background:var(--petroleo-500);   /* respaldo mientras carga la foto */
}
.banda-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}
.banda-editorial::after{             /* el único degradado que permite la marca */
  content:"";position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none;
}
.banda-in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-12);flex-wrap:wrap}
.lockup{display:flex;flex-direction:column;gap:2px}
.lockup .l1{font-size:var(--size-3xl);font-weight:300;letter-spacing:-.01em;line-height:1.12}
.lockup .l2{font-size:var(--size-2xl);font-weight:var(--weight-bold);letter-spacing:-.01em;line-height:1.12}
.lockup .l3{font-size:var(--size-sm);opacity:.85;margin-top:6px}
.banda-nota{max-width:34ch;color:rgba(255,253,247,.78);font-size:var(--size-md);margin:0}

/* =================== FIRMA =================== */
/* La franja pasó de bloque alto y centrado a cinta que rota. Ocupaba
   112px de aire arriba y abajo para dos líneas de texto; ahora la
   frase se mueve y la franja es la mitad de gruesa. */
.firma{
  /* Va justo debajo del hero: sin este aire la cinta amarilla queda
     pegada al pie del hero y el corte parece un error de maquetación.
     Es el mismo respiro que llevaba la marquesina cuando ocupaba
     este sitio. */
  margin-top:var(--seccion);
  background:var(--amarillo-500);color:var(--petroleo-700);
  /* Cinta delgada a propósito: es una firma de paso, no una sección.
     El grosor lo mandan este relleno y el cuerpo de .firma-frase; si
     hay que engordarla o adelgazarla, se tocan los dos a la vez. */
  padding:var(--space-2) 0;overflow:hidden;
}
.firma-cinta{
  display:flex;width:max-content;
  animation:correr 26s linear infinite;
}
.firma:hover .firma-cinta{animation-play-state:paused}
.firma-frase{
  display:flex;align-items:baseline;gap:var(--space-3);
  padding-right:var(--space-6);
  font-family:var(--font-display);
  font-size:clamp(.95rem,1.8vw,22px);
  line-height:1.15;white-space:nowrap;
}
.firma-fuerte{
  font-weight:var(--weight-black);
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
}
/* El año acompaña, no compite: ligero y sin caja alta. */
.firma-suave{
  font-weight:var(--weight-light);
  letter-spacing:0;
  opacity:.78;
}
/* Separador entre repeticiones: un punto, no una barra. */
.firma-punto{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--petroleo-700);opacity:.42;
  margin-left:var(--space-3);
}

/* Aire por debajo de los testimonios: la sección sólo tenía separación
   por arriba y quedaba pegada a lo que viniera después. Lo que viene
   ahora es la marquesina de nombres, no la cinta amarilla. */
.testis{padding-bottom:var(--space-10)}
@media (prefers-reduced-motion:reduce){
  .firma-cinta{animation:none}
}

/* =================== PROCESO =================== */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);margin-top:var(--space-8)}
.paso{padding-top:var(--space-5);border-top:1px solid var(--border-hairline);opacity:0;transform:translateY(22px)}
.paso.dentro{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}
.paso-n{font-size:var(--size-sm);font-weight:var(--weight-bold);color:var(--naranja-700);margin-bottom:10px}
.paso h3{font-size:var(--size-xl);font-weight:var(--weight-extrabold);margin-bottom:8px}
.paso p{margin:0;font-size:var(--size-md);color:var(--text-muted);max-width:30ch}

/* =================== COTIZAR =================== */
.cotiza{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);margin-top:var(--space-10);align-items:start}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5)}
.campo label{font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.campo input,.campo select,.campo textarea{
  height:46px;padding:0 var(--space-4);border-radius:var(--radius-md);
  border:var(--border-width) solid var(--border-hairline);background:var(--surface-card);
  color:var(--text-body);font-family:var(--font-text);font-size:var(--size-md);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.campo textarea{height:auto;min-height:104px;padding:var(--space-3) var(--space-4);line-height:var(--leading-normal);resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--petroleo-300)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--naranja-500);box-shadow:0 0 0 3px var(--naranja-100)}
.campo small{font-size:var(--size-xs);color:var(--text-muted)}

/* =================== FAQ =================== */
.faq{margin-top:var(--space-10);border-top:1px solid var(--border-hairline)}
.faq details{border-bottom:1px solid var(--border-hairline)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--space-6) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-lg);
  color:var(--petroleo-700);transition:color var(--dur-fast) var(--ease-standard);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--naranja-700)}
.faq-x{position:relative;width:15px;height:15px;flex:none}
.faq-x::before,.faq-x::after{
  content:"";position:absolute;background:var(--naranja-500);border-radius:2px;
  transition:transform var(--dur-base) var(--ease-standard);
}
.faq-x::before{top:6.5px;left:0;width:15px;height:2px}
.faq-x::after{left:6.5px;top:0;width:2px;height:15px}
.faq details[open] .faq-x::after{transform:rotate(90deg)}
.faq-a{padding:0 0 var(--space-6);max-width:62ch;color:var(--text-muted);animation:abrir var(--dur-slow) var(--ease-out-soft)}
.faq-a p{margin:0}
@keyframes abrir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =================== FOOTER =================== */
footer{margin-top:var(--seccion);border-top:1px solid var(--border-hairline)}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:40px 0;flex-wrap:wrap}
.footer-in img{height:34px;width:auto}
.footer-nav{display:flex;gap:var(--space-7,28px)}
.footer-nav a,.footer-nav button{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-text);
  font-size:var(--size-sm);color:var(--text-body);
  transition:color var(--dur-fast) var(--ease-standard);
}
.footer-nav a:hover,.footer-nav button:hover{color:var(--naranja-700)}
.footer-desde{font-size:var(--size-xs);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);text-transform:uppercase}

/* =================== CARRITO =================== */
.overlay{position:fixed;inset:0;background:rgba(11,34,44,.42);backdrop-filter:blur(3px);z-index:80;animation:aparecer var(--dur-base) var(--ease-standard)}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.carrito{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
  background:var(--surface-card);display:flex;flex-direction:column;
  transform:translateX(103%);transition:transform var(--dur-slow) var(--ease-out-soft);
  box-shadow:var(--shadow-lg);
}
.carrito.abierto{transform:none}
.carrito-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--border-hairline)}
.carrito-head h3{font-size:var(--size-xl);font-weight:var(--weight-extrabold)}
.carrito-body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-6)}
.carrito-vacio{text-align:center;color:var(--text-muted);padding:var(--space-16) var(--space-4);font-size:var(--size-sm)}
.carrito-vacio .marca{display:block;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--size-2xl);color:var(--arena);margin-bottom:var(--space-4);letter-spacing:var(--tracking-display)}
.ci{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline);animation:entrar var(--dur-slow) var(--ease-out-soft) backwards}
@keyframes entrar{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ci-media{width:52px;height:64px;border-radius:var(--radius-sm);flex:none;overflow:hidden}
.ci-media img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-nombre{font-weight:var(--weight-semibold);color:var(--petroleo-700);font-size:var(--size-sm);margin:0}
.ci-precio{font-size:var(--size-sm);color:var(--text-muted);margin:0}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);padding:2px}
.qty button{width:28px;height:28px;border:0;background:none;cursor:pointer;border-radius:var(--radius-pill);color:var(--petroleo-700);font-size:15px;transition:background-color var(--dur-fast)}
.qty button:hover{background:var(--hueso)}
.qty span{min-width:22px;text-align:center;font-size:var(--size-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.carrito-foot{padding:var(--space-6);border-top:1px solid var(--border-hairline);display:flex;flex-direction:column;gap:var(--space-4)}
.carrito-total{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--size-md)}
.carrito-total b{font-family:var(--font-display);font-size:var(--size-2xl);color:var(--petroleo-700);letter-spacing:var(--tracking-heading)}
.carrito-nota{font-size:var(--size-xs);color:var(--text-muted);margin:0}

/* =================== TOAST =================== */
.toast{
  position:fixed;left:28px;bottom:28px;z-index:100;
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  background:var(--petroleo-700);color:var(--papel);box-shadow:var(--shadow-lg);
  font-size:var(--size-sm);max-width:340px;
  animation:subir var(--dur-slow) var(--ease-out-soft);transition:opacity var(--dur-slow);
}
.toast i{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--amarillo-500);margin-top:6px;flex:none}
.toast.ok i{background:var(--verde-500)}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =================== FLY AL CARRITO =================== */
.fly{
  position:fixed;z-index:120;width:30px;height:30px;border-radius:var(--radius-xs);
  pointer-events:none;transition:transform .75s var(--ease-out-soft),opacity .75s ease-in;
}

/* =================== PRODUCTO DEL MES ===================
   Una sola pieza, en grande. La elige a mano `productoDelMes` en config.js. */
.mes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
/* 3/4 es la proporción en la que vienen las fotos del producto: así entran
   completas, sin que el recorte se coma el mosquetón ni el pie de la foto. */
.carrusel{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;
  box-shadow:var(--shadow-md);background:var(--arena);
}
.carrusel-pista{display:flex;height:100%;transition:transform var(--dur-slow) var(--ease-out-soft)}
/* Se dimensionan tanto las láminas nuevas como una <img> suelta dentro de la
   pista: así, si el navegador sirve un app.js viejo desde caché, las fotos
   siguen apareciendo en vez de dejar el recuadro vacío. */
.lamina,.carrusel-pista>img{position:relative;margin:0;width:100%;height:100%;flex:none}
.lamina img,.carrusel-pista>img,.mes-media .bloque{width:100%;height:100%;object-fit:cover;display:block}
.lamina img,.carrusel-pista>img{user-select:none;-webkit-user-drag:none}

/* Rótulo sobre la foto, con el scrim que pide el manual: sin él el texto claro
   se pierde en las zonas claras de la imagen. */
.lamina-scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}
.lamina-rotulo{
  position:absolute;left:var(--space-6);right:var(--space-6);bottom:var(--space-5);
  display:flex;flex-direction:column;gap:2px;color:var(--papel);text-shadow:0 1px 2px rgba(11,34,44,.28);
}
.lamina-titulo{font-size:var(--size-2xl);font-weight:var(--weight-regular);line-height:var(--leading-snug)}
.lamina-sub{font-size:var(--size-lg);font-weight:var(--weight-bold)}
.lamina-pie{margin-top:2px;font-size:var(--size-sm);opacity:.82}

/* los puntos van debajo de la foto: encima competirían con el fondo blanco
   de una lámina y con el texto quemado de la otra */
.carrusel-puntos{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}
.carrusel-puntos button{
  width:8px;height:8px;padding:0;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--petroleo-300);
  transition:width var(--dur-base) var(--ease-out-soft),background-color var(--dur-base) var(--ease-standard);
}
.carrusel-puntos button:hover{background:var(--petroleo-500)}
.carrusel-puntos button.activo{width:24px;background:var(--petroleo-500)}
.mes-info h2{font-size:var(--size-3xl);font-weight:var(--weight-extrabold);margin:6px 0 var(--space-4)}
.mes-info .lead{margin:0 0 var(--space-4)}
.mes-detalle{margin:0;color:var(--text-muted);font-size:var(--size-sm)}
.mes-precio{
  margin:var(--space-5) 0 var(--space-6);
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--size-3xl);color:var(--petroleo-700);
}
.mes-precio small{
  display:block;font-family:var(--font-text);font-weight:var(--weight-medium);
  font-size:var(--size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}

/* =================== PERSONALIZAR PIEZA ===================
   Se abre al elegir una placa: talla, nombre y foto antes de ir a la bolsa. */
/* Se declara arriba, en la base: cualquier display: pisa al atributo hidden. */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--space-5);
  background:rgba(11,34,44,.42);backdrop-filter:blur(3px);
  animation:aparecer var(--dur-base) var(--ease-standard);
}
.modal-caja{
  width:min(460px,100%);max-height:calc(100vh - var(--space-10));
  background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  animation:pzEntra var(--dur-slow) var(--ease-playful);
}
@keyframes pzEntra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-6);border-bottom:1px solid var(--border-hairline);
}
.modal-head h3{font-size:var(--size-xl);font-weight:var(--weight-extrabold);margin-top:2px}
.modal-body{padding:var(--space-6);overflow-y:auto}
.modal-body .campo:last-child{margin-bottom:0}
.modal-foot{padding:var(--space-6);border-top:1px solid var(--border-hairline)}

/* las cuatro tallas, como botones que se marcan */
.pz-tallas{border:0;padding:0;margin-bottom:var(--space-5)}
.pz-tallas legend{
  padding:0;margin-bottom:6px;
  font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong);
}
.variantes--compacto{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.variantes--tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.talla,.variante{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--space-3) 2px;cursor:pointer;
  background:var(--surface-card);color:var(--petroleo-700);
  border:1.5px solid var(--border-hairline);border-radius:var(--radius-md);
  font-family:inherit;transition:border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.talla:hover,.variante:hover{border-color:var(--petroleo-300)}
.talla.activa,.variante.activa{border-color:var(--naranja-500);background:var(--naranja-100);transform:translateY(-1px)}
.talla b,.variante b{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--size-base)}
.talla span,.variante span{font-size:var(--size-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.talla.activa span,.variante.activa span{color:var(--text-body)}
.talla-nota{margin-top:6px;font-size:var(--size-xs);color:var(--text-muted);min-height:1.2em}

/* la foto que elige el cliente */
.foto-caja{display:flex;gap:var(--space-4);align-items:center;margin-top:var(--space-3)}
.foto-caja img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-md);flex:none}
.foto-info{min-width:0}
.foto-nombre{margin:0;font-size:var(--size-sm);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.foto-dato{margin:2px 0 0;font-size:var(--size-xs);color:var(--text-muted)}
.foto-dato.aviso{color:var(--naranja-700)}
.foto-quitar{
  margin-top:4px;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--size-xs);color:var(--text-muted);text-decoration:underline;
}
.foto-quitar:hover{color:var(--petroleo-700)}

/* lo que el cliente eligió, resumido en la bolsa */
.ci-opciones{margin:2px 0 0;font-size:var(--size-xs);color:var(--text-muted);line-height:var(--leading-normal)}

/* =================== PERSONALIZAR: PIEZAS NUEVAS ===================
   Todo sale de los tokens del sistema. Ningún color escrito a mano
   salvo los seis de la placa, que vienen de productos.js. */

/* --- vista previa --- */
.pz-previa{
  display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-5);margin-bottom:var(--space-3);
  background:var(--arena);border-radius:var(--radius-md);
}
.previa-disco{
  flex:none;width:118px;height:118px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;position:relative;
  border:6px solid #242424;background:var(--arena);
  transition:width var(--dur-slow) var(--ease-out-soft),
             height var(--dur-slow) var(--ease-out-soft),
             background-color var(--dur-base) var(--ease-standard);
}
/* La foto no llena el disco: se apoya abajo y ocupa el 78 %, de modo que
   el color elegido queda visible alrededor. Antes la imagen tapaba el
   disco entero y elegir color no se notaba. */
.previa-disco img{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:78%;height:78%;object-fit:cover;object-position:top center;
  display:block;border-radius:50% 50% 0 0;
}
.previa-vacia{
  font-size:var(--size-xs);color:var(--petroleo-700);opacity:.55;
  text-align:center;padding:0 var(--space-3);line-height:var(--leading-snug);
}
.previa-datos{min-width:0;display:flex;flex-direction:column;gap:6px}
.previa-linea{margin:0;display:flex;flex-direction:column}
.previa-linea span{
  font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.previa-linea b{font-size:var(--size-sm);color:var(--text-strong);overflow-wrap:anywhere}
.pz-aviso{
  margin:0 0 var(--space-6);font-size:var(--size-xs);color:var(--text-muted);
  line-height:var(--leading-normal);
}

/* --- colores --- */
.pz-colores{border:0;padding:0;margin-bottom:var(--space-5)}
.pz-colores legend{
  padding:0;margin-bottom:8px;
  font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong);
}
.colores{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2)}
.color{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:var(--space-2) 2px;cursor:pointer;font-family:inherit;
  background:none;border:1.5px solid transparent;border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard);
}
.color-muestra{
  width:30px;height:30px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(11,34,44,.12);
  transition:transform var(--dur-base) var(--ease-playful),box-shadow var(--dur-base) var(--ease-standard);
}
.color-nombre{font-size:var(--size-2xs);color:var(--text-muted)}
.color:hover .color-muestra{transform:scale(1.08)}
.color.activa{border-color:var(--naranja-500);background:var(--naranja-100)}
.color.activa .color-muestra{box-shadow:inset 0 0 0 1px rgba(11,34,44,.18),0 0 0 3px var(--papel),0 0 0 5px var(--petroleo-500)}
.color.activa .color-nombre{color:var(--text-strong);font-weight:var(--weight-semibold)}
.talla:focus-visible,.variante:focus-visible,.color:focus-visible{outline:2px solid var(--petroleo-500);outline-offset:2px}

/* tarjetas de variante: número, precio y una línea de porqué */
.variante--tarjeta{padding:var(--space-4) var(--space-2);gap:3px;text-align:center}
.variante--tarjeta b{font-size:var(--size-md);line-height:1.1}
.variante-precio{font-size:var(--size-xs);font-weight:var(--weight-semibold);color:var(--text-strong)}
.variante-desc{font-size:var(--size-2xs);color:var(--text-muted);line-height:var(--leading-snug)}
.variante.activa .variante-precio{color:var(--naranja-700)}

/* --- vista previa del álbum --- */
.previa-libro{flex:none;position:relative;width:132px;height:180px}
.previa-tapa{
  position:absolute;inset:0;left:7px;border-radius:4px var(--radius-md) var(--radius-md) 4px;
  overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:var(--space-3) var(--space-3) var(--space-2);
  box-shadow:var(--shadow-md);background:var(--arena);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.previa-lomo{
  position:absolute;left:0;top:2px;bottom:2px;width:9px;border-radius:3px 0 0 3px;
  background:rgba(11,34,44,.22);
}
.previa-tapa-foto{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;
  background:rgba(255,255,255,.45);
}
.previa-tapa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.previa-tapa-texto{margin-top:var(--space-2);text-align:center;min-width:0}
.previa-tapa-texto b{
  display:block;font-family:var(--font-display);font-size:var(--size-sm);
  font-weight:var(--weight-extrabold);color:var(--petroleo-700);
  line-height:var(--leading-snug);overflow-wrap:anywhere;
}
.previa-tapa-texto span{
  display:block;margin-top:2px;font-size:var(--size-2xs);
  color:var(--petroleo-700);opacity:.75;overflow-wrap:anywhere;
}
.previa-tapa-marca{
  margin-top:auto;font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:.1em;color:var(--petroleo-700);opacity:.5;
}

/* --- bolsa: aviso de fotos pendientes --- */
.ci-pendiente{
  margin:4px 0 0;font-size:var(--size-2xs);color:var(--naranja-700);
  line-height:var(--leading-snug);
}
.listo-pendiente{display:block;margin-top:3px;font-size:var(--size-xs);color:var(--naranja-700)}

/* --- campos: contador y error --- */
.campo-titulo{font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.campo-pie{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.contador{font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap}
.contador--tope{color:var(--naranja-700);font-weight:var(--weight-semibold)}
.campo-error{
  margin:6px 0 0;font-size:var(--size-sm);color:var(--naranja-700);
  line-height:var(--leading-normal);
}
.campo--mal{border-color:var(--naranja-500)!important}

/* --- zona para soltar la foto --- */
.soltar{
  margin-top:6px;padding:var(--space-6) var(--space-5);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  border:1.5px dashed var(--petroleo-300);border-radius:var(--radius-md);
  background:var(--arena);cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard);
}
.soltar:hover,.soltar.encima{border-color:var(--naranja-500);background:var(--naranja-100)}
.soltar:focus-visible{outline:2px solid var(--petroleo-500);outline-offset:2px}
.soltar-icono{width:30px;height:30px;color:var(--petroleo-500)}
.soltar-titulo{margin:2px 0 0;font-size:var(--size-md);font-weight:var(--weight-semibold);color:var(--text-strong)}
.soltar-tipos{margin:0;font-size:var(--size-xs);color:var(--text-muted)}
.soltar-boton{margin-top:var(--space-2);pointer-events:none}
.soltar-arrastre{margin:2px 0 0;font-size:var(--size-xs);color:var(--text-muted)}
@media (hover:none){.soltar-arrastre{display:none}}

.foto-acciones{display:flex;gap:var(--space-4);margin-top:4px}

/* --- renglones de la bolsa --- */
.ci-dato{display:inline-flex;align-items:center;gap:5px;margin-right:var(--space-3)}
.ci-color{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,34,44,.15)}
.ci-acciones{display:flex;gap:var(--space-4);margin-top:6px}
.ci-acciones button{
  padding:0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--size-xs);color:var(--text-muted);text-decoration:underline;
}
.ci-acciones button:hover{color:var(--petroleo-700)}

/* --- formulario de pedido --- */
.modal-caja--ancha{width:min(620px,100%)}
.bloque-form{margin-bottom:var(--space-8)}
.bloque-form:last-child{margin-bottom:0}
.bloque-titulo{
  margin:0 0 var(--space-2);font-family:var(--font-display);
  font-size:var(--size-lg);font-weight:var(--weight-extrabold);color:var(--text-strong);
}
.bloque-nota{margin:0 0 var(--space-5);font-size:var(--size-sm);color:var(--text-muted);line-height:var(--leading-normal)}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-5)}
.casilla{
  display:flex;gap:var(--space-3);align-items:flex-start;
  margin-bottom:var(--space-3);cursor:pointer;
  font-size:var(--size-sm);color:var(--text-body);line-height:var(--leading-normal);
}
.casilla input{margin:2px 0 0;width:17px;height:17px;flex:none;accent-color:var(--naranja-500);cursor:pointer}
.casilla a{text-decoration:underline}
/* Aclaración bajo una casilla: se alinea con su texto, no con la caja. */
.casilla-nota{
  margin:calc(var(--space-3) * -1) 0 var(--space-4) calc(17px + var(--space-3));
  font-size:var(--size-xs);color:var(--text-muted);line-height:var(--leading-normal);
}

/* botón ocupado */
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn[disabled]:hover{transform:none;box-shadow:none}
.hilando{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:girando .7s linear infinite;
}
@keyframes girando{to{transform:rotate(360deg)}}

/* --- confirmación --- */
.listo-lead{margin:0 0 var(--space-6);font-size:var(--size-md)}
.referencia{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:var(--space-5);margin-bottom:var(--space-5);
  background:var(--amarillo-100);border-radius:var(--radius-md);
}
.referencia-etiqueta{
  font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.referencia-numero{
  font-family:var(--font-display);font-size:var(--size-2xl);
  font-weight:var(--weight-extrabold);color:var(--petroleo-700);
  letter-spacing:var(--tracking-heading);font-variant-numeric:tabular-nums;
}
.referencia .btn{margin-top:var(--space-2)}
.listo-linea{
  margin:0 0 var(--space-3);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-hairline);
  display:flex;flex-direction:column;gap:2px;
}
.listo-linea:last-child{border-bottom:0;margin-bottom:0}
.listo-linea b{font-size:var(--size-md);color:var(--text-strong)}
.listo-linea span{font-size:var(--size-sm);color:var(--text-muted)}
.listo-total{margin-top:var(--space-4)}

@media (max-width:620px){
  .dos-columnas{grid-template-columns:1fr}
  .colores{grid-template-columns:repeat(3,1fr)}
  .variantes--tarjetas{grid-template-columns:1fr}
  .pz-previa{flex-direction:column;align-items:flex-start}
}

/* =================== RASTRO DE HUELLITAS ===================
   ⚠️ El manual de marca prohíbe huellas como decoración.
   Se conserva por continuidad con el prototipo anterior; para apagarlo,
   pon RASTRO = false en app.js. */
.rastro{position:fixed;inset:0;pointer-events:none;z-index:5}
/* petróleo pedido por la marca; no está en los tokens, el más cercano es --petroleo-500 (#215166) */
.huella{position:absolute;width:19px;height:19px;color:#005268;opacity:.62;animation:huella 1.4s var(--ease-standard) forwards}
@keyframes huella{0%{opacity:.62;transform:scale(.75)}100%{opacity:0;transform:scale(1.05)}}

/* =================== REVEAL =================== */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.dentro{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  :root{--margen:32px;--seccion:64px}
  .hero-in{grid-template-columns:1fr;gap:var(--space-10)}
  .placa-escena{min-height:500px;order:-1}
  /* column-gap y row-gap por separado: el atajo `gap` borraba el row-gap
     de la base, que es lo que separa cada imagen de su texto. */
  .grid{grid-template-columns:repeat(2,1fr);column-gap:var(--space-8);row-gap:var(--space-2)}
  .pasos{grid-template-columns:1fr;gap:var(--space-8)}
  .cotiza{grid-template-columns:1fr;gap:var(--space-10)}
  .mes{grid-template-columns:1fr;gap:var(--space-8)}
  .nav{display:none}
}
@media (max-width:620px){
  :root{--margen:20px;--seccion:52px}
  .header-in{height:88px}
  .header.compacta .header-in{height:70px}
  .logo img{height:46px}
  .header.compacta .logo img{height:38px}
  .grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .hero-datos{gap:var(--space-5) var(--space-6)}
  .banda-in{flex-direction:column;align-items:flex-start}
  .footer-in{flex-direction:column;align-items:flex-start;gap:var(--space-6)}
  .toast{left:16px;right:16px;bottom:16px;max-width:none}
}

/* =================== MENOS MOVIMIENTO =================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.ficha,.paso{opacity:1;transform:none}
  .mq-track{animation:none}
}

/* =================== PÁGINAS PRIVADAS ===================
   Portal del comprador y panel del equipo. Reutilizan los mismos
   tokens y componentes del sitio: no son otra marca. */
.pagina-privada{background:var(--surface-page)}
.privada-main{padding:var(--space-12) 0 var(--space-24);max-width:1000px}
.privada-h1{font-family:var(--font-display);font-size:var(--size-3xl);font-weight:var(--weight-extrabold);margin:6px 0 var(--space-4)}
.privada-lead{max-width:56ch;margin:0 0 var(--space-8)}
.privada-form{max-width:380px}
.privada-espera{display:flex;align-items:center;gap:var(--space-3);color:var(--text-muted)}
.privada-pista{margin:var(--space-8) 0 var(--space-4);font-size:var(--size-sm);color:var(--text-muted)}
.privada-cerrado{
  padding:var(--space-5);margin:0 0 var(--space-8);border-radius:var(--radius-md);
  background:var(--amarillo-100);color:var(--petroleo-700);font-size:var(--size-sm);
  line-height:var(--leading-normal);
}
.privada-cierre{margin-top:var(--space-10);display:flex;justify-content:center}
.aviso-ok{margin:var(--space-4) 0 0;font-size:var(--size-sm);color:var(--verde-700);line-height:var(--leading-normal)}
.barra-sesion{display:flex;align-items:center;gap:var(--space-4);font-size:var(--size-sm);color:var(--text-muted)}
.hilando--oscuro{border-color:var(--petroleo-500);border-top-color:transparent}
.soltar--ancho{width:100%}

/* progreso */
.progreso{margin:0 0 var(--space-8)}
.progreso-cifras{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-3)}
.progreso-cifras b{font-family:var(--font-display);font-size:var(--size-xl);font-weight:var(--weight-extrabold);color:var(--petroleo-700)}
.progreso-cifras span{font-size:var(--size-sm);color:var(--text-muted)}
.progreso-riel{height:10px;border-radius:var(--radius-pill);background:var(--arena);overflow:hidden}
.progreso-riel i{display:block;height:100%;width:0;border-radius:inherit;background:var(--amarillo-500);
  transition:width var(--dur-slow) var(--ease-out-soft)}
.progreso-detalle{margin:6px 0 0;font-size:var(--size-xs);color:var(--text-muted)}

/* rejilla de páginas */
.rejilla{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.rejilla--admin{margin-top:var(--space-4)}
.pagina{position:relative;display:flex;flex-direction:column;gap:5px}
.pagina-media{
  aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--arena);
  display:grid;place-items:center;
}
.pagina-media img{width:100%;height:100%;object-fit:cover;display:block}
.pagina-num{font-size:var(--size-2xs);color:var(--text-muted);text-align:center}
.pagina--vacia .pagina-media{border:1.5px dashed var(--petroleo-300);background:transparent}
.pagina--llena{cursor:grab}
.pagina--llena:active{cursor:grabbing}
.pagina.arrastrando{opacity:.4}
.pagina.destino .pagina-media{outline:2px solid var(--naranja-500);outline-offset:2px}
.pagina-x{
  position:absolute;top:5px;right:5px;width:22px;height:22px;padding:0;cursor:pointer;
  border:0;border-radius:50%;background:rgba(11,34,44,.62);color:var(--papel);
  font-size:11px;line-height:1;opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.pagina:hover .pagina-x,.pagina:focus-within .pagina-x{opacity:1}
.pagina-barra{width:72%;height:5px;border-radius:var(--radius-pill);background:var(--papel);overflow:hidden}
.pagina-barra i{display:block;height:100%;width:0;background:var(--naranja-500);transition:width .2s linear}
.pagina-reintentar{
  padding:0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--size-2xs);color:var(--naranja-700);text-decoration:underline;
}

/* panel */
.admin-filtros{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.admin-tabla{display:flex;flex-direction:column}
.admin-fila{
  display:grid;grid-template-columns:110px 1.4fr 1fr .8fr .8fr 1fr;gap:var(--space-4);
  align-items:center;text-align:left;width:100%;padding:var(--space-4) var(--space-2);
  background:none;border:0;border-bottom:1px solid var(--border-hairline);cursor:pointer;
  font-family:inherit;font-size:var(--size-sm);color:var(--text-body);
}
.admin-fila:hover{background:var(--arena)}
.admin-ref{font-weight:var(--weight-bold);color:var(--petroleo-700);font-variant-numeric:tabular-nums}
.admin-cliente{display:flex;flex-direction:column}
.admin-cliente small{color:var(--text-muted);font-size:var(--size-xs)}
.admin-estado{font-size:var(--size-xs);font-weight:var(--weight-semibold)}
.admin-estado--pendiente_pago{color:var(--naranja-700)}
.admin-estado--entregado,.admin-estado--diseno_aprobado{color:var(--verde-700)}
.admin-fotos,.admin-fecha{color:var(--text-muted);font-size:var(--size-xs)}
.admin-total{font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.admin-columnas{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-10);margin-top:var(--space-6)}
.admin-lateral{border-left:1px solid var(--border-hairline);padding-left:var(--space-8)}
.admin-pieza{display:flex;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--border-hairline)}
.admin-pieza-media{width:88px;height:88px;flex:none;border-radius:var(--radius-md);overflow:hidden;background:var(--arena)}
.admin-pieza-media img{width:100%;height:100%;object-fit:cover;display:block}
.admin-pieza-datos{min-width:0;flex:1}
.admin-pieza-datos h3{margin:0;font-size:var(--size-lg);font-weight:var(--weight-extrabold)}
.admin-sub{margin:2px 0 0;font-size:var(--size-sm);color:var(--text-muted)}
.admin-meta{margin:6px 0 0;font-size:var(--size-sm);color:var(--text-body);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.admin-instr{margin:6px 0 0;font-size:var(--size-sm);color:var(--text-body);line-height:var(--leading-normal)}
.admin-acciones{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}
.admin-datos{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px var(--space-4);font-size:var(--size-sm)}
.admin-datos dt{color:var(--text-muted)}
.admin-datos dd{margin:0;overflow-wrap:anywhere}
.admin-bitacora{display:flex;flex-direction:column;gap:var(--space-3)}
.bitacora-linea{margin:0;display:flex;flex-direction:column;gap:1px;font-size:var(--size-sm)}
.bitacora-linea small{color:var(--text-muted);font-size:var(--size-xs)}

@media (max-width:900px){
  .admin-columnas{grid-template-columns:1fr}
  .admin-lateral{border-left:0;padding-left:0;border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
  .admin-fila{grid-template-columns:90px 1fr;row-gap:var(--space-2)}
  .admin-fecha{display:none}
}

/* Los filtros del panel no tienen la píldora deslizante del catálogo,
   así que el chip activo necesita su propio fondo o queda invisible. */
.admin-filtros .chip{position:static;background:var(--arena);color:var(--text-body)}
.admin-filtros .chip.activo{background:var(--petroleo-500);color:var(--papel)}
.admin-filtros .chip:hover{background:var(--petroleo-100)}
.admin-filtros .chip.activo:hover{background:var(--petroleo-700)}

/* =================== CATÁLOGO DE TRES PIEZAS ===================
   La placa manda: ocupa dos columnas y lleva insignia. */
/* En petróleo, no en amarillo: la insignia se posa sobre la fotografía
   del producto, y buena parte del catálogo está fotografiado sobre el
   amarillo de marca. Amarillo sobre amarillo no se lee. Este azul
   contrasta con cualquier fondo que llegue. */
.insignia{
  position:absolute;top:var(--space-4);left:var(--space-4);z-index:2;
  padding:5px var(--space-3);border-radius:var(--radius-pill);
  background:var(--petroleo-500);color:var(--papel);
  font-size:var(--size-2xs);font-weight:var(--weight-bold);
  letter-spacing:.1em;text-transform:uppercase;
}
.insignia--suelta{position:static;display:inline-block;margin-bottom:var(--space-3)}
.ficha--principal{grid-column:span 2}
.ficha--principal .ficha-media{aspect-ratio:16/11}
.ficha--principal .ficha-nombre{font-size:var(--size-2xl)}
@media (max-width:1000px){.ficha--principal{grid-column:span 2}}
@media (max-width:620px){.ficha--principal{grid-column:span 1}.ficha--principal .ficha-media{aspect-ratio:4/5}}

/* beneficios del bloque Best Seller */
.beneficios{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.beneficios li{position:relative;padding-left:var(--space-6);font-size:var(--size-md);color:var(--text-body);line-height:var(--leading-normal)}
.beneficios li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--amarillo-500);box-shadow:0 0 0 3px var(--amarillo-100);
}
.mes-acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* carrusel de fieludos: sin cabecera, con arrastre. El título
   «Algunos de nuestros fieludos» se retiró el 27/08/2026. */
.mq{cursor:grab;touch-action:pan-y}
.mq::-webkit-scrollbar{display:none}
.mq.agarrando{cursor:grabbing}
.mq.quieta .mq-track{animation-play-state:paused}
@media (max-width:620px){
  .mq-item{font-size:var(--size-2xl)}
  .mq-track{gap:var(--space-8)}
}

/* cuatro pasos */
.pasos--cuatro{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.pasos--cuatro{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pasos--cuatro{grid-template-columns:1fr}}
/* Una línea fina y texto tenue en vez de un bloque de color: es una
   aclaración, no un aviso, y el bloque le daba más peso del que pide. */
.proceso-nota{
  /* Sin filete: los cuatro hairlines de las columnas ya estructuran la
     sección, y un quinto a media página se leía como una regla rota.

     Pasó de párrafo a lista porque son dos hechos distintos —qué pasa
     con las fotografías, y qué se cierra por WhatsApp— y de corrido se
     leían como uno solo. La viñeta es la misma de `.beneficios`, la que
     el sitio ya usa en la ficha de la placa: punto amarillo con aro
     claro. No hace falta inventar otra. */
  list-style:none;margin:var(--space-12) 0 0;padding:0;
  /* Cuatro columnas y cada viñeta ocupa dos: así arrancan exactamente
     donde arrancan el paso 01 y el paso 03, y la nota se lee como el
     pie de la retícula y no como un texto suelto debajo. Suelta y a
     media página parecía que sobraba. */
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-5) var(--space-8);
  font-size:var(--size-md);line-height:var(--leading-relaxed);
}
.proceso-nota li{
  grid-column:span 2;
  position:relative;padding-left:var(--space-8);
  /* Un punto más de tinta que el gris de antes: sigue siendo una
     aclaración, pero ahora se ve. */
  color:var(--text-body);
}
/* En vez del punto de `.beneficios`, un icono por línea: cada uno dice
   lo que dice su frase —las fotografías guardadas, la conversación—, así
   que son funcionales y no adorno. Lucide a trazo 2 y 20px, como manda
   §10, y en `--amarillo-700` como los del hero: es el mismo lenguaje,
   no uno nuevo.

   El movimiento también es el del hero: ciclo de 4,2s, casi todo el
   rato quietos, y el gesto en el último tercio. Escalonados para que
   no latan a la vez. Quien pida menos movimiento los ve parados: el
   bloque global de `prefers-reduced-motion` corta toda animación. */
.nota-icono{
  position:absolute;left:0;top:.15em;
  display:block;width:20px;height:20px;color:var(--amarillo-700);
}
.nota-icono svg{width:100%;height:100%;display:block}

/* La fotografía de atrás se acomoda en su sitio: «guardadas juntas». */
.i-fotos .f-atras{animation:ic-guardar 4.2s var(--ease-standard) infinite}
@keyframes ic-guardar{
  0%,58%,100%{transform:translate(0,0)}
  70%{transform:translate(-1.4px,1.4px)}
  84%{transform:translate(0,0)}
}
/* Los tres puntos de la burbuja, uno tras otro: alguien contestando. */
.i-chat .p1,.i-chat .p2,.i-chat .p3{animation:ic-punto 4.2s var(--ease-standard) infinite}
.i-chat .p2{animation-delay:.14s}
.i-chat .p3{animation-delay:.28s}
@keyframes ic-punto{
  0%,55%,100%{opacity:.34}
  64%{opacity:1}
  78%{opacity:.34}
}
@media (max-width:900px){
  .proceso-nota{grid-template-columns:1fr}
  .proceso-nota li{grid-column:auto}
}

/* =================== CONFIGURADOR: PIEZAS NUEVAS =================== */
.colores--dos{grid-template-columns:repeat(2,1fr)}

/* paso a paso de los paquetes */
.pz-pasos{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) var(--space-6);background:var(--arena);
  font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong);
}
.pz-puntos{display:flex;gap:6px}
.pz-punto{width:7px;height:7px;border-radius:50%;background:var(--petroleo-300);transition:all var(--dur-base) var(--ease-standard)}
.pz-punto.listo{background:var(--verde-500)}
.pz-punto.activo{width:20px;border-radius:var(--radius-pill);background:var(--petroleo-500)}

/* vista previa · portarretrato */
.previa-marco{
  flex:none;width:118px;padding:9px 9px 0;border-radius:3px;
  box-shadow:var(--shadow-md);background:var(--arena);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.previa-marco-lienzo{
  aspect-ratio:20/26;border-radius:2px;overflow:hidden;background:var(--papel);
  display:grid;place-items:center;
}
.previa-marco-lienzo img{width:100%;height:100%;object-fit:cover;display:block}
.previa-marco-pie{padding:7px 2px 9px;text-align:center;color:var(--papel)}
.previa-marco--claro .previa-marco-pie{color:var(--petroleo-700)}
.previa-marco-pie b{display:block;font-family:var(--font-display);font-size:var(--size-sm);font-weight:var(--weight-extrabold);overflow-wrap:anywhere}
.previa-marco-pie span{display:block;margin-top:2px;font-size:var(--size-2xs);opacity:.8;overflow-wrap:anywhere}

/* vista previa · tote */
.previa-tote{flex:none;position:relative;width:132px;padding-top:26px}
.previa-tote-asa{
  position:absolute;top:0;width:34px;height:30px;border:3px solid var(--petroleo-300);
  border-bottom:0;border-radius:18px 18px 0 0;
}
.previa-tote-asa--izq{left:22px}
.previa-tote-asa--der{right:22px}
/* El cuerpo iba en `--arena`, el mismo color que la tarjeta que lo
   rodea, así que la bolsa era invisible y sólo se veían las asas
   flotando. Ahora es lona clara con su contorno, como el dibujo. */
.previa-tote-cuerpo{
  border-radius:3px 3px 8px 8px;
  background:var(--papel);
  border:2px solid var(--petroleo-300);
  padding:var(--space-4) var(--space-3);min-height:132px;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
}
/* El estampado va rectangular, que es como se imprime en una tote.
   Redondo parecía una chapa, no una bolsa. */
.previa-tote-estampa{
  width:82px;height:82px;border-radius:var(--radius-xs);overflow:hidden;flex:none;
  display:grid;place-items:center;background:var(--hueso);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.previa-tote-estampa img{width:100%;height:100%;object-fit:cover;display:block}
/* El nombre impreso. La familia y el color los pone el JS con lo que
   elija el cliente, así que aquí sólo van tamaño y peso. */
.previa-tote-cuerpo b{
  font-size:var(--size-lg);font-weight:var(--weight-bold);
  line-height:1.15;text-align:center;overflow-wrap:anywhere;
}

/* el modal nunca debe pasarse de alto en móvil */
@media (max-width:620px){
  .modal{padding:0;align-items:flex-end}
  .modal-caja{width:100%;max-height:94vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .pz-previa{padding:var(--space-4)}
  .previa-libro,.previa-marco,.previa-tote{width:104px}
}

/* buscador de ciudad: escribe y el sitio deduce zona y tarifa */
.campo--busca{position:relative}
.sugerencias{
  position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:4px;
  list-style:none;max-height:224px;overflow-y:auto;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
}
.sugerencias li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;
}
.sugerencias li:hover,.sugerencias li[aria-selected="true"]{background:var(--arena)}
.sugerencias b{font-size:var(--size-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.sugerencias span{font-size:var(--size-xs);color:var(--text-muted);white-space:nowrap}
.zona-resuelta{margin:6px 0 0;font-size:var(--size-sm);line-height:var(--leading-normal)}
.zona-resuelta--ok{color:var(--verde-700);font-weight:var(--weight-semibold)}
.zona-resuelta--sin{color:var(--naranja-700)}

/* desglose antes del total *//* desglose antes del total */
.desglose{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-2)}
.desglose p{display:flex;justify-content:space-between;margin:0;font-size:var(--size-sm);color:var(--text-muted)}
.desglose b{font-weight:var(--weight-semibold);color:var(--text-body);font-variant-numeric:tabular-nums}
.faq-lista{margin:var(--space-3) 0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:5px}
.faq-lista li{font-size:var(--size-md);line-height:var(--leading-normal)}

/* Con la silueta recortada la foto ya no necesita llenar el disco: se
   apoya abajo, un poco más grande, y el color rodea a la mascota. */
.previa-disco img.previa-foto--recortada{
  width:88%;height:88%;object-fit:contain;object-position:bottom center;
  border-radius:0;
}

/* =================== CÓMO FUNCIONA EL QR ===================
   Línea de tiempo: horizontal en escritorio, vertical en celular.
   La línea amarilla se dibuja sola al abrir. */
.linea{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);position:relative}
.linea::before{
  content:"";position:absolute;left:0;right:0;top:22px;height:3px;border-radius:2px;
  background:var(--amarillo-200);z-index:0;
}
.linea::after{
  content:"";position:absolute;left:0;top:22px;height:3px;border-radius:2px;
  background:var(--amarillo-500);width:0;z-index:0;
  transition:width 1.1s var(--ease-out-soft) .15s;
}
.modal:not([hidden]) .linea::after{width:100%}

/* El paso entero por encima de la raya. Antes sólo el número subía, y
   bastaba con que algo creara contexto de apilamiento dentro del paso
   para que la raya volviera a cruzarle por encima. */
.linea-paso{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.linea-n{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--amarillo-500);color:var(--petroleo-700);
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--size-xl);
  /* sin esto la caja hereda el interlineado del cuerpo y recorta el número */
  line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px var(--surface-card);position:relative;z-index:2;
  opacity:0;transform:scale(.7);
}
.modal:not([hidden]) .linea-n{animation:qrPunto .45s var(--ease-playful) forwards}
.linea-paso:nth-child(1) .linea-n{animation-delay:.15s}
.linea-paso:nth-child(2) .linea-n{animation-delay:.40s}
.linea-paso:nth-child(3) .linea-n{animation-delay:.65s}
.linea-paso:nth-child(4) .linea-n{animation-delay:.90s}
@keyframes qrPunto{to{opacity:1;transform:none}}

.linea-icono{width:30px;height:30px;color:var(--petroleo-500);margin-top:var(--space-2)}
.linea-icono svg{width:100%;height:100%;display:block}
.linea-paso h4{
  margin:0;font-family:var(--font-display);font-size:var(--size-md);
  font-weight:var(--weight-extrabold);color:var(--petroleo-700);line-height:var(--leading-snug);
}
.linea-paso p{margin:0;font-size:var(--size-sm);color:var(--text-body);line-height:var(--leading-normal)}

.linea-paso{opacity:0;transform:translateY(10px)}
.modal:not([hidden]) .linea-paso{animation:qrEntra .5s var(--ease-out-soft) forwards}
.linea-paso:nth-child(1){animation-delay:.15s}
.linea-paso:nth-child(2){animation-delay:.30s}
.linea-paso:nth-child(3){animation-delay:.45s}
.linea-paso:nth-child(4){animation-delay:.60s}
@keyframes qrEntra{to{opacity:1;transform:none}}

.linea-cierre{
  margin:var(--space-8) 0 0;padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);text-align:center;
  font-family:var(--font-display);font-size:var(--size-lg);
  font-weight:var(--weight-extrabold);color:var(--petroleo-700);
}

@media (max-width:760px){
  /* vertical: la línea baja por el costado de los números */
  .linea{grid-template-columns:1fr;gap:var(--space-6)}
  .linea::before,.linea::after{left:22px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .linea::after{height:0;width:3px;transition:height 1.1s var(--ease-out-soft) .15s}
  .modal:not([hidden]) .linea::after{height:100%;width:3px}
  .linea-paso{display:grid;grid-template-columns:46px 1fr;column-gap:var(--space-4);row-gap:4px;align-items:start}
  .linea-n{grid-row:1 / span 3}
  .linea-icono{grid-column:2;margin-top:0}
  .linea-paso h4,.linea-paso p{grid-column:2}
}

/* Con «menos movimiento» la línea aparece dibujada, sin animarse. */
@media (prefers-reduced-motion:reduce){
  .linea::after{transition:none;width:100%}
  .linea-n,.linea-paso{opacity:1;transform:none;animation:none!important}
}

/* --- iconos vivos de la línea de tiempo ---
   Cada uno hace lo que describe su paso: el QR se escanea, la ficha se
   escribe, la campana suena y el corazón late. Ciclos de 3.6 s, escalonados
   para que no parpadeen los cuatro a la vez. */
.linea-icono svg *{transform-box:fill-box;transform-origin:center}

/* 1 · el QR: esquinas que laten y una línea que barre */
.modal:not([hidden]) .ico-qr-c{animation:icoLatir 3.6s var(--ease-standard) infinite}
.ico-qr-c2{animation-delay:.18s}
.ico-qr-c3{animation-delay:.36s}
@keyframes icoLatir{0%,62%,100%{opacity:1}70%{opacity:.35}78%{opacity:1}}

.ico-qr-barrido{opacity:0}
.modal:not([hidden]) .ico-qr-barrido{animation:icoBarrer 3.6s var(--ease-standard) infinite}
@keyframes icoBarrer{
  0%,8%{opacity:0;transform:translateY(-8px)}
  16%{opacity:.85}
  46%{opacity:.85;transform:translateY(8px)}
  56%,100%{opacity:0;transform:translateY(8px)}
}

/* 2 · la ficha: sus líneas van apareciendo */
.modal:not([hidden]) .ico-fi-l{animation:icoEscribir 3.6s var(--ease-standard) infinite}
.ico-fi-l1{animation-delay:.1s}
.ico-fi-l2{animation-delay:.35s}
.ico-fi-l3{animation-delay:.6s}
@keyframes icoEscribir{
  0%{opacity:0;transform:translateX(-3px)}
  14%,72%{opacity:1;transform:none}
  86%,100%{opacity:0;transform:translateX(-3px)}
}

/* 3 · la campana suena y aparece el aviso */
.linea-icono svg .ico-campana{transform-origin:50% 12%}
.modal:not([hidden]) .ico-campana{animation:icoSonar 3.6s var(--ease-standard) infinite}
@keyframes icoSonar{
  0%,56%,100%{transform:rotate(0)}
  62%{transform:rotate(13deg)}
  68%{transform:rotate(-11deg)}
  74%{transform:rotate(7deg)}
  80%{transform:rotate(-4deg)}
  86%{transform:rotate(0)}
}
.ico-campana-punto{opacity:0}
.modal:not([hidden]) .ico-campana-punto{animation:icoAviso 3.6s var(--ease-playful) infinite}
@keyframes icoAviso{
  0%,54%{opacity:0;transform:scale(0)}
  62%{opacity:1;transform:scale(1.25)}
  70%,92%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(0)}
}

/* 4 · el corazón de la casa late */
.modal:not([hidden]) .ico-corazon{animation:icoCorazon 3.6s var(--ease-playful) infinite}
@keyframes icoCorazon{
  0%,58%,100%{transform:scale(1)}
  66%{transform:scale(1.28)}
  72%{transform:scale(1)}
  78%{transform:scale(1.18)}
  84%{transform:scale(1)}
}

/* No se retrasa por paso: eso pisaría el escalonado interno de cada icono
   (las esquinas del QR, las líneas de la ficha). Como los cuatro gestos son
   distintos, no se leen sincronizados aunque empiecen a la vez. */

@media (prefers-reduced-motion:reduce){
  .ico-qr-barrido,.ico-campana-punto{opacity:1}
  .linea-icono svg *{animation:none!important;transform:none!important;opacity:1!important}
}
.zona-resuelta--cotizar{color:var(--naranja-700)}

/* =========================================================
   BACK OFFICE — panel de placas
   ========================================================= */
.admin-tabs{display:flex;gap:var(--space-2);margin:var(--space-5) 0 var(--space-8)}
.admin-tab{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  border:var(--border-width) solid var(--border-hairline);background:transparent;
  font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--text-muted);
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard);
}
.admin-tab:hover{border-color:var(--petroleo-300);color:var(--text-strong)}
.admin-tab.activo{background:var(--petroleo-500);border-color:var(--petroleo-500);color:var(--papel)}
/* Contador de avisos sin leer: si hay algo pendiente tiene que verse
   desde la pestaña, sin entrar a buscarlo. */
.admin-pip{
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--naranja-500);color:var(--papel);
  font-size:var(--size-2xs);font-weight:var(--weight-bold);
  display:inline-grid;place-items:center;
}

.admin-fila--estatica{cursor:default;background:transparent}
.admin-fila--estatica:hover{background:transparent}

.pl-ayuda{font-size:var(--size-sm);color:var(--text-muted);line-height:var(--leading-normal);margin:var(--space-2) 0 var(--space-4)}

.pl-foto{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}
.pl-marco{
  width:132px;height:132px;flex:none;
  border-radius:var(--radius-pill);overflow:hidden;
  background:var(--surface-muted);
  border:var(--border-width-strong) solid var(--arena);
  display:grid;place-items:center;
}
.pl-marco img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.pl-vacio{font-size:var(--size-xs);color:var(--text-muted)}
.pl-foto-lado{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}

.pl-aviso{
  padding:var(--space-4);margin-bottom:var(--space-3);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);
  font-size:var(--size-sm);line-height:var(--leading-relaxed);
}
.pl-aviso--nuevo{border-color:var(--naranja-500);background:var(--naranja-100)}
.pl-aviso-fecha{font-size:var(--size-xs);color:var(--text-muted);margin-bottom:var(--space-2)}
.pl-aviso-dato{margin-top:var(--space-2);color:var(--text-muted)}
.pl-aviso-dato b{color:var(--text-body)}

/* Empaque de regalo · una casilla con su precio a la derecha, dentro
   del configurador. El precio se alinea al borde para que se lea de un
   vistazo junto al total, no perdido en el texto. */
.pz-regalo .casilla{
  align-items:center;margin:0;gap:var(--space-3);
  padding:var(--space-4);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-md);
}
.pz-regalo .casilla:hover{border-color:var(--petroleo-300)}
.pz-regalo .casilla:has(input:checked){border-color:var(--petroleo-500);background:var(--petroleo-100)}
.pz-regalo .casilla > span{flex:1;display:flex;flex-direction:column;gap:2px}
.pz-regalo b{font-weight:var(--weight-semibold);color:var(--text-strong)}
.pz-regalo small{font-size:var(--size-xs);color:var(--text-muted)}
.pz-regalo-precio{flex:none;font-size:var(--size-sm);color:var(--text-strong)}

/* Tipografías del tote · cada opción se muestra escrita con su propio
   trazo. Es una aproximación con fuentes del sistema: la letra final la
   compone el equipo, y el modal lo advierte debajo. */
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.tipo{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  padding:var(--space-4) var(--space-2);cursor:pointer;
  background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast);
}
.tipo:hover{border-color:var(--petroleo-300)}
.tipo.activa{border-color:var(--petroleo-500);border-width:var(--border-width-strong);background:var(--petroleo-100)}
.tipo-muestra{font-size:var(--size-2xl);line-height:1.1;color:var(--petroleo-700)}
.tipo-nombre{font-size:var(--size-2xs);color:var(--text-muted);letter-spacing:.04em}
.tipo.activa .tipo-nombre{color:var(--text-strong)}
@media (max-width:620px){.tipos{grid-template-columns:repeat(2,1fr)}}

/* Testimonios en el back office · foto a la izquierda, texto a la
   derecha, y los pendientes marcados para que salten a la vista. */
.ts{
  display:flex;gap:var(--space-5);align-items:flex-start;
  padding:var(--space-5);margin-bottom:var(--space-4);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);
}
.ts--nuevo{border-color:var(--naranja-500);background:var(--naranja-100)}
.ts-foto{
  width:104px;height:104px;flex:none;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-muted);display:grid;place-items:center;
}
.ts-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ts-cuerpo{flex:1;min-width:0}
.ts-cabeza{font-size:var(--size-md);color:var(--text-body);margin-bottom:var(--space-2)}
.ts-cabeza b{color:var(--text-strong)}
.ts-estado{
  margin-left:var(--space-3);padding:2px var(--space-2);border-radius:var(--radius-pill);
  background:var(--surface-muted);color:var(--text-muted);
  font-size:var(--size-2xs);letter-spacing:.08em;text-transform:uppercase;
}
.ts-texto{font-size:var(--size-md);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.ts-firma{margin-top:var(--space-2);font-size:var(--size-xs);color:var(--text-muted)}
.ts-acciones{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
@media (max-width:620px){.ts{flex-direction:column}.ts-foto{width:100%;height:180px}}

/* =================== CÓMO COMPRAR · LÍNEA DE TIEMPO ===================
   Cuatro pasos en fila, unidos por un hilo amarillo que se llena a
   medida que cada paso entra en pantalla (reutiliza `.paso` y su
   IntersectionObserver, así que app.js no cambia).

   Cada paso enseña una maqueta de la pantalla real: fotografías del
   catálogo y los mismos estados del configurador —talla activa en
   naranja, color con el aro de petróleo—. Las maquetas se miden en
   `cqi` sobre el ancho de su propia caja: una sola hoja de estilos
   sirve para la columna estrecha del escritorio y para el ancho
   completo del móvil, sin recalcular tamaños. */
/* =================== LA RUTA ===================
   Cuatro pasos, y la sección donde más fácil era equivocarse.

   La versión anterior los metía en cuatro tarjetas color hueso con
   sombra al pasar el cursor, y dentro de cada una una maqueta en
   miniatura de la pantalla real: barra de catálogo, casillas de talla,
   burbujas de chat. Tres reglas del manual rotas de una vez —hairlines
   en vez de tarjetas, nada de tarjetas con sombra, máximo tres colores
   por composición cuando ahí había siete— y una cuarta de fondo: una
   interfaz falsa en miniatura es lenguaje de producto de software, no
   de una marca cuya protagonista es la fotografía.

   Ahora cada paso es un DISCO. La placa es redonda: es la forma de la
   marca, la misma que cuelga en el hero. Cuatro discos en fila se leen
   como una secuencia sin necesidad de rieles ni de números metidos en
   círculos, y de paso cuentan la pieza haciéndose: los tres productos
   entre los que se elige, la fotografía que sube el cliente, la placa
   terminada por delante y su reverso con el QR.

   Debajo, el patrón de pasos que el sitio ya usaba antes de que esto
   se volviera tarjetas: hairline, número en versales, título y una
   línea. Sin inventar nada donde ya había algo correcto.
   =================== */

.ruta{
  list-style:none;margin:var(--space-12) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-12) var(--space-8);
}

/* `.paso` sigue puesto porque el observador del scroll mira esa clase.
   Su filete y su padding se anulan aquí: el hairline de esta sección lo
   pone `.ruta-texto`, debajo del disco, no encima. */
.ruta-paso{
  display:flex;flex-direction:column;
  border-top:0;padding-top:0;
  opacity:0;transform:translateY(20px);
}
.ruta-paso.dentro{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out-soft),
             transform var(--dur-reveal) var(--ease-out-soft);
}
/* entran de izquierda a derecha, como se leen */
.ruta-paso:nth-child(2).dentro{transition-delay:.08s}
.ruta-paso:nth-child(3).dentro{transition-delay:.16s}
.ruta-paso:nth-child(4).dentro{transition-delay:.24s}

/* --- las maquetas, versión mínima ---
   Tercer intento de esta sección, y el más corto. Los dos anteriores
   se estrellaron en el mismo sitio: apoyaban el paso 02 en una
   fotografía —`oslo-placa.jpg`— que está cortada a ras por abajo y
   descentrada por arriba, y ninguna combinación de recorte la salvaba.

   Aquí la fotografía sale de la sección. No por capricho: el paso 02
   habla de *subir* una fotografía, y una interfaz de subida cuenta eso
   mejor con el nombre del archivo y una barra completa que enseñando
   la imagen. El resto de la portada va sobrada de fotografía —hero,
   catálogo, testimonios, marquesina—; aquí un respiro tipográfico hace
   contraste en vez de competir.

   Las cuatro maquetas son la misma pieza: cintillo en versales, filete,
   y debajo una pila de filas separadas por filetes. Ni una caja, ni una
   sombra, ni un relleno de color que no sea el acento. Un solo amarillo
   por maqueta, siempre marcando lo elegido o lo hecho.

   Se miden en `cqi` sobre el ancho de la columna: la misma hoja vale
   para las cuatro columnas del escritorio y para el móvil. */
.mkp{container-type:inline-size;width:100%;margin:0 0 var(--space-8)}

.mkp-cintillo{
  display:block;font-size:3cqi;font-weight:var(--weight-bold);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  padding-bottom:2.6cqi;border-bottom:1px solid var(--border-hairline);
}
/* Sin alto impuesto: cada maqueta mide lo suyo y lo que alinea los
   cuatro filetes de abajo es el `margin-top:auto` del texto. */
.mkp-cuerpo{padding-top:5cqi;display:flex;flex-direction:column;gap:4.5cqi}

/* --- la fila, que es la unidad de todas las maquetas --- */
.mkp-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:3cqi;
  padding-bottom:3cqi;border-bottom:1px solid var(--border-hairline);
}
.mkp-fila:last-child{border-bottom:0;padding-bottom:0}
.mkp-fila b{font-size:3.9cqi;font-weight:var(--weight-bold);color:var(--text-muted)}
/* Lo elegido: tinta fuerte y el subrayado amarillo del sitio. Nada más. */
.mkp-fila--on b{
  color:var(--text-strong);
  box-shadow:inset 0 -2.5px 0 var(--amarillo-500);
}
.mkp-tic{width:4.4cqi;height:4.4cqi;flex:none;color:var(--petroleo-500)}

/* --- rótulo de campo, común al 02 y al 03 --- */
.mkp-rotulo{
  display:block;font-style:normal;   /* va en <i>, que por defecto es cursiva */
  font-size:2.7cqi;font-weight:var(--weight-bold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:2.4cqi;
}

/* 02 · la subida: nombre del archivo y una barra llena */
.mkp-archivo{display:flex;align-items:center;gap:3cqi}
.mkp-archivo svg{width:6.5cqi;height:6.5cqi;flex:none;color:var(--petroleo-300)}
.mkp-archivo b{display:block;font-size:3.9cqi;font-weight:var(--weight-bold);color:var(--text-strong)}
.mkp-archivo i{display:block;font-style:normal;font-size:3cqi;color:var(--text-muted)}
/* Completa: es un paso resuelto, no uno en curso. Media barra contaría
   otra cosa —que algo está a medias— y no es lo que dice el texto. */
.mkp-barra{height:2cqi;border-radius:var(--radius-pill);background:var(--amarillo-500)}

/* 03 · el configurador, en tres campos */
.mkp-tallas{display:flex;gap:3.4cqi;font-size:3.9cqi;font-weight:var(--weight-bold)}
.mkp-tallas u{text-decoration:none;color:var(--text-muted);padding-bottom:1.4cqi}
.mkp-tallas u.on{color:var(--text-strong);box-shadow:inset 0 -2.5px 0 var(--amarillo-500)}
/* Tres colores, los tres oficiales. El manual no admite más por
   composición, y aquí no hacen falta más para decir «se elige color». */
.mkp-colores{display:flex;gap:3cqi}
.mkp-colores u{width:5.6cqi;height:5.6cqi;border-radius:50%;background:var(--c);border:1px solid rgb(0 0 0 / .08)}
.mkp-colores u.on{box-shadow:0 0 0 1.6cqi var(--papel),0 0 0 calc(1.6cqi + 2px) var(--petroleo-500)}
.mkp-nombre{font-size:4.2cqi;font-weight:var(--weight-bold);color:var(--text-strong)}
.mkp-nombre em{
  display:inline-block;width:1.5px;height:3.6cqi;margin-left:.6cqi;
  background:var(--naranja-500);vertical-align:-.5cqi;
}

/* 04 · el chat, dos líneas y ya */
.mkp-burbujas{display:flex;flex-direction:column;gap:3.4cqi;font-size:3.4cqi;line-height:1.5}
.mkp-burb{padding:3.8cqi;border-radius:var(--radius-md)}
/* La esquina cuadrada dice de qué lado sale el mensaje sin dibujar el
   pico, que es un adorno de más. */
.mkp-burb--mia{background:var(--amarillo-500);color:var(--petroleo-700);border-bottom-right-radius:var(--radius-xs)}
.mkp-burb--suya{background:var(--surface-muted);border:1px solid var(--border-hairline);color:var(--text-body);border-bottom-left-radius:var(--radius-xs)}
.mkp-burb b{display:block;font-weight:var(--weight-bold)}
.mkp-burb i{display:block;font-style:normal;font-size:3cqi;opacity:.72}
.mkp-hora{display:flex;align-items:center;justify-content:flex-end;gap:1.4cqi;font-size:2.8cqi;opacity:.72;margin-top:2.6cqi}
.mkp-hora svg{width:4.8cqi;height:3.8cqi}

/* --- el texto, con el patrón de pasos de siempre --- */
.ruta-texto{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--border-hairline)}
.ruta-n{
  display:block;font-size:var(--size-xs);font-weight:var(--weight-bold);
  letter-spacing:.16em;color:var(--naranja-700);margin-bottom:var(--space-3);
}
.ruta-paso h3{
  font-size:var(--size-xl);font-weight:var(--weight-extrabold);
  letter-spacing:-.02em;line-height:1.12;margin:0 0 var(--space-2);
}
.ruta-paso p{
  margin:0;font-size:var(--size-md);color:var(--text-muted);
  line-height:1.55;max-width:26ch;
}

@media (max-width:900px){
  .ruta{grid-template-columns:repeat(2,1fr);gap:var(--space-10) var(--space-6)}
}
/* En una sola columna la maqueta se queda encima del texto y a ancho
   completo. Antes aquí se metía en 5rem al lado del título, que servía
   cuando era un disco; una maqueta a ese tamaño no se lee. Y como
   miden en `cqi`, al ensancharse crecen solas: no hace falta tocar ni
   un tamaño. */
@media (max-width:560px){
  .ruta{grid-template-columns:1fr;gap:var(--space-10)}
  .mkp{max-width:22rem}
}

@media (prefers-reduced-motion:reduce){
  .ruta-paso{opacity:1;transform:none;transition:none}
}

/* =========================================================
   TESTIMONIOS · tarjetas
   ---------------------------------------------------------
   La fotografía manda y el texto se apoya encima, sobre el
   mismo velo que usa el resto del sitio. La comilla grande es
   decorativa: va marcada como oculta para los lectores de
   pantalla, que ya reciben el texto entrecomillado.
   ========================================================= */
.testis-titulo{
  font-family:var(--type-title-family);font-size:var(--size-3xl);
  font-weight:var(--type-title-weight);letter-spacing:var(--tracking-display);
  line-height:var(--leading-snug);color:var(--text-strong);
  margin:var(--space-2) 0 var(--space-10);
}
/* Con `1fr` una sola tarjeta se estiraba a todo el ancho y quedaba
   enorme. Con un máximo, la fila crece en número de tarjetas, no en
   tamaño de cada una. */
.testis-fila{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,344px));
  gap:var(--space-6);justify-content:start;
}
.testi{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--surface-photo);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-slow) var(--ease-out-soft),box-shadow var(--dur-slow) var(--ease-out-soft);
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-photo)}
.testi-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.testi::after{
  content:"";position:absolute;inset:0;background:var(--scrim-bottom);
}
.testi-pieza{
  position:absolute;top:var(--space-4);left:var(--space-4);z-index:2;
  padding:5px var(--space-3);border-radius:var(--radius-pill);
  background:rgba(11,34,44,.55);backdrop-filter:blur(6px);color:var(--papel);
  font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;
}
.testi-cuerpo{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--space-6);color:var(--papel);
}
/* En cursiva y sin comillas escritas: la comilla grande del fondo ya
   dice que es una cita, y las « » duplicaban el gesto. */
.testi-texto{
  font-size:var(--size-md);line-height:var(--leading-normal);
  font-style:italic;
  text-wrap:pretty;margin-bottom:var(--space-4);
}
.testi-firma{display:flex;align-items:center;gap:var(--space-3)}
/* Un icono de persona, no la foto: la fotografía es de la mascota y
   ponerla aquí en pequeño parecía el retrato de quien escribe. */
.testi-avatar{
  width:38px;height:38px;flex:none;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:rgba(255,253,247,.16);
  border:1.5px solid rgba(255,253,247,.55);
  color:var(--papel);
}
.testi-avatar svg{width:19px;height:19px}
.testi-quien b{display:block;font-size:var(--size-sm);font-weight:var(--weight-semibold)}
.testi-quien span{display:block;font-size:var(--size-xs);color:rgba(255,253,247,.75)}
/* La comilla decorativa, detrás de la firma. Va en serif porque las
   comillas curvas de Inter salen como dos rayas inclinadas; en Georgia
   tienen la forma de comilla de toda la vida. */
.testi-comilla{
  position:absolute;right:var(--space-5);bottom:calc(var(--space-2) * -1);z-index:1;
  font-family:Georgia,'Times New Roman',serif;
  font-size:132px;line-height:.7;
  color:rgba(255,253,247,.26);pointer-events:none;user-select:none;
}
@media (max-width:620px){
  .testis-fila{grid-template-columns:1fr}
  .testi{aspect-ratio:4/5}
}

/* =================== PANEL · CONTENIDO DE LA PORTADA ===================
   El formulario que edita los textos del sitio. Mismo lenguaje que el
   resto del panel: filetes, nada de tarjetas, y los campos a ancho
   cómodo de lectura en vez de estirados a toda la pantalla. */
.cn-grupo{
  border:0;border-top:1px solid var(--border-hairline);
  margin:0 0 var(--space-8);padding:var(--space-6) 0 0;
}
.cn-grupo legend{
  padding:0;font-size:var(--size-xs);font-weight:var(--weight-bold);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.cn-campo{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-5);max-width:52ch}
.cn-campo label{font-size:var(--size-sm);font-weight:var(--weight-bold);color:var(--text-strong)}
.cn-campo input,.cn-campo textarea{
  font:inherit;font-size:var(--size-md);color:var(--text-body);
  padding:10px 12px;border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);background:var(--papel);
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.cn-campo input:focus,.cn-campo textarea:focus{outline:0;border-color:var(--border-focus)}
.cn-campo textarea{resize:vertical;min-height:4.4em;line-height:1.5}
.cn-pista{font-size:var(--size-xs);color:var(--text-muted)}
/* El botón se queda a la vista al desplazar: el formulario es largo y
   subir a buscarlo cada vez cansa. */
.cn-pie{
  position:sticky;bottom:0;display:flex;align-items:center;gap:var(--space-5);
  margin-top:var(--space-8);padding:var(--space-5) 0;
  background:var(--surface-page);border-top:1px solid var(--border-hairline);
}
.cn-estado{font-size:var(--size-sm);color:var(--text-muted)}

/* Campo de imagen: la previa manda, el resto se aparta. Cuadrada y
   pequeña porque aquí sólo hay que reconocer cuál es, no juzgarla —
   para eso está la portada. */
.cn-campo--img{max-width:none}
.cn-img{display:flex;align-items:center;gap:var(--space-5)}
.cn-previa{
  width:88px;height:88px;flex:none;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-photo);
  display:flex;align-items:center;justify-content:center;
}
.cn-previa img{width:100%;height:100%;object-fit:cover;display:block}
.cn-previa i{font-style:normal;font-size:var(--size-xs);color:var(--text-muted);text-align:center;padding:0 6px}
.cn-img-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cn-img-acciones input[type=file]{font:inherit;font-size:var(--size-sm);color:var(--text-body)}
.cn-quitar{
  font:inherit;font-size:var(--size-sm);color:var(--text-link);
  background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--amarillo-500);
  text-underline-offset:3px;text-decoration-thickness:2px;
}
.cn-quitar:hover{color:var(--text-link-hover)}

/* =================== EL QR DE LA PLACA ===================
   El código que se manda a producción. Marco blanco y ancho a
   propósito: la norma pide cuatro módulos de silencio alrededor,
   y sin ellos muchos lectores no encuentran el código. Ese margen
   ya viene dentro del SVG; el marco sólo lo hace evidente para
   quien mire la pantalla.
   =================== */
.pl-qr{
  display:flex;gap:var(--space-6);align-items:flex-start;
  flex-wrap:wrap;margin-bottom:var(--space-10);
}
.pl-qr-marco{
  flex:0 0 auto;width:220px;height:220px;
  display:grid;place-items:center;
  background:#FFFFFF;
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  padding:var(--space-2);
  font-size:var(--size-xs);color:var(--text-muted);text-align:center;
}
.pl-qr-marco svg{display:block;width:100%;height:auto}
.pl-qr-lado{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.pl-qr-lado .admin-acciones{margin-top:var(--space-2)}

@media (max-width:560px){
  .pl-qr-marco{width:170px;height:170px}
}