/* Letra Archivo (variable: peso y anchura), alojada en la propia web: sin llamadas a Google (RGPD). */
@font-face { font-family: 'Archivo'; src: url('archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  --amarillo: #f3d80f;
  --amarillo-linea: rgb(20 50 31 / .16);
  --verde: #14321f;
  --verde-2: #24513a;
  --azul: #1f4fc4;
  --blanco: #ffffff;
  --salvia: #dde2da;
  --tenue: #56645a;
  --ok: #1d7a45;
  --ambar: #a86a00;
  --rojo: #b42318;
  --ancho: 1180px;
  --letra: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--verde); font: 400 17px/1.55 var(--letra); font-stretch: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.envoltura { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--blanco); border-bottom: 1px solid var(--salvia); }
.cabecera .envoltura { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { font-weight: 800; font-stretch: 125%; font-size: 21px; letter-spacing: .01em; text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 10px; }
.marca i { width: 22px; height: 22px; background: var(--amarillo); border: 2px solid var(--verde); border-radius: 3px;
  background-image: linear-gradient(var(--amarillo-linea) 1px, transparent 1px), linear-gradient(90deg, var(--amarillo-linea) 1px, transparent 1px);
  background-size: 5px 5px; }
.idioma { display: flex; border: 1px solid var(--salvia); border-radius: 999px; overflow: hidden; }
.idioma button { border: 0; background: none; padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--tenue); }
.idioma button[aria-pressed=true] { background: var(--verde); color: var(--blanco); }
.boton-lista { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--verde); background: var(--blanco); border-radius: 999px;
  padding: 7px 14px; font-weight: 700; cursor: pointer; font-size: 15px; }
.boton-lista b { background: var(--amarillo); border-radius: 999px; min-width: 24px; padding: 0 6px; text-align: center; }

/* ---------- Placa (cabecera de la página) ---------- */
.placa { position: relative; margin: 20px auto 0; border-radius: 6px; background-color: var(--amarillo);
  background-image: linear-gradient(var(--amarillo-linea) 1px, transparent 1px), linear-gradient(90deg, var(--amarillo-linea) 1px, transparent 1px);
  background-size: 25px 25px; background-position: -1px -1px; padding: clamp(36px, 7vw, 88px) clamp(20px, 5vw, 64px) clamp(32px, 5vw, 56px); overflow: hidden; }
.placa::before, .placa::after { content: ''; position: absolute; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 2px var(--verde); }
.placa::before { left: 16px; } .placa::after { right: 16px; }
.placa h1 { margin: 0; font-weight: 800; font-stretch: 125%; font-size: clamp(44px, 9vw, 120px); line-height: .98; letter-spacing: -.01em; max-width: 13ch; }
.placa p { margin: 22px 0 0; font-size: clamp(17px, 2vw, 21px); max-width: 46ch; }
.placa .acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  border: 2px solid var(--verde); background: var(--verde); color: var(--blanco); font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.claro { background: transparent; color: var(--verde); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Profesionales ---------- */
.profesionales { background: var(--verde); color: var(--blanco); margin-top: 20px; border-radius: 6px; padding: 22px clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; }
.profesionales h2 { margin: 0 0 4px; font-size: 21px; font-stretch: 112%; }
.profesionales p { margin: 0; color: #d4e2d8; max-width: 70ch; }
.profesionales .btn { background: var(--amarillo); color: var(--verde); border-color: var(--amarillo); }

/* ---------- Catálogo ---------- */
.catalogo { padding: 48px 0 24px; }
.catalogo-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.catalogo-cab h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-stretch: 118%; font-weight: 800; line-height: 1.05; }
.buscar { min-width: min(320px, 100%); flex: 0 1 320px; border: 2px solid var(--salvia); border-radius: 999px; padding: 10px 18px; background: var(--blanco); }
.buscar:focus { border-color: var(--verde); outline: none; }
.familias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; scrollbar-width: thin; }
.familias button { flex: none; border: 1px solid var(--salvia); background: var(--blanco); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 15px; }
.familias button[aria-pressed=true] { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.familias span { opacity: .65; font-weight: 500; margin-left: 4px; }

.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  border-top: 1px solid var(--salvia); border-left: 1px solid var(--salvia); }
.producto { border-right: 1px solid var(--salvia); border-bottom: 1px solid var(--salvia); }
.producto button { all: unset; box-sizing: border-box; display: grid; gap: 10px; width: 100%; height: 100%; padding: 16px 16px 20px; cursor: pointer; }
.producto button:hover .foto { transform: rotate(-1deg) scale(1.01); }
.producto button:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.foto { aspect-ratio: 1; border-radius: 4px; overflow: hidden; transition: transform .2s ease; background: #f4f6f2; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto svg { width: 100%; height: 100%; }
.producto h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; }
.producto .unidades { color: var(--tenue); font-size: 15px; }
.precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.precio strong { font-stretch: 112%; font-size: 24px; font-weight: 800; }
.precio small { color: var(--tenue); font-size: 14px; }
.etiqueta-pvp { flex-basis: 100%; color: var(--tenue); font-size: 13px; }
.pvp { color: var(--tenue); font-size: 15px; margin: 14px 0 0; }
.donde { margin-top: 32px; border: 2px solid var(--verde); border-radius: 6px; padding: 24px clamp(20px, 4vw, 40px); display: grid; gap: 10px; justify-items: start; }
.donde h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-stretch: 115%; }
.donde p { margin: 0; max-width: 70ch; }
.tenue { color: var(--tenue); }
.dispo { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.dispo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dispo.disponible { color: var(--ok); } .dispo.pocas { color: var(--ambar); } .dispo.bajo_pedido { color: var(--tenue); }
.vacio { padding: 48px 0; color: var(--tenue); }

/* ---------- Panel lateral (producto y lista) ---------- */
.velo { position: fixed; inset: 0; background: rgb(20 50 31 / .45); z-index: 40; display: flex; justify-content: flex-end; }
.panel { background: var(--blanco); width: min(560px, 100%); height: 100%; overflow-y: auto; padding: 20px clamp(16px, 4vw, 32px) 40px; display: grid; align-content: start; gap: 16px;
  animation: entra .22s ease-out; }
@keyframes entra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } .foto { transition: none; } }
.panel-cab { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.panel-cab h2 { margin: 0; font-size: 26px; line-height: 1.15; font-stretch: 112%; }
.cerrar { border: 0; background: var(--salvia); width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; flex: none; }
.galeria { display: grid; gap: 8px; }
.galeria .principal { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #f4f6f2; }
.galeria .principal img, .galeria .principal svg { width: 100%; height: 100%; object-fit: contain; }
.miniaturas { display: flex; gap: 8px; }
.miniaturas button { border: 2px solid transparent; padding: 0; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; cursor: pointer; background: none; }
.miniaturas button[aria-pressed=true] { border-color: var(--verde); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.texto { white-space: pre-line; margin: 0; }
.datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.datos dt { color: var(--tenue); } .datos dd { margin: 0; font-weight: 600; }
.fichas a { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.cantidad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cantidad input { width: 90px; border: 2px solid var(--salvia); border-radius: 8px; padding: 10px 12px; text-align: center; font-weight: 700; }
.nota { background: #f4f6f2; border-left: 4px solid var(--amarillo); padding: 12px 14px; border-radius: 0 6px 6px 0; font-size: 15px; }

.linea-lista { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--salvia); }
.linea-lista input { width: 70px; border: 1px solid var(--salvia); border-radius: 8px; padding: 6px 8px; text-align: center; }
.linea-lista button { border: 0; background: none; color: var(--rojo); font-size: 22px; cursor: pointer; }
.total { display: flex; justify-content: space-between; font-weight: 700; }
form.contacto { display: grid; gap: 12px; }
form.contacto label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
form.contacto input, form.contacto textarea, form.contacto select { border: 2px solid var(--salvia); border-radius: 8px; padding: 10px 12px; font-weight: 400; background: var(--blanco); }
form.contacto input:focus, form.contacto textarea:focus { border-color: var(--verde); outline: none; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex !important; grid-template-columns: none; align-items: start; gap: 10px !important; font-weight: 400 !important; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.trampa-robots { position: absolute; left: -9999px; }
.mensaje-ok { background: #e7f3ea; color: var(--ok); padding: 14px; border-radius: 8px; font-weight: 600; }
.mensaje-error { background: #fdecea; color: var(--rojo); padding: 12px 14px; border-radius: 8px; }

/* ---------- Pie ---------- */
.pie { margin-top: 56px; border-top: 1px solid var(--salvia); padding: 32px 0 48px; color: var(--tenue); font-size: 15px; }
.pie .envoltura { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.pie strong { color: var(--verde); }
.pie p { margin: 4px 0; }
.whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: #1f9d55; color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }

/* ---------- Página legal ---------- */
.legal { max-width: 72ch; padding: 32px 0; }
.legal h1 { font-stretch: 118%; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.legal h2 { margin-top: 32px; font-size: 21px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .cabecera .envoltura { gap: 10px; }
  .marca { font-size: 18px; }
  .boton-lista span { display: none; }
  .profesionales { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .producto button { padding: 12px 10px 16px; gap: 8px; }
  .producto h3 { font-size: 16px; }
  .precio strong { font-size: 20px; }
  .dos, .pie .envoltura { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .whatsapp { padding: 9px 14px; font-size: 14px; right: 12px; bottom: 12px; } .pie { padding-bottom: 72px; } }