:root{
  --cream:#f4ede0;
  --cream-2:#ede3d2;
  --ink:#211d17;
  --ink-soft:#514a3d;
  --line:#211d17;
  --accent:#c8492a;
  --accent-2:#2c5a8a;
  --white:#fffdf9;
  --radius:2px;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Top announcement bar ---------- */
.announce{
  background:var(--ink);
  color:var(--cream);
  text-align:center;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 12px;
}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:var(--cream);
  border-bottom:1.5px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  max-width:var(--maxw);margin:0 auto;
  gap:16px;
}
.logo{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;
  color:var(--ink);
  line-height:1.3;
}
.logo .logo-text, .footer-logo .logo-text{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.14em;
  font-weight:700;
  line-height:1;
}
.logo small, .footer-logo small{
  display:block;
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.24em;
  font-weight:400;
  color:var(--ink-soft);
  margin-top:4px;
  text-align:center;
}
nav.main-nav{
  display:flex;gap:28px;
  font-size:13.5px;
  letter-spacing:.03em;
}
nav.main-nav a{
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
nav.main-nav a:hover{border-bottom-color:var(--ink);}
.header-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{
  background:none;border:1.5px solid var(--line);
  border-radius:999px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  flex-shrink:0;
}
.icon-btn:hover{background:var(--ink);color:var(--cream);}
.cart-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700;
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--cream);
}
.burger{display:none;}

/* ---------- Hero ---------- */
.hero{
  padding:56px 24px 40px;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(34px,5vw,58px);
  line-height:1.05;
  margin:0 0 18px;
  letter-spacing:-.01em;
}
.hero p{
  font-size:16px;line-height:1.6;color:var(--ink-soft);
  max-width:46ch;margin:0 0 26px;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;background:transparent;color:var(--ink);
  transition:.15s;
}
.btn:hover{background:var(--ink);color:var(--cream);}
.btn.solid{background:var(--ink);color:var(--cream);}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.wide{width:100%;justify-content:center;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn[disabled]:hover{background:transparent;color:var(--ink);}

.hero-collage{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  max-width:420px;margin-left:auto;
}
.hero-collage a{display:block;}
.hero-collage img{
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);
  aspect-ratio:1/1;
  border:1.5px solid var(--line);
}
.hero-collage a:nth-child(2n){margin-top:20px;}

/* ---------- Marquee strip ---------- */
.strip{
  background:var(--ink);color:var(--cream);
  overflow:hidden;white-space:nowrap;
  padding:10px 0;
  border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
}
.strip-track{
  display:inline-block;
  animation:scroll 28s linear infinite;
  font-family:var(--serif);font-size:15px;letter-spacing:.08em;
}
.strip-track span{margin:0 26px;}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Section headers ---------- */
.section{padding:56px 24px;max-width:var(--maxw);margin:0 auto;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:30px;flex-wrap:wrap;gap:16px;
}
/* La sección de Contacto es la única .section-head con un botón de acción:
   ahí todo va centrado en un solo eje vertical (texto y botón), con el
   botón siempre debajo del texto, en vez del layout de dos columnas del
   resto de encabezados de sección. */
#contacto .section-head{
  flex-direction:column;align-items:center;text-align:center;gap:18px;
}
#contacto .section-head > div{max-width:560px;}
.section-head h2{
  font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);
  margin:0;
}
.section-head p{color:var(--ink-soft);font-size:14px;margin:6px 0 0;max-width:52ch;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
  color:var(--accent);font-weight:700;margin-bottom:8px;display:block;
}

/* ---------- Filter chips ---------- */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:0 24px 28px;max-width:var(--maxw);margin:0 auto;
}
.chip{
  padding:9px 18px;border:1.5px solid var(--ink);border-radius:999px;
  background:transparent;font-size:13px;letter-spacing:.02em;
  color:var(--ink);
}
.chip.active{background:var(--ink);color:var(--cream);}
.chip:hover{background:var(--ink);color:var(--cream);}

/* ---------- Product grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px 20px;
  max-width:var(--maxw);margin:0 auto;
  padding:0 24px 64px;
}
/* La grilla mantiene 4 columnas en la mayoría de anchos de escritorio/laptop
   — solo baja a 3 y 2 en quiebres propios (más angostos que los del resto
   del sitio) para no competir con los breakpoints de header/footer/hero. */
@media (max-width:760px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr);gap:16px 10px;}
}
.card{
  background:transparent;border:none;text-align:center;padding:0;
}
.card-img{
  /* Invisible "standard" footprint — every card reserves the same space
     (proportioned to the pieza más grande que se muestra POR DEFECTO en la
     grilla, 35x50cm — no la más grande de todo el catálogo, ver
     GRID_REF_W_CM/H_CM en app.js) así el grid queda alineado sin dejar un
     colchón de espacio vacío pensado para un tamaño que casi nunca se ve
     ahí. No border/background here: that lives on .card-frame, sized to
     each piece's real cm proportions, so the frame itself shrinks for a
     smaller piece instead of floating tiny inside a big empty box. It sits
     at the BOTTOM of this footprint (not centered) so the name/price text
     below always starts right at the frame's edge, never with a floating
     gap. */
  display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:7/10;
  margin-bottom:12px;
}
.card-frame{
  position:relative;
  overflow:hidden;background:var(--cream-2);
  border-radius:var(--radius);
  border:1.5px solid var(--line);
  cursor:pointer;
  /* width/height set inline per product — see sizeFramePct() in app.js */
}
.card-frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .card-frame img{transform:scale(1.055);}
.quick-add{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--cream);
  text-align:center;padding:11px;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;
  transform:translateY(100%);
  transition:transform .25s ease;
  border:none;width:100%;
}
.card-frame:hover .quick-add{transform:translateY(0);}
.card h3{
  font-family:var(--serif);font-size:15px;margin:0 0 4px;font-weight:700;
  line-height:1.25;
}
.card .meta{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:12px;color:var(--ink-soft);
}
.card .price{color:var(--ink);font-weight:700;font-size:12.5px;}
.card .collection-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-2);margin-bottom:3px;display:block;
}
.card-swatches{display:flex;gap:6px;margin:6px 0 2px;flex-wrap:wrap;justify-content:center;}
.card-swatches .swatch{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--white);
  outline:1px solid var(--line);
  padding:0;
}
.card-swatches .swatch.active{outline:2px solid var(--ink);}

/* ---------- Collection banner rows ---------- */
.collection-band{
  border-top:1.5px solid var(--line);
  padding:64px 24px;
}
.collection-band.alt{background:var(--cream-2);}
.band-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
}
.collection-band.rev .band-inner{grid-template-columns:1.1fr .9fr;}
.collection-band.rev .band-text{order:2;}
.band-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.band-imgs img{
  border:1.5px solid var(--line);border-radius:var(--radius);
  aspect-ratio:4/5;object-fit:cover;
}
.band-imgs a:nth-child(2){margin-top:26px;}
.band-text h3{font-family:var(--serif);font-size:clamp(24px,3vw,32px);margin:0 0 14px;}
.band-text p{color:var(--ink-soft);line-height:1.65;margin:0 0 22px;max-width:48ch;}

/* ---------- About / process ---------- */
.about{background:var(--ink);color:var(--cream);padding:70px 24px;}
.about-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.about h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,40px);margin:0 0 18px;}
.about p{color:#d9d2c3;line-height:1.7;font-size:15px;margin:0 0 16px;}
.process-list{list-style:none;margin:0;padding:0;display:grid;gap:22px;}
.process-list li{display:flex;gap:16px;align-items:flex-start;}
.process-num{
  font-family:var(--serif);font-size:22px;color:var(--accent);
  border:1.5px solid var(--accent);border-radius:50%;
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.process-list h4{margin:0 0 4px;font-size:15.5px;}
.process-list p{margin:0;font-size:13.5px;color:#c7bfae;}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--cream-2);border-top:1.5px solid var(--line);
  padding:52px 24px;
}
.newsletter-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
}
.newsletter-text{max-width:420px;}
.newsletter-text h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);margin:0 0 6px;}
.newsletter-text p{color:var(--ink-soft);font-size:14px;margin:0;line-height:1.55;}
.newsletter-form{
  display:flex;gap:10px;flex-wrap:wrap;
  flex:1;max-width:540px;min-width:280px;
}
.newsletter-form input{
  flex:1;min-width:150px;
  border:1.5px solid var(--ink);border-radius:999px;
  padding:12px 18px;font-size:14px;font-family:var(--sans);
  background:var(--white);color:var(--ink);
}
.newsletter-form input:focus{outline:2px solid var(--accent-2);outline-offset:1px;}
.newsletter-form .btn{flex-shrink:0;border:none;}
@media (max-width:680px){
  .newsletter-form{max-width:100%;}
  .newsletter-form .btn{width:100%;}
}

/* ---------- Footer ---------- */
footer.site{background:var(--cream-2);border-top:1.5px solid var(--line);}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:56px 24px 28px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
}
.footer-inner h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px;}
.footer-inner p, .footer-inner a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;line-height:1.9;}
.footer-inner a:hover{color:var(--ink);text-decoration:underline;}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:14px;}
.footer-logo .logo-text{font-size:24px;}
.footer-logo small{text-align:left;}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:18px 24px;max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12px;color:var(--ink-soft);
}
/* Botón de contacto directo por WhatsApp — verde WhatsApp en vez del
   negro estándar de .btn.solid, para que se identifique de inmediato. */
#waContactBtn{
  background:#25D366;border-color:#25D366;color:#fff;
}
#waContactBtn:hover{
  background:#1DA851;border-color:#1DA851;color:#fff;
}

.placeholder-note{
  background:#fbe9c8;border:1px dashed #a6803a;color:#6b4f16;
  font-size:12px;padding:8px 12px;border-radius:6px;margin-top:10px;line-height:1.5;
}

/* ---------- Modal (quick view) ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(33,29,23,.55);
  z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--white);max-width:920px;width:100%;
  max-height:95vh;overflow:auto;
  border-radius:4px;border:1.5px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;align-items:start;
  position:relative;
}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:var(--white);border:1.5px solid var(--line);border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:16px;z-index:2;
}
.modal-gallery{
  /* A diferencia de la grilla del catálogo, aquí solo se muestra UNA pieza
     a la vez — no hace falta reservar un espacio "estándar" para alinear
     varias tarjetas. Por eso este contenedor ya NO fuerza un aspect-ratio
     fijo (antes reservaba un bloque alto pensado para la pieza más grande
     del catálogo, 60x75cm, dejando mucho espacio en blanco alrededor de
     piezas más chicas). Ahora simplemente abraza el marco (.modal-frame)
     con un margen fijo y moderado — el tamaño de la foto no cambia, solo
     desaparece el espacio sobrante a su alrededor. */
  display:flex;align-items:center;justify-content:center;
  padding:22px;
}
.modal-frame{
  position:relative;
  overflow:hidden;background:var(--cream-2);
  border-radius:var(--radius);
  border:1.5px solid var(--line);
  /* width/height set inline per selected size — see sizeFramePct() in app.js,
     so switching size also visibly grows/shrinks the frame itself. */
}
.modal-frame img{
  /* "contain" (no "cover") a propósito: así se ve SIEMPRE la obra completa
     tal cual es, sin recortar ningún borde, sin importar el tamaño elegido. */
  width:100%;height:100%;object-fit:contain;
}
.modal-info{
  /* Sin scroll ni max-height propios: el ÚNICO contenedor que se desplaza
     es .modal (ver arriba). Antes esta zona tenía su propio scroll interno
     y podía moverse independiente de la foto, dando la sensación de que
     eran dos bloques sueltos en vez de una sola tarjeta. */
  padding:28px 30px;
}
.color-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.color-opt{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--white);outline:1.5px solid var(--line);
  padding:0;
}
.color-opt.active{outline:2.5px solid var(--ink);}
.modal-info .collection-label{margin-bottom:10px;}
.modal-info h2{font-family:var(--serif);font-size:26px;margin:0 0 8px;}
.modal-price{font-size:19px;font-weight:700;margin:0 0 16px;}
.modal-desc{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:0 0 16px;}
.field-label{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;margin-bottom:8px;display:block;
}
.size-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.size-opt{
  border:1.5px solid var(--ink);border-radius:999px;
  padding:9px 16px;font-size:13px;background:transparent;
}
.size-opt.active{background:var(--ink);color:var(--cream);}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.stepper{
  display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;
}
.stepper button{background:none;border:none;width:38px;height:38px;font-size:16px;}
.stepper button:hover{background:var(--cream-2);}
.stepper span{min-width:28px;text-align:center;font-size:14px;}
.thread-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;}
.thread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:6px;}

/* ---------- Help / PQR contact form modal ---------- */
.help-modal{
  grid-template-columns:1fr;
  max-width:520px;
}
.help-form{padding:36px 32px;}
.help-form h2{font-family:var(--serif);font-size:24px;margin:0 0 8px;}
.help-form .help-intro{color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin:0 0 24px;}
.help-form label{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;margin:0 0 8px;
}
.help-field{margin-bottom:18px;}
.help-form input[type="text"],
.help-form input[type="email"],
.help-form select,
.help-form textarea{
  width:100%;
  border:1.5px solid var(--ink);border-radius:6px;
  padding:11px 13px;font-size:14px;font-family:var(--sans);
  background:var(--white);color:var(--ink);
}
.help-form select{appearance:auto;cursor:pointer;}
.help-form textarea{resize:vertical;min-height:90px;}
.help-form input:focus,
.help-form select:focus,
.help-form textarea:focus{outline:2px solid var(--accent-2);outline-offset:1px;}
.help-form .help-note{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.5;}

/* ---------- Cart drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;background:rgba(33,29,23,.5);
  z-index:110;display:none;
}
.cart-overlay.open{display:block;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,100%);
  background:var(--white);
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;flex-direction:column;
  z-index:111;
  border-left:1.5px solid var(--line);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1.5px solid var(--line);
}
.cart-head h3{font-family:var(--serif);margin:0;font-size:20px;}
.cart-items{flex:1;overflow-y:auto;padding:8px 24px;}
.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  padding:16px 0;border-bottom:1px solid #e6ddc9;
}
.cart-item img{width:64px;height:80px;object-fit:cover;border-radius:3px;border:1px solid var(--line);}
.cart-item h5{margin:0 0 4px;font-size:14px;font-family:var(--serif);}
.cart-item .cart-meta{font-size:12px;color:var(--ink-soft);margin-bottom:8px;}
.cart-item .cart-price{font-size:13.5px;font-weight:700;}
.cart-item .stepper{transform:scale(.85);transform-origin:left center;}
.remove-btn{
  background:none;border:none;font-size:11.5px;color:var(--accent);
  text-decoration:underline;padding:0;align-self:flex-start;
}
.cart-empty{padding:60px 10px;text-align:center;color:var(--ink-soft);font-size:14px;}
.cart-empty .btn{margin-top:16px;}
.cart-promo{
  background:var(--cream-2);border:1px dashed var(--accent-2);
  color:var(--ink-soft);font-size:11.5px;line-height:1.5;
  padding:8px 12px;border-radius:6px;margin:2px 0 12px;
}
.cart-foot{border-top:1.5px solid var(--line);padding:20px 24px 26px;}
.cart-line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--ink-soft);}
.cart-line.cart-discount{color:var(--accent);font-weight:700;}
.cart-subtotal{display:flex;justify-content:space-between;font-size:15px;margin:10px 0 6px;}
.cart-subtotal strong{font-family:var(--serif);font-size:19px;}
.cart-ship-note{font-size:12px;color:var(--ink-soft);margin-bottom:16px;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--cream);
  padding:12px 22px;border-radius:999px;font-size:13.5px;
  opacity:0;transition:.25s;z-index:200;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .about-inner{grid-template-columns:1fr;}
  .band-inner, .collection-band.rev .band-inner{grid-template-columns:1fr;}
  .collection-band.rev .band-text{order:0;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .modal{grid-template-columns:1fr;}
}
@media (max-width:680px){
  nav.main-nav{display:none;}
  .footer-inner{grid-template-columns:1fr;}
  .header-inner{padding:14px 18px;}
  .hero{padding:36px 18px;}
  .section{padding:40px 18px;}
}