/* ==========================================================================
   63 · Cadeneta
   Para Fruit Colombia: mochilas, ramos y flores tejidas a crochet.
   La idea es una sola: el punto cadeneta. Una hebra trenzada del vino del logo
   (#6D002A) recorre la página entera, pasa por debajo de cada título, enhebra
   las cuatro familias del catálogo y se dibuja sola al aparecer, como quien teje.
   El crochet es una hebra continua; la página también.
   Color: el vino del logo para la tinta y los tramos fuertes, el rosa de marca
   (#FFE8F2) para respirar y el beige de arena de las propias fotos para el
   catálogo. El rosa vivo es hilo, nunca letra: no llega a 4,5:1 sobre papel.
   Antic Didone (una sola gruesa, 400) para los títulos y las cifras; Bellota
   Text, redondeada y de trazo algo manual, para leer.
   ========================================================================== */

:root{
  --vino:       #6D002A;   /* el del logo. Títulos sobre claro: 11,6:1 sobre crema */
  --vino-hondo: #4A001C;   /* pie y fondo del contacto */
  --rosa:       #FFE8F2;   /* rosa de marca */
  --rosa-2:     #F7C9DC;   /* texto sobre vino: 8,5:1 */
  --rosa-hilo:  #D96B9A;   /* HILO, no letra: 3,0:1 sobre crema */
  --rosa-tinta: #A63D66;   /* el rosa que sí aguanta ser letra: 5,6:1 */
  --arena:      #EFE3D6;   /* el beige de las fotos */
  --crema:      #FBF6F1;
  --papel:      #FFFFFF;
  --tinta:      #3A2630;   /* 13:1 sobre crema */
  --tinta-2:    #6B5560;   /* 6,3:1 sobre crema */
  --linea:      rgba(109,0,42,.16);
  --linea-clara:rgba(255,232,242,.26);
  --lav:        var(--rosa-hilo);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:4px;                 /* casi recto: el tejido ya pone la curva */
}

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

.wrap{width:min(1200px,92vw); margin:0 auto}
.sec{padding:104px 0; position:relative}
.sec-head{max-width:720px; margin:0 0 54px}
.sec-head h2{font-size:clamp(2.3rem,5vw,3.8rem); margin-bottom:14px}
.sec-head p{margin:0; color:var(--tinta-2); max-width:56ch}
.eyebrow{font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rosa-tinta); margin-bottom:10px}
.chip{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; background:var(--papel);
  border:2px solid var(--vino); font-weight:700; font-size:.9rem; color:var(--tinta)}
.chip svg{width:17px; height:17px; color:var(--rosa-tinta)}

/* ---------- La hebra: el punto cadeneta, trenzado y repetido ----------
   Va como fondo repetido, no como SVG estirado: así los lazos no se deforman
   por mucho que crezca el ancho de la caja. Se dibuja de izquierda a derecha
   cuando la pieza entra en pantalla, como quien tiende una cadeneta. */
.fc-hebra{display:block; height:14px; width:100%; background-repeat:repeat-x; background-position:left center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cg fill='none' stroke='%236D002A' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0 7C0 1 12 1 12 7s12 6 12 0'/%3E%3Cpath d='M0 7c0 6 12 6 12 0s12-6 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.fc-hebra.clara{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cg fill='none' stroke='%23F7C9DC' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0 7C0 1 12 1 12 7s12 6 12 0'/%3E%3Cpath d='M0 7c0 6 12 6 12 0s12-6 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.fc-hebra.hilo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cg fill='none' stroke='%23D96B9A' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0 7C0 1 12 1 12 7s12 6 12 0'/%3E%3Cpath d='M0 7c0 6 12 6 12 0s12-6 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.anim .fc-hebra{clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease) .1s}
.anim .visto .fc-hebra, .anim .fc-hebra.visto{clip-path:inset(0 0 0 0)}

/* El ovillo: el que aparece en el logo, con el hilo que sale por un lado. */
.fc-ovillo{display:block; overflow:visible}
.fc-ovillo circle{fill:none; stroke:currentColor; stroke-width:5}
.fc-ovillo path{fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round}

/* ---------- Encabezado ---------- */
#hdr{position:sticky; top:0; z-index:60; background:rgba(251,246,241,.95); backdrop-filter:blur(12px);
  border-bottom:2px solid var(--vino); transition:box-shadow .3s var(--ease)}
#hdr.stuck{box-shadow:0 10px 0 -6px rgba(109,0,42,.16)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-weight:400; font-size:1.4rem; line-height:1.1; color:var(--vino);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rosa-tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:28px}
.nav-links a{position:relative; text-decoration:none; padding:8px 0; font-weight:700; font-size:.95rem; color:var(--tinta)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:7px; opacity:0;
  background-repeat:repeat-x; background-position:left center; transition:opacity .3s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cg fill='none' stroke='%23D96B9A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M0 7C0 1 12 1 12 7s12 6 12 0'/%3E%3Cpath d='M0 7c0 6 12 6 12 0s12-6 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.nav-links a:hover::after{opacity:1}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:700;
  border-radius:var(--r); border:2px solid var(--vino); cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--vino); color:var(--rosa); box-shadow:5px 5px 0 var(--rosa-hilo)}
.btn-primary:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--rosa-hilo); background:var(--vino-hondo)}
.btn-linea, .btn-ghost{background:transparent; color:var(--vino); box-shadow:5px 5px 0 var(--arena)}
.btn-linea:hover, .btn-ghost:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--arena); background:var(--rosa)}
.btn-ghost:not(.btn-sm), .btn-linea:not(.btn-sm){padding:1rem 2rem}
.btn-wa{background:#25D366; color:#06280F; border-color:#06280F; box-shadow:5px 5px 0 rgba(6,40,15,.35)}
.btn-wa:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(6,40,15,.35)}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:100; background:var(--vino)}

/* ---------- 1 · Portada ---------- */
.fc-hero{position:relative; overflow:hidden; background:
  radial-gradient(42% 52% at 86% 36%, #FFF1F7 0, rgba(255,241,247,0) 72%),
  radial-gradient(34% 44% at 4% 92%, var(--arena) 0, rgba(239,227,214,0) 70%),
  var(--crema)}
.fc-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(109,0,42,.17) 1px, transparent 1.2px); background-size:16px 16px}
.fc-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,72px); align-items:center; padding-block:clamp(48px,6vw,88px) clamp(92px,9vw,128px)}
.fc-hero h1{font-size:clamp(3rem,7vw,5.8rem); line-height:.96}
.fc-hero h1 span, .fc-hero h1 em{display:block}
.fc-hero h1 em{color:var(--rosa-tinta)}
.fc-hero-hebra{margin:26px 0 22px; max-width:340px}
.fc-lead{font-size:1.12rem; color:var(--tinta-2); max-width:46ch; margin:0}
.fc-cta{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 26px}
.fc-firmas{display:flex; flex-wrap:wrap; gap:10px}
.fc-hero-fig{position:relative; margin:0; width:min(100%,460px); justify-self:center}
/* El halo de «florecer» y la puntada de «costura» se pintan con --lav. El motor
   declara --lav en :root después de esta hoja, así que aquí va en el elemento. */
.fc-marco{position:relative; overflow:hidden; aspect-ratio:3/4; border:2px solid var(--vino); background:var(--arena);
  box-shadow:14px 14px 0 var(--rosa-hilo); --lav:var(--rosa-hilo)}
.fc-marco img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.fc-desde{position:absolute; z-index:5; left:-18px; bottom:26px; display:flex; flex-direction:column; align-items:flex-start;
  padding:13px 20px 12px; background:var(--rosa); border:2px solid var(--vino); box-shadow:5px 5px 0 var(--vino)}
.fc-desde small{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta); line-height:1}
.fc-desde b{font-family:var(--f-titulo); font-weight:400; font-size:1.6rem; line-height:1.2; color:var(--vino)}
.fc-ovillo-flota{position:absolute; z-index:0; right:-54px; top:-44px; width:150px; color:var(--rosa-hilo); opacity:.55; pointer-events:none}

/* ---------- 2 · La franja de la hebra ---------- */
.fc-tira{background:var(--vino); color:var(--rosa)}
.fc-tira-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 40px}
.fc-tira-grid > div{display:flex; gap:15px; align-items:flex-start}
.fc-tira-ic{flex:none; display:grid; place-items:center; width:48px; height:48px; border:2px solid var(--rosa-2); color:var(--rosa-2)}
.fc-tira-ic svg{width:22px; height:22px}
.fc-tira h2{font-size:1.3rem; color:var(--rosa); margin-bottom:4px}
.fc-tira p{margin:0; color:var(--rosa-2); font-size:.95rem; line-height:1.6}

/* ---------- 3 · El catálogo en cuatro familias ----------
   Veintidós piezas en una sola rejilla se leen como una lista que no acaba.
   Van en cuatro familias, y cada una lleva su propio ritmo de rejilla y su
   cifra: cuántas piezas trae y entre qué precios se mueve. */
.fc-catalogo{background:var(--arena)}
.fc-fam{margin-top:92px}
.fc-fam:first-of-type{margin-top:0}
.fc-fam-cab{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 26px; margin-bottom:34px}
.fc-cifra{display:flex; align-items:baseline; gap:10px; line-height:.8}
.fc-cifra b{font-family:var(--f-titulo); font-weight:400; font-size:clamp(3.6rem,9vw,7rem); color:var(--vino);
  line-height:.78; text-shadow:5px 5px 0 var(--rosa-hilo)}
.fc-cifra i{font-style:normal; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta)}
.fc-fam-tit{min-width:0}
.fc-fam-tit h3{font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:8px}
.fc-fam-tit p{margin:0; color:var(--tinta-2); font-size:.95rem; max-width:52ch}
.fc-fam-rango{text-align:right; font-weight:700; font-size:.92rem; color:var(--vino); white-space:nowrap}
.fc-fam-rango span{display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta)}
.fc-fam-hebra{grid-column:1 / -1; margin-top:20px}

.fc-rejilla{display:grid; gap:40px 26px}
.fc-rejilla.mochilas{grid-template-columns:repeat(3,minmax(0,1fr))}
.fc-rejilla.mochilas > .fc-pieza:first-child{grid-column:1 / -1}
.fc-rejilla.flores{grid-template-columns:repeat(5,minmax(0,1fr))}
.fc-rejilla.cajas{grid-template-columns:repeat(3,minmax(0,1fr))}
.fc-rejilla.llaveros{grid-template-columns:repeat(4,minmax(0,1fr))}

.fc-pieza{position:relative; display:flex; flex-direction:column; background:var(--papel); border:2px solid var(--vino);
  box-shadow:9px 9px 0 var(--vino); transition:transform .35s var(--ease), box-shadow .35s var(--ease); --lav:var(--vino)}
.fc-pieza:hover{transform:translate(4px,4px); box-shadow:4px 4px 0 var(--rosa-hilo)}
.fc-foto{position:relative; display:block; overflow:hidden; aspect-ratio:3/4; background:var(--arena); border-bottom:2px solid var(--vino)}
.fc-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 48%; transition:transform .9s var(--ease)}
.fc-pieza:hover .fc-foto img{transform:scale(1.05)}
.fc-rejilla.flores .fc-foto{aspect-ratio:2/3}
.fc-rejilla.cajas .fc-foto, .fc-rejilla.llaveros .fc-foto{aspect-ratio:1}
/* La pieza insignia de las mochilas se tiende: foto a la izquierda, texto al lado. */
.fc-rejilla.mochilas > .fc-pieza:first-child{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch}
.fc-rejilla.mochilas > .fc-pieza:first-child .fc-foto{aspect-ratio:auto; height:100%; min-height:360px; border-bottom:0; border-right:2px solid var(--vino)}
.fc-rejilla.mochilas > .fc-pieza:first-child .fc-pieza-tx{padding:36px 34px 32px}
.fc-rejilla.mochilas > .fc-pieza:first-child h4{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.fc-rejilla.mochilas > .fc-pieza:first-child .fc-pieza-tx > p{font-size:1.02rem; max-width:44ch}

.fc-pieza-tx{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 20px 22px; flex:1}
.fc-pieza-tx h4{margin:0; font-family:var(--f-titulo); font-weight:400; font-size:1.35rem; line-height:1.14; color:var(--vino)}
.fc-pieza-tx h4 a{display:inline-block; padding:11px 0; text-decoration:none}
.fc-pieza-tx > p{margin:0 0 6px; color:var(--tinta-2); font-size:.92rem; line-height:1.6}
.fc-pieza-tx .btn{margin-top:auto}
.fc-rejilla.llaveros .fc-pieza-tx{padding:16px 16px 18px}
.fc-rejilla.llaveros .fc-pieza-tx h4{font-size:1.12rem}

/* La etiqueta de hilo: el cartón con el pico cortado y el agujero de la cuerda. */
.fc-etiqueta{position:absolute; z-index:6; top:16px; right:-11px; display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px 9px 34px; background:var(--rosa); border:2px solid var(--vino); color:var(--vino);
  font-family:var(--f-titulo); font-weight:400; font-size:1.12rem; line-height:1;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%)}
.fc-etiqueta::before{content:""; width:7px; height:7px; border:2px solid var(--vino); border-radius:50%;
  position:absolute; left:17px; top:50%; translate:0 -50%}
.fc-etiqueta.a-pedir{font-family:var(--f-cuerpo); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.fc-pieza .insignia-linea{position:absolute; z-index:6; left:-8px; top:16px; margin:0}
.cat-note{margin:64px 0 0; color:var(--tinta-2); font-size:.95rem; max-width:62ch}
.cat-note a{color:var(--vino); font-weight:700}
.variants small{color:var(--tinta-2)}

/* ---------- 4 · Arma tu caja ---------- */
.fc-arma{background:var(--rosa)}
.fc-arma-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,76px); align-items:center}
.fc-arma h2{font-size:clamp(2.2rem,4.6vw,3.4rem); margin-bottom:14px}
.fc-arma-tx{color:var(--tinta-2); max-width:44ch}
.fc-canasta{background:var(--papel); border:2px solid var(--vino); box-shadow:12px 12px 0 var(--vino); padding:34px 32px 30px}
.fc-canasta-tit{margin:0 0 6px; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta)}
.fc-canasta ul{list-style:none; margin:14px 0 0; padding-left:0; display:grid; gap:0}
.fc-canasta li{display:flex; align-items:center; gap:14px; min-height:46px; padding:6px 0; border-bottom:1.5px dashed var(--linea);
  font-size:1.05rem; color:var(--tinta)}
.fc-canasta li:last-child{border-bottom:0}
.fc-punto{flex:none; width:13px; height:13px; border:2px solid var(--rosa-hilo); border-radius:50% 0 50% 50%; rotate:-45deg}

/* ---------- 5 · Nosotros ---------- */
.fc-nosotros{background:var(--crema)}
.fc-nos-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,76px); align-items:start}
.fc-marca{position:relative; background:var(--rosa); border:2px solid var(--vino); box-shadow:12px 12px 0 var(--arena); padding:40px 34px 34px; text-align:center}
.fc-marca img{width:min(100%,290px); height:auto; margin:0 auto}
.fc-marca .fc-hebra{margin-top:24px}
.fc-marca-frase{margin:20px 0 0; font-family:var(--f-titulo); font-size:1.3rem; line-height:1.3; color:var(--vino)}
.fc-nosotros h2{font-size:clamp(2.2rem,4.6vw,3.4rem); margin-bottom:16px}
.fc-nosotros .hist > summary{color:var(--vino)}
.fc-mv{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.fc-mv > div{padding:24px 22px 20px; background:var(--papel); border:2px solid var(--vino)}
.fc-mv h3{font-size:1.15rem; margin-bottom:6px; color:var(--vino)}
.fc-mv p{margin:0; color:var(--tinta-2); font-size:.93rem}

/* ---------- 6 · Cómo pedir: tres lazadas ---------- */
.fc-pedir{background:var(--rosa)}
.fc-pasos{list-style:none; margin:0; padding-left:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px}
.fc-pasos li{position:relative; background:var(--papel); border:2px solid var(--vino); box-shadow:9px 9px 0 var(--vino); padding:34px 28px 28px}
.fc-lazada{display:block; width:62px; height:38px; margin-bottom:18px; color:var(--rosa-hilo)}
.fc-lazada path{fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round}
.fc-pasos h3{font-size:1.45rem; margin-bottom:8px}
.fc-pasos p{margin:0; color:var(--tinta-2)}
.fc-pedir-cta{margin-top:46px; display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.fc-pedir-cta p{margin:0; color:var(--tinta-2); font-size:.95rem}

/* ---------- 7 · Contacto ---------- */
.fc-contacto{background:var(--vino); color:var(--rosa)}
.fc-contacto h2{color:var(--rosa)}
.fc-contacto .eyebrow{color:var(--rosa-2)}
.fc-con-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,5vw,70px); align-items:center}
.fc-contacto h2{font-size:clamp(2.3rem,4.6vw,3.5rem); margin-bottom:14px}
.fc-con-txt{color:var(--rosa-2); max-width:42ch}
.fc-con-cierre{margin:24px 0 0; font-family:var(--f-titulo); font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.3; color:var(--rosa-2); max-width:24ch}
.fc-redes{list-style:none; margin:0; padding-left:0; background:var(--rosa); border:2px solid var(--vino-hondo); box-shadow:12px 12px 0 var(--vino-hondo)}
.fc-redes li + li{border-top:1.5px dashed var(--linea)}
.fc-redes a{display:flex; align-items:center; gap:16px; padding:15px 22px; text-decoration:none; min-height:56px}
.fc-red-ic{flex:none; width:42px; height:42px; display:grid; place-items:center; border:2px solid var(--vino); color:var(--vino)}
.fc-red-ic svg{width:20px; height:20px}
.fc-red-tx{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.fc-red-tx small{font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--rosa-tinta)}
.fc-red-tx b{font-weight:700; font-size:.98rem; color:var(--tinta); overflow-wrap:anywhere}

/* ---------- Pie ---------- */
footer{background:var(--vino-hondo); color:var(--rosa-2); padding:58px 0 42px}
footer .brand b{color:var(--rosa)}
footer .brand i{color:var(--rosa-2)}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:12px}
.foot-social a{width:48px; height:48px; display:grid; place-items:center; border:2px solid var(--linea-clara); color:var(--rosa);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.foot-social a:hover{background:var(--rosa); border-color:var(--rosa); color:var(--vino-hondo)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; font-size:.9rem}

/* ---------- Flotantes y piezas compartidas ---------- */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#06280F; text-decoration:none; border:2px solid #06280F; border-radius:var(--r);
  box-shadow:5px 5px 0 rgba(6,40,15,.4)}
.anim .wa-float{animation:latirFc 3.6s ease-out infinite}
@keyframes latirFc{0%{box-shadow:5px 5px 0 rgba(6,40,15,.4), 0 0 0 0 rgba(37,211,102,.5)}
  70%,100%{box-shadow:5px 5px 0 rgba(6,40,15,.4), 0 0 0 15px rgba(37,211,102,0)}}
.arriba{background:var(--vino); color:var(--rosa); border:2px solid var(--vino-hondo)}
.insignia, .insignia-linea{border-radius:0}
.insignia-linea{background:var(--rosa-hilo); color:#2A0010; font-weight:700; border:2px solid var(--vino)}
.hist > summary{color:var(--vino)}
.barra-compra{background:var(--papel); border-top:2px solid var(--vino)}

/* ---------- Ficha de producto ---------- */
.fp-cab{position:relative; overflow:hidden; background:var(--vino); color:var(--rosa)}
.fp-cab::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,232,242,.26) 1px, transparent 1.2px); background-size:16px 16px}
.fp-cab-in{position:relative; z-index:1; padding-block:30px 40px}
.p-migas{margin:0 0 16px; font-size:.84rem; font-weight:700; color:var(--rosa-2);
  display:flex; flex-wrap:nowrap; gap:0; align-items:center; overflow-x:auto; white-space:nowrap; scrollbar-width:none}
.p-migas::-webkit-scrollbar{display:none}
.p-migas a{text-decoration:none}
.p-migas a:hover{text-decoration:underline}
.p-migas span{margin:0 10px; color:var(--rosa-hilo)}
.fp-cab h1{max-width:20ch; font-size:clamp(2.1rem,4.4vw,3.4rem); color:var(--rosa)}
.fp-cab .fc-hebra{margin-top:20px; max-width:220px}
.fp-cuerpo{padding:60px 0 84px; background:var(--crema)}
.fp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start;
  width:min(1200px,92vw); margin:0 auto}
.fp-fotos{position:relative}
.fp-foto{position:relative; border:2px solid var(--vino); background:var(--arena); box-shadow:14px 14px 0 var(--rosa-hilo); --lav:var(--rosa-hilo)}
.fp-foto img{width:100%; height:auto}
.fp-fotos .fc-etiqueta{top:24px; right:-14px; font-size:1.5rem; padding:13px 24px 13px 42px}
.fp-fotos .fc-etiqueta::before{left:21px; width:9px; height:9px}
.fp-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.fp-mini button{width:74px; height:74px; padding:0; overflow:hidden; cursor:pointer; background:none; border:2px solid var(--linea)}
.fp-mini button[aria-current="true"], .fp-mini button[aria-pressed="true"]{border-color:var(--vino)}
.fp-mini img{width:100%; height:100%; object-fit:cover}
.fp-nombre{font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:12px}
.p-desc{color:var(--tinta-2)}
.p-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; margin:24px 0 4px; padding-top:18px; border-top:2px solid var(--vino)}
.p-precio b{font-family:var(--f-titulo); font-weight:400; font-size:2.8rem; line-height:1; color:var(--vino)}
.p-precio small{color:var(--tinta-2)}
.fp-variable{margin:24px 0 4px; padding-top:18px; border-top:2px solid var(--vino); font-weight:700; color:var(--vino)}
.p-opciones{margin:24px 0}
.p-opciones h3{font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta); margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:10px}
.p-chips button{min-height:46px; padding-inline:20px; border:2px solid var(--vino); background:var(--papel); cursor:pointer;
  font:inherit; font-weight:700; font-size:.92rem; color:var(--tinta)}
.p-chips button[aria-pressed="true"]{background:var(--vino); color:var(--rosa)}
.p-puntos{list-style:none; margin:24px 0 0; padding-left:0; display:grid; gap:12px}
.p-puntos li{display:flex; gap:12px; align-items:flex-start; color:var(--tinta-2)}
.p-puntos svg{width:18px; height:18px; flex:none; margin-top:5px; color:var(--rosa-tinta)}
.p-cta{margin-top:28px}
.btn-block{width:100%}
.p-nota{display:flex; align-items:flex-start; gap:10px; margin-top:18px; color:var(--tinta-2); font-size:.9rem}
.p-nota svg{width:18px; height:18px; color:var(--rosa-tinta); flex:none; margin-top:4px}
.p-agotado{padding:6px 14px; background:var(--rosa); color:var(--vino); font-weight:700; font-size:.8rem; border:2px solid var(--vino)}
.fp-det{padding:0 0 92px; background:var(--crema)}
.fp-ficha{max-width:780px; background:var(--papel); border:2px solid var(--vino); box-shadow:12px 12px 0 var(--arena); padding:36px 36px 30px}
.fp-ficha-tit{margin:0 0 4px; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-tinta)}
.fp-ficha h2{font-size:clamp(1.6rem,2.8vw,2.2rem); margin:6px 0 0}
.fp-ficha .fc-hebra{margin-top:16px; max-width:200px}
.fp-ficha .rico{color:var(--tinta-2); margin-top:16px}
.fp-otros{padding:84px 0; background:var(--arena)}
.fp-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px}
.fp-otro{display:flex; flex-direction:column; background:var(--papel); border:2px solid var(--vino); text-decoration:none;
  box-shadow:8px 8px 0 var(--vino); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.fp-otro:hover{transform:translate(4px,4px); box-shadow:4px 4px 0 var(--rosa-hilo)}
.fp-otro-foto{position:relative; display:block; overflow:hidden; aspect-ratio:1; border-bottom:2px solid var(--vino)}
.fp-otro-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fp-otro-tx{padding:16px 16px 18px}
.fp-otro-tx b{display:block; font-family:var(--f-titulo); font-weight:400; font-size:1.16rem; line-height:1.18; color:var(--vino)}
.fp-otro-tx small{display:block; margin-top:5px; font-weight:700; color:var(--rosa-tinta)}

/* ---------- Acabado premium ----------
   La hebra de cadeneta bajo cada título de sección, el precio colgado como una
   etiqueta de hilo con su agujero, y la sombra maciza de vino que se repliega
   cuando el dedo o el puntero se posa sobre la pieza. */
.sec-head{position:relative}
.sec-head .fc-hebra{margin-top:18px; max-width:220px}
.fc-pieza::after{content:""; position:absolute; left:14px; right:14px; bottom:-2px; height:2px; background:var(--rosa-hilo);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.fc-pieza:hover::after{transform:scaleX(1)}

/* ---------- Pantallas ---------- */
@media (max-width:1100px){
  .fc-rejilla.flores{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .nav-links{display:none}
  .fc-hero-grid, .fc-arma-grid, .fc-nos-grid, .fc-con-grid, .fp-grid{grid-template-columns:minmax(0,1fr)}
  .fc-hero-fig{width:min(88%,420px)}
  .fc-rejilla.mochilas, .fc-rejilla.cajas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fc-rejilla.mochilas > .fc-pieza:first-child{display:flex; flex-direction:column}
  .fc-rejilla.mochilas > .fc-pieza:first-child .fc-foto{aspect-ratio:3/4; min-height:0; border-right:0; border-bottom:2px solid var(--vino)}
  .fc-rejilla.mochilas > .fc-pieza:first-child .fc-pieza-tx{padding:20px 20px 22px}
  .fc-tira-grid{grid-template-columns:minmax(0,1fr)}
  .fc-ovillo-flota{right:-20px; width:110px}
}
@media (max-width:820px){
  .sec{padding:78px 0}
  .fc-fam{margin-top:70px}
  .fc-fam-cab{grid-template-columns:auto minmax(0,1fr); gap:0 20px}
  .fc-fam-rango{grid-column:1 / -1; text-align:left; margin-top:14px}
  .fc-pasos{grid-template-columns:minmax(0,1fr); gap:26px}
  .fc-mv{grid-template-columns:minmax(0,1fr)}
  .fc-rejilla.llaveros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .brand i{display:none}
  .fc-hero h1{font-size:clamp(2.6rem,12vw,3.6rem)}
  .fc-rejilla{gap:34px 14px}
  .fc-rejilla.flores{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En dos columnas de 161 px el cuerpo de la ficha necesita su propia escala:
     con el tamaño de escritorio, el nombre se parte en tres renglones. */
  .fc-pieza-tx{padding:12px 13px 16px}
  .fc-pieza-tx h4{font-size:1.02rem}
  .fc-pieza-tx h4 a{padding:13px 0}
  .fc-pieza-tx > p{font-size:.82rem; line-height:1.5}
  .fc-pieza-tx .btn-sm{font-size:.82rem}
  .fc-etiqueta{font-size:.95rem}
  .fc-rejilla.mochilas > .fc-pieza:first-child h4{font-size:1.5rem}
  .fc-rejilla.mochilas > .fc-pieza:first-child .fc-pieza-tx{padding:16px 18px 20px}
  .fc-rejilla.mochilas > .fc-pieza:first-child .fc-pieza-tx > p{font-size:.95rem}
  .fc-pieza{box-shadow:6px 6px 0 var(--vino)}
  .fc-marca, .fc-canasta, .fc-redes, .fc-pasos li, .fp-ficha{box-shadow:7px 7px 0 var(--vino)}
  .fc-marco{box-shadow:9px 9px 0 var(--rosa-hilo)}
  .fp-foto{box-shadow:9px 9px 0 var(--rosa-hilo)}
  .fc-etiqueta{right:-8px; font-size:1rem; padding:8px 14px 8px 31px}
  .fp-fotos .fc-etiqueta{font-size:1.2rem; padding:10px 18px 10px 36px; right:-8px}
  .fc-canasta{padding:26px 20px 24px}
  .fc-marca{padding:30px 22px 26px}
  .p-precio b{font-size:2.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .fc-pieza, .fc-foto img, .fp-otro, .fc-pieza::after, .nav-links a::after{transition:none}
  .anim .wa-float{animation:none}
  .anim .fc-hebra{clip-path:none; transition:none}
}