/* ═══ CÁSCARA COMPARTIDA ════════════════════════════════════════════════
   Lo que usan catálogo, configurador y seguimiento: la barra, el pie, los
   botones, las tarjetas y los pasos. La portada NO usa este archivo — tiene su
   propio <style> con las piezas de cartel que solo existen ahí, y meterlas acá
   habría hecho que toda página cargue el sistema entero para pintar un
   formulario.

   El color y la tipografía salen de tokens.css, que es la fuente de verdad de
   los dos. Acá no se declara ni un color nuevo.
   ══════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--violeta);outline-offset:2px}
/* El movimiento es decoración: quien pidió que no se mueva, no lo ve moverse. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.saltar{position:absolute;left:-9999px;background:var(--violeta);color:var(--sobre-violeta);
  padding:10px 18px;border-radius:var(--radio-chico);z-index:99}
.saltar:focus{left:8px;top:8px}

/* ── barra superior ── */
.doc{background:var(--tinta);color:var(--papel);font-family:var(--f-texto);
  font-size:12px;letter-spacing:.02em;padding:8px 0}
.doc .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.doc button{background:none;border:1px solid var(--inv-linea);color:inherit;
  font:inherit;padding:3px 12px;border-radius:var(--radio-pildora);cursor:pointer;margin-left:10px}

/* La barra flota sobre el papel cálido con una línea fina, no con un borde
   grueso: el peso del sistema nuevo lo llevan las tarjetas, no las reglas. */
.nav{position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--linea)}
.nav .wrap{display:flex;align-items:center;gap:clamp(12px,3vw,32px);min-height:64px}
/* El wordmark es el del kit y no se deforma: alto fijo, ancho automático. */
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:30px;width:auto}
/* El menú va centrado: la marca a la izquierda, las acciones a la derecha y
   los enlaces repartiéndose el medio. `flex:1` con `justify-content:center`
   centra respecto al hueco que queda, no respecto a la página — que es lo que
   se ve bien cuando los dos costados no pesan igual. */
.nav nav{flex:1}
.nav ul{justify-content:center}
.nav ul{list-style:none;display:flex;gap:clamp(10px,2.2vw,26px);flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:4px 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--violeta)}
/* La sección activa no se marca solo con color: el subrayado la deja legible
   para quien no distingue el violeta del gris. */
.nav a[aria-current="page"]{border-bottom-color:var(--violeta);color:var(--violeta)}
.acciones-nav{display:flex;gap:8px;margin-left:auto;align-items:center}

/* ── menú del teléfono ────────────────────────────────────────────────
   Debajo de 860 px la lista no cabe en una línea, y dejarla envolver le comía
   media pantalla al hero. Se pliega detrás de un botón. */
.menu-boton{display:none;align-items:center;gap:8px;font:inherit;font-weight:700;
  background:transparent;border:1.5px solid var(--linea);color:var(--tinta);
  padding:8px 14px;min-height:42px;border-radius:var(--radio-pildora);cursor:pointer}
.menu-boton .barras{width:16px;height:2px;background:currentColor;position:relative;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}

/* En un teléfono angosto los tres controles no entran, y el que sobra es el
   "Empezá a crear" de la barra: el hero tiene esa misma llamada a un dedo de
   distancia, y el catálogo y el configurador siguen en el menú. Se va el
   duplicado, no el acceso. */
@media (max-width:620px){
  .acciones-nav .btn-fuerte{display:none}
}

@media (max-width:860px){
  .menu-boton{display:inline-flex;margin-left:auto;order:2}
  .acciones-nav{order:3;margin-left:0}
  .nav nav{order:4;flex:0 0 100%}
  /* Cerrado ocupa cero: `hidden` no serviría porque el menú tiene que poder
     animarse y porque el atributo lo pisa cualquier `display` de más arriba —
     es el mismo tropiezo que ya costó una sesión en el panel. */
  .nav nav[data-abierto="no"]{display:none}
  .nav ul{flex-direction:column;gap:0;padding:6px 0 12px}
  .nav ul a{display:block;padding:12px 0;border-bottom:1px solid var(--linea-fina);
    border-top:0}
  .nav a[aria-current="page"]{border-bottom-color:var(--linea-fina)}
}

/* ── botones ──────────────────────────────────────────────────────────
   Tres pesos y no más: contorno, violeta y rosa. El violeta es la acción
   principal y por eso NO se usa para nada más — en cuanto haya dos violetas en
   una pantalla, ninguno es el principal. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-texto);font-weight:700;font-size:15.5px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  padding:12px 22px;min-height:46px;border-radius:var(--radio-pildora);
  border:2px solid var(--violeta);background:transparent;color:var(--violeta);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:var(--violeta-suave)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;transform:none}
.btn-fuerte{background:var(--violeta);color:var(--sobre-violeta);box-shadow:var(--sombra)}
.btn-fuerte:hover{background:var(--violeta);box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.btn-vivo{background:var(--rosa);color:var(--sobre-rosa);border-color:var(--rosa);
  box-shadow:var(--sombra)}
.btn-vivo:hover{background:var(--rosa);box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.btn-chico{font-size:13.5px;padding:7px 15px;min-height:38px}

/* ── tarjetas ─────────────────────────────────────────────────────────
   Blanca sobre el papel cálido, radio 20 y sombra suave. Es el componente que
   le da el carácter al sistema: sin el radio y sin el blanco, la misma paleta
   se ve como un panel de administración. */
.ficha{background:var(--hueso);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:clamp(18px,3vw,28px)}
.ficha + .ficha{margin-top:18px}
.ficha h2,.ficha h3{font-family:var(--f-display);font-weight:800;
  letter-spacing:-.01em;line-height:1.15}
.ficha h2{font-size:clamp(21px,2.6vw,27px)}
.ficha h3{font-size:18px}
.rotulo{font-family:var(--f-texto);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-60)}
.dato{font-family:var(--f-dato)}
.nota{font-size:14px;color:var(--tinta-72)}

/* El titular a dos colores es la firma del sistema: la primera línea en
   violeta y la segunda en tinta. Se marca con <b> dentro del h1. */
h1{font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,5.4vw,52px);line-height:1.06;letter-spacing:-.025em}
h1 b{color:var(--violeta);font-weight:800}
.encabezado{padding:clamp(24px,4vw,44px) 0 20px}
main{padding-bottom:clamp(40px,7vw,80px)}

/* ── rejilla de productos ── */
.rejilla{display:grid;gap:16px;margin-top:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.tarjeta{background:var(--hueso);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);display:flex;flex-direction:column;
  text-decoration:none;height:100%;transition:transform .14s ease,box-shadow .14s ease}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.tarjeta .lienzo{aspect-ratio:4/3;background:
  repeating-linear-gradient(0deg,transparent 0 11px,var(--cuadricula) 11px 12px),
  repeating-linear-gradient(90deg,transparent 0 11px,var(--cuadricula) 11px 12px),var(--papel);
  border-bottom:1px solid var(--linea);display:grid;place-items:center;overflow:hidden}
.tarjeta .lienzo img{width:100%;height:100%;object-fit:cover}
.tarjeta .cuerpo{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta .cuerpo b{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.2}
.precio{font-family:var(--f-dato);font-weight:700;background:var(--sol);color:var(--sobre-sol);
  padding:4px 12px;border-radius:var(--radio-pildora);display:inline-block;align-self:flex-start}

/* ── filtros ── */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.filtro{font-family:var(--f-texto);font-weight:600;font-size:14px;
  border:1.5px solid var(--linea);background:var(--hueso);color:var(--tinta);
  padding:8px 16px;min-height:40px;cursor:pointer;border-radius:var(--radio-pildora)}
.filtro:hover{border-color:var(--violeta)}
/* Seleccionado NO es solo color: el borde engorda y el fondo se llena, así que
   se distingue sin depender de ver el violeta. */
.filtro[aria-pressed="true"]{background:var(--violeta);color:var(--sobre-violeta);
  border-color:var(--violeta)}

/* ── formularios ── */
label{display:block;font-family:var(--f-texto);font-weight:700;font-size:13px;
  color:var(--tinta-72);margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;min-height:46px;
  background:var(--papel);color:var(--tinta);border:1.5px solid var(--linea);
  border-radius:var(--radio-chico)}
input:focus,select:focus,textarea:focus{border-color:var(--violeta)}
textarea{min-height:96px;resize:vertical}
.campo{margin-bottom:14px}
.campos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
/* El mensaje de error va PEGADO a su campo y referenciado por aria-describedby:
   un resumen arriba obliga a quien usa lector de pantalla a buscar cuál falló. */
.error-campo{color:var(--rosa);font-size:14px;font-weight:600;margin-top:4px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rosa)}

/* ── opciones en tarjeta (el configurador se toca, no se escribe) ── */
.opciones{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.opcion{border:1.5px solid var(--linea);background:var(--hueso);padding:14px 16px;text-align:left;
  cursor:pointer;font:inherit;color:inherit;min-height:58px;display:flex;flex-direction:column;gap:3px;
  border-radius:var(--radio-chico);transition:border-color .12s ease,box-shadow .12s ease}
.opcion:hover{border-color:var(--violeta)}
.opcion b{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.25}
.opcion small{color:var(--tinta-60);font-size:13px}
/* Elegida: borde violeta grueso Y fondo teñido. Dos señales, no una, por lo
   mismo que en los chips. */
.opcion[aria-pressed="true"]{border-color:var(--violeta);border-width:2px;
  background:var(--violeta-suave);box-shadow:var(--sombra)}
.opcion[disabled]{opacity:.4;cursor:not-allowed}

/* La muestra de color lleva SIEMPRE el nombre al lado: una paleta de cuadritos
   sin texto no la puede usar quien no distingue esos dos azules, y el nombre es
   además lo que el cliente dicta por teléfono. */
.muestra{width:28px;height:28px;border:2px solid var(--linea);flex:0 0 auto;border-radius:50%}
.opcion-color{flex-direction:row;align-items:center;gap:10px}

/* ── tallas ── */
.tallas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.talla label{text-align:center;font-size:13px}
.talla input{text-align:center;font-family:var(--f-dato);font-weight:700}

/* ── vista previa ── */
.previa{position:relative;aspect-ratio:1/1;background:var(--papel);
  border:2px dashed var(--punteado);border-radius:var(--radio-chico);
  display:grid;place-items:center;overflow:hidden}
.previa img.prenda{width:100%;height:100%;object-fit:contain}
.previa .arte{position:absolute;max-width:none;pointer-events:none}
.aviso-previa{font-size:13px;color:var(--tinta-72);margin-top:10px;
  border-left:3px solid var(--sol);padding-left:10px}

/* ── pasos ── */
.pasos{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:14px 0 0}
.pasos{gap:6px}
.pasos li{font-family:var(--f-texto);font-weight:600;font-size:12.5px;
  padding:6px 14px;border:1.5px solid var(--linea);color:var(--tinta-60);
  border-radius:var(--radio-pildora)}
.pasos li[aria-current="step"]{background:var(--violeta);color:var(--sobre-violeta);
  border-color:var(--violeta)}
.pasos li.hecho{border-color:var(--violeta);color:var(--violeta)}

/* ── línea de tiempo del seguimiento ── */
.linea{list-style:none;border-left:2px solid var(--linea);margin-left:8px;padding-left:18px}
.linea li{position:relative;padding-bottom:16px}
.linea li::before{content:"";position:absolute;left:-25px;top:6px;width:12px;height:12px;
  background:var(--papel);border:2px solid var(--tinta);border-radius:50%}
.linea li.actual::before{background:var(--violeta);border-color:var(--violeta)}
.linea li.pendiente{color:var(--tinta-60)}
.linea li.pendiente::before{border-color:var(--linea)}

/* ── estado ── */
.sello{display:inline-block;font-family:var(--f-texto);font-size:13px;font-weight:700;
  padding:5px 14px;border:1.5px solid currentColor;border-radius:var(--radio-pildora)}
.sello.espera{color:var(--tinta-72)}
.sello.accion{color:var(--rosa)}
.sello.bien{color:var(--violeta)}

/* ── tabla ── */
.tabla-envoltura{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea)}
th{font-family:var(--f-texto);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-60);border-bottom:1.5px solid var(--linea)}
td.num,th.num{text-align:right;font-family:var(--f-dato)}

/* ── avisos ── */
.aviso{background:var(--hueso);padding:14px 16px;margin:14px 0;border-radius:var(--radio-chico);
  border-left:6px solid var(--linea);box-shadow:var(--sombra)}
.aviso.malo{border-left-color:var(--rosa)}
.aviso.bueno{border-left-color:var(--violeta)}
.aviso.ojo{border-left-color:var(--sol)}
.vacio{text-align:center;padding:44px 20px;color:var(--tinta-60);
  border:2px dashed var(--punteado);border-radius:var(--radio)}

/* ── pie ── */
/* El pie ocupaba casi una pantalla. Cuatro bloques —marca, procesos, productos y
   contacto— caben en UNA fila en escritorio, alineados arriba. */
.pie{background:var(--tinta);color:var(--inv-fg);padding:clamp(20px,2.4vw,28px) 0;margin-top:auto;
  font-size:13.5px}
.pie a{color:inherit}
.pie a:hover{color:var(--papel)}
/* Una sola declaración. Antes había dos —una rejilla y, más abajo, un flex que
   la pisaba— y la que mandaba no era la que se leía primero. */
.pie .wrap{display:grid;gap:18px 28px;align-items:start;grid-template-columns:1fr}
@media (min-width:900px){ .pie .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)} }
.pie-marca img{height:28px;width:auto;margin-bottom:8px}
.pie-marca .nota{color:var(--inv-fg);opacity:.8;font-size:13px}
.pie-enlaces{display:grid;gap:16px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Dos columnas en tablet y tres en escritorio: a 768 px las tres quedaban
   angostas y los enlaces se partían en dos líneas cada uno. */
@media (min-width:900px){ .pie-enlaces{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pie-enlaces h2{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--papel);
  margin-bottom:6px}
.pie-enlaces ul{list-style:none;display:grid;gap:3px}
.pie-enlaces a{text-decoration:none}
.pie-enlaces a:hover{text-decoration:underline}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* ── asistente ── */
.chat{position:fixed;right:16px;bottom:16px;z-index:50}
.chat-caja{width:min(360px,calc(100vw - 32px));background:var(--hueso);
  border-radius:var(--radio);box-shadow:var(--sombra-alta);display:flex;flex-direction:column;
  max-height:min(70vh,540px);overflow:hidden}
.chat-hilo{overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;flex:1}
.chat-hilo p{font-size:14px;padding:9px 13px;background:var(--papel);max-width:88%;
  border-radius:var(--radio-chico)}
.chat-hilo p.yo{align-self:flex-end;background:var(--violeta);color:var(--sobre-violeta)}
.chat-pie{display:flex;gap:6px;padding:10px;border-top:1px solid var(--linea)}
.chat-pie input{min-height:40px}
/* El botón del chat no tapa la barra de cotizar del teléfono. */
@media (max-width:640px){ .chat{bottom:76px} }

/* En pantalla táctil ningún control baja de 44 px de alto. Los compactos —el
   cambio de tema de la barra, los botones chicos— se ven bien con 38 en
   escritorio, donde el blanco es un puntero de un píxel; en un teléfono el
   blanco es un dedo. Se agrandan por ancho y no siempre, para no inflar la
   barra en escritorio. */
@media (max-width:860px){
  .btn-chico,.doc button,.filtro,.chat-pie input{min-height:44px}
  .doc button{padding:6px 14px}
}

.oculto{display:none!important}

/* ── carrito ──────────────────────────────────────────────────────────
   El número va sobre el icono y solo aparece cuando hay algo: un cero
   permanente es ruido, y además invita a no tocarlo. */
.carrito-nav{position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linea);
  background:var(--hueso);color:var(--tinta);text-decoration:none}
.carrito-nav:hover{border-color:var(--violeta);color:var(--violeta)}
.carrito-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.cuenta-carrito{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;
  padding:0 5px;border-radius:var(--radio-pildora);background:var(--rosa);
  color:var(--sobre-rosa);font-size:11px;font-weight:700;line-height:20px;text-align:center}
/* En el teléfono el CTA de texto se esconde (regla de arriba), pero el carrito
   NO: es la única forma de volver a lo que ya se juntó. */
@media (max-width:860px){ .carrito-nav{width:44px;height:44px} }