/* ==========================================================================
   47 · Taller a medida
   Para una boutique que diseña y confecciona. El logo es un monograma bordado
   en hilo de oro sobre lino, con una aguja que cierra el círculo y el lema
   «Diseña, Confecciona, Inspira». De ahí sale todo: lino de fondo, oro solo como
   hilo y filete, un café de sastrería para lo oscuro, y el color de verdad
   tomado de las tres prendas del paquete —el azul del bordado de la camisa, el
   rosa palo del vestido y el verde lima del top— para que la página no quede
   crema y apagada, que es lo que ya pasó dos veces con paquetes de dos neutros.
   Formas: bastidor de bordar, piezas de molde con muescas, botones de cuatro
   agujeros, cinta métrica y puntadas discontinuas.
   ========================================================================== */

:root{
  --oro:        #B08D4A;
  --oro-hondo:  #7A5C26;
  --oro-claro:  #E9D8B0;
  --oro-palido: #F5EDDA;
  --cinta:      #EBDDAE;
  --cinta-h:    #5B4A1F;
  --lino:       #F9F8F6;
  --lino-2:     #F2EDE4;
  --tinta:      #2A231D;
  --tinta-2:    #51463C;
  --tinta-suave:#6B5F55;
  --cafe:       #3A2E24;
  --cafe-2:     #2A2119;
  --cielo:      #9DB8D6;
  --cielo-c:    #E3ECF6;
  --cielo-h:    #3D6590;
  --rosa:       #E7B3BC;
  --rosa-c:     #F8E4E8;
  --rosa-h:     #9A4254;
  --lima:       #B7C93A;
  --lima-c:     #EEF3CF;
  --lima-h:     #56600F;

  --linea:      rgba(42,35,29,.14);
  --linea-clara:rgba(249,248,246,.22);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:14px;
  --f-guion:'Pinyon Script', 'Snell Roundhand', cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--lino); color:var(--tinta); line-height:1.72; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.14; font-weight:400; font-family:var(--f-titulo)}
h1 em, h2 em{font-style:italic; color:var(--oro-hondo)}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1180px,92vw); margin:0 auto}
.sec{padding:104px 0; position:relative}
.centrado{text-align:center}
.sec-head{max-width:680px; margin:0 auto 54px; text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem); margin-bottom:14px}
.sec-head p{color:var(--tinta-2); margin:0}
.eyebrow{text-transform:uppercase; color:var(--oro-hondo); margin-bottom:12px}
.eyebrow::before{content:"✦"; margin-right:.7em; color:var(--oro); letter-spacing:0}
.chip{display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; color:var(--tinta-2)}
.chip svg{color:var(--oro-hondo)}

/* ---------- Encabezado: la costura de abajo va punteada ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(249,248,246,.94); backdrop-filter:blur(14px);
  border-bottom:2px dashed var(--oro-claro); transition:box-shadow .3s var(--ease)}
header.stuck{box-shadow:0 14px 34px -26px rgba(58,46,36,.6)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
.brand img{width:60px; height:60px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--oro-claro); background:#fff; transition:width .3s var(--ease), height .3s var(--ease)}
header.stuck .brand img{width:50px; height:50px}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-size:1.3rem; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; text-transform:uppercase; color:var(--tinta-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:28px}
.nav-links a{position:relative; text-decoration:none; padding:7px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:2px dashed var(--oro);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  border-radius:999px; border:2px solid transparent; cursor:pointer; transition:all .3s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--oro-hondo); color:#fff}
.btn-primary:hover{background:var(--tinta)}
.btn-linea, .btn-ghost{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.btn-linea:hover, .btn-ghost:hover{background:var(--tinta); color:var(--lino)}
/* La capa de acabado solo agranda el botón principal; el de contorno quedaba con el
   texto pegado al borde. */
.btn-ghost:not(.btn-sm), .btn-linea:not(.btn-sm){padding:1rem 2.1rem; font-weight:700}
.btn-wa{background:#25D366; color:#06280F}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--cielo),var(--rosa),var(--lima),var(--oro))}

/* ---------- 1 · Portada en tres columnas ---------- */
.u-hero{position:relative; overflow:hidden;
  background:
    radial-gradient(52% 50% at 10% 18%, var(--rosa-c) 0, rgba(248,228,232,0) 72%),
    radial-gradient(42% 46% at 92% 14%, var(--cielo-c) 0, rgba(227,236,246,0) 72%),
    radial-gradient(48% 42% at 64% 100%, var(--lima-c) 0, rgba(238,243,207,0) 72%),
    var(--lino)}
.u-mono{position:absolute; z-index:0; left:50%; top:47%; translate:-50% -50%; pointer-events:none;
  font-family:var(--f-guion); font-size:clamp(14rem,30vw,27rem); line-height:1; white-space:nowrap;
  color:var(--oro); opacity:.11}
.u-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.12fr .9fr .82fr;
  gap:clamp(22px,3vw,46px); align-items:center; padding-block:clamp(48px,6vw,88px) clamp(76px,7vw,108px)}
.u-hero h1{font-size:clamp(2.3rem,4vw,3.55rem); letter-spacing:-.01em}
.u-hero h1 span, .u-hero h1 em{display:block}
.u-hero h1 em{font-style:italic; color:var(--oro-hondo)}
.u-lead{font-size:1.08rem; color:var(--tinta-2); max-width:42ch; margin:20px 0 0}
.u-cta{display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 24px}
.u-firmas{display:flex; flex-wrap:wrap; gap:10px 20px}

/* El bastidor: la foto en un aro de bordar con dos filetes de oro y su tornillo
   arriba. Los aros son sombras del mismo círculo, así no hay piezas que alinear. */
.u-bastidor{position:relative; display:flex; justify-content:center; padding:30px 0 40px}
.u-aro{margin:0; position:relative; width:min(100%,370px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--lino-2);
  box-shadow:0 0 0 9px var(--oro-claro), 0 0 0 11px var(--oro), 0 0 0 19px #DCC593, 0 0 0 21px var(--oro),
             0 46px 70px -30px rgba(58,46,36,.55)}
.u-aro img{width:100%; height:100%; object-fit:cover; object-position:50% 28%}
.u-tornillo{position:absolute; z-index:3; top:2px; left:50%; translate:-50% 0; width:48px; height:26px;
  border-radius:8px 8px 5px 5px; background:linear-gradient(180deg,#E6D2A2,#B08D4A);
  box-shadow:inset 0 0 0 2px var(--oro-hondo), 0 6px 12px -6px rgba(42,35,29,.5)}
.u-tornillo::after{content:""; position:absolute; left:50%; top:-12px; translate:-50% 0; width:18px; height:14px;
  border-radius:6px 6px 2px 2px; background:var(--oro); box-shadow:inset 0 0 0 2px var(--oro-hondo)}
.u-hilo{position:absolute; z-index:4; right:-8%; bottom:-4%; width:56%; overflow:visible; pointer-events:none}
.u-hebra{fill:none; stroke:var(--oro-hondo); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:0}
.anim .u-hebra{stroke-dashoffset:420; transition:stroke-dashoffset 2.4s var(--ease) .5s}
.anim .u-bastidor.visto .u-hebra{stroke-dashoffset:0}
.u-aguja path{fill:none; stroke:#8A8F96; stroke-width:4; stroke-linecap:round}
.u-aguja ellipse{fill:var(--lino); stroke:#8A8F96; stroke-width:1.2}
.anim .u-aguja{transform-box:fill-box; transform-origin:center; animation:agujaU 3.6s ease-in-out infinite}
@keyframes agujaU{0%,100%{transform:translate(0,0)} 50%{transform:translate(-5px,5px)}}

/* La etiqueta colgante con la colección. */
.u-ficha{position:relative; background:#fff; border-radius:18px; padding:40px 24px 22px; margin-top:24px;
  border:1px solid var(--linea); box-shadow:0 34px 60px -40px rgba(58,46,36,.55); rotate:2deg}
.u-ficha::before{content:""; position:absolute; inset:9px; border:1.5px dashed var(--oro-claro); border-radius:12px; pointer-events:none}
.u-ojal{position:absolute; top:15px; left:50%; translate:-50% 0; width:14px; height:14px; border-radius:50%;
  background:var(--lino-2); box-shadow:inset 0 0 0 2px var(--oro)}
.u-ojal::after{content:""; position:absolute; bottom:70%; left:50%; width:1.5px; height:58px; background:var(--oro);
  transform-origin:bottom center; rotate:-12deg}
.u-ficha-t{font-family:var(--f-guion); font-size:2rem; line-height:1.1; text-align:center; color:var(--oro-hondo); margin:0 0 6px}
.u-ficha ol{list-style:none; margin:0; padding:0}
.u-ficha li a{display:grid; grid-template-columns:22px minmax(0,1fr) auto; column-gap:12px; align-items:center;
  padding:12px 4px; border-bottom:1px dashed var(--linea); text-decoration:none}
.u-ficha li:last-child a{border-bottom:0}
.u-ficha li b{font-family:var(--f-titulo); font-weight:400; font-size:.98rem; line-height:1.25}
.u-ficha li em{font-style:normal; font-weight:800; font-size:.9rem; color:var(--tinta)}
.u-ficha li small{grid-column:2 / -1; color:var(--tinta-suave); font-size:.8rem}
.u-ficha li a:hover b{color:var(--oro-hondo)}
.u-ficha li:nth-child(3n+1){--tono:var(--cielo)}
.u-ficha li:nth-child(3n+2){--tono:var(--rosa)}
.u-ficha li:nth-child(3n+3){--tono:var(--lima)}
.u-ficha-pie{margin:14px 0 0; text-align:center; text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700; color:var(--oro-hondo)}

/* El botón de cuatro agujeros: se usa en la ficha, en el catálogo y en los tonos. */
.u-bot{display:inline-block; flex:none; width:22px; height:22px; border-radius:50%; background:var(--tono, var(--oro-claro));
  position:relative; box-shadow:inset 0 0 0 2px rgba(42,35,29,.1)}
.u-bot::before, .u-muestra i::before{content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  background:radial-gradient(circle, rgba(42,35,29,.55) 1.4px, rgba(42,35,29,0) 1.7px) 0 0 / 4.5px 4.5px}

/* ---------- 2 · Cinta métrica ---------- */
.u-cinta{position:relative; overflow:hidden; background:var(--cinta); color:var(--cinta-h);
  border-block:1px solid rgba(91,74,31,.28)}
.u-regla{position:absolute; left:0; top:0; width:100%; height:100%; color:var(--cinta-h); opacity:.5; pointer-events:none}
.u-cinta-pista{position:relative; overflow:hidden; padding:26px 0 22px}
.u-cinta-mov{display:flex; width:max-content}
.u-cinta-mov p{display:flex; align-items:center; margin:0; white-space:nowrap}
.u-cinta-mov span{font-family:var(--f-titulo); font-style:italic; font-size:clamp(1.2rem,2.2vw,1.65rem); padding:0 22px; color:var(--tinta)}
.u-cinta-mov i{font-style:normal; color:var(--oro-hondo); font-size:.9rem}
.anim .u-cinta-mov{animation:cintaU 44s linear infinite}
@keyframes cintaU{to{transform:translateX(-50%)}}

/* ---------- 3 · Tablero de patrones ---------- */
.u-catalogo{background:var(--lino-2); overflow:hidden}
.u-cuadricula{position:absolute; left:0; top:0; width:100%; height:100%; color:var(--oro); opacity:.13; pointer-events:none}
.u-catalogo > .wrap{position:relative; z-index:1}
.u-piezas{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); align-items:start}
.u-pieza{position:relative; display:flex; flex-direction:column; min-width:0}
.u-pieza:nth-child(3n+2){margin-top:72px}
.u-pieza:nth-child(3n+1){--tono:var(--cielo); --tono-c:var(--cielo-c); --tono-h:var(--cielo-h)}
.u-pieza:nth-child(3n+2){--tono:var(--rosa);  --tono-c:var(--rosa-c);  --tono-h:var(--rosa-h)}
.u-pieza:nth-child(3n+3){--tono:var(--lima);  --tono-c:var(--lima-c);  --tono-h:var(--lima-h)}
.u-molde{position:relative; background:var(--tono-c); border-radius:var(--r); padding:22px 22px 24px 38px;
  border:1px solid var(--tono); transition:box-shadow .35s var(--ease)}
.u-molde::after{content:""; position:absolute; inset:8px; border:1.5px dashed var(--tono-h); border-radius:9px; opacity:.45; pointer-events:none}
.u-pieza:hover .u-molde{box-shadow:0 34px 60px -40px rgba(42,35,29,.55)}
.u-muesca{position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--lino-2); z-index:2}
.u-muesca.a{left:-11px; box-shadow:inset -1px 0 0 var(--tono)}
.u-muesca.b{right:-11px; box-shadow:inset 1px 0 0 var(--tono)}
.u-veta{position:absolute; left:13px; top:40px; writing-mode:vertical-rl; rotate:180deg; font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--tono-h)}
.u-foto{display:block; position:relative; border-radius:10px; overflow:hidden; background:#fff}
.u-foto img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; transition:transform .7s var(--ease)}
.u-pieza:hover .u-foto img{transform:scale(1.05)}
.u-etiqueta{position:absolute; z-index:4; right:-12px; top:44px; display:flex; flex-direction:column; line-height:1.05;
  padding:12px 16px 10px 28px; background:#fff; color:var(--tinta); border-radius:6px 14px 14px 6px;
  box-shadow:0 16px 28px -14px rgba(42,35,29,.5); rotate:6deg; transform-origin:left center; transition:rotate .5s var(--ease)}
.u-etiqueta::before{content:""; position:absolute; left:11px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--oro)}
.u-etiqueta b{font-family:var(--f-titulo); font-size:1.3rem; font-weight:700}
.u-etiqueta small{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); margin-top:3px}
.u-pieza:hover .u-etiqueta{rotate:-4deg}
.u-cuerpo{padding:22px 6px 0; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.u-num{font-family:var(--f-guion); font-size:1.75rem; line-height:1; color:var(--tono-h)}
.u-cuerpo h3{font-size:1.62rem}
.u-cuerpo h3 a{text-decoration:none}
.u-cuerpo > p{margin:0; color:var(--tinta-2); font-size:.97rem}
.u-tallas{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.u-tallas span{text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; font-weight:700; color:var(--tinta-suave); margin-right:4px}
.u-tallas i{font-style:normal; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--tono); font-weight:700; font-size:.82rem}
.u-tono{display:flex; align-items:center; gap:10px; margin:0; font-size:.9rem; font-weight:600; color:var(--tinta-2)}
.variants small{color:var(--tinta-suave)}
.card-ver{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:800; color:var(--tono-h, var(--oro-hondo))}
.card-ver svg{width:17px; height:17px; transition:transform .3s var(--ease)}
.card-ver:hover svg{transform:translateX(4px)}
.u-mas{position:relative; margin-top:clamp(44px,5vw,70px); display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center;
  justify-content:space-between; padding:32px 36px; border-radius:var(--r); background:var(--cafe); color:var(--lino)}
.u-mas::before{content:""; position:absolute; inset:9px; border:1.5px dashed rgba(233,216,176,.45); border-radius:9px; pointer-events:none}
.u-mas h3{font-size:1.8rem; color:#fff; margin-bottom:6px}
.u-mas p{margin:0; color:rgba(249,248,246,.82); max-width:56ch}
.u-mas .btn-primary{position:relative; background:var(--oro-claro); color:var(--tinta)}
.u-mas .btn-primary:hover{background:#fff; color:var(--tinta)}
.cat-note{text-align:center; color:var(--tinta-suave); margin:28px 0 0}
.cat-note a{color:var(--oro-hondo); font-weight:800}

/* ---------- 4 · A tu medida ---------- */
.u-medida{background:var(--cafe); color:var(--lino)}
.u-medida .eyebrow{color:var(--oro-claro)}
.u-medida-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,72px); align-items:center}
.u-cita{margin:0; font-family:var(--f-titulo); font-style:italic; font-size:clamp(1.85rem,3.5vw,2.8rem); line-height:1.24; color:#fff}
.u-cita::before{content:"“"; display:block; font-size:4.2rem; line-height:.6; color:var(--oro); margin-bottom:10px}
.u-para{margin:20px 0 0; color:var(--oro-claro); font-weight:600}
/* La cinta métrica que avanza con el scroll dentro del bloque. La capa
   compartida ya le pone a todo [data-progreso] una línea vertical que crece con
   --avance; aquí esa misma línea se acuesta y se vuelve la cinta. Sin
   JavaScript no hay --avance, y la cinta se ve entera. */
.u-metro{position:relative; height:24px; margin-top:34px; border-radius:4px; overflow:hidden; background:rgba(233,216,176,.14)}
.u-metro::before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:4px; background:var(--cinta)}
.anim .u-metro[data-progreso]::before{width:var(--avance,0%); height:100%; opacity:1; background:var(--cinta); transition:width .2s linear}
.u-metro::after{content:""; position:absolute; inset:0 0 auto 0; height:9px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(91,74,31,.75) 0 1.3px, rgba(91,74,31,0) 1.3px 12px)}
.u-botones{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.u-botones li{display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:center; padding:18px 20px;
  border-radius:var(--r); background:rgba(249,248,246,.06); border:1px dashed var(--linea-clara)}
.u-botones li:nth-child(3n+1){--tono:var(--cielo)}
.u-botones li:nth-child(3n+2){--tono:var(--rosa)}
.u-botones li:nth-child(3n+3){--tono:var(--lima)}
.u-boton-ic{width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:var(--tono); color:var(--cafe-2);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.35), 0 10px 20px -12px rgba(0,0,0,.6)}
.u-boton-ic svg{width:26px; height:26px}
.u-botones h3{font-size:1.28rem; color:#fff; margin-bottom:4px}
.u-botones p{margin:0; color:rgba(249,248,246,.8); font-size:.95rem}
.u-tonos{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin-top:clamp(42px,5vw,62px);
  padding-top:30px; border-top:1px dashed var(--linea-clara)}
.u-muestra{display:inline-flex; align-items:center; gap:12px; font-weight:700; color:var(--lino)}
.u-muestra i{position:relative; width:40px; height:40px; border-radius:50%; background:var(--tono); box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.u-muestra i::before{width:12px; height:12px; background-size:6px 6px}
.u-muestra:nth-child(3n+1){--tono:var(--cielo)}
.u-muestra:nth-child(3n+2){--tono:var(--rosa)}
.u-muestra:nth-child(3n+3){--tono:var(--lima)}
.anim .u-muestra i{animation:botonGiraU 14s linear infinite}
.anim .u-muestra:nth-child(2) i{animation-duration:18s; animation-direction:reverse}
@keyframes botonGiraU{to{rotate:360deg}}

/* ---------- 5 · El taller ---------- */
.u-nos{background:var(--lino)}
.u-nos-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center}
.u-nos-foto{position:relative; padding:18px}
.u-nos-foto figure{margin:0; position:relative}
.u-nos-foto figure img{width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; border-radius:var(--r) 130px var(--r) var(--r);
  box-shadow:0 36px 66px -46px rgba(58,46,36,.6)}
.u-sello{position:absolute; z-index:3; right:0; bottom:40px; width:112px; height:112px; border-radius:50%;
  display:grid; place-items:center; background:var(--cafe); color:var(--oro-claro); font-family:var(--f-guion); font-size:2.7rem;
  box-shadow:0 0 0 6px var(--lino), 0 0 0 7px var(--oro)}
.u-sello::after{content:""; position:absolute; inset:9px; border-radius:50%; border:1.5px dashed var(--oro)}
.anim .u-sello::after{animation:botonGiraU 24s linear infinite}
.u-nos h2{font-size:clamp(2rem,3.8vw,3rem); margin-bottom:16px}
.u-nos .hist > summary{color:var(--oro-hondo)}
.u-mv{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.u-mv > div{position:relative; padding:22px 20px 20px 26px; border-radius:var(--r); background:var(--lino-2)}
.u-mv > div::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:4px}
.u-mv .u-mision::before{background:var(--rosa)}
.u-mv .u-vision::before{background:var(--cielo)}
.u-mv h3{font-family:var(--f-cuerpo); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:800; color:var(--oro-hondo); margin-bottom:8px}
.u-mv p{margin:0; color:var(--tinta-2); font-size:.95rem}

/* ---------- 6 · Cómo pedir ---------- */
.u-pedir{background:linear-gradient(180deg,var(--rosa-c),var(--lino))}
.u-pasos{list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.u-puntada{position:absolute; left:16%; top:33px; width:68%; height:8px; overflow:visible; z-index:0}
.u-puntada path{fill:none; stroke:var(--oro); stroke-width:3; stroke-dasharray:14 10; stroke-linecap:round}
.u-pasos li{position:relative; z-index:1; text-align:center}
.u-pasos li:nth-child(3n+2){--tono:var(--cielo)}
.u-pasos li:nth-child(3n+3){--tono:var(--rosa)}
.u-pasos li:nth-child(3n+4){--tono:var(--lima)}
.u-paso-bot{position:relative; width:70px; height:70px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:var(--tono, var(--oro-claro)); color:var(--tinta); font-family:var(--f-titulo); font-size:1.32rem; font-weight:700;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.45), 0 16px 28px -16px rgba(42,35,29,.5)}
.u-pasos h3{font-size:1.42rem; margin-bottom:6px}
.u-pasos p{margin:0 auto; max-width:30ch; color:var(--tinta-2)}
.u-pedir-cta{text-align:center; margin-top:46px}

/* ---------- 7 · Contacto: la etiqueta tejida ---------- */
.u-contacto{background:var(--cafe); color:var(--lino)}
.u-contacto .eyebrow{color:var(--oro-claro)}
.u-contacto-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center}
.u-contacto h2{font-size:clamp(2rem,3.8vw,3rem); color:#fff; margin-bottom:14px}
.u-contacto .u-contacto-txt{color:rgba(249,248,246,.82); max-width:44ch; margin-bottom:24px}
.u-contacto .btn-primary{background:var(--oro-claro); color:var(--tinta)}
.u-contacto .btn-primary:hover{background:#fff}
.u-marbete, .up-etiqueta-int{position:relative; background:var(--lino); color:var(--tinta); border-radius:6px; padding:36px 32px 26px;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.75)}
.u-marbete::before, .up-etiqueta-int::before{content:""; position:absolute; inset:10px; border:1.5px dashed var(--oro); border-radius:3px; pointer-events:none}
.u-marbete::after{content:""; position:absolute; left:50%; top:-14px; translate:-50% 0; width:64px; height:14px;
  border-radius:5px 5px 0 0; background:var(--oro-claro)}
.u-marbete-marca{position:relative; font-family:var(--f-guion); font-size:2.2rem; line-height:1.15; text-align:center; color:var(--oro-hondo); margin:0 0 12px}
.u-marbete ul{position:relative; list-style:none; margin:0; padding:0}
.u-marbete li a{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 14px;
  padding:13px 6px; border-bottom:1px dashed var(--linea); text-decoration:none}
.u-marbete li a span{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:var(--oro-hondo)}
.u-marbete li a b{font-weight:700; font-size:1rem; overflow-wrap:anywhere}
.u-marbete li a:hover b{color:var(--oro-hondo)}
.u-contacto .u-marbete-pie{position:relative; margin:16px 0 0; text-align:center; font-size:.86rem; color:var(--tinta-suave)}

/* ---------- Pie ---------- */
footer{background:var(--cafe-2); color:rgba(249,248,246,.76); padding:58px 0 40px; border-top:1px dashed var(--linea-clara)}
footer .brand b{color:#fff}
footer .brand i{color:var(--oro-claro); text-transform:none}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
  padding-bottom:26px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:14px}
.foot-social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--linea-clara); color:var(--oro-claro); transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--oro-claro); color:var(--cafe-2); border-color:var(--oro-claro)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px}
footer .btn-primary{background:var(--oro-claro); color:var(--tinta)}

/* ---------- Flotantes y piezas compartidas ---------- */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#06280F; text-decoration:none; border-radius:999px;
  box-shadow:0 18px 38px -16px rgba(37,211,102,.9)}
.anim .wa-float{animation:latirU 3.4s ease-out infinite}
@keyframes latirU{0%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 16px rgba(37,211,102,0)}}
.pista{color:var(--oro-hondo)}
.arriba{background:var(--cafe); color:#fff}
.insignia, .insignia-linea{border-radius:999px}
.insignia-linea{background:var(--oro-claro); color:var(--tinta); font-weight:800}
.hist > summary{color:var(--oro-hondo)}
.barra-compra{background:var(--lino); border-top:2px dashed var(--oro-claro)}

/* ---------- Ficha de producto ---------- */
.up-cab{padding:34px 0 18px; background:linear-gradient(180deg,var(--oro-palido),var(--lino))}
.up-cab-fila{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between}
.up-cab h1{font-size:clamp(2rem,4vw,3.1rem); margin-top:10px; max-width:20ch}
.p-migas{margin:0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}
.p-migas a{text-decoration:none}
.p-migas span{margin:0 8px; color:var(--oro)}
.up-ref{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.up-ref-et{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:var(--oro-hondo)}
.up-ref-tallas{display:flex; gap:8px}
.up-ref-tallas i{font-style:normal; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--oro); font-weight:700; font-size:.86rem}
.up-regla{display:block; width:100%; height:18px; margin-top:22px; color:var(--oro); opacity:.7}
.up-cuerpo{padding:48px 0 76px}
.up-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; width:min(1180px,92vw); margin:0 auto}
.up-foto{position:relative; overflow:hidden; background:var(--lino-2); border-radius:var(--r) 140px var(--r) var(--r)}
.up-foto img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover}
.up-mini{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px}
.up-mini button{width:76px; height:76px; padding:0; border-radius:12px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:none}
.up-mini button[aria-current="true"], .up-mini button[aria-pressed="true"]{border:2px dashed var(--oro-hondo)}
.up-mini img{width:100%; height:100%; object-fit:cover}
.up-nombre{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:12px}
.p-desc{color:var(--tinta-2)}
.p-precio{position:relative; display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:22px 0 6px;
  padding:12px 22px 10px 36px; background:#fff; border-radius:8px 18px 18px 8px; rotate:-2deg;
  box-shadow:0 16px 30px -18px rgba(42,35,29,.45)}
.p-precio::before{content:""; position:absolute; left:14px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--oro)}
.p-precio b{font-family:var(--f-titulo); font-size:2.5rem; font-weight:700; line-height:1; color:var(--tinta)}
.p-precio small{color:var(--tinta-suave)}
.p-opciones{margin:22px 0}
.p-opciones h3{font-family:var(--f-cuerpo); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:800; color:var(--oro-hondo); margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:10px}
.p-chips button{min-width:48px; height:48px; padding:0 14px; border-radius:999px; border:2px solid var(--linea); background:#fff;
  cursor:pointer; font:inherit; font-weight:700; font-size:.9rem; color:var(--tinta)}
.p-chips button:hover{border-color:var(--oro)}
.p-chips button[aria-pressed="true"]{background:var(--oro-hondo); color:#fff; border-color:var(--oro-hondo)}
.p-puntos{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px}
.p-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--tinta-2)}
.p-puntos svg{width:19px; height:19px; color:var(--oro-hondo); flex:none; margin-top:4px}
.p-cta{margin-top:26px}
.btn-block{width:100%}
.p-nota{display:flex; align-items:flex-start; gap:9px; margin-top:16px; color:var(--tinta-suave); font-size:.9rem}
.p-nota svg{width:18px; height:18px; color:var(--oro-hondo); flex:none; margin-top:3px}
.p-agotado{padding:5px 12px; border-radius:999px; background:var(--rosa-c); color:var(--rosa-h); font-weight:800; font-size:.8rem}
.up-det{padding:0 0 84px}
.up-etiqueta-int{max-width:760px; margin:0 auto; box-shadow:0 30px 60px -44px rgba(42,35,29,.5); border:1px solid var(--linea)}
.up-etiqueta-int h2{position:relative; font-size:1.9rem; text-align:center; margin-bottom:16px}
.up-etiqueta-int .rico{position:relative; color:var(--tinta-2)}
.up-otros{background:var(--lino-2); padding:74px 0}
.up-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px}
.up-otro{display:block; text-decoration:none; background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid var(--linea);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.up-otro:hover{transform:translateY(-6px); box-shadow:0 30px 56px -38px rgba(42,35,29,.55)}
.up-otro .im img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover}
.up-otro .tx{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:16px 18px}
.up-otro h3{font-size:1.16rem}
.up-otro span{font-weight:800; color:var(--oro-hondo)}

/* ---------- Pantallas ---------- */
@media (max-width:1100px){
  .u-hero-grid{grid-template-columns:1fr 1fr}
  .u-ficha{grid-column:1 / -1; justify-self:center; width:min(100%,520px); rotate:0deg}
}
@media (max-width:960px){
  .u-medida-grid, .u-nos-grid, .u-contacto-grid, .up-grid{grid-template-columns:1fr}
  .u-piezas{grid-template-columns:1fr 1fr}
  .u-pieza:nth-child(3n+2){margin-top:0}
}
@media (max-width:820px){
  .sec{padding:78px 0}
  .nav-links{display:none}
  .u-hero-grid{grid-template-columns:1fr}
  .u-pasos{grid-template-columns:1fr; gap:36px}
  .u-puntada{display:none}
  .u-mv{grid-template-columns:1fr}
  .up-ref{align-items:flex-start}
}
@media (max-width:620px){
  .u-piezas{grid-template-columns:1fr}
  .brand img{width:50px; height:50px}
  .brand i{display:none}
  .u-mono{font-size:12rem}
  .u-hilo{right:-2%; width:50%}
  .u-etiqueta{right:-6px}
  .u-mas{padding:28px 24px}
  .u-marbete{padding:32px 22px 22px}
  .up-foto{border-radius:var(--r) 90px var(--r) var(--r)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .u-foto img, .u-etiqueta, .u-molde, .up-otro{transition:none}
  .anim .u-cinta-mov, .anim .u-aguja, .anim .u-muestra i, .anim .u-sello::after, .anim .wa-float{animation:none}
  .anim .u-hebra{stroke-dashoffset:0; transition:none}
}