:root{
  --ink:#0c0c0b;
  --ink-soft:#2b2a28;
  --paper:#f7f6f3;
  --paper-dim:#eeece7;
  --stone:#89857d;
  --stone-line: rgba(12,12,11,0.12);
  --wood-1:#f0c9a3;
  --wood-2:#c98a52;
  --wood-3:#8a4c1f;
  --accent:#d9601f;
  --accent-soft:#e8873e;
  --maxw: 1560px;              /* ancho máximo del contenido; más grande = menos margen en pantallas anchas */
  --pad: clamp(20px, 4vw, 64px);
  /* margen de los elementos que ocupan todo el ancho (menú, hero): en pantallas grandes
     se alinean con el contenido centrado (.wrap) en vez de irse a los bordes */
  --borde: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  --ease: cubic-bezier(.16,.84,.32,1);
  --dur: .9s;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img, svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
input, textarea{font-family:inherit; font-size:inherit; color:inherit;}

h1,h2,h3,h4{
  font-family:'Syne', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.05;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}

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

/* ---------- grain / material swatches (no stock photography — generative material studies) ---------- */
.grain{
  position:relative;
  background-repeat:no-repeat;
  background-blend-mode:multiply, normal;
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,0.10) 0px, transparent 2px, transparent 5px),
    repeating-radial-gradient(circle at 78% 64%, rgba(0,0,0,0.08) 0px, transparent 2px, transparent 6px);
  mix-blend-mode:overlay;
  pointer-events:none;
}
.swatch{
  position:relative;
  overflow:hidden;
  background-color:var(--wood-2);
}
.swatch::before{
  content:"";
  position:absolute; inset:-10%;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px,
    transparent 1px, transparent 7px);
  transform:rotate(var(--grain-rot, 2deg));
}
.swatch::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(0,0,0,0.28));
}
.swatch--melamina{ background: linear-gradient(135deg, #efe6d5, #cbb188); --grain-rot: 1deg; }
.swatch--placas{ background: linear-gradient(135deg, #d9cdb8, #8a6a44); --grain-rot: -2deg; }
.swatch--herrajes{ background: linear-gradient(135deg, #b9b6ad, #57544c); --grain-rot: 4deg; }
.swatch--adhesivos{ background: linear-gradient(135deg, #cfc6b6, #756a54); --grain-rot: -1deg; }
.swatch--accesorios{ background: linear-gradient(135deg, #a9a296, #423d33); --grain-rot: 3deg; }
.swatch--soluciones{ background: linear-gradient(135deg, #e3d3ae, #9c703f); --grain-rot: -3deg; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ================= NAV ================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px var(--borde);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  /* fondo claro siempre: el menú queda legible aunque pase por encima del fondo oscuro del hero */
  background:rgba(247,246,243,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding-top:14px; padding-bottom:14px;
  border-bottom-color:var(--stone-line);
}
.logo{
  display:flex; align-items:center;
}
.logo img{
  height:46px; width:auto; display:block;
  transition:transform .4s var(--ease);
}
.logo:hover img{ transform:rotate(-6deg); }
.logo .sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
nav.primary-nav{display:flex; align-items:center; gap:2.6vw;}
nav.primary-nav a{
  font-size:0.86rem;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
nav.primary-nav a:hover::after, nav.primary-nav a:focus-visible::after{ width:100%; }
.nav-cta{
  border:1px solid var(--ink); padding:10px 20px; border-radius:2px;
  font-size:0.82rem; font-weight:700;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{background:var(--ink); color:var(--paper);}
.nav-shop{
  background:var(--accent); color:var(--paper);
  padding:10px 20px; border-radius:2px;
  font-size:0.82rem; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.nav-shop:hover{ background:var(--accent-soft); transform:translateY(-1px); }
.desktop-actions{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; width:26px; height:18px; position:relative; z-index:120; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:8px;}
.burger span:nth-child(3){top:16px;}
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-panel{
  /* debajo del header (z 100) para que el botón de cerrar siga visible */
  position:fixed; inset:0; z-index:90;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  padding:0 40px;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel a{ font-family:'Syne', sans-serif; font-size:2rem; font-weight:700; }

@media (max-width: 880px){
  nav.primary-nav, .desktop-actions{display:none;}
  .burger{display:block;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; padding-bottom:60px;
  overflow:hidden;
}
.hero-bg{
  /* el texto del hero es oscuro: el fondo negro arranca a la derecha del bloque de texto */
  /* en pantallas grandes se corre con el contenido centrado, para no pisar el título */
  position:absolute; top:0; right:0; bottom:0;
  /* el título ocupa ~8,5 veces el tamaño de su letra (ver .hero h1) */
  left:max(56%, calc(var(--borde) + min(5.2vw, 5.2rem) * 8.5 + 60px));
  background:linear-gradient(150deg, #2a2622 0%, #1a1613 30%, var(--ink) 62%, #000 100%);
}
.hero-bg .cut{
  position:absolute; inset:0;
  background:conic-gradient(from 90deg at 82% 20%, transparent 0deg, rgba(217,96,31,0.0) 40deg, var(--accent) 46deg, transparent 52deg, transparent 360deg);
  opacity:0.9;
}
.hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(100deg,
    rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px,
    transparent 2px, transparent 14px);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(247,244,239,0) 16%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; padding:0 var(--pad); }
.eyebrow{
  font-size:0.82rem; font-weight:700; letter-spacing:0.06em;
  color:var(--stone); margin-bottom:22px;
  display:block;
}
.hero h1{
  font-size:clamp(2.6rem, 5.2vw, 5.2rem);
  max-width:14ch;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.hero.loaded h1 .line span{ transform:translateY(0); }
.hero h1 .line:nth-child(1) span{ transition-delay:.15s; }
.hero h1 .line:nth-child(2) span{ transition-delay:.28s; }
.hero h1 .line:nth-child(3) span{ transition-delay:.41s; }

.hero p.lead{
  margin-top:30px; max-width:44ch;
  font-size:1.05rem; color:var(--ink-soft);
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease) .6s, transform .8s var(--ease) .6s;
}
.hero.loaded p.lead{ opacity:1; transform:translateY(0); }

.hero-ctas{
  margin-top:42px; display:flex; gap:18px; flex-wrap:wrap;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease) .75s, transform .8s var(--ease) .75s;
}
.hero.loaded .hero-ctas{ opacity:1; transform:translateY(0); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; font-size:0.9rem; font-weight:700;
  border-radius:2px; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--accent); }
.btn-ghost{ border:1px solid var(--stone-line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

.scroll-cue{
  position:absolute; left:var(--borde); bottom:40px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; color:var(--stone);
}
.scroll-cue .stick{ width:1px; height:38px; background:var(--stone); position:relative; overflow:hidden; }
.scroll-cue .stick::after{
  content:""; position:absolute; top:-100%; left:0; right:0; height:100%;
  background:var(--ink); animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ================= SECTION SHELL ================= */
section{ padding:120px 0; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:64px; flex-wrap:wrap;
}
.kicker{
  font-size:0.78rem; font-weight:700; letter-spacing:0.05em;
  color:var(--stone); display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--stone); }
.section-title{ font-size:clamp(2rem, 4vw, 3.1rem); max-width:16ch; }

/* ---------- NOSOTROS ---------- */
.nosotros-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:center;
}
.nosotros-text p{ color:var(--ink-soft); max-width:52ch; margin-top:20px; font-size:1.02rem; }
.nosotros-visual{ aspect-ratio:4/5; border-radius:2px; }
.nosotros-visual .swatch{ width:100%; height:100%; }
@media (max-width:900px){
  .nosotros-grid{ grid-template-columns:1fr; }
  .nosotros-visual{ order:-1; aspect-ratio:16/10; }
}

/* ---------- PRODUCTOS ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  background:var(--stone-line);
  /* mismo ancho que el resto del contenido (.wrap) */
  width:min(100% - 2 * var(--pad), var(--maxw) - 2 * var(--pad));
  margin:0 auto;
}
.product-card{
  position:relative; background:var(--paper); aspect-ratio:4/5;
  overflow:hidden;
}
.product-card .swatch{ position:absolute; inset:0; transition:transform .8s var(--ease); }
.product-card:hover .swatch{ transform:scale(1.07); }
.product-card .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.product-card:hover .photo{ transform:scale(1.07); }
.product-media{ position:absolute; inset:0; }
.product-media .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s var(--ease); }
.product-media .slide.active{ opacity:1; visibility:visible; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(247,244,239,0.9); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease), background .3s var(--ease);
}
.carousel-btn:hover{ background:var(--paper); }
.carousel-btn.prev{ left:14px; }
.carousel-btn.next{ right:14px; }
.product-card:hover .carousel-btn{ opacity:1; }
.product-card[data-slides="1"] .carousel-btn{ display:none; }
.carousel-dots{
  position:absolute; top:16px; right:16px; z-index:5;
  display:flex; gap:6px;
}
.product-card[data-slides="1"] .carousel-dots{ display:none; }
.carousel-dots .dot{ width:5px; height:5px; border-radius:50%; background:rgba(247,244,239,0.5); transition:background .3s var(--ease), transform .3s var(--ease); }
.carousel-dots .dot.active{ background:var(--paper); transform:scale(1.3); }
.product-card .veil{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(21,19,15,0.72) 0%, rgba(21,19,15,0.05) 55%);
}
.product-card .meta{
  position:absolute; left:0; right:0; bottom:0; padding:26px;
  color:var(--paper);
}
.product-card .num{ font-size:0.78rem; font-weight:700; opacity:.75; }
.product-card h3{ font-size:1.35rem; margin-top:8px; }
.product-card .cta{
  margin-top:14px; font-size:0.8rem; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.product-card:hover .cta{ opacity:1; transform:translateY(0); }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

/* ---------- SOLUCIONES ---------- */
.solutions-list{ border-top:1px solid var(--stone-line); }
.solutions-row{
  display:grid; grid-template-columns:70px 1fr auto; align-items:center;
  gap:20px; padding:26px 0; border-bottom:1px solid var(--stone-line);
  transition:padding-left .4s var(--ease);
}
.solutions-row:hover{ padding-left:14px; }
.solutions-row .idx{ font-family:'Syne', sans-serif; font-weight:700; color:var(--stone); }
.solutions-row h4{ font-size:1.25rem; font-weight:700; }
.solutions-row .tag{ font-size:0.78rem; color:var(--stone); white-space:nowrap; }

/* ---------- PROCESO ---------- */
.proceso-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.proceso-text p{ color:var(--ink-soft); max-width:50ch; margin-top:20px; }
.proceso-diagram{ padding:20px 0; }
.proceso-steps{ display:flex; flex-direction:column; }
.proceso-step{ display:flex; gap:22px; padding:20px 0; border-top:1px solid var(--stone-line); }
.proceso-step:last-child{ border-bottom:1px solid var(--stone-line); }
.proceso-step .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:8px; flex-shrink:0; }
.proceso-step h4{ font-size:1.05rem; font-weight:700; }
.proceso-step p{ color:var(--stone); font-size:0.92rem; margin-top:4px; }
@media (max-width:900px){ .proceso-grid{ grid-template-columns:1fr; } }

/* ---------- GALERIA ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:10px;
}
.gallery-item{ position:relative; overflow:hidden; border-radius:2px; }
.gallery-item.g1{ grid-column:span 2; grid-row:span 2; }
.gallery-item.g2{ grid-column:span 2; grid-row:span 1; }
.gallery-item.g3{ grid-column:span 1; grid-row:span 2; }
.gallery-item.g4{ grid-column:span 1; grid-row:span 1; }
.gallery-item.g5{ grid-column:span 2; grid-row:span 1; }
.gallery-item.g6{ grid-column:span 1; grid-row:span 2; }
.gallery-item.g7{ grid-column:span 1; grid-row:span 1; }
.gallery-item .swatch{ position:absolute; inset:0; transition:transform .7s var(--ease); }
.gallery-item:hover .swatch{ transform:scale(1.06); }
.gallery-item .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-item:hover .photo{ transform:scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(0deg, rgba(21,19,15,0.75), transparent);
  color:var(--paper); font-size:0.82rem; font-weight:600;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-item:hover .cap{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px; }
  .gallery-item.g1, .gallery-item.g5{ grid-column:span 2; }
}

/* ---------- POR QUE ---------- */
.stats-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); border-top:1px solid var(--stone-line);
}
.stat{
  padding:44px 24px; border-right:1px solid var(--stone-line);
}
.stat:last-child{ border-right:none; }
.stat .n{ font-family:'Syne', sans-serif; font-size:2.6rem; font-weight:800; color:var(--accent); }
.stat .label{ margin-top:10px; font-size:0.95rem; font-weight:600; }
@media (max-width:900px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .stat{ border-right:none; border-bottom:1px solid var(--stone-line); }
}

/* ---------- CONTACTO ---------- */
.contact-section{ background:var(--ink); color:var(--paper); border-radius:0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-section .section-title{ color:var(--paper); }
.contact-section .kicker{ color:var(--accent-soft); }
.contact-section .kicker::before{ background:var(--accent-soft); }
.contact-lead{ color:rgba(247,244,239,0.7); max-width:40ch; margin-top:18px; font-size:1.05rem; }
.contact-details{ margin-top:44px; }
.contact-details .row{ padding:16px 0; border-top:1px solid rgba(247,244,239,0.14); }
.contact-details .row:last-child{ border-bottom:1px solid rgba(247,244,239,0.14); }
.contact-details .row .k{ font-size:0.75rem; color:var(--accent-soft); font-weight:700; }
.contact-details .row .v{ margin-top:4px; font-size:1rem; }
.social{ display:flex; gap:20px; margin-top:34px; }
.social a{ font-size:0.85rem; font-weight:700; border-bottom:1px solid rgba(247,244,239,0.3); padding-bottom:3px; }
.social a:hover{ border-color:var(--paper); }

.field{ margin-bottom:22px; }
.field label{ display:block; font-size:0.78rem; font-weight:700; color:var(--accent-soft); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(247,244,239,0.28);
  padding:10px 0; color:var(--paper); font-size:1rem;
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--accent-soft); outline:none; }
.field textarea{ resize:vertical; min-height:80px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(247,244,239,0.35); }
.submit-btn{
  margin-top:10px; background:var(--paper); color:var(--ink);
  padding:15px 30px; font-weight:700; font-size:0.9rem; border-radius:2px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.submit-btn:hover{ background:var(--accent-soft); transform:translateY(-2px); }
.form-note{ margin-top:14px; font-size:0.82rem; color:rgba(247,244,239,0.55); min-height:1.2em; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }

footer{
  padding:36px var(--pad); display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; color:rgba(247,244,239,0.5); flex-wrap:wrap; gap:12px;
  background:var(--ink); color:rgba(247,244,239,0.5);
}
/* ---------- touch devices: hover-only reveals need a visible default ---------- */
@media (hover: none){
  .carousel-btn{ opacity:1; width:38px; height:38px; }
  .product-card .cta{ opacity:1; transform:translateY(0); }
  .gallery-item .cap{ opacity:1; transform:translateY(0); }
}

/* ---------- celular y tablet: el hero pasa a fondo oscuro completo, el texto va en claro ---------- */
@media (max-width: 880px){
  .hero-bg{ left:0; }
  .hero-bg::after{ display:none; }
  .hero .btn-primary{ background:var(--accent); }
  .hero .eyebrow{ color:rgba(247,244,239,0.75); }
  .hero h1{ color:#fff; }
  .hero p.lead{ color:rgba(247,244,239,0.8); }
  .hero .btn-ghost{ border-color:rgba(247,244,239,0.4); color:#fff; }
  .hero .btn-ghost:hover{ border-color:#fff; }
  .hero .scroll-cue{ color:rgba(247,244,239,0.7); }
  .hero .scroll-cue .stick{ background:rgba(247,244,239,0.4); }
  .hero .scroll-cue .stick::after{ background:#fff; }
}

/* ================= AGREGADOS ================= */

/* tarjeta de producto completa como link */
a.product-card{ display:block; color:var(--paper); }

/* fotos cargadas desde /imagenes: aparecen suave cuando terminan de cargar */
.photo{ opacity:0; transition:opacity .6s var(--ease), transform .8s var(--ease); }
.photo.is-loaded{ opacity:1; }

.nosotros-visual{ position:relative; overflow:hidden; }
.nosotros-visual .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* por qué Roccia: texto debajo de cada ítem */
.stat .desc{ margin-top:8px; font-size:0.88rem; color:var(--stone); line-height:1.5; }

/* datos de contacto clickeables */
.contact-details .v a{ border-bottom:1px solid rgba(247,244,239,0.3); }
.contact-details .v a:hover{ border-color:var(--paper); }

/* botón flotante de WhatsApp */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:95;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.22);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:30px; height:30px; }

/* productos: bajada con lo que incluye cada categoría + link a toda la tienda */
.product-card .sub{ margin-top:6px; font-size:0.86rem; line-height:1.45; opacity:.85; max-width:34ch; }
.products-more{ margin-top:28px; text-align:right; }
.products-more a{ font-size:0.9rem; font-weight:700; border-bottom:1px solid var(--stone-line); padding-bottom:3px; transition:border-color .3s var(--ease); }
.products-more a:hover{ border-color:var(--ink); }
@media (max-width:560px){ .products-more{ text-align:left; } }

/* ================= PEDÍ TU CORTE ================= */
.pedido-section{ background:var(--paper-dim); }
.pedido-lead{ max-width:42ch; color:var(--ink-soft); font-size:1.02rem; }

/* ---------- armador de despiece ---------- */
.despiece{ background:var(--paper); border:1px solid var(--stone-line); border-radius:2px; padding:clamp(14px, 2.4vw, 28px); margin-bottom:64px; }
.despiece-head, .pieza{
  display:grid; align-items:center; gap:10px;
  grid-template-columns: 28px minmax(110px,1.3fr) 64px 92px 92px minmax(130px,1.6fr) 74px 44px 64px 66px;
}
.despiece-head{ padding:0 0 10px; border-bottom:1px solid var(--stone-line); font-size:0.74rem; font-weight:700; color:var(--stone); }
.pieza{ padding:10px 0; border-bottom:1px solid var(--stone-line); }
.pieza .lbl{ display:none; }
.pieza-n{ font-family:'Syne', sans-serif; font-weight:700; color:var(--stone); font-size:0.9rem; }
.pieza input[type="text"], .pieza input[type="number"], .pieza select{
  width:100%; min-width:0; background:#fff; border:1px solid var(--stone-line); border-radius:2px;
  padding:9px 10px; font-size:0.92rem; color:var(--ink);
}
.pieza input[type="number"]{ text-align:center; -moz-appearance:textfield; }
.pieza input::-webkit-outer-spin-button, .pieza input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pieza input:focus, .pieza select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(217,96,31,0.15); }
.pieza.con-error input[data-k="cant"], .pieza.con-error input[data-k="largo"], .pieza.con-error input[data-k="ancho"]{ border-color:#c0392b; }
.c-veta{ display:flex; justify-content:center; }
.c-veta input{ width:19px; height:19px; accent-color:var(--accent); cursor:pointer; }

/* selector de cantos: rectángulo con 4 lados clickeables */
.canto-pick{
  display:grid; width:60px; height:40px;
  grid-template-columns:9px 1fr 9px; grid-template-rows:9px 1fr 9px;
  grid-template-areas:". l1 ." "a1 c a2" ". l2 .";
}
.canto-pick .lado{ background:var(--paper-dim); border:1px solid var(--stone-line); border-radius:2px; transition:background .2s var(--ease); }
.canto-pick .lado:hover{ background:#f3d2bd; }
.canto-pick .lado[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); }
.canto-pick .l1{ grid-area:l1; } .canto-pick .l2{ grid-area:l2; }
.canto-pick .a1{ grid-area:a1; } .canto-pick .a2{ grid-area:a2; }
.canto-pick .centro{ grid-area:c; margin:2px; background:#fff; border:1px dashed var(--stone-line); border-radius:1px; }
.canto-pick .centro:hover{ border-color:var(--accent); }

.c-acc{ display:flex; gap:4px; justify-content:flex-end; }
.icono{ width:30px; height:30px; border-radius:2px; color:var(--stone); font-size:0.95rem; transition:background .2s var(--ease), color .2s var(--ease); }
.icono:hover{ background:var(--paper-dim); color:var(--ink); }
.icono.del:hover{ color:#c0392b; }
.pieza-aviso{ grid-column:2 / -1; font-size:0.8rem; color:#a0461a; margin-top:-2px; }

.despiece-pie{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-top:20px; }
.despiece-botones{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.despiece-botones .btn{ padding:12px 20px; font-size:0.86rem; }
.link-btn{ font-size:0.84rem; font-weight:600; color:var(--stone); border-bottom:1px solid transparent; }
.link-btn:hover{ color:var(--ink); border-color:var(--ink); }
.despiece-resumen{ text-align:right; }
.despiece-resumen .totales{ display:flex; gap:22px; justify-content:flex-end; flex-wrap:wrap; font-size:0.9rem; color:var(--ink-soft); }
.despiece-resumen .totales b{ font-family:'Syne', sans-serif; font-size:1.25rem; color:var(--ink); margin-left:4px; }
.despiece-resumen .por-material{ list-style:none; margin-top:6px; font-size:0.8rem; color:var(--stone); }
.despiece-resumen .vacio{ font-size:0.86rem; color:var(--stone); }

.despiece-ayuda{ margin-top:22px; border-top:1px solid var(--stone-line); padding-top:14px; }
.despiece-ayuda summary{ cursor:pointer; font-size:0.88rem; font-weight:700; }
.ayuda-grid{ display:grid; grid-template-columns:1fr 180px; gap:30px; align-items:center; margin-top:14px; }
.ayuda-grid ul{ list-style:none; }
.ayuda-grid li{ padding:6px 0; font-size:0.9rem; color:var(--ink-soft); }
.ayuda-dibujo{
  display:grid; grid-template-columns:30px 1fr 30px; grid-template-rows:24px 70px 24px;
  grid-template-areas:". l1 ." "a1 caja a2" ". l2 ."; font-size:0.78rem; font-weight:700; color:var(--accent);
  text-align:center; align-items:center;
}
.ayuda-dibujo .l1{ grid-area:l1; } .ayuda-dibujo .l2{ grid-area:l2; }
.ayuda-dibujo .a1{ grid-area:a1; } .ayuda-dibujo .a2{ grid-area:a2; }
.ayuda-dibujo .caja{ grid-area:caja; height:100%; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--accent); color:var(--stone); font-weight:600; background:var(--paper-dim); }

/* celular y tablet: cada pieza pasa a ser una tarjeta */
@media (max-width:1020px){
  .despiece-head{ display:none; }
  .pieza{
    grid-template-columns:repeat(6, 1fr); gap:10px 12px; align-items:end;
    padding:16px 0;
  }
  .pieza .lbl{ display:block; font-size:0.72rem; font-weight:700; color:var(--stone); margin-bottom:4px; }
  .pieza-n{ grid-column:1 / 2; grid-row:1; align-self:center; }
  .c-desc{ grid-column:2 / 6; grid-row:1; }
  .c-acc{ grid-column:6 / 7; grid-row:1; align-self:end; }
  .canto-pick{ width:84px; height:56px; grid-template-columns:13px 1fr 13px; grid-template-rows:13px 1fr 13px; }
  .c-cant{ grid-column:1 / 3; } .c-largo{ grid-column:3 / 5; } .c-ancho{ grid-column:5 / 7; }
  .c-mat{ grid-column:1 / 5; } .c-esp{ grid-column:5 / 7; }
  .c-veta{ grid-column:1 / 3; flex-direction:column; align-items:flex-start; }
  .c-cantos{ grid-column:3 / 7; }
  .pieza-aviso{ grid-column:1 / -1; }
  .despiece-resumen, .despiece-resumen .totales{ text-align:left; justify-content:flex-start; }
  .ayuda-grid{ grid-template-columns:1fr; }
  .ayuda-dibujo{ max-width:200px; }
}

/* ---------- datos y envío ---------- */
.pedido-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.pedido-info h4{ font-size:1.05rem; }
.pedido-reglas{ list-style:none; margin-top:10px; }
.pedido-reglas li{ position:relative; padding:12px 0 12px 22px; border-bottom:1px solid var(--stone-line); color:var(--ink-soft); font-size:0.95rem; }
.pedido-reglas li::before{ content:""; position:absolute; left:0; top:21px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.pedido-alt{ margin-top:22px; font-size:0.9rem; color:var(--ink-soft); }
.pedido-alt a{ font-weight:700; border-bottom:1px solid var(--stone-line); }
.pedido-alt a:hover{ border-color:var(--ink); }

.pedido-form{ background:var(--ink); color:var(--paper); padding:clamp(24px, 4vw, 44px); border-radius:2px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
fieldset.field{ border:none; }
fieldset.field legend{ font-size:0.78rem; font-weight:700; color:var(--accent-soft); margin-bottom:10px; }
.opciones{ display:flex; gap:22px; flex-wrap:wrap; }
.opcion{ display:inline-flex; align-items:center; gap:8px; font-size:0.95rem; cursor:pointer; }
.opcion input{ accent-color:var(--accent); width:17px; height:17px; }
.opcion.confirma{ align-items:flex-start; font-size:0.88rem; color:rgba(247,244,239,0.8); margin:4px 0 14px; }
.opcion.confirma input{ margin-top:2px; flex-shrink:0; }
.field input[type="file"]{ border-bottom:1px dashed rgba(247,244,239,0.35); padding:12px 0; font-size:0.9rem; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  font-family:inherit; font-weight:700; font-size:0.82rem; margin-right:14px;
  background:var(--paper); color:var(--ink); border:none; border-radius:2px; padding:9px 16px; cursor:pointer;
}
.field .ayuda{ margin-top:6px; font-size:0.78rem; color:rgba(247,244,239,0.5); }
.pedido-resumen-envio{ font-size:0.88rem; color:rgba(247,244,239,0.75); margin-bottom:12px; }
.pedido-resumen-envio:empty{ display:none; }
.pedido-resumen-envio b{ color:var(--accent-soft); }
.submit-btn:disabled{ opacity:.6; cursor:wait; }
.btn-whatsapp{ margin-top:14px; background:#25d366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebe5b; transform:translateY(-2px); }
.btn-whatsapp[hidden]{ display:none; }
.campo-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:900px){ .pedido-grid{ grid-template-columns:1fr; gap:44px; } }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0; } }