/* ============================================================
   Opti Muebles — sistema de diseño
   Paleta oficial de marca. Tipografía: Manrope (títulos) + Inter (texto).
   Un solo momento de color fuerte (el banner), todo lo demás en calma.
   ============================================================ */
:root {
  --bg: #FAFAF8;
  --panel: #FFFFFF;
  --mint: #e0efdb;
  --mint-deep: #cfe6c8;
  --ink: #4a494a;
  --ink-soft: #78766f;
  --teal: #69adac;
  --teal-dark: #4f8483;
  --slate: #546b79;
  --skyblue: #96c7de;
  --line: #E7E5DF;
  --line-strong: #c4c4c4;
  --white: #ffffff;
  --radius: 4px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(74,73,74,.05), 0 8px 24px rgba(74,73,74,.06);
  --display: "Manrope", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .4em;
}

p { margin: 0 0 1em; color: var(--ink-soft); max-width: 60ch; }
button { font-family: var(--sans); cursor: pointer; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,250,248,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.logo img { height: 48px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-nav { display: flex; gap: 26px; font-size: 14.5px; }
.header-nav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.header-nav a:hover { color: var(--ink); }

.cart-button {
  position: relative;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-count {
  background: var(--teal);
  border-radius: 999px;
  min-width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; padding: 0 5px;
}

/* ---------- Hero ---------- */

.hero { padding: 96px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }

.hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  max-width: 13ch;
  font-weight: 800;
}

.hero p.lead { font-size: 18.5px; max-width: 44ch; line-height: 1.6; }

.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: #38373a; }

.hero-art { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.hero-art svg { width: 100%; height: auto; }

.hero-facts { display: flex; gap: 34px; margin-top: 44px; flex-wrap: wrap; }
.hero-fact b { display: block; font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--teal-dark); }
.hero-fact span { font-size: 13px; color: var(--ink-soft); }

/* ---------- Superficie de foto reservada ---------- */
/* Contenedor neutro para las fotos que todavía no tenemos. Usa el
   mismo tratamiento (panel + borde + radio) que ya tienen las fichas
   de producto sin imagen, y el mismo ícono placeholder que ya existe
   en el catálogo, para que se vea consistente y no como algo roto.
   El día que haya foto real, alcanza con poner un <img> adentro del
   .photo-surface: por su CSS ya queda con object-fit: cover. */

.photo-surface {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, var(--panel) 0%, var(--bg) 65%, var(--line) 140%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-surface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-surface .placeholder { width: 20%; color: var(--line-strong); }

.hero-art .photo-surface { width: 100%; height: 100%; }

/* ---------- Tramo editorial (ambientes y espacios) ---------- */

.editorial { padding: 8px 0 96px; }

.editorial-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.editorial-col-right { display: flex; flex-direction: column; gap: 24px; }

.editorial-item { display: block; text-decoration: none; color: inherit; }
.editorial-item--a .photo-surface { aspect-ratio: 3/4; }
/* 8/5 dejaba ~179px de espacio vacío debajo de la columna derecha
   (la imagen principal, en 3/4, termina siendo más alta que las dos
   secundarias apiladas). 5/4 hace que las dos secundarias + el gap
   sumen prácticamente la misma altura que la principal (~10px de
   diferencia, imperceptible, contra los ~179px originales). */
.editorial-item--b .photo-surface,
.editorial-item--c .photo-surface { aspect-ratio: 5/4; }

.editorial-item:hover .photo-surface { border-color: var(--teal); }
.editorial-caption { margin-top: 12px; }

/* Las 3 escenas también llevan la clase .filter-chip para reusar el
   filtrado del catálogo que ya escucha site.js (sin tocar el JS), pero
   tienen que seguir viéndose como foto + pie, no como un chip de filtro
   con fondo y borde de píldora. Se resetea esa apariencia acá. */
.editorial-item.filter-chip,
.editorial-item.filter-chip.active {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ---------- Catálogo ---------- */

.catalog { padding: 56px 0 88px; }
.catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.catalog-head h2 { font-size: 32px; margin-bottom: 6px; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.filter-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }

.product-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.product-card:hover { border-color: var(--teal); }

/* Tarjeta del catálogo (index.php): la tarjeta en sí ya NO es un <a> (evita
   anidar un <button> dentro de un enlace, HTML inválido). En su lugar, este
   enlace queda como una capa invisible que cubre toda la tarjeta, así que
   clickear en cualquier parte sigue abriendo la ficha. El botón "Agregar"
   queda afuera del enlace y se eleva por encima con z-index para poder
   clickearse aparte, sin heredar la navegación. */
.product-card-link { position: absolute; inset: 0; z-index: 1; }

.product-thumb { aspect-ratio: 1/1; background: var(--white); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb .placeholder { width: 46%; color: var(--line-strong); }

.product-body { padding: 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-cat { font-size: 12px; color: var(--teal-dark); font-weight: 600; }
.product-name { font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.28; margin: 0; color: var(--ink); }
.product-medidas { font-size: 13px; color: var(--ink-soft); }

.product-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-price { font-family: var(--display); font-size: 19px; font-weight: 800; }
.add-btn { position: relative; z-index: 2; background: var(--ink); color: var(--white); border: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.add-btn:hover { background: var(--teal-dark); }

.empty-state { padding: 60px 20px; text-align: center; color: var(--ink-soft); }

.catalog-more { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Orden y filtros del catálogo completo ---------- */

.catalog-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.catalog-controls[hidden] { display: none; }

.sort-control { display: flex; align-items: center; gap: 8px; }
.sort-control label { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.sort-control select {
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: var(--white);
}
.sort-control select:focus { border-color: var(--teal); outline: none; }

.attr-filters { position: relative; }
.attr-filters-toggle {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
}
.attr-filters-badge {
  background: var(--ink); color: var(--white); border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px;
}
.attr-filters-badge[hidden] { display: none; }

.attr-filters-panel {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  padding: 18px; width: min(90vw, 420px);
  display: flex; flex-direction: column; gap: 14px;
}
.attr-filters-panel[hidden] { display: none; }

.attr-filter-grupo { display: flex; flex-direction: column; gap: 6px; }
.attr-filter-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-soft); }
.attr-filter-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); padding: 3px 0; }
.attr-filter-chip input { width: auto; accent-color: var(--teal-dark); }

.attr-filters-clear {
  align-self: flex-start; border: none; background: none; color: var(--teal-dark);
  font-size: 13px; font-weight: 600; padding: 4px 0; text-decoration: underline;
}

.catalog-resultados { font-size: 13px; color: var(--ink-soft); margin-left: auto; white-space: nowrap; }

@media (max-width: 640px) {
  .catalog-controls { align-items: stretch; }
  .sort-control { flex: 1 1 100%; }
  .sort-control select { flex: 1; }
  .catalog-resultados { margin-left: 0; }
  .attr-filters-panel { left: 0; right: 0; width: auto; }
}

/* ---------- Banner (el único momento de color fuerte) ---------- */

.banner {
  background: var(--teal);
  color: var(--white);
  border-radius: 28px;
  margin: 0 24px 88px;
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.banner .wrap { max-width: 1132px; padding: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.banner h2 { color: var(--white); font-size: clamp(28px, 3.4vw, 40px); max-width: 14ch; }
.banner p { color: rgba(255,255,255,.86); font-size: 16.5px; max-width: 42ch; }
.banner .btn-dark { background: var(--ink); }
.banner .btn-dark:hover { background: #2f2e30; }
.banner-shape {
  position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.banner-shape.two { right: 120px; bottom: -140px; top: auto; width: 220px; height: 220px; background: rgba(255,255,255,.06); }

/* Espacio de foto del banner: mismo componente .photo-surface, con una
   variante clara para que se lea bien sobre el fondo de color fuerte. */
.banner-photo .photo-surface {
  aspect-ratio: 4/3;
  background: none;
  border-color: transparent;
}
.banner-photo .placeholder { color: rgba(255,255,255,.6); }

/* Ilustración "Espacio → Medida → Mueble": ocupa una parte del recuadro,
   no todo, para dejar aire alrededor. Se centra sola por el flex de
   .photo-surface. Trazo fino, sin relleno, sin sombras ni degradados. */
.banner-ilustracion { width: 65%; height: 65%; }

.banner-ilustracion .bi-espacio,
.banner-ilustracion .bi-mueble {
  fill: none;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.banner-ilustracion .bi-medida-linea {
  fill: none;
  stroke: var(--teal-dark);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.banner-ilustracion .bi-medida-tick { opacity: 1; }
.banner-ilustracion .bi-medida-tick line {
  stroke: var(--teal-dark);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.banner-ilustracion .bi-div1,
.banner-ilustracion .bi-div2 {
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.banner-ilustracion .bi-grupo { opacity: 1; }

/* La secuencia animada solo corre si el usuario no pidió reducir el
   movimiento. Si prefers-reduced-motion está activo, todo lo de arriba
   ya deja la ilustración completa y estática (dashoffset:0, opacity:1). */
@media (prefers-reduced-motion: no-preference) {
  .banner-ilustracion .bi-grupo { animation: bi-fade 18s ease-in-out infinite; }
  .banner-ilustracion .bi-espacio { animation: bi-draw-espacio 18s ease-in-out infinite; }
  .banner-ilustracion .bi-medida-linea { animation: bi-draw-medida 18s ease-in-out infinite; }
  .banner-ilustracion .bi-medida-tick { animation: bi-tick 18s ease-in-out infinite; }
  .banner-ilustracion .bi-mueble { animation: bi-draw-mueble 18s ease-in-out infinite; }
  .banner-ilustracion .bi-div1 { animation: bi-draw-div1 18s ease-in-out infinite; }
  .banner-ilustracion .bi-div2 { animation: bi-draw-div2 18s ease-in-out infinite; }

  @keyframes bi-fade {
    0%, 88% { opacity: 1; }
    97%, 100% { opacity: 0; }
  }
  @keyframes bi-draw-espacio {
    0%, 3% { stroke-dashoffset: 1; }
    20% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes bi-draw-medida {
    0%, 26% { stroke-dashoffset: 1; }
    38% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes bi-tick {
    0%, 36% { opacity: 0; }
    42% { opacity: 1; }
    100% { opacity: 1; }
  }
  @keyframes bi-draw-mueble {
    0%, 48% { stroke-dashoffset: 1; }
    66% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes bi-draw-div1 {
    0%, 66% { stroke-dashoffset: 1; }
    74% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes bi-draw-div2 {
    0%, 72% { stroke-dashoffset: 1; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
}

/* ---------- Franja de información ---------- */

.info-strip { background: var(--mint); padding: 52px 0; }
.info-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.info-item h3 { color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.info-item p { color: var(--ink-soft); margin: 0; font-size: 14px; }

/* ---------- Contacto / footer ---------- */

.contact { padding: 80px 0; }
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.contact h2 { font-size: 30px; }
.contact-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.contact-card h3 { font-size: 16px; margin-bottom: 8px; }
.contact-card p { font-size: 14px; margin-bottom: 18px; }

/* Foto opcional de apoyo: si no se completa, el resto de la sección
   funciona igual, sin depender de que esta pieza tenga imagen. */
.contact-photo { grid-column: 1 / -1; }
.contact-photo .photo-surface { aspect-ratio: 21/6; }
.contact-photo .placeholder { width: 10%; }

.site-footer { border-top: 1px solid var(--line); padding: 26px 0; font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- WhatsApp flotante ---------- */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.4);
  z-index: 50;
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Carrito (drawer) ---------- */

.cart-overlay { position: fixed; inset: 0; background: rgba(74,73,74,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60; }
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--white); z-index: 61;
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,.15);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head { padding: 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cart-drawer-head h3 { font-size: 19px; margin: 0; }
.cart-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); }

.cart-items { flex: 1; overflow-y: auto; padding: 12px 22px; }
.cart-line { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cart-line-info { flex: 1; }
.cart-line-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.cart-line-price { font-size: 13px; color: var(--ink-soft); }

.qty-control { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-control button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); font-size: 14px; line-height: 1; }

.remove-line { background: none; border: none; color: var(--teal-dark); font-size: 12px; text-decoration: underline; padding: 0; align-self: flex-start; }
.cart-empty { padding: 40px 0; text-align: center; color: var(--ink-soft); font-size: 14px; }

.cart-drawer-foot { padding: 20px 22px 24px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.cart-checkout { width: 100%; background: #25D366; color: #fff; border: none; border-radius: 999px; padding: 14px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cart-checkout:hover { background: #1fb956; }
.cart-hint { font-size: 12px; color: var(--ink-soft); margin-top: 10px; text-align: center; }

/* ---------- Página de producto ---------- */

.breadcrumb { font-size: 13.5px; color: var(--ink-soft); padding: 24px 0 0; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-dark); }
.breadcrumb .sep { margin: 0 6px; opacity: .5; }
.breadcrumb .actual { color: var(--ink); }

.producto-detalle { padding: 24px 0 80px; }
.producto-detalle .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* Envuelve imagen + miniaturas para que sean UNA sola celda del grid de
   arriba: antes .producto-thumbs no tenía columna asignada y el grid la
   ubicaba sola en la columna derecha (al lado de la imagen), empujando
   .producto-info entero a una segunda fila debajo de todo. Con este
   contenedor, la galería completa queda en la columna izquierda y la
   información pasa a estar al lado de la imagen desde el principio. */
.producto-galeria { display: flex; flex-direction: column; }

/* Composición editorial de las 3 fotos principales: imagen grande a la
   izquierda + dos secundarias apiladas a la derecha, como un solo bloque
   (por eso el sticky vive acá y no en .producto-imagen individualmente).
   Si el producto tiene menos de 3 fotos, .producto-imagen-secundarias ni
   se imprime y este grid queda con una sola columna ocupada — sin huecos. */
.producto-imagen-composicion { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; position: sticky; top: 96px; }

.producto-imagen { aspect-ratio: 1/1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.producto-imagen img { width: 100%; height: 100%; object-fit: cover; }
.producto-imagen .placeholder { width: 40%; color: var(--line-strong); }

/* Las dos secundarias se reparten en partes iguales la misma altura total
   que la imagen principal (el grid de arriba estira esta columna a esa
   altura por defecto), así las tres fotos se sienten una sola composición. */
.producto-imagen-secundarias { display: flex; flex-direction: column; gap: 14px; }
.producto-imagen-secundaria { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.producto-imagen-secundaria img { width: 100%; height: 100%; object-fit: cover; display: block; }

.producto-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.producto-thumbs img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius); border: 2px solid var(--line);
  cursor: pointer;
}
.producto-thumbs img.active,
.producto-thumbs img:hover { border-color: var(--teal); }

.producto-info .product-cat { font-size: 13px; }
.producto-info h1 { font-size: clamp(28px, 3vw, 38px); margin: 8px 0 14px; max-width: none; }

/* Medidas: antes era una línea de texto secundaria del mismo peso que
   cualquier otro dato. Para muebles la medida es un dato de decisión de
   compra, así que pasa a ser una tarjeta propia con más jerarquía. */
.producto-medidas-card {
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.producto-medidas-titulo { display: block; font-size: 13px; font-weight: 700; color: var(--teal-dark); margin-bottom: 10px; }
.producto-medidas-filas { display: flex; flex-direction: column; gap: 2px; }
.medida-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding: 5px 0; border-bottom: 1px dashed var(--line-strong); }
.medida-fila:last-child { border-bottom: none; }
.medida-fila span { color: var(--ink-soft); }
.medida-fila strong { font-family: var(--display); font-weight: 700; color: var(--ink); }
.producto-medidas-texto { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

.producto-precio { font-family: var(--display); font-size: 36px; font-weight: 800; margin-bottom: 18px; }
.producto-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.producto-acciones .add-btn { padding: 15px 28px; font-size: 14.5px; border-radius: 999px; }
.producto-descripcion { font-size: 15.5px; line-height: 1.7; margin-bottom: 26px; }

/* Envíos y tiempo de fabricación: mismo contenido real que ya se muestra
   en la Home (data/settings.json: texto_envios, tiempo_fabricacion), acá
   junto al resto de la info de compra en vez de solo en la portada. */
.producto-entrega { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.producto-entrega-item { display: flex; gap: 10px; align-items: flex-start; }
.producto-entrega-icono { font-size: 16px; line-height: 1.5; }
.producto-entrega-item p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

.relacionados { padding: 0 0 80px; }
.relacionados h2 { font-size: 22px; margin-bottom: 20px; }

/* ---------- Checkout / Pedido ---------- */

.checkout-wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 120px; }
.checkout-wrap h1 { font-size: 26px; margin-bottom: 20px; }

.checkout-vacio { text-align: center; padding: 60px 20px; }
.checkout-vacio p { margin: 0 auto 20px; }

.checkout-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: 16px;
}
.checkout-card h2 { font-size: 16px; margin-bottom: 14px; }

.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-grid .field.full { grid-column: 1 / -1; }

.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.checkout-opcional { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white);
}
.field input:focus, .field textarea:focus { border-color: var(--teal); }
.field textarea { resize: vertical; }

.checkout-opciones { display: flex; flex-direction: column; gap: 8px; }
.checkout-opcion {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.checkout-opcion:has(input:checked) { border-color: var(--teal); background: var(--mint); }
.checkout-opcion input[type="radio"] { width: 17px; height: 17px; accent-color: var(--teal-dark); flex-shrink: 0; }
.checkout-opcion-icono { font-size: 18px; }
.checkout-opcion-nombre { flex: 1; font-weight: 600; font-size: 14.5px; }
.checkout-opcion-costo { font-size: 13px; color: var(--ink-soft); }

.checkout-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.checkout-item:last-child { border-bottom: none; }
.checkout-item-cant { color: var(--ink-soft); font-size: 13px; }
.checkout-item-precio { white-space: nowrap; font-weight: 600; }

.checkout-totales { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.checkout-total-linea { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); padding: 3px 0; }
.checkout-total-final { font-family: var(--display); font-size: 19px; font-weight: 800; color: var(--ink); padding-top: 8px; }

.badge-pedido-estado { background: var(--mint); color: var(--teal-dark); padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.badge-pedido-estado--ok { background: var(--mint); color: var(--teal-dark); }
.badge-pedido-estado--ambar { background: #FDF3E3; color: #8a6416; }
.badge-pedido-estado--error { background: #FBE4DF; color: #8a3a26; }

.alert-error { background: #FBE4DF; border: 1px solid #E3B8AC; color: #8a3a26; border-radius: var(--radius); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }

.checkout-cta-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 20px; box-shadow: var(--shadow);
  margin-top: 4px;
}
.checkout-cta-total { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-soft); }
.checkout-cta-total strong { font-family: var(--display); font-size: 22px; color: var(--ink); font-weight: 800; }
.checkout-cta-bar .btn { border: none; }

.checkout-datos-bancarios {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong);
}
.checkout-copiable {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-top: 8px; font-size: 14px;
}
.checkout-copiable strong { font-family: var(--mono, monospace); font-size: 15px; letter-spacing: .01em; }
.btn-copiar {
  flex-shrink: 0; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.btn-copiar:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-copiar.copiado { background: var(--mint); border-color: var(--teal); color: var(--teal-dark); }

.checkout-cupon { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.checkout-cupon-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.checkout-cupon-inputs { display: flex; gap: 8px; }
.checkout-cupon-inputs input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: 14px; text-transform: uppercase;
}
.checkout-cupon-aplicado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--mint); border: 1px solid var(--teal); border-radius: var(--radius);
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--teal-dark);
}
/* El display:flex de arriba le gana al [hidden] nativo del navegador (mismo
   origen de hoja de estilos, el atributo hidden no alcanza por sí solo) —
   sin esto, la caja de "cupón aplicado" se ve vacía en cada carga del
   checkout aunque no se haya aplicado ningún cupón. */
.checkout-cupon-aplicado[hidden] { display: none; }

@media (max-width: 640px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-cta-bar { border-radius: 0; margin: 16px -20px 0; box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
}

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 260px; margin: 0 auto; }
  .info-strip .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .header-nav { display: none; }
  .banner { margin: 0 16px 64px; padding: 44px 28px; border-radius: 20px; }
  .banner .wrap { grid-template-columns: 1fr; gap: 24px; }
  .banner-photo { order: -1; }
  /* Antes 16/10 (~437px de alto en 800px de ancho): la ilustración en sí
     ocupa solo el 65% del recuadro, así que quedaba una franja enorme de
     color liso arriba del texto del banner. Un recuadro más bajo conserva
     la misma ilustración, ya centrada, con menos espacio vacío alrededor. */
  .banner-photo .photo-surface { aspect-ratio: 12/5; }
  .editorial { padding: 0 0 64px; }
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-item--a .photo-surface,
  .editorial-item--b .photo-surface,
  .editorial-item--c .photo-surface { aspect-ratio: 4/3; }
  .contact-photo .photo-surface { aspect-ratio: 16/9; }
  .producto-detalle .wrap { grid-template-columns: 1fr; gap: 28px; }
  .producto-imagen-composicion { position: static; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}