/* ═══════════════════════════════════════════════════════════
   TIENDA PÚBLICA
   Los colores --pri y --dark los inyecta la plantilla desde
   la configuración del panel.
   ═══════════════════════════════════════════════════════════ */
:root{
  --claro:#F7F7F7; --crema:#FAF6F1; --gris:#808080;
  --linea:rgba(128,128,128,.22); --ok:#5C6B47; --mal:#C0553F;
  --f:"Poppins","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs:"Sacramento","Segoe Script","Brush Script MT",cursive;
  --cont:1300px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f);font-size:15px;line-height:1.7;color:var(--gris);background:#fff}
h1,h2,h3,h4{margin:0;color:var(--dark);font-weight:500;line-height:1.25}
a{color:inherit;text-decoration:none;transition:.25s}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--pri);outline-offset:3px}
.cont{max-width:var(--cont);margin:0 auto;padding:0 18px}
.estrecho{max-width:780px}
.centro{text-align:center}
.manuscrita{font-family:var(--fs);font-size:34px;color:var(--pri);line-height:1;display:block}
.manuscrita.grande{font-size:clamp(32px,5.5vw,56px)}

/* ── Cinta y cabecera ── */
.cinta{background:var(--crema);font-size:12px;padding:9px 18px;display:flex;justify-content:center;
  gap:14px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--linea);letter-spacing:.3px}
.cinta i{width:4px;height:4px;background:var(--pri);border-radius:50%;display:block}
@media(max-width:640px){.cinta span:not(:first-child),.cinta i{display:none}}

.cabecera{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cabecera .cont{display:flex;align-items:center;justify-content:space-between;gap:18px;height:76px}
.marca{display:flex;flex-direction:column;line-height:1}
.marca b{font-size:19px;font-weight:600;letter-spacing:.5px;color:var(--dark)}
.marca i{font-family:var(--fs);font-size:20px;color:var(--pri);font-style:normal;margin-top:-4px;padding-left:16px}
.menu{display:flex;gap:26px;font-size:14px}
.menu a{color:var(--dark);padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover{color:var(--pri);border-color:var(--pri)}
.bolsa-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:50px;
  background:var(--dark);color:#fff;font-size:13px;font-weight:600}
.bolsa-btn:hover{background:var(--pri);color:#fff}
.cuenta{background:var(--pri);color:#fff;min-width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11px}
.bolsa-btn:hover .cuenta{background:#fff;color:var(--pri)}
.hamburguesa{display:none;background:none;border:0;font-size:22px;color:var(--dark)}
@media(max-width:960px){
  .menu{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;
    padding:16px 18px;border-bottom:1px solid var(--linea);gap:0}
  .menu.abierto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linea)}
  .hamburguesa{display:block}
}

/* ── Avisos ── */
.aviso{padding:13px 18px;margin:18px 0;font-size:14px;border-left:3px solid}
.aviso.ok{background:#EFF4EA;border-color:var(--ok);color:#3F4A33}
.aviso.mal{background:#FDECEA;border-color:var(--mal);color:#8C3A2A}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 36px;
  border-radius:50px;font-size:13.5px;font-weight:600;letter-spacing:.3px;border:1px solid transparent;
  transition:.3s;text-align:center}
.btn1{background:var(--pri);color:#fff}
.btn1:hover{background:var(--dark);color:#fff}
.btn2{background:var(--dark);color:#fff}
.btn2:hover{background:var(--pri);color:#fff}
.btn-linea{border-color:var(--linea);color:var(--dark)}
.btn-linea:hover{border-color:var(--pri);color:var(--pri)}
.btn.ancho{width:100%;margin-bottom:10px}
.btn.grande{padding:18px 44px;font-size:15px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ── Secciones ── */
.seccion{padding:clamp(52px,7vw,92px) 0}
.seccion.claro{background:var(--claro)}
.titulo{text-align:center;margin-bottom:44px}
.titulo h2{font-size:clamp(24px,3.6vw,38px)}
.titulo p{max-width:56ch;margin:12px auto 0;font-size:14.5px}

/* ── Portada ── */
.portada{background:var(--crema);padding:clamp(40px,6vw,80px) 0}
.portada-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.portada-txt h1{font-size:clamp(34px,5.5vw,62px);margin:6px 0 18px}
.portada-txt h1 em{font-style:normal;color:var(--pri)}
.portada-txt p{max-width:44ch;margin:0 0 30px}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.portada-art{position:relative}
.portada-art img{width:100%;aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.5)}
.sello-redondo{position:absolute;top:-16px;right:-8px;width:92px;height:92px;border-radius:50%;
  background:var(--pri);color:#fff;display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:1px;line-height:1.4}
@media(max-width:860px){
  .portada-grid{grid-template-columns:1fr}
  .portada-art{max-width:400px;margin:0 auto;order:-1}
}

/* ── Colecciones ── */
.colecciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.coleccion{background:var(--crema);padding:30px 24px;text-align:center;transition:.3s;border:1px solid transparent}
.coleccion:hover{background:var(--pri);border-color:var(--pri)}
.coleccion:hover h3,.coleccion:hover p{color:#fff}
.coleccion h3{font-size:19px;transition:.3s}
.coleccion p{margin:6px 0 0;font-size:13px;transition:.3s}

/* ── Rejilla de piezas ── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.pieza-foto{position:relative;display:block;overflow:hidden;background:var(--crema);aspect-ratio:4/5}
.pieza-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pieza:hover .pieza-foto img{transform:scale(1.06)}
.sin-foto{display:grid;place-items:center;width:100%;height:100%;background:var(--crema);
  color:var(--pri);font-family:var(--fs);font-size:26px;text-align:center;padding:16px;aspect-ratio:4/5}
.sin-foto.grande{font-size:40px}
.sello{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;padding:5px 13px;border-radius:50px;color:#fff}
.sello.agotada{background:var(--mal)}
.sello.ultima{background:var(--dark)}
.sello.nueva{background:var(--ok)}
.pieza-info{padding-top:15px;text-align:center}
.pieza-tipo{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pri)}
.pieza-info h3{font-size:17px;margin:5px 0 6px}
.pieza-info h3 a:hover{color:var(--pri)}
.pieza-frase{font-size:13px;font-style:italic;margin:0 0 9px}
.pieza-precio b{color:var(--dark);font-weight:600;font-size:16px}
.pieza-precio del{color:var(--gris);font-size:13.5px;margin-left:8px}
.quedan{display:block;margin-top:6px;font-size:12px;color:var(--mal)}

/* ── Franja de frase ── */
.franja{background:var(--pri);color:#fff;text-align:center;padding:clamp(52px,7vw,84px) 0}
.franja .manuscrita{color:#fff;max-width:22ch;margin:0 auto}
.franja small{display:block;margin-top:12px;font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.85}

/* ── Servicios ── */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;text-align:center}
.servicios b{display:block;color:var(--dark);font-size:15px;margin-bottom:4px}
.servicios span{font-size:13px}

/* ── Catálogo ── */
.filtros-tienda{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;align-items:center}
.chip{padding:9px 20px;border-radius:50px;border:1px solid var(--linea);font-size:13px;color:var(--dark)}
.chip.on,.chip:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.buscador{display:flex;gap:0;margin-left:auto}
.buscador input{padding:9px 16px;border:1px solid var(--linea);border-right:0;border-radius:50px 0 0 50px;
  font:inherit;font-size:13px;min-width:180px}
.buscador input:focus{outline:none;border-color:var(--pri)}
.buscador button{padding:9px 20px;border:1px solid var(--pri);background:var(--pri);color:#fff;
  border-radius:0 50px 50px 0;font-size:13px;font-weight:600}
@media(max-width:760px){.buscador{margin:10px auto 0;width:100%}.buscador input{flex:1}}
.conteo{text-align:center;font-size:13px;margin:0 0 22px}
.paginacion{display:flex;gap:7px;justify-content:center;margin-top:40px}
.paginacion a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--linea);
  border-radius:50%;font-size:13px;color:var(--dark)}
.paginacion a.on,.paginacion a:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.vacio-tienda{text-align:center;padding:60px 20px}
.vacio-tienda h3{font-size:22px;margin:6px 0 10px}
.vacio-tienda p{max-width:44ch;margin:0 auto 24px}
.vacio-tienda .btn{margin:0 5px}

/* ── Ficha ── */
.miga{padding:18px;font-size:12.5px}
.miga a:hover{color:var(--pri)}
.ficha{padding-bottom:clamp(52px,7vw,84px)}
.ficha-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
.foto-grande{background:var(--crema);overflow:hidden}
.foto-grande img{width:100%;aspect-ratio:4/5;object-fit:cover}
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:10px}
.mini{padding:0;border:1px solid transparent;background:none;overflow:hidden}
.mini.on{border-color:var(--pri)}
.mini img{aspect-ratio:1;object-fit:cover}
.ficha-datos h1{font-size:clamp(28px,4.2vw,44px);margin:6px 0 12px}
.cita{font-family:var(--fs);font-size:24px;color:var(--pri);margin:0 0 18px;line-height:1.3}
.precio-grande{margin-bottom:20px}
.precio-grande b{font-size:28px;color:var(--dark);font-weight:600}
.precio-grande del{font-size:17px;margin-left:12px}
.descripcion{margin-bottom:24px}
.form-comprar{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:22px 0;margin-bottom:24px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--pri);margin-bottom:8px}
.campo input,.campo textarea,.campo select{width:100%;padding:13px 16px;border:1px solid var(--linea);
  font:inherit;font-size:14.5px;color:var(--dark);background:#fff;border-radius:4px}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--pri)}
.campo textarea{min-height:90px;resize:vertical}
.campo small{display:block;margin-top:6px;font-size:12px}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
/* Selector de tonos: chip horizontal, muestra + nombre en una línea.
   Antes se deformaba porque el texto no cabía en un círculo. */
.tonos-elegir{display:flex;gap:10px;flex-wrap:wrap}
.tono-opcion{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 10px;border:1px solid var(--linea);border-radius:50px;
  cursor:pointer;font-size:13.5px;color:var(--dark);background:#fff;
  transition:border-color .25s,background .25s;line-height:1;white-space:nowrap}
.tono-opcion:hover{border-color:var(--pri)}
.tono-opcion input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tono-opcion:has(input:checked){border-color:var(--pri);background:var(--crema);
  box-shadow:0 0 0 1px var(--pri) inset}
.tono-opcion:has(input:focus-visible){outline:2px solid var(--pri);outline-offset:2px}
.tono-opcion.agotado{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.nombre-tono{letter-spacing:.2px}
.muestra{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.18);
  display:block;flex:none;box-shadow:inset 0 0 0 2px #fff}
.quedan-aviso{color:var(--mal);font-size:13px;margin:0 0 16px}
.ficha-tabla{list-style:none;padding:0;margin:0 0 22px;font-size:14px}
.ficha-tabla li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linea)}
.ficha-tabla li:last-child{border:0}
.ficha-tabla span{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--pri)}
.ficha-tabla b{color:var(--dark);font-weight:500;text-align:right}
.promesas{display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.promesas span::before{content:"·";color:var(--pri);margin-right:8px;font-weight:700}
.agotado-aviso{background:var(--crema);padding:24px;text-align:center;margin-bottom:24px}
.agotado-aviso b{display:block;color:var(--dark);font-size:17px;margin-bottom:6px}
.agotado-aviso p{font-size:13.5px;margin:0 0 16px}
@media(max-width:860px){.ficha-grid{grid-template-columns:1fr}.campo-fila{grid-template-columns:1fr}}

/* ── Bolsa y confirmación ── */
.bolsa-grid{display:grid;grid-template-columns:1fr 350px;gap:32px;align-items:start}
@media(max-width:900px){.bolsa-grid{grid-template-columns:1fr}}
.linea{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--linea);align-items:start}
.linea-foto{background:var(--crema);overflow:hidden}
.linea-foto img{aspect-ratio:4/5;object-fit:cover}
.linea-datos h3{font-size:18px;margin-bottom:4px}
.linea-tono{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0 0}
.linea-tono .muestra{width:16px;height:16px}
.linea-precio{font-size:13px;margin:6px 0 0}
.linea-acciones{display:flex;gap:16px;align-items:center;margin-top:12px;flex-wrap:wrap}
.cantidad-form{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:50px;overflow:hidden}
.cantidad-form button{width:34px;height:34px;border:0;background:none;color:var(--dark);font-size:15px}
.cantidad-form button:hover:not(:disabled){background:var(--crema)}
.cantidad-form span{min-width:32px;text-align:center;font-size:14px;color:var(--dark)}
.quitar{background:none;border:0;color:var(--mal);font-size:12.5px;padding:0}
.linea-total{font-size:17px;font-weight:600;color:var(--dark);white-space:nowrap}
@media(max-width:640px){
  .linea{grid-template-columns:80px 1fr}
  .linea-total{grid-column:2;text-align:right}
}
.resumen{background:var(--crema);padding:28px;position:sticky;top:96px}
.resumen h3{font-size:19px;margin-bottom:18px}
.resumen-fila{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13.5px}
.resumen-fila b{color:var(--dark);font-weight:500;text-align:right}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--linea);margin-top:12px;padding-top:14px;margin-bottom:18px}
.resumen-total span{font-size:12px;letter-spacing:1.2px;text-transform:uppercase}
.resumen-total b{font-size:24px;color:var(--dark);font-weight:600}
.falta-envio{font-size:12.5px;color:var(--pri);margin:6px 0 0}
.logrado{font-size:12.5px;color:var(--ok);margin:6px 0 0}
.nota-envio{font-size:12px;margin:14px 0 0;text-align:center}
.resumen-piezas{list-style:none;padding:0;margin:0 0 14px}
.resumen-piezas li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--linea);
  align-items:center;font-size:13px}
.resumen-piezas img{width:44px;height:55px;object-fit:cover;flex:none}
.resumen-piezas span{flex:1;display:flex;flex-direction:column}
.resumen-piezas b{color:var(--dark);font-weight:500}
.resumen-piezas i{font-style:normal;font-size:12px}
.resumen-piezas em{font-style:normal;color:var(--dark);font-weight:500;white-space:nowrap}
.formulario{background:#fff}
.letra-chica{font-size:12.5px;line-height:1.7}
@media(min-width:901px){.formulario{padding-right:14px}}

/* ── Gracias ── */
.codigo-pedido{font-size:30px;font-weight:600;color:var(--pri);letter-spacing:3px;margin:10px 0 20px}
.texto-gracias{max-width:50ch;margin:0 auto 28px}
.resumen-final{background:var(--crema);padding:26px;margin-top:36px;text-align:left}
.resumen-final h3{font-size:17px;margin-bottom:14px}
.resumen-final ul{list-style:none;padding:0;margin:0}
.resumen-final li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--linea);font-size:14px}
.resumen-final b{color:var(--dark);font-weight:500}

/* ── Páginas informativas ── */
.texto-largo{font-size:15.5px;white-space:pre-line}

/* ── Pie ── */
.pie{background:var(--claro);padding-top:64px;margin-top:0}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:48px}
.pie h4{font-size:16px;margin-bottom:16px}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:9px;font-size:14px}
.pie li a:hover{color:var(--pri)}
.pie p{font-size:13.5px;margin:16px 0 0;max-width:42ch}
.redes{display:flex;gap:18px;margin-top:18px;font-size:12.5px}
.redes a{color:var(--pri)}
.copia{border-top:1px solid var(--linea);padding:20px 0;font-size:12.5px}
.copia .cont{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr}}

/* ── Flotante ── */
.flotante{position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:.25s}
.flotante:hover{transform:scale(1.08)}
.flotante svg{width:29px;height:29px;fill:currentColor}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ═══ CHECKOUT INTERNACIONAL (v0.4.0) ═══ */

.bloque{border:0;border-top:1px solid var(--linea);padding:24px 0 6px;margin:0}
.bloque:first-of-type{border-top:0;padding-top:0}
.bloque legend{font-family:var(--fs);font-size:26px;color:var(--pri);padding:0 10px 0 0;line-height:1}
.bloque-nota{font-size:13px;margin:0 0 16px}
.bloque-nota.tejido{background:var(--crema);padding:14px 16px;margin-top:16px;border-left:2px solid var(--pri)}
.req{color:var(--mal);font-weight:600}
.opt{color:var(--gris);font-size:10.5px;letter-spacing:.5px;text-transform:none}

/* Opciones de transportadora */
.opciones-envio{display:flex;flex-direction:column;gap:10px}
.opcion-envio{position:relative;display:grid;grid-template-columns:1fr auto;gap:14px;
  align-items:center;padding:16px 18px;border:1px solid var(--linea);cursor:pointer;
  transition:border-color .25s,background .25s;background:#fff}
.opcion-envio:hover{border-color:var(--pri)}
.opcion-envio input{position:absolute;opacity:0;width:0;height:0}
.opcion-envio:has(input:checked){border-color:var(--pri);background:var(--crema);
  box-shadow:0 0 0 1px var(--pri) inset}
.oe-cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0}
.oe-nombre{color:var(--dark);font-weight:600;font-size:14.5px}
.oe-desc{font-size:12.5px}
.oe-seguro{font-size:11.5px;color:var(--gris);display:block;margin-top:2px}
.oe-tiempo{font-size:12.5px;color:var(--pri)}
.oe-tiempo i{font-style:normal;color:var(--gris);font-size:11.5px}
.oe-precio{font-size:16px;font-weight:600;color:var(--dark);white-space:nowrap}
.cargando-envio{font-size:13px;padding:18px;text-align:center;background:var(--crema)}

select{width:100%;padding:13px 16px;border:1px solid var(--linea);font:inherit;font-size:14.5px;
  color:var(--dark);background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23808080' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size:12px;border-radius:4px;appearance:none;-webkit-appearance:none;cursor:pointer}
select:focus{outline:none;border-color:var(--pri)}
input:disabled,select:disabled{background-color:var(--claro);color:var(--gris);cursor:not-allowed}

/* Etiquetas de la mejor opción de envío */
.etq{font-style:normal;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;margin-left:8px;vertical-align:middle;font-weight:600}
.etq.barata{background:#EFF4EA;color:var(--ok)}
.etq.rapida{background:#FAF3ED;color:var(--pri)}
.peso-nota{display:block;margin-top:4px;font-size:12px;color:var(--pri)}
.bloque-nota.aduanas{background:#FAF3ED;border-left:2px solid var(--pri);padding:12px 14px;
  margin-top:14px;font-size:12.5px}

.aviso.info{background:#FAF3ED;border-color:var(--pri);color:#7A4E2E}

/* ═══ IDENTIDAD Y LEGAL (v0.9.0) ═══ */
.pie-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
@media(max-width:900px){.pie-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pie-grid{grid-template-columns:1fr}}
.identidad{border-top:1px solid var(--linea);padding:24px 18px;font-size:12.5px;line-height:1.8}
.identidad p{margin:0 0 10px;max-width:none}
.identidad b{color:var(--dark)}
.identidad a{color:var(--pri)}
.identidad .medios{color:var(--gris);font-size:12px}

.acepto{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.6;
  background:var(--crema);padding:16px 18px;cursor:pointer}
.acepto input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--pri);cursor:pointer}
.acepto a{color:var(--pri);text-decoration:underline}
.acepto:has(input:invalid){border-left:3px solid var(--mal)}

.texto-largo{font-size:15px;white-space:pre-line;line-height:1.85}

/* ═══ Bloque de regalo en el checkout ═══ */
.regalo-toggle{display:flex;gap:16px;align-items:center;cursor:pointer;
  padding:18px;background:var(--crema);transition:background .3s}
.regalo-toggle:hover{background:#F5EBE0}
.regalo-toggle input{position:absolute;opacity:0}
.rt-caja{flex:none;width:52px;height:52px;display:grid;place-items:center;
  border:1.5px solid var(--pri);color:var(--pri);transition:all .3s}
.regalo-toggle input:checked ~ .rt-caja{background:var(--pri);color:#fff;transform:rotate(-4deg)}
.rt-texto b{display:block;color:var(--dark);font-weight:500;font-size:15px}
.rt-texto i{font-style:normal;font-size:12.5px;line-height:1.5;display:block;margin-top:3px}
.regalo-campos{padding:20px 4px 4px;animation:aparecer .4s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
.regalo-campos textarea{min-height:110px;font-family:inherit}


/* ── Ajustes finos de la auditoría responsiva v1.2 ── */
@media(max-width:760px){
  /* Miniaturas de la ficha: fila deslizable en vez de rejilla apretada */
  .miniaturas{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .mini{flex:0 0 68px}

  /* Bolsa: la línea de producto se reorganiza */
  .linea{grid-template-columns:78px 1fr;gap:12px 14px}
  .linea-acciones{grid-column:2;justify-self:start;margin-top:8px}
  .linea-total{grid-column:2;justify-self:start}

  /* Resumen pegado abajo, siempre visible al desplazarse */
  .bolsa-grid > aside{position:static}
  .resumen{position:sticky;bottom:0;z-index:20;
    box-shadow:0 -12px 30px -18px rgba(42,38,34,.5)}

  /* Formulario del checkout */
  .campo-fila{grid-template-columns:1fr}
  .formulario{padding-right:0}
}

@media(max-width:480px){
  .cantidad-form{width:100%;justify-content:space-between}
  .ficha-tabla{grid-template-columns:1fr}
  .ficha-tabla span{margin-top:10px}
  .precio-grande b{font-size:26px}
  .codigo-pedido{font-size:20px;word-break:break-all}
  .resumen-final li{flex-wrap:wrap}
}


/* ═══ FASE 72 · UX CHECKOUT ═══ */
.opcion-envio:has(input:focus-visible){outline:3px solid rgba(192,85,63,.28);outline-offset:2px;border-color:var(--pri)}
.reintentar-envio{border:0;background:none;color:var(--pri);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 2px;margin-left:4px}
.pago-seguro-info{display:flex;flex-direction:column;gap:4px;margin:2px 0 22px;padding:16px 18px;background:var(--crema);border-left:3px solid var(--pri);font-size:13px;line-height:1.55}
.pago-seguro-info b{color:var(--dark);font-size:14px}
@media(max-width:900px){
  /* En cuanto checkout pasa a una columna, el resumen completo sticky podía cubrir los campos. */
  .resumen{position:static!important;bottom:auto;box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════
   CAPA EDITORIAL / TEJIDO
   Integrada en F79 para que la tienda pública dependa de un
   único CSS atómico: una hoja ausente ya no puede desmontar
   etiquetas, retratos, firmas o secciones completas.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   TEJIDO — capa de identidad artesanal
   ═══════════════════════════════════════════════════════════
   Se carga DESPUÉS de tienda.css y reescribe lo que hacía que
   el sitio pareciera un blog: composiciones centradas, tarjetas
   flotando en blanco, tipografía sin jerarquía y ausencia de
   materia.

   Tres ideas la sostienen:

   1. TRAMA. El fondo no es blanco: es fibra. Un patrón SVG de
      hilos cruzados, tan sutil que no se ve pero se siente.
   2. ASIMETRÍA. Nada centrado por defecto. El ojo entra por la
      izquierda y baja en diagonal, como en un catálogo impreso.
   3. HILO. Una línea fina recorre el sitio uniendo secciones:
      es el mismo hilo del telar.
   ═══════════════════════════════════════════════════════════ */

:root{
  --fibra: #F3EDE4;
  --tinta: #2A2622;
  --hilo: rgba(202,134,93,.30);
  --papel: #FBF8F4;
  --sombra-larga: 0 30px 60px -40px rgba(42,38,34,.55);
}

/* ── 1. LA TRAMA ─────────────────────────────────────────── */

body{
  background-color: var(--papel);
  background-image: url("../img/textura-fique.svg");
  background-size: 140px 140px;
  color: #6E6459;
}

/* Bloques que necesitan respirar sobre la fibra */
.seccion.claro{
  background-color: var(--fibra);
  background-image: url("../img/textura-fique.svg");
  background-size: 180px 180px;
  position: relative;
}

/* Borde superior tejido: hilos verticales cortos, como un orillo */
.seccion.claro::before,
.seccion.claro::after{
  content:"";
  position:absolute; left:0; right:0; height:9px;
  background-image: repeating-linear-gradient(90deg,
    var(--hilo) 0 1px, transparent 1px 7px);
  opacity:.7;
}
.seccion.claro::before{ top:0 }
.seccion.claro::after{ bottom:0 }

/* ── 2. TIPOGRAFÍA CON JERARQUÍA ─────────────────────────── */

h1,h2,h3,h4{ color: var(--tinta); letter-spacing:-.015em }

/* Los títulos de sección dejan de estar centrados y ganan
   un numeral, como los capítulos de un catálogo impreso */
.titulo{
  text-align:left;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 22px;
  align-items:start;
  margin-bottom:46px;
  position:relative;
}
.titulo::before{
  content: attr(data-num);
  grid-row:1 / span 3;
  font-family:var(--f);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--pri);
  padding-top:14px;
  border-top:2px solid var(--pri);
  min-width:44px;
}
.titulo .manuscrita{
  font-size:30px;
  margin-bottom:-4px;
}
.titulo h2{
  font-size:clamp(27px,4.4vw,46px);
  font-weight:500;
  line-height:1.08;
  max-width:18ch;
}
.titulo p{ margin:14px 0 0; max-width:52ch; font-size:14.5px }
.titulo.centrado{ display:block; text-align:center }
.titulo.centrado::before{ content:none }
.titulo.centrado h2{ max-width:none }
.titulo.centrado p{ margin-left:auto; margin-right:auto }

/* ── 3. EL HILO QUE UNE ──────────────────────────────────── */

.hilo{
  height:52px;
  display:block;
  position:relative;
  overflow:hidden;
}
.hilo::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, var(--hilo) 0 22px, transparent 22px 30px);
  background-position:0 50%;
  background-repeat:no-repeat;
  background-size:100% 1px;
}
.hilo::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  background:var(--pri);
  transform:rotate(45deg);
}

/* ── 4. PORTADA: composición editorial ───────────────────── */

.portada{
  background-color:var(--fibra);
  background-image:url("../img/textura-fique.svg");
  background-size:200px 200px;
  border-bottom:1px solid var(--linea);
  overflow:hidden;
}
.portada-grid{
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.portada-txt h1{
  font-size:clamp(38px,6.4vw,76px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.03em;
}
.portada-txt h1 em{
  font-style:normal;
  color:var(--pri);
  position:relative;
  display:inline-block;
}
/* Subrayado tejido bajo la palabra clave */
.portada-txt h1 em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em; height:7px;
  background-image:repeating-linear-gradient(90deg,
    var(--pri) 0 5px, transparent 5px 9px);
  opacity:.4;
}
.portada-txt > .manuscrita{
  font-size:32px;
  margin-bottom:8px;
  padding-left:58px;
  position:relative;
}
.portada-txt > .manuscrita::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:42px; height:2px;
  background:var(--pri);
}

/* La foto sale del marco: rompe la simetría de tarjeta */
.portada-art{ position:relative; padding:18px 18px 0 0; min-width:0 }
.portada-art > a,.portada-art > .im{ display:block; width:100%; aspect-ratio:4/5; overflow:hidden }
.portada-art > a img,.portada-art > .im img{ width:100%; height:100%; object-fit:cover }
.portada-art::before{
  content:"";
  position:absolute; inset:0 0 34px 34px;
  border:1px solid var(--hilo);
  z-index:0;
}
.portada-art img{
  position:relative; z-index:1;
  box-shadow:var(--sombra-larga);
  filter:saturate(1.03);
}
.sello-redondo{
  z-index:2;
  border:3px solid var(--papel);
  animation:girar 26s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }
@media(prefers-reduced-motion:reduce){ .sello-redondo{ animation:none } }

/* ── 5. PIEZAS: tarjeta de catálogo, no de blog ──────────── */

.rejilla{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:38px 30px;
}

.pieza{ position:relative }

.pieza-foto{
  background:var(--fibra);
  border:1px solid transparent;
  transition:border-color .4s;
}
.pieza-foto::after{
  /* Velo de trama que se retira al pasar el cursor */
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,
    rgba(42,38,34,.05) 0 2px, transparent 2px 6px);
  opacity:1;
  transition:opacity .5s;
  pointer-events:none;
}
.pieza:hover .pieza-foto{ border-color:var(--hilo) }
.pieza:hover .pieza-foto::after{ opacity:0 }

/* Texto alineado a la izquierda, precio a la derecha:
   así se lee un catálogo, no un post */
.pieza-info{
  text-align:left;
  padding-top:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 14px;
  align-items:baseline;
}
.pieza-tipo{
  grid-column:1 / -1;
  font-size:10px;
  letter-spacing:.2em;
}
.pieza-info h3{
  font-size:18px;
  font-weight:500;
  margin:4px 0 0;
  grid-column:1;
}
.pieza-precio{ grid-column:2; grid-row:2; text-align:right }
.pieza-precio b{ font-size:15.5px; font-weight:600 }
.pieza-precio del{ display:block; font-size:12px; margin:0 }
.pieza-frase{
  grid-column:1 / -1;
  font-size:13px;
  margin:8px 0 0;
  max-width:32ch;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s,transform .4s;
}
.pieza:hover .pieza-frase{ opacity:1; transform:none }
@media(hover:none){ .pieza-frase{ opacity:1; transform:none } }
.quedan{ grid-column:1 / -1; margin-top:6px }

/* El sello deja de ser píldora y se vuelve etiqueta cosida */
.sello{
  border-radius:0;
  top:0; left:0;
  padding:7px 14px;
  letter-spacing:.14em;
  font-size:9.5px;
  box-shadow:2px 2px 0 rgba(42,38,34,.14);
}

/* ── 6. COLECCIONES: fichas de telar ─────────────────────── */

.colecciones{ gap:1px; background:var(--linea) }
.coleccion{
  background:var(--papel);
  padding:38px 26px;
  text-align:left;
  position:relative;
  transition:background .4s,color .4s;
}
.coleccion::after{
  content:"→";
  position:absolute; right:26px; bottom:30px;
  color:var(--pri);
  transition:transform .4s;
}
.coleccion:hover{ background:var(--tinta); border-color:var(--tinta) }
.coleccion:hover::after{ transform:translateX(6px); color:var(--papel) }
.coleccion h3{ font-size:21px; font-weight:500 }
.coleccion p{ margin-top:8px; max-width:22ch }

/* ── 7. BOTONES CON OFICIO ───────────────────────────────── */

.btn{
  border-radius:0;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:11.5px;
  padding:16px 34px;
  position:relative;
  overflow:hidden;
}
.btn1,.btn2{ box-shadow:4px 4px 0 rgba(42,38,34,.16) }
.btn1:hover,.btn2:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(42,38,34,.16) }
.btn-linea{ border-color:var(--tinta); color:var(--tinta) }
.btn-linea:hover{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }

/* ── 8. CABECERA ─────────────────────────────────────────── */

.cabecera{ background:rgba(251,248,244,.94) }
.cinta{
  background:var(--tinta);
  color:rgba(251,248,244,.86);
  border:0;
  letter-spacing:.08em;
  font-size:11px;
}
.cinta i{ background:var(--pri) }
.marca-logo{ display:flex; align-items:center; gap:12px }
.marca-logo svg,.marca-logo img{ width:40px; height:40px; flex:none }
.bolsa-btn{ border-radius:0; letter-spacing:.1em; text-transform:uppercase; font-size:11px }
.cuenta{ border-radius:0 }

/* ── 9. FRANJA ───────────────────────────────────────────── */

.franja{
  background-color:var(--tinta);
  background-image:url("../img/textura-fique.svg");
  background-size:220px 220px;
  position:relative;
}
.franja .manuscrita{ color:var(--papel) }
.franja::before,.franja::after{
  content:"";
  position:absolute; left:0; right:0; height:9px;
  background-image:repeating-linear-gradient(90deg,
    rgba(202,134,93,.5) 0 1px, transparent 1px 7px);
}
.franja::before{ top:0 } .franja::after{ bottom:0 }

/* ── 10. SERVICIOS: fila de oficio ───────────────────────── */

.servicios{
  text-align:left;
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
}
.servicios > div{
  background:var(--papel);
  padding:28px 24px;
  counter-increment:serv;
  position:relative;
}
.servicios > div::before{
  content:"0" counter(serv);
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--pri);
  margin-bottom:10px;
}
.servicios{ counter-reset:serv }
.servicios b{ font-size:15.5px; font-weight:500 }

/* ── 11. FICHA DE PRODUCTO ───────────────────────────────── */

.ficha-grid{ grid-template-columns:1.15fr .85fr }
.foto-grande{
  background:var(--fibra);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-larga);
}
.ficha-datos h1{ font-weight:500; letter-spacing:-.025em }
.cita{
  padding-left:22px;
  border-left:2px solid var(--pri);
}
.precio-grande b{ font-weight:600 }
.ficha-tabla span{ letter-spacing:.16em; font-size:10.5px }
.promesas span::before{ content:"—"; margin-right:10px; color:var(--pri) }
.mini{ border-radius:0 }
.mini.on{ box-shadow:0 0 0 1px var(--pri) }

/* ── 12. PIE ─────────────────────────────────────────────── */

.pie{
  background-color:var(--tinta);
  background-image:url("../img/textura-fique.svg");
  background-size:200px 200px;
  color:rgba(251,248,244,.66);
}
.pie h4,.pie .marca b{ color:var(--papel) }
.pie a{ color:rgba(251,248,244,.78) }
.pie a:hover{ color:var(--pri) }
.pie .marca i{ color:var(--pri) }
.identidad{ border-color:rgba(251,248,244,.14) }
.identidad b{ color:var(--papel) }
.copia{ border-color:rgba(251,248,244,.14) }

/* ── 13. DETALLES ────────────────────────────────────────── */

::selection{ background:var(--pri); color:var(--papel) }

.chip{ border-radius:0; letter-spacing:.08em; font-size:11.5px; text-transform:uppercase }
.buscador input,.buscador button{ border-radius:0 }
.paginacion a{ border-radius:0 }
.resumen{
  background-color:var(--fibra);
  background-image:url("../img/textura-fique.svg");
  background-size:160px 160px;
  border:1px solid var(--linea);
}
.aviso{ border-left-width:2px }

@media(max-width:860px){
  .titulo{ grid-template-columns:1fr }
  .titulo::before{ grid-row:auto; border-top:0; padding-top:0; margin-bottom:8px }
  .ficha-grid{ grid-template-columns:1fr }
}

/* ═══ VITRINA (v1.1) ═══ */

/* Tejido al entrar: la pieza se revela de abajo, con un hilo
   que la "cose" al aparecer */
.telar{
  opacity:0;
  transform:translateY(26px);
  clip-path:inset(0 0 100% 0);
  transition:opacity .7s ease, transform .7s ease, clip-path .8s ease;
}
.telar.tejida{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 -8% 0);
}

/* Vitrina viva */
.pieza-foto{ perspective:800px; overflow:hidden }
.pieza-foto img{
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
  transform-origin:center;
}

/* Lupa de artesana */
.foto-grande.con-lupa{ cursor:zoom-in }
.lupa{
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  border:2px solid var(--papel);
  box-shadow:0 10px 34px rgba(42,38,34,.35), 0 0 0 1px var(--hilo);
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  transform:translate(-50%,-50%);
  z-index:5;
}

/* Hebra de progreso: el hilo que te acompaña al bajar */
.hebra-progreso{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg, var(--pri) 0 14px, transparent 14px 19px);
  transform:scaleX(0);
  transform-origin:left;
  z-index:200;
  pointer-events:none;
}

/* Cinta que camina */
.cinta-viva{ overflow:hidden }
.cinta-viva .cont{ display:block; padding:0 }
.cinta-tira{
  display:inline-flex; gap:34px; white-space:nowrap;
  padding:9px 0;
  animation:caminar 32s linear infinite;
}
.cinta-tira > *{ display:inline-flex; align-items:center; gap:34px }
@keyframes caminar{ to{ transform:translateX(-33.33%) } }
.cinta-viva:hover .cinta-tira{ animation-play-state:paused }
@media(prefers-reduced-motion:reduce){
  .telar{ opacity:1; transform:none; clip-path:none }
  .cinta-tira{ animation:none }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO — auditoría v1.2
   Revisado plantilla por plantilla en 360, 390 y 768 px.
   ═══════════════════════════════════════════════════════════ */

/* Nada puede generar desplazamiento lateral. Las animaciones de
   la vitrina (inclinación 3D, cinta caminante, hilo del logo)
   sacan píxeles fuera del marco si no se acota aquí. */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100vw}
img,svg,video,iframe{max-width:100%;height:auto}

/* Palabras largas (correos, URLs, códigos) no rompen la caja */
p,li,td,dd,h1,h2,h3,h4,.texto-largo{overflow-wrap:break-word}
.identidad a,.mono{overflow-wrap:anywhere}

@media(max-width:900px){
  /* La cinta superior no cabe con tres mensajes: camina más rápido
     y se acorta el espaciado */
  .cinta-tira{gap:22px;animation-duration:24s}
  .cinta-tira > *{gap:22px}

  /* Portada: el texto manda, la foto va debajo */
  .portada-txt > .manuscrita{padding-left:44px;font-size:27px}
  .portada-txt > .manuscrita::before{width:30px}
  .portada-art{padding:14px 14px 0 0}
  .portada-art::before{inset:0 0 24px 24px}
}

@media(max-width:860px){
  /* Los numerales pasan a ir sobre el título, no al lado */
  .titulo{gap:0}
  .titulo .manuscrita{font-size:25px}
  .titulo h2{max-width:24ch}
  .hilo{height:38px}
}

@media(max-width:640px){
  .seccion{padding:46px 0}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 14px}
  .pieza-info{padding-top:12px}
  .pieza-info h3{font-size:15.5px}
  .pieza-precio b{font-size:14px}
  .pieza-tipo{font-size:9px}
  /* La frase al pasar el cursor no existe en táctil: se muestra
     siempre, pero recortada para no descuadrar la rejilla */
  .pieza-frase{font-size:12px;max-width:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .coleccion{padding:26px 20px}
  .coleccion::after{right:20px;bottom:22px}
  .servicios > div{padding:22px 18px}

  .btn{padding:15px 26px;font-size:11px}
  .btn.grande{width:100%;justify-content:center}

  /* Pie: las cuatro columnas se vuelven dos, y la identidad una */
  .pie-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .pie-grid > div:first-child{grid-column:1 / -1}
  .identidad{padding:20px 16px;font-size:12px}
  .copia .cont{flex-direction:column;gap:6px;text-align:center}

  /* Checkout: el bloque de regalo se apila */
  .regalo-toggle{padding:15px;gap:13px}
  .rt-caja{width:44px;height:44px}
  .acepto{padding:14px;font-size:12.5px}
  .acepto input{width:22px;height:22px}

  /* Opción de envío: precio bajo el nombre, no al lado */
  .opcion-envio{grid-template-columns:auto 1fr;gap:10px 12px}
  .oe-precio{grid-column:2;text-align:left;margin-top:6px;font-size:15px}
}

@media(max-width:420px){
  .rejilla{grid-template-columns:1fr 1fr;gap:22px 12px}
  .titulo h2{font-size:24px;max-width:none}
  .portada-txt h1{font-size:33px}
  .pie-grid{grid-template-columns:1fr}
  .cont{padding:0 15px}
}

/* En táctil no hay cursor: se apagan los gestos que dependen de él
   y se recupera todo lo que quedaba oculto tras un hover */
@media(hover:none){
  .pieza-foto img{transform:none !important}
  .pieza-frase{opacity:1;transform:none}
  .lupa{display:none}
  .cinta-tira{animation-duration:26s}
  /* Área táctil mínima cómoda */
  .btn,.chip,.mini,.bolsa-btn,.paginacion a{min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  /* iOS amplía la página si la letra baja de 16px en un campo */
  input,select,textarea{font-size:16px}
}

/* Pantallas con muesca (iPhone) */
@supports(padding:max(0px)){
  .cabecera{padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right))}
  .pie{padding-bottom:env(safe-area-inset-bottom)}
}

/* ═══════════════════════════════════════════════════════════
   CAPA DE TALLER / EXPERIENCIA
   Integrada en F79 por la misma razón: todo el contrato visual
   público viaja en una sola respuesta versionada.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   TALLER — la capa de arte
   ═══════════════════════════════════════════════════════════════
   Integrada en la hoja pública atómica. Aquí vive todo lo que no es
   estructura sino MATERIA: el grano del papel, el aire con fibras,
   los bordes deshilachados, la puntada de los botones y el telón.

   Principio rector: nada es plano y nada es perfecto. Cada
   superficie tiene grano, cada borde tiene irregularidad, cada
   gesto deja una marca de hilo. Premium pero rústico significa
   exactamente eso: acabado impecable sobre material imperfecto.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. EL AIRE ──────────────────────────────────────────────── */

.campo-fibras{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.85;
}
/* Todo el contenido flota por encima del aire */
.cabecera,.portada,.seccion,.franja,.pie,.hilo,.telon{ position:relative; z-index:1 }

/* Grano de papel sobre toda la página: rompe la planitud digital */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

/* ── 2. BORDES DESHILACHADOS ─────────────────────────────────── */

/* Los cortes entre secciones no son rectos: son un orillo cortado
   a mano. Se dibuja con un patrón repetido de dientes irregulares. */
.borde-orillo{
  position:relative;
}
.borde-orillo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:11px;
  background:
    radial-gradient(circle at 6px -3px, transparent 6px, var(--papel) 6.5px) 0 0/13px 11px repeat-x;
  pointer-events:none;
}

/* Hilos sueltos que cuelgan del orillo */
.franja::before,.franja::after,
.seccion.claro::before,.seccion.claro::after{
  background-image:repeating-linear-gradient(90deg,
    var(--hilo) 0 1px, transparent 1px 6px,
    var(--hilo) 6px 7px, transparent 7px 15px);
  height:11px;
}

/* ── 3. LA PUNTADA (botones) ─────────────────────────────────── */

/* Un botón no se ilumina: se cose. Al pasar por encima, una
   puntada de hilo recorre su base de izquierda a derecha. */
.btn{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transition:transform .28s cubic-bezier(.3,.8,.3,1),
             box-shadow .28s, background .3s, color .3s, border-color .3s;
}
.btn::after{
  content:"";
  position:absolute;
  left:9px; right:9px; bottom:5px;
  height:2px;
  background-image:repeating-linear-gradient(90deg,
    currentColor 0 6px, transparent 6px 11px);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s cubic-bezier(.35,.9,.3,1), opacity .2s;
}
.btn:hover::after,.btn:focus-visible::after{ opacity:.55; transform:scaleX(1) }
.btn:active{ transform:translate(2px,3px) }

/* Los botones sólidos llevan la puntada en el color del papel */
.btn1::after,.btn2::after{ color:var(--papel) }

/* Foco visible que no rompe la estética: un hilo alrededor */
:focus-visible{
  outline:2px dashed var(--pri);
  outline-offset:3px;
}

/* ── 4. ENLACES BORDADOS ─────────────────────────────────────── */

.telon-nav a,.pie a,.identidad a{ position:relative }
.pie a::after,.identidad a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background-image:repeating-linear-gradient(90deg,
    currentColor 0 4px, transparent 4px 8px);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .34s ease;
}
.pie a:hover::after,.identidad a:hover::after{ transform:scaleX(1); transform-origin:left }

/* ── 5. EL TELÓN ─────────────────────────────────────────────── */

.telon{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  grid-template-rows:1fr;
}
.telon[hidden]{ display:none }

/* Las urdimbres: doce tiras que caen en cascada */
.telon-urdimbre{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  z-index:0;
}
.telon-urdimbre i{
  display:block;
  background-color:var(--tinta);
  background-image:url("../img/textura-fique.svg");
  background-size:190px;
  transform:translateY(-101%);
  transition:transform .62s cubic-bezier(.5,0,.2,1);
  transition-delay:calc(var(--u) * 26ms);
  border-right:1px solid rgba(192,85,63,.10);
}
.telon.tejiendo .telon-urdimbre i{ transform:none }
/* Al recogerse, las urdimbres suben en orden inverso */
.telon:not(.tejiendo) .telon-urdimbre i{
  transition-delay:calc((11 - var(--u)) * 18ms);
}

.telon-cuerpo{
  position:relative;
  z-index:1;
  height:100%;
  overflow-y:auto;
  padding:clamp(24px,5vh,54px) clamp(20px,6vw,90px) 50px;
  display:flex;
  flex-direction:column;
  color:var(--papel);
}

/* Cerrar: un nudo que se aprieta */
.telon-cerrar{
  align-self:flex-end;
  background:none; border:0; cursor:pointer;
  color:var(--papel);
  display:grid; justify-items:center; gap:2px;
  padding:6px;
  opacity:0; transform:translateY(-14px);
  transition:opacity .4s .30s, transform .4s .30s, color .3s;
}
.telon-cerrar em{ font-style:normal; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.62 }
.telon-cerrar svg{ transition:transform .5s cubic-bezier(.3,.9,.3,1) }
.telon-cerrar:hover{ color:var(--pri) }
.telon-cerrar:hover svg{ transform:rotate(90deg) scale(.9) }
.telon.tejiendo .telon-cerrar{ opacity:1; transform:none }

/* Los enlaces se bordan uno tras otro */
.telon-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  margin:clamp(18px,4vh,40px) 0;
}
.telon-nav a{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(16px,3vw,32px);
  align-items:baseline;
  padding:clamp(11px,1.7vh,18px) 0;
  color:var(--papel);
  text-decoration:none;
  border-bottom:1px solid rgba(251,248,244,.10);

  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(340ms + var(--i) * 58ms);
}
.telon.tejiendo .telon-nav a{ opacity:1; transform:none }

.telon-nav b{
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--pri);
  padding-top:.5em;
}
.telon-nav span{
  font-size:clamp(26px,5.4vw,54px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.025em;
  display:block;
  transition:transform .38s cubic-bezier(.3,.9,.3,1), color .3s;
}
.telon-nav i{
  display:block;
  font-style:normal;
  font-size:12.5px;
  letter-spacing:.03em;
  color:rgba(251,248,244,.5);
  margin-top:7px;
  font-weight:400;
}
/* Al pasar por encima: el título avanza y una puntada lo subraya */
.telon-nav a u{
  grid-column:2;
  display:block;
  height:2px;
  margin-top:10px;
  background-image:repeating-linear-gradient(90deg,
    var(--pri) 0 7px, transparent 7px 13px);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.3,.9,.3,1);
}
.telon-nav a:hover span,.telon-nav a:focus-visible span{
  transform:translateX(clamp(8px,1.6vw,20px));
  color:var(--pri);
}
.telon-nav a:hover u,.telon-nav a:focus-visible u{ transform:scaleX(1) }

.telon-pie{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s, transform .5s;
  transition-delay:calc(340ms + var(--i) * 58ms);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  padding-top:clamp(16px,3vh,28px);
  border-top:1px solid rgba(251,248,244,.12);
}
.telon.tejiendo .telon-pie{ opacity:1; transform:none }
.telon-promesa{ margin:0; font-size:12.5px; color:rgba(251,248,244,.62); flex:1 1 200px }
.telon-redes{ display:flex; gap:18px }
.telon-redes a{ color:rgba(251,248,244,.75); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none }
.telon-redes a:hover{ color:var(--pri) }

.telon-abierto{ overflow:hidden }

/* La hamburguesa: tres hilos que se anudan */
.hamburguesa{
  background:none; border:0; cursor:pointer;
  width:38px; padding:9px 6px;
  display:none; gap:5px; flex-direction:column;
  color:var(--tinta);
}
.ham-hilo{
  display:block; height:1.6px; background:currentColor; border-radius:2px;
  transform-origin:center;
  transition:transform .38s cubic-bezier(.3,.9,.3,1), opacity .25s, width .38s;
}
.ham-hilo:nth-child(2){ width:74% }
.hamburguesa:hover .ham-hilo:nth-child(2){ width:100% }
.telon-abierto .hamburguesa{ color:var(--papel); position:relative; z-index:130 }
.telon-abierto .ham-hilo:nth-child(1){ transform:translateY(6.6px) rotate(45deg) }
.telon-abierto .ham-hilo:nth-child(2){ opacity:0; width:0 }
.telon-abierto .ham-hilo:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg) }

/* ── 6. PESO VISUAL DINÁMICO ─────────────────────────────────── */

/* Las tarjetas de pieza ganan peso al acercarse: sombra que crece
   hacia abajo, como un objeto que se levanta de la mesa */
.pieza{
  transition:transform .45s cubic-bezier(.25,.8,.3,1);
}
.pieza-foto{
  box-shadow:0 1px 2px rgba(42,38,34,.05);
  transition:box-shadow .45s cubic-bezier(.25,.8,.3,1), border-color .4s;
}
.pieza:hover{ transform:translateY(-5px) }
.pieza:hover .pieza-foto{
  box-shadow:0 26px 42px -26px rgba(42,38,34,.45), 0 3px 9px rgba(42,38,34,.07);
}

/* Colecciones: al invertirse a oscuro, entra una trama */
.coleccion{ overflow:hidden }
.coleccion::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,
    rgba(192,85,63,.16) 0 1px, transparent 1px 9px);
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
}
.coleccion:hover::before{ opacity:1 }
.coleccion h3,.coleccion p{ position:relative; z-index:1 }
.coleccion:hover h3{ color:var(--papel) }
.coleccion:hover p{ color:rgba(251,248,244,.62) }

/* La franja oscura respira: la textura se desplaza muy despacio */
.franja{ background-position:0 0; animation:respirar 90s linear infinite }
@keyframes respirar{ to{ background-position:220px 220px } }

/* ── 7. FOTOS CON MATERIA ────────────────────────────────────── */

/* Un borde interior claro simula el reborde del papel fotográfico */
.foto-grande,.portada-art img{
  box-shadow:
    inset 0 0 0 1px rgba(251,248,244,.35),
    0 30px 60px -40px rgba(42,38,34,.55);
}

/* ── 8. MOVIMIENTO REDUCIDO ──────────────────────────────────── */

@media(prefers-reduced-motion:reduce){
  .campo-fibras{ display:none }
  .franja{ animation:none }
  .telon-urdimbre i,.telon-nav a,.telon-pie,.telon-cerrar{
    transition:none !important; transform:none !important; opacity:1 !important;
  }
  .btn::after{ transition:none }
}

/* ── 9. RESPONSIVO ───────────────────────────────────────────── */

@media(max-width:860px){
  .hamburguesa{ display:flex }
  .menu{ display:none }
  .telon-urdimbre{ grid-template-columns:repeat(6,1fr) }
  .telon-nav a{ grid-template-columns:auto 1fr; gap:0 16px }
}

@media(max-width:560px){
  .telon-cuerpo{ padding:18px 18px 40px }
  .telon-nav span{ font-size:26px }
  .telon-nav i{ font-size:11.5px; margin-top:5px }
  .telon-nav a{ padding:12px 0 }
  .telon-pie{ flex-direction:column; align-items:flex-start; gap:14px }
  .telon-pie .btn{ width:100%; justify-content:center }
  /* Menos fibras y menos grano: el móvil agradece cada milisegundo */
  .campo-fibras{ opacity:.6 }
  body::after{ opacity:.4 }
}

@media(hover:none){
  .pieza:hover{ transform:none }
  .btn::after{ opacity:.4; transform:scaleX(1) }
}

/* ═══ BOTÓN FLOTANTE ═══
   Aparece tras bajar un poco: si asalta al entrar, molesta. */
.flotante-wa{
  position:fixed;
  right:clamp(14px,3vw,26px);
  bottom:clamp(14px,3vw,26px);
  z-index:90;
  display:inline-flex; align-items:center; gap:0;
  background:var(--tinta); color:var(--papel);
  text-decoration:none;
  padding:14px; border-radius:50px;
  box-shadow:0 14px 34px -14px rgba(42,38,34,.6);
  transition:gap .38s cubic-bezier(.3,.9,.3,1), padding .38s, background .3s, transform .3s;
  overflow:hidden;
}
.flotante-wa span{
  max-width:0; opacity:0; white-space:nowrap;
  font-size:12.5px; letter-spacing:.04em;
  transition:max-width .42s cubic-bezier(.3,.9,.3,1), opacity .3s;
}
.flotante-wa:hover,.flotante-wa:focus-visible{
  gap:11px; padding-right:20px; background:var(--pri); transform:translateY(-2px);
}
.flotante-wa:hover span,.flotante-wa:focus-visible span{ max-width:210px; opacity:1 }
/* Un pulso de hilo alrededor, una vez cada tanto */
.flotante-wa::before{
  content:""; position:absolute; inset:0; border-radius:50px;
  border:2px solid var(--pri);
  animation:pulso-hilo 4.5s ease-out infinite;
}
@keyframes pulso-hilo{
  0%,70%{ transform:scale(1); opacity:0 }
  75%{ opacity:.5 }
  100%{ transform:scale(1.42); opacity:0 }
}
@media(prefers-reduced-motion:reduce){ .flotante-wa::before{ animation:none } }
@media(max-width:560px){
  .flotante-wa{ padding:13px }
  .flotante-wa span{ display:none }
}

/* La casilla de marketing es más suave que la obligatoria */
.acepto.suave{ background:transparent; padding:14px 0 0; font-size:12.5px; color:var(--gris) }
.acepto.suave input{ width:18px; height:18px }

/* ═══════════════════════════════════════════════════════════
   ESTRATEGIA — autora, prueba social, regalo, cookies
   ═══════════════════════════════════════════════════════════ */

/* ── Bloque de la autora ─────────────────────────────────── */
.autora-seccion{ padding:clamp(50px,8vh,90px) 0 }
.autora-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center }
.autora-grid.sin-retrato{ grid-template-columns:minmax(0,760px); justify-content:center }
.autora-retrato{ position:relative }
.autora-retrato img{ width:100%; display:block; box-shadow:var(--sombra-larga);
  filter:saturate(1.02) }
.autora-retrato::before{
  content:""; position:absolute; inset:-16px -16px 26px 26px;
  border:1px solid var(--hilo); z-index:-1;
}
.autora-firma{
  position:absolute; bottom:-16px; left:-10px;
  font-family:var(--fs); font-size:34px; color:var(--pri);
  background:var(--papel); padding:2px 16px;
}
.autora-texto h2{ font-size:clamp(28px,4.4vw,46px); font-weight:500; margin:6px 0 4px }
.autora-titulo{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--pri);
  margin:0 0 18px }
.autora-frase{
  margin:0 0 20px; padding-left:20px; border-left:2px solid var(--pri);
  font-size:clamp(17px,2.1vw,21px); line-height:1.45; color:var(--tinta); font-weight:500;
}
.autora-texto p{ max-width:56ch; margin-bottom:13px }
.autora-alcance{ font-size:12.5px; letter-spacing:.05em; color:var(--pri);
  padding:12px 0 18px; border-top:1px solid var(--linea); margin-top:18px }

/* ── Prueba social ───────────────────────────────────────── */
.testimonios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px }
.testimonio{
  margin:0; padding:24px 22px;
  background:var(--papel);
  border:1px solid var(--linea);
  position:relative;
  transition:transform .4s cubic-bezier(.25,.8,.3,1), box-shadow .4s;
}
.testimonio:hover{ transform:translateY(-4px);
  box-shadow:0 22px 38px -28px rgba(42,38,34,.45) }
.testimonio::before{
  content:"”"; position:absolute; top:6px; right:16px;
  font-size:52px; color:var(--hilo); line-height:1; font-family:Georgia,serif;
}
.estrellas{ display:flex; gap:2px; margin-bottom:12px }
.estrellas i{ font-style:normal; color:var(--linea); font-size:14px }
.estrellas i.on{ color:var(--pri) }
.testimonio blockquote{ margin:0 0 16px; font-size:14.5px; line-height:1.7; color:var(--tinta) }
.testimonio figcaption b{ display:block; font-weight:500; color:var(--tinta); font-size:13.5px }
.testimonio figcaption span{ display:block; font-size:12px; margin-top:2px }
.testimonio figcaption em{
  display:inline-block; margin-top:8px; font-style:normal;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ok); background:#EFF4EA; padding:3px 9px;
}
.valoracion{ font-size:14px; margin-top:10px }
.valoracion b{ color:var(--pri); font-size:19px }

/* ── Página de regalo ────────────────────────────────────── */
.regalo-hero{
  padding:clamp(56px,11vh,110px) 0 clamp(46px,8vh,80px);
  background-color:var(--fibra);
  background-image:url("../img/textura-fique.svg");
  background-size:200px;
  border-bottom:1px solid var(--linea);
  text-align:center;
}
.regalo-hero h1{
  font-size:clamp(33px,6.6vw,72px); font-weight:500; line-height:1;
  letter-spacing:-.03em; margin:4px 0 18px; max-width:16ch;
  margin-left:auto; margin-right:auto;
}
.regalo-gancho{ max-width:50ch; margin:0 auto 34px; font-size:clamp(15px,1.9vw,18px) }
.regalo-pasos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--linea); border:1px solid var(--linea);
  max-width:820px; margin:0 auto 34px; text-align:left;
}
.regalo-pasos > div{ background:var(--papel); padding:22px 20px }
.regalo-pasos b{ display:block; font-size:11px; letter-spacing:.2em; color:var(--pri); margin-bottom:9px }
.regalo-pasos span{ display:block; font-size:15.5px; color:var(--tinta); font-weight:500 }
.regalo-pasos i{ display:block; font-style:normal; font-size:12.5px; margin-top:5px }

.razones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px }
.razones > div{ padding-left:18px; border-left:2px solid var(--pri) }
.razones b{ display:block; color:var(--tinta); font-size:16px; font-weight:500; margin-bottom:7px }
.razones p{ font-size:13.5px; margin:0 }

.destacado-menu{ color:var(--pri) !important; font-weight:500 }

/* ── Aviso de cookies ────────────────────────────────────── */
.aviso-cookies{
  position:fixed; left:clamp(12px,3vw,24px); bottom:clamp(12px,3vw,24px);
  z-index:95; max-width:400px;
  background:var(--tinta); color:rgba(251,248,244,.82);
  padding:20px 22px;
  box-shadow:0 22px 48px -22px rgba(42,38,34,.7);
  border-left:3px solid var(--pri);
  opacity:0; transform:translateY(18px);
  transition:opacity .45s, transform .45s cubic-bezier(.3,.9,.3,1);
}
.aviso-cookies.visible{ opacity:1; transform:none }
.aviso-cookies p{ margin:0 0 15px; font-size:12.8px; line-height:1.65; max-width:none }
.aviso-cookies b{ color:var(--papel) }
.aviso-cookies a{ color:var(--pri); text-decoration:underline }
.aviso-cookies button{
  background:none; border:1px solid rgba(251,248,244,.3); color:var(--papel);
  font:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 22px; cursor:pointer; transition:.25s;
}
.aviso-cookies button:hover{ background:var(--pri); border-color:var(--pri) }

@media(max-width:860px){
  .autora-grid{ grid-template-columns:1fr; gap:38px }
  .autora-retrato{ max-width:340px }
  .autora-retrato::before{ inset:-10px -10px 18px 18px }
}
@media(max-width:560px){
  .aviso-cookies{ left:10px; right:10px; max-width:none; padding:17px 18px }
  .aviso-cookies button{ width:100% }
  .regalo-pasos{ grid-template-columns:1fr }
  .autora-firma{ font-size:28px; bottom:-12px }
}

/* ═══════════════════════════════════════════════════════════
   JERARQUÍA Y VOZ (v1.8)
   El fallo que corrige: todo pesaba igual. Logo, nombre, precio
   y botón competían. Ahora el orden es: foto → precio → botón.
   ═══════════════════════════════════════════════════════════ */

/* El precio se defiende, no se esconde */
.precio-grande b{ font-size:clamp(28px,4vw,38px); font-weight:600; letter-spacing:-.02em }
.defensa-precio{
  margin:10px 0 0; padding:12px 0 0;
  border-top:1px solid var(--linea);
  font-size:13px; line-height:1.6;
}
.defensa-precio b{ display:block; color:var(--tinta); font-weight:500; font-size:13.5px }
.defensa-precio span{ display:block; color:var(--pri); margin-top:4px; font-weight:500 }

/* El botón de compra es lo más pesado de la pantalla */
.ficha-datos .btn1,
.ficha-datos form .btn{
  width:100%; justify-content:center;
  padding:20px 34px; font-size:12.5px; letter-spacing:.14em;
  box-shadow:6px 6px 0 rgba(42,38,34,.2);
}
.ficha-datos .btn1:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 rgba(42,38,34,.2) }

/* Imagen de marca con encuadre respetado */
.im{
  margin:0; position:relative; overflow:hidden;
  width:100%; aspect-ratio:var(--prop, 4/5);
}
.im img{
  width:100%; height:100%; display:block;
  object-fit:cover;              /* recorta lo que sobra… */
  /* …pero object-position (en línea) conserva el punto focal */
}
.im figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; font-size:12px;
  color:var(--papel);
  background:linear-gradient(transparent, rgba(42,38,34,.72));
}
.autora-retrato > .firma-real{
  position:absolute; bottom:-18px; left:-10px; z-index:4;
  width:min(58%,220px); max-width:220px; height:auto; max-height:88px;
  object-fit:contain; object-position:left bottom;
  mix-blend-mode:multiply;
  filter:contrast(1.15); box-shadow:none;
}

/* Ejemplos de dedicatoria */
.ded-ayuda{ margin-top:18px; padding-top:18px; border-top:1px dashed var(--hilo) }
.ded-ayuda-t{ font-size:13.5px; color:var(--tinta); font-weight:500; margin:0 0 12px }
.ded-ejemplos{ display:grid; gap:9px; margin-bottom:6px }
.ded-ej{
  text-align:left; background:var(--crema); border:1px solid transparent;
  padding:14px 16px; cursor:pointer; font:inherit;
  display:grid; gap:7px;
  transition:border-color .3s, background .3s, transform .3s;
}
.ded-ej span{ font-size:13.5px; line-height:1.6; color:var(--tinta);
  font-family:var(--fs); font-size:19px }
.ded-ej em{
  font-style:normal; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pri);
}
.ded-ej:hover{ border-color:var(--pri); transform:translateX(3px) }
.ded-ej.elegida{ border-color:var(--pri); background:#FAF3ED }
.ded-ej.elegida em::after{ content:" ✓" }

/* Franja de riesgo cero */
.riesgo-cero{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  padding:16px 0; margin-top:18px;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  font-size:12.5px;
}
.riesgo-cero span{ display:inline-flex; align-items:center; gap:8px }
.riesgo-cero span::before{ content:"—"; color:var(--pri) }

@media(max-width:560px){
  .autora-retrato > .firma-real{ width:64%; max-width:190px; bottom:-12px }
  .ded-ej span{ font-size:17px }
}

.regalo-imagen{ max-width:760px; margin:0 auto 32px; box-shadow:var(--sombra-larga) }

/* ── Atención personalizada ── */
.compromiso{
  display:grid; gap:11px;
  max-width:52ch; margin:24px auto 0;
  padding:20px 22px;
  background:var(--fibra);
  border-left:2px solid var(--pri);
  text-align:left; font-size:13.5px; line-height:1.6;
}
.compromiso b{ color:var(--tinta); font-weight:500 }
.compromiso span{ display:flex; gap:10px }
.compromiso span::before{ content:"—"; color:var(--pri); flex:none }
.primer-nombre{ text-transform:none }

/* Aviso de que la pieza queda apartada */
.apartada{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--pri);
  padding:10px 0;
}
.apartada::before{
  content:""; width:7px; height:7px; background:var(--pri);
  border-radius:50%; animation:latido 2.4s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@media(prefers-reduced-motion:reduce){ .apartada::before{ animation:none } }

/* ── Redes con icono ── */
.redes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.redes a{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:inherit;
  transition:color .3s, transform .3s;
}
.redes a:hover{ color:var(--pri); transform:translateY(-2px) }
.redes svg{ flex:none }

/* En el pie: círculo de hilo alrededor del icono */
.redes-iconos a{
  width:40px; height:40px; justify-content:center; gap:0;
  border:1px solid rgba(251,248,244,.22); border-radius:50%;
  transition:border-color .3s, background .3s, color .3s, transform .3s;
}
.redes-iconos a span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.redes-iconos a:hover{ background:var(--pri); border-color:var(--pri); color:var(--papel) }

/* En el telón: icono + nombre */
.redes-texto a{ font-size:12px; letter-spacing:.12em; text-transform:uppercase }
.redes-texto a::after{ content:none }

/* ── Seguimiento público ── */
.form-seguir{ max-width:420px; margin:0 auto }
.form-seguir .btn{ width:100%; justify-content:center; margin-top:8px }
.serie-pieza{ font-size:14px; margin-top:8px }
.serie-pieza b{ color:var(--pri); font-family:ui-monospace,monospace; letter-spacing:.08em }

.ruta-pedido{ list-style:none; margin:34px 0; padding:0; max-width:460px;
  margin-left:auto; margin-right:auto }
.ruta-pedido li{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding-bottom:26px; position:relative;
}
.ruta-pedido li:not(:last-child)::before{
  content:""; position:absolute; left:8px; top:20px; bottom:0; width:1px;
  background-image:repeating-linear-gradient(180deg,
    var(--hilo) 0 4px, transparent 4px 9px);
}
.rp-punto{
  width:17px; height:17px; border-radius:50%;
  border:2px solid var(--linea); background:var(--papel);
  margin-top:2px; z-index:1; transition:.3s;
}
.ruta-pedido li.hecho .rp-punto{ background:var(--pri); border-color:var(--pri) }
.ruta-pedido li.ahora .rp-punto{
  border-color:var(--pri); box-shadow:0 0 0 5px rgba(192,85,63,.16);
  animation:latido 2.4s ease-in-out infinite;
}
.ruta-pedido b{ display:block; color:var(--tinta); font-weight:500; font-size:15.5px }
.ruta-pedido li:not(.hecho):not(.ahora) b{ color:var(--gris); font-weight:400 }
.ruta-pedido span{ display:block; font-size:13px; margin-top:3px }

.nota-dora{
  background:var(--fibra); border-left:2px solid var(--pri);
  padding:22px 24px; margin:26px 0;
}
.nota-dora .manuscrita{ font-size:25px; display:block; margin-bottom:8px }
.nota-dora p{ margin:0; font-size:14.5px; line-height:1.7 }
.dedicatoria-eco{ font-family:var(--fs); font-size:21px !important; color:var(--tinta) }
.guia-envio{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  border:1px solid var(--linea); padding:16px 20px; margin-top:22px; font-size:13.5px;
}
.serie-grande{
  font-family:ui-monospace,monospace; font-size:26px; color:var(--pri);
  letter-spacing:.1em; margin:0 0 6px;
}

/* ═══ BOLSA — sin cajas anidadas ═══
   El número deja de ser un círculo dentro de un rectángulo: ahora
   cuelga del icono como una etiqueta cosida, que es lo que hace un
   bolso de verdad. */
.bolsa-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 4px 9px 2px;
  background:none !important;
  border:0; border-radius:0;
  color:var(--tinta);
  text-transform:none; letter-spacing:.02em; font-size:13.5px;
  transition:color .3s;
}
.bolsa-btn:hover{ background:none !important; color:var(--pri) }
.bolsa-btn svg{ transition:transform .35s cubic-bezier(.3,.9,.3,1) }
.bolsa-btn:hover svg{ transform:translateY(-2px) rotate(-4deg) }
.bolsa-txt{ font-weight:500 }

/* El número: etiqueta terracota colgando de la esquina */
.bolsa-n{
  position:absolute; top:0; right:-9px;
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--pri); color:var(--papel);
  font-size:11px; font-weight:600; font-style:normal;
  border-radius:0;
  box-shadow:2px 2px 0 rgba(42,38,34,.18);
}
/* Hilito que la ata al icono */
.bolsa-n::before{
  content:""; position:absolute; left:-6px; top:50%;
  width:6px; height:1.5px; background:var(--pri);
}
.bolsa-btn.llena svg{ color:var(--pri) }
@media(max-width:560px){
  .bolsa-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .bolsa-btn{ padding:9px 8px }
  .bolsa-n{ right:-2px }
}

/* ═══════════════════════════════════════════════════════════
   TARJETA DE PIEZA — rediseño
   El fallo que corrige: el precio pesaba menos que el nombre, y
   la foto era un rectángulo plano con zoom cuadrado.
   ═══════════════════════════════════════════════════════════ */

.pieza-enlace{ display:block; text-decoration:none; color:inherit }

.pieza-foto{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--fibra);
  /* Esquina inferior derecha cortada en diagonal: el orillo de un
     tejido cortado a tijera, no un rectángulo de plantilla */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  transition:clip-path .45s cubic-bezier(.3,.9,.3,1);
}
.pieza:hover .pieza-foto{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}
.pieza-foto img{ width:100%; height:100%; object-fit:cover; display:block }

.pieza-sinfoto{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--gris); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background-image:repeating-linear-gradient(45deg,
    rgba(42,38,34,.05) 0 1px, transparent 1px 10px);
}

/* Sellos apilados arriba a la izquierda */
.pieza-sellos{ position:absolute; top:0; left:0; display:grid; gap:1px; z-index:2 }
.pieza-sellos .sello{ position:static; box-shadow:2px 2px 0 rgba(42,38,34,.16) }
.sello.oferta{ background:var(--pri); color:var(--papel); font-weight:600 }
.sello.nueva{ background:var(--tinta); color:var(--papel) }
.sello.agotada{ background:var(--fibra); color:var(--gris) }

/* Lupa: aparece en la esquina cortada */
.pieza-lupa{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--papel); color:var(--tinta);
  opacity:0; transform:translateY(8px) rotate(-8deg);
  transition:opacity .35s, transform .35s cubic-bezier(.3,.9,.3,1);
  box-shadow:2px 2px 0 rgba(42,38,34,.18);
}
.pieza:hover .pieza-lupa{ opacity:1; transform:none }
@media(hover:none){ .pieza-lupa{ display:none } }

/* El precio manda */
.pieza-info{ display:block; text-align:left; padding-top:15px }
.pieza-tipo{ display:block; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pri); margin-bottom:5px }
.pieza-info h3{ font-size:16.5px; font-weight:500; margin:0 0 7px; line-height:1.25 }
.pieza-precio{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px }
.pieza-precio b{ font-size:19px; font-weight:600; color:var(--tinta); letter-spacing:-.01em }
.pieza-precio del{ font-size:13px; color:var(--gris); text-decoration-thickness:1px }
.en-usd{
  font-style:normal; font-size:12px; color:var(--gris);
  padding-left:10px; border-left:1px solid var(--linea);
}
.pieza-frase{ font-size:12.5px; margin:9px 0 0; max-width:32ch }
.quedan{ display:block; margin-top:8px; font-size:11.5px; color:var(--pri) }

@media(max-width:560px){
  .pieza-info h3{ font-size:15px }
  .pieza-precio b{ font-size:17px }
  .en-usd{ padding-left:0; border-left:0; width:100%; margin-top:2px }
  .pieza-foto{ clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%) }
}

/* ═══════════════════════════════════════════════════════════
   MENÚ CON SUBMENÚ E ICONOS PROPIOS
   ═══════════════════════════════════════════════════════════ */

.menu{ display:flex; align-items:center; gap:4px }
.menu > a,
.menu-con-hijos > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-size:13.5px; text-decoration:none; color:var(--tinta);
  position:relative;
  transition:color .3s;
}
.menu .ico{ opacity:.55; transition:opacity .3s, transform .35s cubic-bezier(.3,.9,.3,1) }
.menu > a:hover,.menu-con-hijos:hover > a{ color:var(--pri) }
.menu > a:hover .ico,.menu-con-hijos:hover > a .ico{ opacity:1; transform:translateY(-2px) }

/* Puntada que se cose bajo el enlace activo */
.menu > a::after,.menu-con-hijos > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background-image:repeating-linear-gradient(90deg,
    var(--pri) 0 5px, transparent 5px 10px);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.3,.9,.3,1);
}
.menu > a:hover::after,.menu-con-hijos:hover > a::after{ transform:scaleX(1) }
.destacado-menu{ color:var(--pri) !important }

/* ── Submenú ── */
.menu-con-hijos{ position:relative }
.ico-flecha{ width:13px; height:13px; opacity:.4;
  transition:transform .35s cubic-bezier(.3,.9,.3,1) }
.menu-con-hijos:hover .ico-flecha{ transform:rotate(180deg) }

.submenu{
  position:absolute; top:100%; left:0;
  min-width:270px; z-index:60;
  background:var(--papel);
  border:1px solid var(--linea);
  box-shadow:0 24px 46px -24px rgba(42,38,34,.5);
  padding:6px;
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .3s, transform .3s cubic-bezier(.3,.9,.3,1), visibility .3s;
}
.menu-con-hijos:hover .submenu,
.menu-con-hijos:focus-within .submenu{ opacity:1; visibility:visible; transform:none }

/* Hilo que ata el submenú a su padre */
.submenu::before{
  content:""; position:absolute; top:-1px; left:18px; width:34px; height:2px;
  background:var(--pri);
}
.submenu a{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:13px 14px; text-decoration:none; color:var(--tinta);
  transition:background .28s, transform .28s;
}
.submenu a:hover{ background:var(--fibra); transform:translateX(3px) }
.submenu a .ico{ opacity:.6; color:var(--pri) }
.submenu b{ display:block; font-weight:500; font-size:14px }
.submenu i{ display:block; font-style:normal; font-size:12px; color:var(--gris); margin-top:2px }

@media(max-width:860px){ .menu,.menu-con-hijos{ display:none } }

/* ── Lista de espera ── */
.avisame{ margin-top:14px }
.avisame-fila{ display:flex; gap:8px; margin-bottom:6px }
.avisame-fila input{ flex:1; min-width:0 }
.avisame-fila .btn{ flex:none; padding:15px 24px }
@media(max-width:420px){
  .avisame-fila{ flex-direction:column }
  .avisame-fila .btn{ width:100% ; justify-content:center }
}

/* ═══════════════════════════════════════════════════════════
   FASE 3 — TEMPERATURA Y RITMO
   Diagnóstico previo: la tienda era elegante pero fría, y el
   scroll era una columna del mismo ancho, como un blog.
   ═══════════════════════════════════════════════════════════ */

/* ── Temperatura ──────────────────────────────────────────
   Los grises eran neutros y enfriaban todo. Se corren hacia
   el ámbar: el mismo tono, pero con luz de tarde. */
:root{
  --papel: #FCF9F4;
  --fibra: #F2EADE;
  --crema: #F7EFE4;
  --linea: #E4D8C7;
  --gris:  #8B7B69;
  --tinta: #2B2621;
  --hilo:  rgba(192,85,63,.32);
}

/* Un velo cálido sobre las fotos: las une bajo la misma luz */
.pieza-foto img,.foto-grande img,.im img{
  filter:saturate(1.04) sepia(.045);
}

/* ── Sección a sangre completa ────────────────────────────
   Rompe el ancho de la columna. El ojo se detiene porque algo
   cambió de tamaño, no porque se lo pidamos. */
.sangre{
  width:100%;
  padding:0;
  position:relative;
  background:var(--tinta);
  overflow:hidden;
}
.sangre-media{ position:relative; min-height:min(78vh,620px) }
.sangre-media.sin-foto{
  background-color:var(--tinta);
  background-image:url("../img/textura-fique.svg");
  background-size:210px;
}
.sangre-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) sepia(.06) brightness(.82);
}
.sangre-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(43,38,33,.82) 0%,
    rgba(43,38,33,.45) 45%, rgba(43,38,33,.15) 100%);
}
.sangre-texto{
  position:relative; z-index:1;
  max-width:min(560px,86vw);
  padding:clamp(34px,7vw,80px);
  color:var(--papel);
  display:grid; align-content:center; min-height:min(78vh,620px);
}
.sangre-texto .manuscrita{ color:var(--pri); font-size:30px }
.sangre-texto h2{
  color:var(--papel);
  font-size:clamp(28px,5vw,54px); font-weight:500;
  line-height:1.03; letter-spacing:-.03em; margin:2px 0 16px;
}
.sangre-texto p{ color:rgba(252,249,244,.76); font-size:15.5px; line-height:1.75; max-width:44ch }

/* ── El mostrador ─────────────────────────────────────────
   En una tienda física siempre hay alguien. El botón flotante
   deja de ser un widget genérico y pasa a ser una persona. */
.flotante-wa{
  padding:8px 8px 8px 8px;
  gap:0;
  border-radius:50px;
  background:var(--tinta);
  align-items:center;
}
.mostrador-cara{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; flex:none;
  border:2px solid var(--pri);
}
.flotante-wa:hover .mostrador-cara{ border-color:var(--papel) }
.mostrador-txt{ display:grid; gap:1px; text-align:left }
.mostrador-txt b{ font-size:12.5px; font-weight:500; color:var(--papel); white-space:nowrap }
.mostrador-txt i{ font-style:normal; font-size:11px; color:rgba(252,249,244,.62); white-space:nowrap }

/* ── Ritmo: las secciones alternan tamaño ── */
.seccion + .seccion.claro{ padding-block:clamp(52px,9vh,104px) }

/* ═══════════════════════════════════════════════════════════
   CINTA DE ACTIVIDAD
   Un evento a la vez: si pasan varios se lee como banner
   publicitario y el ojo lo ignora.
   ═══════════════════════════════════════════════════════════ */
.pulso{
  background:var(--tinta);
  color:rgba(252,249,244,.82);
  font-size:12.5px;
  overflow:hidden;
  position:relative; z-index:3;
}
.pulso .cont{ display:flex; align-items:center; gap:12px; min-height:38px }
.pulso-luz{
  width:7px; height:7px; border-radius:50%; background:var(--pri); flex:none;
  animation:latido 2.6s ease-in-out infinite;
}
.pulso-pista{ position:relative; flex:1; height:38px; overflow:hidden }
.pulso-item{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateX(-26px);
  pointer-events:none; white-space:nowrap;
  transition:opacity .55s ease, transform .65s cubic-bezier(.25,.9,.3,1);
}
.pulso-item.visible{ opacity:1; transform:none }
.pulso-item.saliendo{ opacity:0; transform:translateX(26px) }
.pulso-item b{ font-weight:500; color:var(--papel) }
.pulso-item i{
  font-style:normal; font-size:11px; color:rgba(252,249,244,.5);
  padding-left:12px; border-left:1px solid rgba(252,249,244,.18);
}
@media(prefers-reduced-motion:reduce){
  .pulso-item{ position:static; opacity:1; transform:none }
  .pulso-item:not(:first-child){ display:none }
  .pulso-luz{ animation:none }
}
@media(max-width:560px){
  .pulso{ font-size:11.5px }
  .pulso-item i{ display:none }
}

/* ═══════════════════════════════════════════════════════════
   FICHA — la foto deja de desbordar y gana forma
   ═══════════════════════════════════════════════════════════ */
.foto-grande{
  position:relative;
  /* Nunca más alta que la pantalla: antes se salía del marco */
  max-height:min(76vh, 780px);
  aspect-ratio:4/5;
  background:var(--crema);
  background-image:url("../img/textura-fique.svg");
  background-size:150px;
  border:0;
  overflow:hidden;
  /* El recorte va en la IMAGEN, no aquí: si lo lleva el contenedor,
     recorta también su propio marco y el tejido no se ve. */
}
.foto-grande img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* PNG con fondo transparente: se apoya en la fibra en vez de
   recortarse, y no se le aplica el velo cálido que lo ensuciaría */
.foto-grande.transparente img{
  object-fit:contain;
  padding:8%;
  filter:none;
  mix-blend-mode:multiply;
}
/* Marco de hilo desplazado: da robustez sin encerrar */
.foto-grande::after{
  content:"";
  position:absolute; inset:14px;
  border:1px solid var(--hilo);
  pointer-events:none;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px),
                    calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.fg-esquina{
  position:absolute; left:0; bottom:0;
  width:0; height:0;
  border-left:34px solid var(--pri);
  border-top:34px solid transparent;
  opacity:.9;
}

/* ═══════════════════════════════════════════════════════════
   TONOS — sin cajas
   Eran botones rectangulares con un círculo dentro. Ahora son
   madejas: el color se ve tejido, no plano.
   ═══════════════════════════════════════════════════════════ */
.tonos-elegir{ display:flex; flex-wrap:wrap; gap:22px; padding:4px 0 }
.tono-opcion{
  display:grid; justify-items:center; gap:9px;
  cursor:pointer; border:0; padding:0; background:none;
  position:relative;
}
.tono-opcion input{ position:absolute; opacity:0; width:0; height:0 }
.hilo-tono{
  display:block; width:54px; height:54px; border-radius:50%;
  position:relative;
  transition:transform .38s cubic-bezier(.3,.9,.3,1);
}
.hilo-tono svg{ width:100%; height:100%; border-radius:50%; display:block }
/* Anillo de hilo alrededor del elegido, no una caja */
.hilo-tono::after{
  content:"";
  position:absolute; inset:-7px;
  border-radius:50%;
  background-image:repeating-conic-gradient(var(--pri) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:0; transform:scale(.85) rotate(-30deg);
  transition:opacity .35s, transform .45s cubic-bezier(.3,.9,.3,1);
}
.tono-opcion:hover .hilo-tono{ transform:translateY(-3px) }
.tono-opcion input:checked ~ .hilo-tono{ transform:translateY(-3px) }
.tono-opcion input:checked ~ .hilo-tono::after{ opacity:1; transform:none }
.tono-opcion input:focus-visible ~ .hilo-tono::after{ opacity:.5; transform:none }
.nombre-tono{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris); transition:color .3s;
}
.tono-opcion input:checked ~ .nombre-tono{ color:var(--pri); font-weight:600 }
.tono-opcion.agotado{ cursor:not-allowed }
.tono-opcion.agotado .hilo-tono{ filter:grayscale(.8); opacity:.42 }
.tono-opcion.agotado .nombre-tono::after{ content:" · agotado"; font-size:9.5px }

/* ═══ Selector de moneda ═══ */
.moneda-sel{
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; letter-spacing:.1em;
}
.moneda-sel a{
  padding:5px 9px; text-decoration:none; color:rgba(252,249,244,.55);
  transition:color .3s;
}
.moneda-sel a.on{ color:var(--pri); font-weight:600 }
.moneda-sel a:hover{ color:var(--papel) }

@media(max-width:640px){
  .foto-grande{ max-height:none }
  .foto-grande img{ clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px) }
  .foto-grande::after{ inset:9px }
  .fg-esquina{ border-left-width:22px; border-top-width:22px }
  .tonos-elegir{ gap:16px }
  .hilo-tono{ width:46px; height:46px }
}

/* ═══════════════════════════════════════════════════════════
   FICHA EN PESTAÑAS
   Antes todo se apilaba y había que bajar mucho, dejando la
   mitad izquierda vacía. Ahora cabe en una sola vista.
   ═══════════════════════════════════════════════════════════ */
.fichas-tabs{ margin-top:30px }
.ft-botones{
  display:flex; gap:0; flex-wrap:wrap;
  border-bottom:1px solid var(--linea);
}
.ft-boton{
  background:none; border:0; cursor:pointer; font:inherit;
  padding:13px 17px 12px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris); position:relative;
  transition:color .3s;
}
.ft-boton:hover{ color:var(--tinta) }
.ft-boton::after{
  content:""; position:absolute; left:17px; right:17px; bottom:-1px; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--pri) 0 5px, transparent 5px 10px);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.3,.9,.3,1);
}
.ft-boton.on{ color:var(--pri); font-weight:600 }
.ft-boton.on::after{ transform:scaleX(1) }

.ft-panel{ display:none; padding-top:20px; animation:ftEntra .4s ease }
.ft-panel.abierto{ display:block }
@keyframes ftEntra{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1 } }
.ft-panel p{ font-size:14.5px; line-height:1.75; margin-bottom:12px }
.ft-vacio{ color:var(--gris); font-style:italic }
.ft-panel .ficha-tabla{ margin:0 }
.ft-panel .promesas{ margin:0 0 16px }
.ft-panel .riesgo-cero{ margin-top:0; border-bottom:0 }
.ft-regalo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center }
.ft-regalo h4{ font-size:15.5px; font-weight:500; color:var(--tinta); margin:0 0 9px }
@media(max-width:640px){
  .ft-regalo{ grid-template-columns:1fr }
  .ft-boton{ padding:12px 12px 11px; font-size:11px }
  .ft-boton::after{ left:12px; right:12px }
}

/* ═══════════════════════════════════════════════════════════
   TARJETA DEDICADA — previsualización en vivo
   ═══════════════════════════════════════════════════════════ */
.tp-envoltura{ display:grid; gap:9px; justify-items:center }
.tp-tarjeta{
  width:100%; max-width:380px;
  aspect-ratio:148/105;
  background-color:var(--papel);
  background-image:url("../img/textura-fique.svg");
  background-size:120px;
  border:1px solid var(--linea);
  padding:6.5% 7.5%;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 20px 40px -26px rgba(43,38,33,.55);
  transform:rotate(-1.1deg);
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.tp-tarjeta:hover{ transform:rotate(0deg) translateY(-3px) }
/* Marco de puntadas por dentro */
.tp-tarjeta::before{
  content:""; position:absolute; inset:9px;
  border:1px dashed rgba(192,85,63,.42); pointer-events:none;
}
.tp-orillo{
  position:absolute; top:0; left:0; right:0; height:5px;
  background-image:repeating-linear-gradient(90deg,
    var(--pri) 0 3px, transparent 3px 8px);
  opacity:.55;
}
.tp-cab{ display:flex; align-items:center; gap:9px; position:relative; z-index:1 }
.tp-cab img{ width:26px; height:26px; flex:none }
.tp-cab b{ display:block; font-size:9.5px; letter-spacing:.2em; color:var(--tinta) }
.tp-cab i{ display:block; font-family:var(--fs); font-style:normal;
  font-size:14px; color:var(--pri); margin-top:-3px }

.tp-para{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); margin:9px 0 0; text-align:center; position:relative; z-index:1;
}
.tp-texto{
  flex:1; display:flex; align-items:center; justify-content:center;
  text-align:center; margin:6px 0;
  font-family:var(--fs); font-size:25px; line-height:1.35;
  color:var(--tinta); position:relative; z-index:1;
  transition:font-size .3s;
  overflow:hidden;
}
.tp-texto.vacia{ color:var(--gris); opacity:.55 }
.tp-firma{ text-align:right; position:relative; z-index:1 }
.tp-firma-linea{ display:block; width:52%; margin-left:auto; height:1px;
  background:var(--linea); margin-bottom:5px }
.tp-firma-real{ display:block; width:44%; max-width:170px; max-height:56px; height:auto;
  object-fit:contain; object-position:right bottom; margin-left:auto; margin-bottom:2px;
  mix-blend-mode:multiply }
.tp-firma span{ font-size:8.5px; letter-spacing:.1em; color:var(--gris) }
.tp-nota{ font-size:11.5px; color:var(--gris); margin:0 }

@media(max-width:560px){
  .tp-tarjeta{ max-width:none; transform:none }
  .tp-texto{ font-size:21px }
}

/* ═══════════════════════════════════════════════════════════
   ETIQUETA DE FIQUE
   Sustituye al sello que giraba. Girar hacía ilegible lo único
   que tenía que leerse; una etiqueta cuelga y se mece, no gira.
   ═══════════════════════════════════════════════════════════ */
.portada-art > .etiqueta-fique{
  position:absolute; top:18px; right:-10px; z-index:3;
  width:96px; display:block;
  transform-origin:54px 8px;     /* el nudo, arriba del cordel */
  animation:mecer 7s ease-in-out infinite;
  filter:drop-shadow(0 10px 14px rgba(43,38,33,.28));
  pointer-events:none;
}
.etiqueta-fique svg{ width:100%; height:auto; display:block }
.et-txt{
  fill:#FCF9F4; text-anchor:middle;
  font-family:var(--f); font-weight:600;
  letter-spacing:1.6px;
}
.et-grande{ font-size:19px }
.et-chico{ font-size:9px; letter-spacing:2.2px; opacity:.78; font-weight:400 }

/* Se mece como colgaría de verdad: poco recorrido y lento */
@keyframes mecer{
  0%,100%{ transform:rotate(-3.5deg) }
  50%    { transform:rotate(3deg) }
}
@media(prefers-reduced-motion:reduce){ .portada-art > .etiqueta-fique{ animation:none; transform:rotate(-3deg) } }
@media(max-width:640px){ .portada-art > .etiqueta-fique{ width:72px; top:10px; right:-4px } }

/* ═══════════════════════════════════════════════════════════
   MARCOS DE FIQUE PARA LAS FOTOS
   Una foto rectangular sobre un fondo texturado se ve pegada
   encima. Con el borde deshilachado parece cosida al papel.
   ═══════════════════════════════════════════════════════════ */
.defs-fique{ position:absolute; width:0; height:0; overflow:hidden }

/* — Marco tejido: hilos alrededor, desplazados hacia fuera — */
.marco-tejido{ position:relative; display:block }
.marco-tejido::before{
  content:"";
  position:absolute; inset:-22px;
  border:28px solid transparent;
  border-image:url("../img/marco-fique.svg") 34 round;
  pointer-events:none;
  transition:inset .55s cubic-bezier(.3,.9,.3,1);
  z-index:2;
}
.marco-tejido:hover::before{ inset:-28px }

/* — Borde deshilachado: el corte a tijera — */
.orillo img,
.orillo > figure > img{ filter:url(#fq-orillo-suave) saturate(1.04) sepia(.045) }
@supports not (filter: url(#x)){ .orillo img{ filter:none } }

/* — Flecos colgando del borde inferior — */
.con-flecos{ position:relative }
.con-flecos::after{
  content:"";
  position:absolute; left:6px; right:6px; bottom:-15px; height:18px;
  color:var(--pri);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18'%3E%3Cpath d='M3 0v11q0 4 2 6M7 0v14q0 3-2 4M11 0v9q0 5 3 7' fill='none' stroke='%23C0553F' stroke-width='1.1' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  pointer-events:none;
}

/* ── Dónde se aplica ────────────────────────────────────── */

/* Portada: la foto principal, cosida al papel */
.portada-art img{ filter:url(#fq-orillo-suave) saturate(1.04) sepia(.05) }
.portada-art::before{
  border:13px solid transparent;
  border-image:url("../img/marco-fique.svg") 34 round;
  border-width:28px;
  inset:-20px -20px 8px 8px;
}

/* Ficha: marco tejido alrededor de la foto grande */
.foto-grande{ overflow:visible }
.foto-grande img{
  clip-path:polygon(34px 0, 100% 0, 100% calc(100% - 34px),
                    calc(100% - 34px) 100%, 0 100%, 0 34px);
  filter:url(#fq-orillo-suave) saturate(1.04) sepia(.045);
}
.foto-grande::before{
  content:"";
  position:absolute; inset:-26px;
  border:32px solid transparent;
  border-image:url("../img/marco-fique.svg") 34 round;
  pointer-events:none;
  transition:inset .55s cubic-bezier(.3,.9,.3,1);
  z-index:2;
}
.foto-grande:hover::before{ inset:-32px }
.foto-grande.transparente img{ filter:none; clip-path:none }

/* Tarjetas del catálogo: orillo sutil, que la foto manda */
.pieza-foto img{ filter:url(#fq-orillo-suave) saturate(1.04) sepia(.045) }

/* Retrato de la autora: marco tejido y flecos */
.autora-retrato .im img{ filter:url(#fq-orillo-suave) saturate(1.03) sepia(.05) }
.autora-retrato::before{
  border:26px solid transparent;
  border-image:url("../img/marco-fique.svg") 34 round;
  inset:-20px;
}

/* En móvil los filtros SVG cuestan: se relajan */
@media(max-width:560px){
  .pieza-foto img{ filter:saturate(1.04) sepia(.045) }
  .marco-tejido::before,.foto-grande::before{ inset:-14px; border-width:18px }
}

/* ═══════════════════════════════════════════════════════════
   ORILLO — el separador entre secciones
   Antes era un hilo punteado con un rombo. Ahora es el remate
   real de un tejido cortado: tres pasadas de trama y la urdimbre
   colgando suelta por debajo.
   ═══════════════════════════════════════════════════════════ */
.hilo{
  display:block;
  height:44px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x;
  background-position:center top;
  background-size:auto 34px;
  position:relative;
  overflow:visible;
}
.hilo::before,.hilo::after{ content:none }

/* Variante invertida: las hebras cuelgan hacia arriba, para cerrar
   una sección por su borde inferior */
.hilo.invertido{ transform:scaleY(-1) }

/* Orillo de borde a borde, sin el margen del contenedor */
.orillo-completo{
  width:100%;
  height:38px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x;
  background-size:auto 34px;
  margin:0;
}

/* Las franjas oscuras rematan con un orillo claro */
.franja::before,.franja::after,
.seccion.claro::before,.seccion.claro::after{
  height:20px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x;
  background-size:auto 20px;
  opacity:.55;
}
.franja::after,.seccion.claro::after{ transform:scaleY(-1) }

/* ═══════════════════════════════════════════════════════════
   ENVÉS — la cara de atrás del tejido
   Donde están los nudos y los cabos sueltos. Nunca se enseña, y
   por eso funciona en el pie: es la trastienda de la pieza.
   ═══════════════════════════════════════════════════════════ */
.pie{
  background-color:var(--tinta);
  background-image:url("../img/enves-fique.svg"),
                   url("../img/textura-fique.svg");
  background-size:120px 120px, 200px 200px;
  background-blend-mode:normal, overlay;
  position:relative;
}
/* El pie empieza con su propio orillo: la pieza se acaba aquí */
.pie::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:22px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x;
  background-size:auto 22px;
  opacity:.6;
}

/* La franja oscura también enseña el envés */
.franja{
  background-image:url("../img/enves-fique.svg"),
                   url("../img/textura-fique.svg");
  background-size:130px 130px, 220px 220px;
}

/* El telón del menú: envés, porque es el reverso del sitio */
.telon-urdimbre i{
  background-image:url("../img/enves-fique.svg");
  background-size:110px;
}

/* ═══ Detalles que rematan la misma idea ═══ */

/* La cinta superior se apoya en el envés */
.pulso{
  background-image:url("../img/enves-fique.svg");
  background-size:100px;
}

/* Las colecciones, al invertirse a oscuro, enseñan los nudos */
.coleccion:hover{
  background-image:url("../img/enves-fique.svg");
  background-size:110px;
}

/* La sección a sangre lleva orillo arriba y abajo */
.sangre::before,.sangre::after{
  content:"";
  position:absolute; left:0; right:0; height:20px; z-index:2;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x;
  background-size:auto 20px;
  opacity:.5;
  pointer-events:none;
}
.sangre::before{ top:0 }
.sangre::after{ bottom:0; transform:scaleY(-1) }

@media(max-width:640px){
  .hilo{ height:32px; background-size:auto 26px }
  .pie::before{ height:16px; background-size:auto 16px }
}

/* ═══════════════════════════════════════════════════════════
   FICHA EQUILIBRADA
   Las pestañas estaban en la columna de compra: al abrirlas, la
   mitad izquierda quedaba vacía y había que bajar. Ahora van
   debajo de la foto, que es donde hay espacio, y la columna de
   compra se queda arriba a la vista.
   ═══════════════════════════════════════════════════════════ */
.ficha-grid{ align-items:start }
.ficha-fotos{ display:grid; gap:22px }

/* La columna de compra acompaña al bajar: el botón nunca se pierde */
.ficha-datos{ position:sticky; top:96px }

.ficha-fotos .fichas-tabs{ margin-top:8px }
.ficha-fotos .ft-panel{ padding-top:22px }

/* Con la foto al lado, los paneles pueden ir a dos columnas */
.ficha-fotos .ft-panel .promesas,
.ficha-fotos .ft-panel .ficha-tabla{ margin:0 }
.ficha-fotos #ft-env{ display:none }
.ficha-fotos #ft-env.abierto{ display:grid; gap:18px }

@media(max-width:900px){
  .ficha-datos{ position:static }
}

/* ── Clases que quedaron sin estilo (auditoría v2.9) ── */
.bolsa-lineas{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea) }
.ft-regalo-txt p{ margin-bottom:10px }
.ft-regalo-txt .pista{ font-size:12.5px; color:var(--gris) }
.et-cordel{ transform-origin:54px 6px }

/* ═══════════════════════════════════════════════════════════
   ESPÍRITU COLOMBIANO
   No por clichés importados, sino por lo que de verdad hay en un
   telar de Santander: la greca geométrica que recorre las
   mochilas, y el sello de taller estampado a mano.
   ═══════════════════════════════════════════════════════════ */

/* — La greca: el motivo del telar colombiano —
   Una línea que avanza en escalones y vuelve sobre sí misma.
   Va como cenefa antes de los títulos importantes. */
.greca{
  display:block;
  height:26px;
  background-image:url("../img/greca.svg");
  background-repeat:repeat-x;
  background-size:auto 26px;
  opacity:.5;
}
.greca.corta{ width:128px }
.greca.centrada{ margin-inline:auto }

/* Cenefa bajo los numerales de sección */
.titulo::after{
  content:"";
  grid-column:2;
  display:block;
  height:14px; width:96px;
  margin-top:14px;
  background-image:url("../img/greca.svg");
  background-repeat:repeat-x;
  background-size:auto 14px;
  opacity:.42;
}
.titulo.centrado::after{ margin-inline:auto }

/* — El sello de origen —
   Tinta irregular, como el que se estampa a mano en un taller.
   Las montañas del interior son las de Santander. */
.sello-origen{
  display:inline-block;
  width:112px; height:112px;
  background-image:url("../img/sello-origen.svg");
  background-size:contain; background-repeat:no-repeat;
  opacity:.9;
  transform:rotate(-7deg);
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.sello-origen:hover{ transform:rotate(0deg) scale(1.04) }

/* En el pie, junto a la identidad del comercio */
.identidad{ position:relative }
.identidad .sello-origen{
  position:absolute; right:0; top:50%;
  transform:translateY(-50%) rotate(-7deg);
  opacity:.55;
}
.identidad:hover .sello-origen{ transform:translateY(-50%) rotate(0deg); opacity:.8 }

/* En la ficha, dentro de la pestaña de detalles */
.origen-pieza{
  display:flex; align-items:center; gap:18px;
  padding:18px 0 0; margin-top:16px;
  border-top:1px solid var(--linea);
}
.origen-pieza p{ margin:0; font-size:13px; line-height:1.65 }
.origen-pieza b{ color:var(--tinta); display:block; font-weight:500 }

@media(max-width:640px){
  .identidad .sello-origen{ position:static; transform:rotate(-7deg);
    display:block; margin:16px 0 0 }
  .titulo::after{ width:70px }
  .sello-origen{ width:88px; height:88px }
}

/* ═══════════════════════════════════════════════════════════
   MURO DE CLIENTAS
   Fotos reales que mandaron las compradoras.

   Decisión de diseño: pequeñas, en tira lateral, sin ocupar el
   ancho completo. La prueba social convence más de refilón que
   gritada — si llenara la pantalla parecería un anuncio; así
   parece un hecho.
   ═══════════════════════════════════════════════════════════ */
.muro{ padding:clamp(38px,6vh,62px) 0 }
.muro.compacto{ padding:clamp(26px,4vh,42px) 0 }

.muro-cab{ margin-bottom:20px }
.muro-cab .manuscrita{ font-size:27px; display:block; color:var(--pri) }
.muro-cab p{ margin:2px 0 0; font-size:13px; color:var(--gris) }

/* Tira que se desliza: caben muchas sin robar altura de página */
.muro-tira{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 16px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--hilo) transparent;
}
.muro-tira::-webkit-scrollbar{ height:5px }
.muro-tira::-webkit-scrollbar-track{ background:var(--linea) }
.muro-tira::-webkit-scrollbar-thumb{ background:var(--pri) }

.muro-pieza{
  flex:0 0 168px;
  margin:0;
  scroll-snap-align:start;
  /* Cada foto cuelga con una inclinación distinta, como fotos
     pegadas en la pared del taller */
  transform:rotate(calc((var(--i) * 37deg) - (var(--i) * 36deg) - 1.6deg));
  transition:transform .45s cubic-bezier(.3,.9,.3,1);
}
.muro-pieza:nth-child(even){ transform:rotate(1.4deg) }
.muro-pieza:hover{ transform:rotate(0deg) translateY(-5px); z-index:2 }

.mp-foto{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--fibra);
  border:6px solid var(--papel);
  box-shadow:0 12px 26px -16px rgba(43,38,33,.55);
}
.mp-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.03) sepia(.05);
  transition:transform .6s cubic-bezier(.25,.8,.3,1);
}
.muro-pieza:hover .mp-foto img{ transform:scale(1.06) }

/* Sello de compra verificada: pequeño, en la esquina */
.mp-sello{
  position:absolute; right:7px; bottom:7px;
  width:21px; height:21px;
  display:grid; place-items:center;
  background:var(--pri); color:var(--papel);
  font-size:11px; font-weight:600;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(43,38,33,.35);
}

.mp-txt{ padding-top:10px }
.mp-txt q{
  display:block;
  font-size:12.5px; line-height:1.55; color:var(--tinta);
  quotes:'«' '»';
  margin-bottom:7px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.mp-txt b{ display:block; font-size:12.5px; font-weight:500; color:var(--tinta) }
.mp-txt span{ display:block; font-size:11px; color:var(--gris); margin-top:1px }

.muro-pide{
  margin:6px 0 0;
  font-size:12.5px; color:var(--gris);
  padding-left:16px; border-left:2px solid var(--hilo);
}

@media(max-width:560px){
  .muro-pieza{ flex-basis:142px }
  .muro-cab .manuscrita{ font-size:23px }
}
@media(prefers-reduced-motion:reduce){
  .muro-pieza,.mp-foto img{ transition:none; transform:none !important }
}

/* ═══ MÉTODOS DE PAGO ═══ */
.metodos-pago{ display:grid; gap:10px }
.metodo{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; background:var(--crema); cursor:pointer;
  border:1px solid transparent; transition:border-color .3s, background .3s;
}
.metodo:hover{ border-color:var(--hilo) }
.metodo input{ position:absolute; opacity:0 }
.me-marca{
  width:20px; height:20px; margin-top:2px; flex:none;
  border:1.5px solid var(--linea); border-radius:50%;
  position:relative; transition:border-color .3s;
}
.metodo input:checked ~ .me-marca{ border-color:var(--pri) }
.me-marca::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--pri); transform:scale(0); transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.metodo input:checked ~ .me-marca::after{ transform:scale(1) }
.metodo input:checked ~ .me-txt b{ color:var(--pri) }
.me-txt b{ display:block; font-size:14.5px; font-weight:500; color:var(--tinta) }
.me-txt i{ display:block; font-style:normal; font-size:12.5px; margin-top:3px; line-height:1.55 }
.me-txt em{
  display:inline-block; margin-top:6px; font-style:normal;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--fibra); color:var(--gris); padding:3px 8px;
}

/* ═══ PANTALLA DE PAGO ═══ */
.pagar-h{ font-size:clamp(25px,4vw,40px); font-weight:500; margin:4px 0 12px }
.pagar-t{ max-width:46ch; margin:0 auto 28px }
.pagar-resumen{
  max-width:420px; margin:0 auto 26px; text-align:left;
  border:1px solid var(--linea); padding:20px 22px; background:var(--papel);
}
.pagar-resumen ul{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px }
.pagar-resumen li{ display:flex; justify-content:space-between; gap:14px; font-size:13.5px }
.pagar-seguro{ font-size:12.5px; color:var(--gris); max-width:44ch; margin:18px auto 0 }
.pagar-pruebas{ color:var(--pri) }

/* La rúbrica: el nombre en letra corrida, como firmado a mano */
.tp-rubrica{
  display:block; text-align:right;
  font-family:var(--fs);
  font-size:30px; line-height:1;
  color:var(--tinta);
  margin-bottom:2px;
  transform:rotate(-2deg);
}
.tp-cargo{
  display:block; text-align:right;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris);
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT POR PASOS
   Cuatro pasos con hilo de avance, en vez de siete bloques
   apilados que obligaban a bajar por toda la lista.
   ═══════════════════════════════════════════════════════════ */
.pasos-barra{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative;
}
/* Hilo que une los pasos, cosido con puntadas */
.pasos-barra::before{
  content:""; position:absolute; left:12%; right:12%; top:19px; height:2px;
  background-image:repeating-linear-gradient(90deg,
    var(--hilo) 0 5px, transparent 5px 10px);
  z-index:0;
}
.pb-paso{
  display:grid; justify-items:center; gap:8px;
  position:relative; z-index:1;
  cursor:default;
}
.pb-paso span{
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--papel);
  border:1.5px solid var(--linea);
  border-radius:50%;
  font-size:14px; font-weight:600; color:var(--gris);
  transition:background .35s, border-color .35s, color .35s, transform .35s;
}
.pb-paso b{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); font-weight:500; text-align:center;
  transition:color .3s;
}
.pb-paso.activo span{
  background:var(--pri); border-color:var(--pri); color:var(--papel);
  transform:scale(1.1);
  box-shadow:0 0 0 5px rgba(192,85,63,.14);
}
.pb-paso.activo b{ color:var(--pri); font-weight:600 }
.pb-paso.hecho{ cursor:pointer }
.pb-paso.hecho span{
  background:var(--tinta); border-color:var(--tinta); color:var(--papel);
  font-size:0;
}
.pb-paso.hecho span::after{ content:"✓"; font-size:15px }
.pb-paso.hecho b{ color:var(--tinta) }
.pb-paso.hecho:hover span{ transform:scale(1.06) }

.paso{ animation:pasoEntra .42s cubic-bezier(.25,.9,.3,1) }
@keyframes pasoEntra{
  from{ opacity:0; transform:translateX(14px) }
  to{ opacity:1; transform:none }
}
@media(prefers-reduced-motion:reduce){ .paso{ animation:none } }

.paso-navegacion{
  display:flex; gap:12px; align-items:center;
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--linea);
}
.paso-navegacion .btn1{ flex:1 1 0; min-width:0; justify-content:center }
.paso-navegacion .btn-linea{ flex:0 0 auto }
/* `hidden` es estado funcional, no decorativo. Las reglas `.btn { display:inline-flex }`
   del tema tienen mayor prioridad práctica que la hoja de usuario-agente y podían
   volver visibles Siguiente + Confirmar a la vez. Nunca permitirlo. */
.paso-navegacion .btn[hidden]{ display:none !important }
#confirmarPedido{ white-space:normal; text-align:center; line-height:1.35 }

/* Menos aire dentro de cada paso: ya no compiten siete bloques */
.paso .bloque{ margin-bottom:18px }
.paso .bloque:last-child{ margin-bottom:0 }

@media(max-width:560px){
  .pasos-barra{ margin-bottom:24px }
  .pb-paso span{ width:32px; height:32px; font-size:13px }
  .pb-paso b{ font-size:9.5px; letter-spacing:.06em }
  .pasos-barra::before{ top:16px; left:14%; right:14% }
  .paso-navegacion{ flex-direction:column-reverse }
  .paso-navegacion .btn{ width:100%; justify-content:center }
}

/* ═══════════════════════════════════════════════════════════
   BLOQUES DEL FORMULARIO — que dejen de parecer un documento
   El diagnóstico: cajas grises rectangulares con texto dentro,
   sin jerarquía ni materia. Se les da el mismo lenguaje que al
   resto: papel, hilo y puntada.
   ═══════════════════════════════════════════════════════════ */
.paso .bloque{
  background:var(--papel);
  border:0;
  border-left:2px solid var(--hilo);
  padding:0 0 0 22px;
  position:relative;
}
.paso .bloque legend{
  font-family:var(--fs);
  font-size:29px; color:var(--pri);
  padding:0; margin-bottom:4px;
}
/* Puntada corta bajo el título, como en las secciones */
.paso .bloque legend::after{
  content:""; display:block; width:52px; height:2px; margin-top:2px;
  background-image:repeating-linear-gradient(90deg,
    var(--pri) 0 4px, transparent 4px 9px);
  opacity:.6;
}

/* Los avisos dejan de ser cajas grises: son notas al margen */
.paso .aviso,
.paso .nota-envio{
  background:none;
  border:0; border-left:2px solid var(--pri);
  padding:2px 0 2px 14px;
  font-size:13px; line-height:1.6;
  margin:12px 0;
}

/* Los campos: línea de escritura, no caja de formulario */
.paso .grupo input[type=text],
.paso .grupo input[type=tel],
.paso .grupo input[type=email],
.paso .grupo input[type=number],
.paso .grupo select,
.paso .grupo textarea{
  background:transparent;
  border:0; border-bottom:1.5px solid var(--linea);
  border-radius:0;
  padding:11px 2px;
  transition:border-color .3s, background .3s;
}
.paso .grupo input:focus,
.paso .grupo select:focus,
.paso .grupo textarea:focus{
  border-bottom-color:var(--pri);
  background:linear-gradient(transparent 88%, rgba(192,85,63,.07) 88%);
  outline:none;
}
.paso .grupo label{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); margin-bottom:2px;
}

/* La opción de regalo: tarjeta con su icono, no una casilla suelta */
.paso .regalo .acepto,
.paso label.opcion-grande{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  background:var(--crema);
  padding:18px 20px;
  cursor:pointer;
  border:1px solid transparent;
  transition:border-color .3s, transform .3s;
}
.paso label.opcion-grande:hover{ border-color:var(--hilo); transform:translateX(3px) }

/* Menos texto visible de golpe: las notas largas se pliegan */
.paso .pista{ font-size:12px; margin-top:5px }

/* ═══ EL MISMO LENGUAJE EN TODA LA TIENDA ═══
   Los avisos de caja gris aparecían también fuera del checkout.
   Se unifican: nota al margen con hilo, no rectángulo de documento. */
.aviso{
  background:none;
  border:0; border-left:2px solid var(--pri);
  padding:4px 0 4px 15px;
  font-size:13.5px; line-height:1.65;
  border-radius:0;
}
.aviso.mal{ border-left-color:#B4472F }
.aviso.ok{ border-left-color:var(--ok) }
.aviso.info{ border-left-color:var(--hilo) }

.promesas{
  display:grid; gap:9px;
  background:none; border:0; padding:0;
}
.promesas li,.promesas > div{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  font-size:13.5px; align-items:baseline;
}
.promesas li::before,.promesas > div::before{ content:"—"; color:var(--pri) }

/* El tono elegido, visible en el seguimiento: es lo que la clienta
   quiere confirmar cuando entra a mirar su pedido. */
.tono-elegido{
  display:inline-block; margin-left:8px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pri); background:var(--fibra);
  padding:3px 9px; font-weight:600;
}

/* ═══ CUPÓN EN EL CHECKOUT ═══ */
.caja-cupon{ display:grid; gap:9px }
.cc-fila{ display:flex; gap:8px }
.cc-fila input{
  flex:1; min-width:0;
  text-transform:uppercase; letter-spacing:.12em; font-weight:600;
}
.cc-fila .btn{ flex:none; padding:13px 22px }
.caja-cupon.aplicado .cc-fila input{ color:var(--pri); border-bottom-color:var(--pri) }
.cc-resultado{ margin:0; font-size:13px; padding-left:14px; border-left:2px solid }
.cc-resultado.bien{ color:var(--ok); border-color:var(--ok) }
.cc-resultado.mal{ color:#B4472F; border-color:#B4472F }

/* La línea de descuento en el resumen */
.resumen-fila.descuento b{ color:var(--ok) }

/* ═══════════════════════════════════════════════════════════
   LA RUEDA DE FIQUE
   No un widget de colores planos: un aro de taller con la trama
   tejida encima, una lezna de tejedora por aguja y un nudo por eje.
   ═══════════════════════════════════════════════════════════ */
.ruleta-fondo{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,
    rgba(43,38,33,.62) 0%, rgba(43,38,33,.88) 70%);
  backdrop-filter:blur(4px);
  padding:20px;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .38s, visibility 0s linear .38s;
}
/* Nunca debe existir una capa invisible sobre el checkout.
   El atributo hidden y pointer-events lo garantizan incluso si
   una animación o un error JS deja la ruleta en estado intermedio. */
.ruleta-fondo[hidden]{ display:none !important; }
.ruleta-fondo.visible{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transition:opacity .38s;
}

.ruleta-caja{
  position:relative;
  width:min(408px,100%);
  max-height:94vh; overflow-y:auto;
  background-color:var(--papel);
  background-image:url("../img/textura-fique.svg");
  background-size:180px;
  padding:38px 30px 26px;
  text-align:center;
  box-shadow:0 40px 80px -32px rgba(0,0,0,.8);
  transform:translateY(20px) scale(.96);
  transition:transform .46s cubic-bezier(.22,.9,.28,1);
}
.ruleta-fondo.visible .ruleta-caja{ transform:none }

/* Remate de orillo arriba, como el resto del sitio */
.ruleta-orillo{
  position:absolute; top:0; left:0; right:0; height:16px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x; background-size:auto 16px;
  opacity:.7;
}

.ruleta-x{
  position:absolute; top:14px; right:14px; z-index:4;
  width:34px; height:34px;
  background:none; border:0; cursor:pointer;
  font-size:27px; line-height:1; color:var(--gris);
  transition:color .3s, transform .3s;
}
.ruleta-x:hover{ color:var(--pri); transform:rotate(90deg) }

.ruleta-guino{ font-size:26px; color:var(--pri); display:block }
.ruleta-caja h3{ font-size:25px; font-weight:500; margin:0 0 6px; color:var(--tinta) }
.ruleta-bajada{ font-size:13px; color:var(--gris); margin:0 0 22px }

/* ── El marco ── */
.ruleta-marco{
  position:relative;
  width:min(290px,76vw); aspect-ratio:1;
  margin:0 auto 24px;
  filter:drop-shadow(0 18px 26px rgba(43,38,33,.42));
}

/* La lezna: aguja de tejedora clavada arriba */
.ruleta-lezna{
  position:absolute; top:-26px; left:50%; z-index:5;
  width:38px; height:auto;
  transform-origin:50% 12%;
  transform:translateX(-50%);
  transition:transform .07s ease-out;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.ruleta-lezna{ margin-left:-19px; left:50% }

/* El disco */
.ruleta-disco{
  position:absolute; inset:0;
  border-radius:50%;
  will-change:transform;
}
.rd-gajos{ position:absolute; inset:0; width:100%; height:100%; border-radius:50% }

/* La trama tejida va ENCIMA de los gajos, en multiply: así el
   color se ve a través del tejido en vez de taparlo */
.rd-tejido{
  position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode:multiply;
  opacity:.85;
  pointer-events:none;
}

/* Cada etiqueta se coloca por rotación desde el centro */
.rd-texto{
  position:absolute; top:0; left:50%;
  height:50%;
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(var(--a));
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:11%;
  pointer-events:none;
}
.rd-texto b{
  display:block; max-width:70px;
  color:var(--papel);
  font-size:10.5px; font-weight:600; line-height:1.16;
  letter-spacing:.02em; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* El eje: un nudo de fique */
.ruleta-eje{
  position:absolute; top:50%; left:50%; z-index:3;
  transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:var(--papel);
  border:4px solid var(--tinta);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 2px 6px rgba(43,38,33,.18);
  display:grid; place-items:center;
}
.re-nudo{
  width:22px; height:22px;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 34%, var(--pri) 35%, transparent 46%),
    repeating-conic-gradient(var(--pri) 0deg 8deg, transparent 8deg 16deg);
  -webkit-mask:radial-gradient(circle, #000 60%, transparent 62%);
  mask:radial-gradient(circle, #000 60%, transparent 62%);
  opacity:.8;
}

/* Mientras gira, el aro respira */
.ruleta-fondo.girando .ruleta-marco{ animation:vibra .09s linear infinite }
@keyframes vibra{
  0%,100%{ transform:translate(0,0) }
  50%    { transform:translate(.6px,-.4px) }
}

.ruleta-caja .btn1{ width:100%; justify-content:center }

/* ── El premio ── */
.ruleta-resultado{ margin-top:18px; position:relative }
.rr-hilo{
  display:block; height:14px; margin-bottom:12px;
  background-image:url("../img/orillo.svg");
  background-repeat:repeat-x; background-size:auto 14px;
  opacity:.55;
}
.ruleta-resultado b{
  display:block; font-family:var(--fs);
  font-size:37px; color:var(--pri); line-height:1.06;
}
.ruleta-resultado p{ font-size:13.5px; margin:6px 0 18px }
.ruleta-resultado.aparece{ animation:premioEntra .6s cubic-bezier(.2,.9,.25,1) }
@keyframes premioEntra{
  0%  { opacity:0; transform:scale(.86) }
  60% { transform:scale(1.03) }
  100%{ opacity:1; transform:none }
}
/* Si trae descuento, el nombre late una vez */
.ruleta-resultado.con-premio b{ animation:latidoPremio 1.1s ease-out .3s }
@keyframes latidoPremio{
  0%,100%{ transform:scale(1) }
  30%    { transform:scale(1.07) }
  60%    { transform:scale(1) }
}
.ruleta-legal{ margin-top:18px; color:var(--gris) }

@media(prefers-reduced-motion:reduce){
  .ruleta-fondo.girando .ruleta-marco{ animation:none }
  .ruleta-resultado.aparece,.ruleta-resultado.con-premio b{ animation:none }
  .ruleta-lezna{ transition:none }
}
@media(max-width:420px){
  .ruleta-caja{ padding:32px 20px 20px }
  .ruleta-caja h3{ font-size:21px }
  .rd-texto b{ font-size:9.5px; max-width:58px }
  .ruleta-eje{ width:46px; height:46px }
}

/* La línea de descuento en los resúmenes de pedido */
.con-descuento b{ color:var(--ok) }

/* El punto de color en la tarjeta, cuando la pieza se muestra
   separada por tonos */
.pieza-tono{
  display:inline-block; width:13px; height:13px; border-radius:50%;
  background:var(--t);
  border:1.5px solid var(--papel);
  box-shadow:0 0 0 1px var(--linea);
  margin-bottom:6px;
}


/* F72 · navegación del stepper también accesible con teclado. */
.pb-paso[role="button"]:focus-visible{outline:2px solid var(--pri);outline-offset:5px;border-radius:4px}

.metodo:has(input:focus-visible),.regalo-toggle:has(input:focus-visible){outline:2px solid var(--pri);outline-offset:3px}