/* FerreJacky — hoja de estilo unica. Movil primero.
   Paleta y criterio en docs/diseno-y-conversion.md
   Regla que se respeta en todo el archivo: el zapote (naranja) solo aparece
   en elementos accionables de compra. Si el naranja esta en todas partes,
   deja de significar "comprar". */

:root {
  --negro: #14110f;
  --negro-suave: #2b2521;
  --gris: #6b6259;
  --gris-claro: #d9d2cb;
  --crema: #faf8f6;
  --blanco: #fff;

  --zapote: #c44a16;        /* accion — 4,7:1 con texto blanco */
  --zapote-vivo: #e8703a;   /* hover y acentos, nunca texto pequeno */
  --zapote-suave: #fdf0e9;

  --lila: #6b4e9b;          /* marca — 7,1:1 sobre blanco */
  --lila-oscuro: #513a77;
  --lila-suave: #f1ecf7;

  --verde: #1d7a4c;
  --rojo: #b3261e;

  --radio: 12px;
  --radio-s: 8px;
  --sombra: 0 1px 2px rgba(20, 17, 15, .06), 0 4px 12px rgba(20, 17, 15, .05);
  --sombra-alta: 0 2px 4px rgba(20, 17, 15, .08), 0 12px 28px rgba(20, 17, 15, .1);
  --ancho: 1180px;
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--negro);
  background: var(--crema);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lila); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3.6vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.oculto { display: none !important; }
[hidden] { display: none !important; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lila); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radio-s) 0;
}
.saltar:focus { left: 0; }

:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cabecera ---------- */
.top {
  background: var(--lila-oscuro); color: #fff;
  font-size: .82rem; text-align: center; padding: 7px 16px;
}
.top strong { font-weight: 700; }

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--negro); color: #fff;
  box-shadow: 0 2px 10px rgba(20, 17, 15, .18);
}
.header-in {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 8px 16px;
  max-width: var(--ancho); margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 800; font-size: 1.28rem; letter-spacing: -.03em;
  text-decoration: none; flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--lila); display: grid; place-items: center; flex-shrink: 0;
}
.logo-mark svg { width: 20px; height: 20px; }
/* El nombre va envuelto en un span: si "Ferre" y <em>Jacky</em> quedan como
   dos items flex sueltos, el gap del contenedor los separa y la marca se lee
   "Ferre Jacky". */
.logo-txt { white-space: nowrap; }
.logo em { font-style: normal; color: var(--zapote-vivo); }

.nav { display: none; margin-left: auto; gap: 4px; }
.nav a {
  color: #e8e3de; padding: 9px 12px; border-radius: var(--radio-s);
  font-size: .93rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .13); }

.header-acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav + .header-acciones { margin-left: 0; }

.icono-btn {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--radio-s);
  display: grid; place-items: center; position: relative; padding: 0;
}
.icono-btn:hover { background: rgba(255, 255, 255, .12); }
.icono-btn svg { width: 23px; height: 23px; }

.cart-count {
  position: absolute; top: 3px; right: 2px;
  background: var(--zapote-vivo); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; display: grid; place-items: center;
}

.menu-movil { display: none; background: var(--negro-suave); border-top: 1px solid rgba(255, 255, 255, .1); }
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block; color: #e8e3de; padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-weight: 600; text-decoration: none;
}
.menu-movil a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .icono-btn.menu { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radio-s); border: 2px solid transparent;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn-comprar { background: var(--zapote); color: #fff; }
.btn-comprar:hover { background: #a83d10; }

.btn-wa { background: var(--verde); color: #fff; }
.btn-wa:hover { background: #16603b; }

.btn-linea { background: transparent; color: var(--lila); border-color: var(--gris-claro); }
.btn-linea:hover { border-color: var(--lila); background: var(--lila-suave); }

.btn-oscuro { background: var(--negro); color: #fff; }
.btn-oscuro:hover { background: var(--negro-suave); }

.btn-bloque { width: 100%; }
.btn-grande { padding: 16px 26px; font-size: 1.06rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Portada ---------- */
.hero {
  background: var(--negro);
  color: #fff; padding: 44px 0 48px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 78, 155, .5), transparent 68%);
}
.hero-in { position: relative; z-index: 1; max-width: 720px; }
.hero .etiqueta {
  display: inline-block; background: var(--lila); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
}
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--zapote-vivo); }
.hero p { color: #cfc7c0; font-size: 1.08rem; max-width: 56ch; margin-bottom: 24px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; }

.barra-confianza {
  background: var(--blanco); border-bottom: 1px solid var(--gris-claro);
}
.barra-confianza ul {
  list-style: none; margin: 0; padding: 14px 16px;
  max-width: var(--ancho); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.barra-confianza li {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 600; color: var(--negro-suave); line-height: 1.3;
}
.barra-confianza svg { width: 20px; height: 20px; color: var(--lila); flex-shrink: 0; }
@media (min-width: 760px) {
  .barra-confianza ul { grid-template-columns: repeat(4, 1fr); }
  .barra-confianza li { font-size: .88rem; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 46px 0; }
.seccion-alt { background: var(--lila-suave); }
.seccion-blanca { background: var(--blanco); }
.seccion-cabeza { margin-bottom: 26px; }
.seccion-cabeza p { color: var(--gris); max-width: 62ch; margin: 0; }
.seccion-cabeza .fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.seccion-cabeza h2 { margin-bottom: .35em; }

/* ---------- Rejilla de categorias ---------- */
.cats { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(3, 1fr); } }

.cat {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: 22px; text-decoration: none; color: var(--negro);
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat:hover {
  text-decoration: none; border-color: var(--lila);
  box-shadow: var(--sombra-alta); transform: translateY(-2px);
}
.cat h3 { margin: 0; }
.cat p { color: var(--gris); font-size: .92rem; margin: 0; flex: 1; }
.cat .cuenta { font-size: .82rem; font-weight: 700; color: var(--lila); }

/* ---------- Tarjeta de producto ---------- */
.productos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 700px) { .productos { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1020px) { .productos { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--lila); box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.card-img { display: block; position: relative; background: var(--crema); }
.card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 100px; color: #fff; background: var(--lila);
}
.badge-ultimas { background: var(--zapote); }
.badge-color { background: var(--negro-suave); }

.card-cuerpo { padding: 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-cat { font-size: .72rem; font-weight: 700; color: var(--lila); text-transform: uppercase; letter-spacing: .05em; }
/* Los nombres son largos a proposito (describen y posicionan). En una tarjeta
   de 165px eso son cinco lineas y la rejilla se descuadra: se recortan a tres
   y el nombre completo vive en la ficha. */
.card-nombre {
  font-size: .95rem; font-weight: 700; line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-nombre a { color: var(--negro); text-decoration: none; }
.card-nombre a:hover { color: var(--lila); text-decoration: none; }
.card-resumen { font-size: .82rem; color: var(--gris); line-height: 1.45; margin: 0; flex: 1; }
.card-precio { font-size: 1.22rem; font-weight: 800; color: var(--zapote); letter-spacing: -.02em; }
/* En dos columnas de movil el texto del boton se parte en dos lineas y la
   tarjeta crece de golpe. Se ajusta el tamano en vez de acortar la etiqueta:
   "Agregar" solo dice menos. */
.card-add { margin-top: 2px; font-size: .88rem; padding: 12px 10px; }
@media (min-width: 700px) { .card-add { font-size: .95rem; padding: 13px 18px; } }

/* ---------- Filtros de catalogo ---------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 16px 0 22px;
}
.filtros-buscar { position: relative; flex: 1 1 220px; min-width: 200px; }
.filtros-buscar svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gris); pointer-events: none;
}
.filtros input[type="search"] {
  width: 100%; padding: 11px 12px 11px 38px;
  border: 1px solid var(--gris-claro); border-radius: var(--radio-s);
  font-family: inherit; font-size: .95rem; background: var(--blanco); color: var(--negro);
}
.chip {
  background: var(--blanco); border: 1px solid var(--gris-claro); color: var(--negro-suave);
  padding: 11px 16px; border-radius: 100px; font-size: .87rem; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap; min-height: 42px;
}
.chip:hover { border-color: var(--lila); }
.chip[aria-pressed="true"] { background: var(--lila); border-color: var(--lila); color: #fff; }
.sin-resultados { padding: 40px 0; text-align: center; color: var(--gris); }

/* ---------- Ficha de producto ---------- */
.miga { font-size: .82rem; color: var(--gris); padding: 16px 0 4px; }
.miga a { color: var(--gris); }
.miga span { margin: 0 6px; opacity: .5; }

.pdp { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 12px 0 40px; }
@media (min-width: 940px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; } }

.galeria-principal {
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: var(--radio); overflow: hidden;
}
.galeria-principal img { width: 100%; height: auto; }
/* Varias fotos del proveedor son verticales: a ancho completo empujan el
   precio y el botón fuera de la primera pantalla en móvil, que es justo lo
   que no debe pasar. Se limita el alto y se respeta la proporción. */
@media (max-width: 939px) {
  .galeria-principal img { max-height: 46vh; object-fit: contain; }
}
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galeria-miniaturas button {
  width: 68px; height: 68px; padding: 0; cursor: pointer; background: var(--blanco);
  border: 2px solid var(--gris-claro); border-radius: var(--radio-s); overflow: hidden;
}
.galeria-miniaturas button[aria-current="true"] { border-color: var(--lila); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 940px) { .pdp-info { position: sticky; top: 82px; } }

.pdp-cat { font-size: .76rem; font-weight: 700; color: var(--lila); text-transform: uppercase; letter-spacing: .05em; }
.pdp h1 { margin: 6px 0 10px; }
.pdp-resumen { font-size: 1.03rem; color: var(--negro-suave); margin-bottom: 18px; }

.pdp-precio {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.pdp-precio .valor { font-size: 2.15rem; font-weight: 800; color: var(--zapote); letter-spacing: -.03em; }
.pdp-precio .iva { font-size: .84rem; color: var(--gris); }
.pdp-envio { font-size: .87rem; color: var(--gris); margin-bottom: 18px; }

.pdp-stock { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; margin-bottom: 16px; }
.pdp-stock .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex-shrink: 0; }
.pdp-stock.pocas { color: var(--zapote); }
.pdp-stock.pocas .punto { background: var(--zapote); }

.pdp-opcion { margin-bottom: 16px; }
.pdp-opcion label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.pdp-opcion select {
  width: 100%; padding: 12px; border: 1px solid var(--gris-claro); border-radius: var(--radio-s);
  font-family: inherit; font-size: 1rem; background: var(--blanco); color: var(--negro);
}
.pdp-opcion .nota { font-size: .82rem; color: var(--gris); margin: 6px 0 0; }

.pdp-acciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.confianza {
  background: var(--lila-suave); border-radius: var(--radio); padding: 16px; margin-bottom: 22px;
}
.confianza ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.confianza li { display: flex; gap: 10px; font-size: .88rem; line-height: 1.4; }
.confianza svg { width: 19px; height: 19px; color: var(--lila); flex-shrink: 0; margin-top: 2px; }
.confianza strong { display: block; }
.confianza span { color: var(--gris); }

.aviso-replica {
  background: #fffaf2; border: 1px solid #f0d9b8; border-radius: var(--radio);
  padding: 14px 16px; font-size: .86rem; line-height: 1.5; margin-bottom: 22px; color: var(--negro-suave);
}
.aviso-replica strong { display: block; margin-bottom: 4px; }

.bloque { margin-bottom: 30px; }
.bloque h2 { font-size: 1.22rem; margin-bottom: 12px; }
.bloque p { color: var(--negro-suave); }

.tabla-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-specs tr { border-bottom: 1px solid var(--gris-claro); }
.tabla-specs tr:last-child { border-bottom: 0; }
.tabla-specs th {
  text-align: left; padding: 11px 12px 11px 0; font-weight: 700;
  color: var(--negro-suave); width: 42%; vertical-align: top;
}
.tabla-specs td { padding: 11px 0; color: var(--gris); vertical-align: top; }

.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lista-check li { display: flex; gap: 10px; font-size: .94rem; line-height: 1.45; }
.lista-check svg { width: 18px; height: 18px; color: var(--verde); flex-shrink: 0; margin-top: 3px; }

.dos-col { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 760px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* ---------- Panel del carrito ---------- */
.cart-fondo {
  position: fixed; inset: 0; background: rgba(20, 17, 15, .5);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 110;
}
.cart-fondo.abierto { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; z-index: 120;
  width: min(420px, 100%); height: 100dvh;
  background: var(--blanco); box-shadow: -4px 0 24px rgba(20, 17, 15, .2);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.cart.abierto { transform: translateX(0); }
.cart-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--gris-claro); flex-shrink: 0;
}
.cart-cabeza h2 { margin: 0; font-size: 1.15rem; }
.cart-cerrar {
  background: transparent; border: 0; cursor: pointer; padding: 10px;
  width: 44px; height: 44px;
  border-radius: var(--radio-s); color: var(--negro); display: grid; place-items: center;
}
.cart-cerrar:hover { background: var(--crema); }
.cart-cerrar svg { width: 22px; height: 22px; }

.cart-items { flex: 1; overflow-y: auto; padding: 8px 16px; }
.cart-vacio { padding: 44px 16px; text-align: center; color: var(--gris); }
.cart-vacio svg { width: 46px; height: 46px; color: var(--gris-claro); margin: 0 auto 12px; }

.cart-fila { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--gris-claro); }
.cart-fila:last-child { border-bottom: 0; }
.cart-fila img { width: 62px; height: 62px; border-radius: var(--radio-s); object-fit: cover; flex-shrink: 0; }
.cart-fila-info { flex: 1; min-width: 0; }
.cart-fila-nombre { font-size: .88rem; font-weight: 700; line-height: 1.3; margin: 0 0 2px; }
.cart-fila-var { font-size: .78rem; color: var(--lila); font-weight: 600; margin: 0 0 4px; }
.cart-fila-precio { font-size: .92rem; font-weight: 700; color: var(--zapote); }

.cant { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.cant button {
  width: 34px; height: 34px; border: 1px solid var(--gris-claro); background: var(--blanco);
  border-radius: 6px; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--negro);
  display: grid; place-items: center; padding: 0; font-family: inherit;
}
.cant button:hover { border-color: var(--lila); background: var(--lila-suave); }
.cant span { min-width: 26px; text-align: center; font-weight: 700; font-size: .88rem; }
.cant .quitar { margin-left: 6px; border: 0; background: transparent; color: var(--gris); font-size: .78rem; width: auto; padding: 0 4px; text-decoration: underline; }
.cant .quitar:hover { color: var(--rojo); background: transparent; }

.cart-pie { padding: 16px; border-top: 1px solid var(--gris-claro); flex-shrink: 0; background: var(--blanco); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cart-total span { font-weight: 700; }
.cart-total strong { font-size: 1.45rem; color: var(--zapote); letter-spacing: -.02em; }
.cart-nota { font-size: .78rem; color: var(--gris); margin: 0 0 12px; }

/* ---------- Avisos flotantes ---------- */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  width: min(380px, calc(100% - 32px)); pointer-events: none;
}
.toast {
  background: var(--negro); color: #fff; padding: 12px 16px;
  border-radius: var(--radio-s); font-size: .89rem; font-weight: 600;
  box-shadow: var(--sombra-alta); animation: sube .25s ease;
}
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Checkout ---------- */
.pasos {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 0 6px; flex-wrap: wrap;
}
.paso { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.paso .n {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gris-claro); color: var(--negro-suave); font-size: .78rem;
}
.paso.activo { color: var(--zapote); }
.paso.activo .n { background: var(--zapote); color: #fff; }
.paso-sep { width: 22px; height: 2px; background: var(--gris-claro); }

.checkout { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 20px 0 50px; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; } }

.panel {
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: var(--radio); padding: 22px;
}
.panel h2 { font-size: 1.2rem; margin-bottom: 4px; }
.panel > p.sub { color: var(--gris); font-size: .9rem; margin-bottom: 20px; }
@media (min-width: 900px) { .resumen-lateral { position: sticky; top: 82px; } }

.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: .87rem; font-weight: 700; margin-bottom: 5px; }
.campo label .opc { font-weight: 500; color: var(--gris); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px; border: 1px solid var(--gris-claro); border-radius: var(--radio-s);
  font-family: inherit; font-size: 1rem; background: var(--blanco); color: var(--negro);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--lila); outline-offset: 0; }
.campo textarea { resize: vertical; min-height: 76px; }
.campo .error { display: none; color: var(--rojo); font-size: .81rem; font-weight: 600; margin-top: 5px; }
.campo.mal input, .campo.mal select { border-color: var(--rojo); }
.campo.mal .error { display: block; }
.campo .pista { font-size: .8rem; color: var(--gris); margin: 5px 0 0; }
.campos-2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

.resumen-lineas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.resumen-linea { display: flex; gap: 11px; align-items: center; }
.resumen-linea img { width: 52px; height: 52px; border-radius: var(--radio-s); object-fit: cover; flex-shrink: 0; }
.resumen-linea .txt { flex: 1; min-width: 0; }
.resumen-linea .nom { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.resumen-linea .det { font-size: .78rem; color: var(--gris); }
.resumen-linea .val { font-weight: 700; font-size: .9rem; white-space: nowrap; }

.resumen-total {
  border-top: 2px solid var(--negro); padding-top: 14px; margin-top: 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.resumen-total span { font-weight: 800; font-size: 1.02rem; }
.resumen-total strong { font-size: 1.7rem; color: var(--zapote); letter-spacing: -.03em; }

.como-funciona { counter-reset: paso; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.como-funciona li { display: flex; gap: 12px; font-size: .89rem; line-height: 1.45; }
.como-funciona li::before {
  counter-increment: paso; content: counter(paso);
  width: 26px; height: 26px; border-radius: 50%; background: var(--lila); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex-shrink: 0;
}
.como-funciona strong { display: block; }
.como-funciona span { color: var(--gris); }

/* ---------- Contenido legal ---------- */
.legal { max-width: 76ch; padding: 26px 0 56px; }
.legal h2 { font-size: 1.3rem; margin-top: 34px; }
.legal h3 { font-size: 1.05rem; margin-top: 24px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 1em; }
.legal li { margin-bottom: 8px; }
.legal .actualizado { font-size: .86rem; color: var(--gris); }
.legal .destacado {
  background: var(--lila-suave); border-left: 4px solid var(--lila);
  padding: 14px 18px; border-radius: 0 var(--radio-s) var(--radio-s) 0; margin: 20px 0;
}
.legal .destacado p:last-child { margin-bottom: 0; }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 78ch; }
.faq details {
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: var(--radio); margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  padding: 16px 18px; cursor: pointer; font-weight: 700; font-size: .98rem;
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--lila); line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--gris-claro); }
.faq .respuesta { padding: 16px 18px; color: var(--negro-suave); font-size: .94rem; }
.faq .respuesta p:last-child { margin-bottom: 0; }

/* ---------- Pie ---------- */
.footer { background: var(--negro); color: #cfc7c0; padding: 44px 0 22px; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; } }
.footer h3 { color: #fff; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 13px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: #cfc7c0; font-size: .92rem; }
.footer a:hover { color: #fff; }
.footer .marca-desc { font-size: .92rem; max-width: 42ch; }
.footer .logo { margin-bottom: 12px; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 32px; padding-top: 18px;
  font-size: .82rem; color: #9c948c;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}

/* ---------- Barra de compra fija (solo movil, solo ficha) ---------- */
/* Aparece cuando el boton principal sale de pantalla. En una ficha larga con
   descripcion, specs y relacionados, sin esto hay que volver a subir para
   comprar — y mucha gente no vuelve. */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--blanco); border-top: 1px solid var(--gris-claro);
  box-shadow: 0 -4px 16px rgba(20, 17, 15, .1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform .2s ease;
}
.barra-compra.visible { transform: translateY(0); }
.barra-compra .info { flex: 1; min-width: 0; }
.barra-compra .nom {
  font-size: .74rem; color: var(--gris); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-compra .val { font-size: 1.2rem; font-weight: 800; color: var(--zapote); letter-spacing: -.02em; }
.barra-compra .btn { flex: 0 0 auto; padding: 13px 20px; }
@media (min-width: 940px) { .barra-compra { display: none; } }
/* El JS marca body.con-barra sin saber el ancho de pantalla. Si esta regla no
   estuviera dentro del media query, en escritorio el boton de WhatsApp subiria
   para esquivar una barra que ahi no existe. */
@media (max-width: 939px) { body.con-barra .wa-flota { bottom: 88px; } }

/* ---------- Boton flotante de WhatsApp ---------- */
.wa-flota {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--verde); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sombra-alta);
  margin-bottom: env(safe-area-inset-bottom);
  transition: bottom .2s ease;
}
.wa-flota:hover { background: #16603b; text-decoration: none; }
.wa-flota svg { width: 29px; height: 29px; }

/* ---------- Error 404 ---------- */
.error404 { text-align: center; padding: 70px 0 80px; }
.error404 .codigo { font-size: 4.6rem; font-weight: 800; color: var(--lila); line-height: 1; letter-spacing: -.04em; }
.error404 p { color: var(--gris); max-width: 44ch; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}