/* Flores y Sueños — papel, listón y tinta.
   Todo el diseño sale del mundo de la floristería: cinta de raso, etiquetas con cordel, papel de seda y tarjetas escritas a mano. */

:root{
  --rosa:#F0648B; --rosa-claro:#F380A9; --rosa-vivo:#EC4C95; --rosa-pale:#F6A2A7; --rosa-bruma:#FFECE7; --rosa-papel:#FFE3EC;
  --verde:#6CC04A; --verde-hoja:#8FD070; --verde-hondo:#2F7D3E; --pizarra:#1F5A3A; --pizarra-osc:#16422B;
  --naranja:#F89B31; --amarillo:#F7ED58; --mantequilla:#FFE27A;
  --tinta:#363435; --ciruela:#5B1C3A; --kraft:#C9A27A; --kraft-claro:#E6CFA8; --papel:#FFFFFF;
  --f-display:'Caprasimo', Georgia, serif;
  --f-script:'Kaushan Script', 'Brush Script MT', cursive;
  --f-mano:'Caveat', 'Segoe Print', cursive;
  --f-texto:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --alto-cinta:54px;
  --hero-alto:100vh;
  --borde:clamp(18px, 4.5vw, 64px);
  --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .12  0 0 0 0 .16  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cinta) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--grano);opacity:.13}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:2px;transition:top .2s}
.saltar:focus{top:10px}
:focus-visible{outline:3px solid var(--ciruela);outline-offset:3px}

/* ============================ CINTA DE NAVEGACIÓN ============================ */
.cinta-nav{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--alto-cinta);color:#fff;
  transform:translateY(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
/* la cinta (con su extremo en «V») es un fondo aparte: así el menú del celular puede salirse de ella sin quedar recortado */
.cinta-nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(91,28,58,.22) 100%),
    var(--rosa);
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 50%,100% 100%,0 100%)}
.sin-js .cinta-nav{transform:none}
.con-entrada .cinta-nav{transform:translateY(-110%)}
.cinta-nav__fila{height:100%;display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding:0 calc(var(--borde) + 8px) 0 var(--borde)}
.cinta-nav__marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 27px/1 var(--f-script);white-space:nowrap}
.cinta-nav__caja{width:30px;height:30px}
.cinta-nav__enlaces{margin-left:auto;display:flex;gap:clamp(14px,2.4vw,34px)}
.cinta-nav__enlaces a{font:800 13.5px/1 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:6px 0;position:relative;text-shadow:0 1px 0 rgba(91,28,58,.4)}
.cinta-nav__enlaces a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.cinta-nav__enlaces a:hover::after,.cinta-nav__enlaces a:focus-visible::after{transform:scaleX(1)}
.cinta-nav__pedir{font:800 12.5px/1 var(--f-texto);letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--rosa);background:#fff;padding:9px 24px 9px 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);transition:padding .25s}
.cinta-nav__pedir:hover{padding-right:30px}
.cinta-nav__burger{display:none;width:42px;height:42px;background:none;border:0;position:relative}
.cinta-nav__burger span{position:absolute;left:9px;right:9px;height:3px;background:#fff;border-radius:3px;transition:transform .3s,top .3s}
.cinta-nav__burger span:first-child{top:15px}.cinta-nav__burger span:last-child{top:25px}
.cinta-nav__burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.cinta-nav__burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}

/* ============================ HÉROE ============================ */
@supports (height:100svh){:root{--hero-alto:100svh}}
.heroe{position:relative;height:var(--hero-alto);min-height:620px;padding-top:var(--alto-cinta);display:flex;flex-direction:column;background:var(--papel);overflow:hidden}
.heroe__escena{position:relative;flex:1 1 0;min-height:0}
.heroe__escena svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.heroe__pie{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:4px var(--borde) 84px;opacity:1;transition:opacity .8s,transform .8s}
@media (max-height:780px) and (min-width:861px){
  .heroe__pie{padding-bottom:74px}
  .heroe__lema{font-size:clamp(22px,2.5vw,32px)}
  .boton-cinta{padding-top:15px;padding-bottom:15px}
}
.con-entrada .heroe__pie{opacity:0;transform:translateY(18px)}
.heroe__lema{font:400 clamp(26px,3.4vw,44px)/1.06 var(--f-display);color:var(--tinta);letter-spacing:-.01em}
.heroe__lema em{font-style:normal;color:var(--rosa);position:relative;white-space:nowrap}
.heroe__acciones{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;justify-content:flex-end}
.enlace-mano{font:700 24px/1 var(--f-mano);color:var(--tinta);text-decoration:none;border-bottom:2px dashed var(--rosa);padding-bottom:3px}
.enlace-mano:hover{color:var(--rosa)}
.heroe__saltar{position:absolute;z-index:5;right:var(--borde);top:18px;background:#fff;border:2px solid var(--tinta);color:var(--tinta);font:800 12.5px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));opacity:0;pointer-events:none;transition:opacity .4s}
.con-entrada .heroe__saltar{opacity:1;pointer-events:auto}
.heroe__saltar:hover{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.heroe__petalos{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.petalo-flota{position:absolute;top:-40px;opacity:0;animation:cae var(--dur,16s) linear var(--ret,0s) infinite}
.petalo-flota svg{display:block;width:100%;height:auto}
.sin-js .petalo-flota,.con-entrada .petalo-flota{animation:none}
@keyframes cae{0%{opacity:0;transform:translate(0,-6vh) rotate(0deg)}8%{opacity:.9}50%{transform:translate(var(--sx,40px),52vh) rotate(180deg)}92%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--sx,40px) * -1),108vh) rotate(380deg)}}

/* botón de cinta: extremo en «V» como un trozo de listón */
.boton-cinta{display:inline-block;position:relative;background:var(--rosa);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font:800 14px/1 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;padding:18px 50px 18px 30px;
  clip-path:polygon(0 0,100% 0,calc(100% - 20px) 50%,100% 100%,0 100%);transition:padding .25s,background .25s;
  background-image:linear-gradient(180deg,rgba(255,255,255,.24) 0,rgba(255,255,255,0) 40%,rgba(91,28,58,.18) 100%)}
.boton-cinta:hover{padding-right:62px;background-color:var(--rosa-vivo)}
.boton-cinta--grande{font-size:16px;padding:22px 64px 22px 38px}
.boton-cinta--grande:hover{padding-right:78px}

/* ============================ CINTAS QUE SE CRUZAN ============================ */
.cintas-cruz{position:relative;height:120px;margin-top:-62px;z-index:8;pointer-events:none;overflow:hidden}
.cinta-texto{position:absolute;left:-6vw;width:112vw;height:46px;overflow:hidden;color:#fff;box-shadow:0 3px 0 rgba(91,28,58,.18)}
.cinta-texto--frente{top:30px;background:var(--rosa);transform:rotate(-2deg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 45%,rgba(91,28,58,.2) 100%)}
.cinta-texto--atras{top:34px;background:var(--rosa-pale);color:var(--ciruela);transform:rotate(1.6deg)}
.cinta-satin{background:none !important;box-shadow:none !important;height:54px}
.cinta-satin svg{display:block;height:100%;width:auto;max-width:none}
.cinta-satin.cinta-texto--frente{top:26px}
.cinta-texto__pista{display:flex;white-space:nowrap;height:100%;align-items:center;font:800 15px/1 var(--f-texto);letter-spacing:.3em;animation:marquesina 40s linear infinite;width:max-content}
.cinta-texto--atras .cinta-texto__pista{animation-direction:reverse;animation-duration:55s}
.cinta-texto__pista span{padding-right:.3em}
@keyframes marquesina{to{transform:translateX(-50%)}}

/* ============================ MANIFIESTO ============================ */
.sello-mini{font:800 12.5px/1 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--rosa);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.sello-mini::before{content:"";width:34px;height:3px;background:currentColor;border-radius:2px}
.sello-mini--claro{color:#fff}.sello-mini--tiza{color:var(--amarillo)}
.manifiesto{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,96px);align-items:center;padding:clamp(70px,11vw,150px) var(--borde) clamp(90px,12vw,170px)}
.manifiesto__titulo{font:400 clamp(38px,5.6vw,84px)/1.02 var(--f-display);letter-spacing:-.015em;color:var(--tinta)}
.resaltado{display:block;color:var(--rosa);position:relative;width:max-content;max-width:100%}
.manifiesto__parrafo{margin-top:32px;max-width:36em;font-size:clamp(17px,1.35vw,20px)}
.manifiesto__firma{margin-top:22px;font:700 clamp(24px,2.2vw,32px)/1.2 var(--f-mano);color:var(--ciruela)}
.garabato-linea,.garabato-circulo{position:relative;display:inline-block;white-space:nowrap}
.garabato-dib{position:absolute;display:block;pointer-events:none}
.garabato-dib svg{display:block;width:100%;height:100%;overflow:visible}
.garabato-dib path{vector-effect:non-scaling-stroke;stroke-dasharray:1 3;stroke-dashoffset:1.1}
.garabato-dib{opacity:0}
.garabato-dib.en-vista{opacity:1}

/* listones rizados de adorno */
.liston-deco{position:absolute;display:block;pointer-events:none;z-index:2;transform-origin:50% 0;animation:liston-mece 5.5s ease-in-out infinite alternate}
.liston-deco svg{display:block;height:100%;width:auto}
@keyframes liston-mece{from{rotate:-2.5deg}to{rotate:3deg}}
.liston-deco--tarjeta{right:-34px;top:-96px;height:170px}
.liston-deco--suenos-a{right:12%;top:0;height:230px;animation-delay:-1.2s}
.liston-deco--suenos-b{right:5.5%;top:0;height:160px;animation-delay:-3s}
.liston-deco--contacto-a{left:7%;top:0;height:210px}
.liston-deco--contacto-b{right:8%;top:0;height:150px;animation-delay:-2s}
.washi-svg svg{display:block;width:100%;height:100%}
.tarjeta-demo__washi.washi-svg{background:none;clip-path:none}
.garabato-dib--subrayado,.garabato-dib--subrayado-doble{left:-3%;right:-3%;bottom:-.55em;height:.8em}
.garabato-dib--circulo{left:-14%;top:-28%;width:128%;height:156%}
.resaltado .garabato-dib{left:0;right:0;bottom:-.3em;height:.5em}
.manifiesto__tarjeta{position:relative;justify-self:center;width:min(420px,100%)}
.tarjeta-demo{position:relative;background:#fff;padding:46px 38px 54px;transform:rotate(3deg);
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(240,100,139,.28) 33px 34px);background-position:0 54px;
  box-shadow:0 0 0 1px rgba(91,28,58,.12),10px 12px 0 var(--rosa-papel);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.tarjeta-demo__para{font:700 36px/34px var(--f-mano);color:var(--ciruela)}
.tarjeta-demo__texto{margin-top:34px;font:600 33px/34px var(--f-mano);color:var(--tinta)}
.tarjeta-demo__firma{margin-top:34px;font:700 32px/34px var(--f-mano);color:var(--rosa);text-align:right}
/* la dedicatoria se escribe sola cuando la tarjeta entra en pantalla */
.tarjeta-demo p{clip-path:inset(-4px 100% -8px 0);transition:clip-path 1.1s steps(22) calc(var(--l,0) * 1.1s + .5s)}
.tarjeta-demo__para{--l:0}.tarjeta-demo__texto{--l:1}.tarjeta-demo__firma{--l:2}
.en-vista .tarjeta-demo p,.sin-js .tarjeta-demo p{clip-path:inset(-4px 0 -8px 0)}
.tarjeta-demo__loto{position:absolute;right:-28px;bottom:-34px;width:112px;transform:rotate(-10deg)}
.tarjeta-demo__washi{position:absolute;top:-16px;width:110px;height:34px;opacity:.92;background:repeating-linear-gradient(135deg,var(--rosa-pale) 0 8px,#fff 8px 16px);clip-path:polygon(4% 0,100% 6%,96% 100%,0 92%)}
.tarjeta-demo__washi--a{left:-26px;transform:rotate(-34deg)}
.tarjeta-demo__washi--b{right:-22px;transform:rotate(30deg);background:repeating-linear-gradient(135deg,var(--mantequilla) 0 8px,#fff 8px 16px)}
.sello-giratorio{position:absolute;left:-44px;bottom:-34px;width:118px;height:118px;transform:rotate(-12deg)}
.sello-giratorio svg{width:100%;height:100%}

/* ============================ LOS SUEÑOS ============================ */
.suenos{position:relative;background:var(--rosa);color:#fff;margin-top:-1px;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.14), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23ffffff' fill-opacity='.09'><path d='M20 18c5-9 12-9 17 0-5 8-12 8-17 0z'/><path d='M86 82c5-9 12-9 17 0-5 8-12 8-17 0z' transform='rotate(70 94 82)'/><circle cx='80' cy='22' r='2.6'/><circle cx='30' cy='86' r='2.6'/></g></svg>")}
.suenos__onda{position:absolute;left:0;right:0;height:clamp(50px,7vw,110px);pointer-events:none;z-index:2;line-height:0}
.suenos__onda svg{width:100%;height:100%}
.suenos__onda--arriba{top:calc(clamp(50px,7vw,110px) * -1 + 1px)}
.suenos__onda--abajo{bottom:calc(clamp(50px,7vw,110px) * -1 + 1px)}
.suenos__interior{position:relative;z-index:3;padding:clamp(34px,5vw,70px) var(--borde) clamp(60px,8vw,120px)}
.suenos__cabecera{max-width:880px}
.suenos__titulo{font:400 clamp(70px,13vw,190px)/.85 var(--f-script);color:#fff;margin:6px 0 0 -.04em;text-shadow:5px 6px 0 var(--ciruela)}
.suenos__intro{margin-top:26px;max-width:34em;font-size:19px;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(91,28,58,.35)}
.filtros{display:flex;gap:clamp(10px,1.6vw,22px);margin:clamp(30px,4vw,54px) calc(var(--borde) * -1) 0;padding:12px var(--borde) 26px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:none;scroll-snap-align:center;display:grid;justify-items:center;gap:9px;width:94px;background:none;border:0;padding:0;color:#fff;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.filtro__disco{width:80px;height:80px;border-radius:50%;background:var(--rosa-papel);display:grid;place-items:center;color:var(--ciruela);position:relative;box-shadow:0 0 0 3px transparent;transform:rotate(var(--r,-4deg));transition:box-shadow .25s,background .25s,transform .25s}
.filtro__disco svg{width:40px;height:40px}
.filtro__nombre{font:800 12px/1.15 var(--f-texto);letter-spacing:.13em;text-transform:uppercase;text-align:center}
.filtro:hover{transform:translateY(-4px)}
.filtro[aria-pressed="true"] .filtro__disco{background:#fff;box-shadow:0 0 0 4px var(--ciruela);transform:rotate(0) scale(1.08)}
.filtro[aria-pressed="true"] .filtro__nombre{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}

/* rieles: cada fila cuelga de su listón */
.rieles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,60px) clamp(22px,3vw,48px);margin-top:10px;--sep:clamp(22px,3vw,48px)}
.etiqueta{position:relative;padding-top:58px;transform-origin:50% 0}
.etiqueta::before{content:"";position:absolute;z-index:0;top:0;height:30px;left:calc(var(--sep) / -2 - 1px);right:calc(var(--sep) / -2 - 1px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 46%,rgba(91,28,58,.3) 100%),
    var(--rosa-claro);box-shadow:0 3px 0 rgba(91,28,58,.35)}
.etiqueta:nth-child(3n+1)::before{left:calc(var(--borde) * -1 - 2px)}
.etiqueta:nth-child(3n)::before,.etiqueta:last-child::before{right:calc(var(--borde) * -1 - 2px)}
.etiqueta__cordel{position:absolute;z-index:1;top:24px;left:50%;width:4px;height:48px;margin-left:-2px;transform:rotate(var(--cr,2deg));transform-origin:50% 0;
  background:repeating-linear-gradient(180deg,var(--kraft) 0 4px,#8e6b44 4px 7px)}
.etiqueta__colgante{position:relative;z-index:2;transform-origin:50% 20px;transform:rotate(var(--r0,0deg))}
.etiqueta__papel{position:relative;display:block;width:100%;text-align:left;background:#fff;color:var(--tinta);border:0;padding:0 0 22px;cursor:pointer;font:inherit;
  clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%,0 28px)}
.etiqueta__papel::before{content:"";position:absolute;z-index:3;top:11px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:var(--rosa-claro);box-shadow:inset 0 0 0 3px #e8d3b2,inset 3px 3px 0 4px rgba(91,28,58,.25)}
.etiqueta__papel::after{content:"";position:absolute;z-index:1;inset:8px;pointer-events:none;border:2px dashed rgba(240,100,139,.5);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px)}
.etiqueta--kraft .etiqueta__papel{background:var(--kraft-claro)}
.etiqueta--rosa .etiqueta__papel{background:var(--rosa-papel)}
.etiqueta--verde .etiqueta__papel{background:#E4F4D8}
.etiqueta__arte{position:relative;z-index:2;margin:42px 14px 0;aspect-ratio:400 / 470}
.etiqueta__arte svg{width:100%;height:100%;overflow:visible}
.etiqueta__texto{position:relative;z-index:2;display:block;padding:6px 22px 0}
.etiqueta__nombre{display:block;font:400 clamp(30px,2.6vw,40px)/1.02 var(--f-script);color:var(--ciruela)}
.etiqueta__detalle{display:block;margin-top:8px;font:800 11.5px/1.35 var(--f-texto);letter-spacing:.15em;text-transform:uppercase;color:#7b5a68}
.etiqueta__ver{margin-top:14px;display:inline-block;font:700 21px/1 var(--f-mano);color:var(--rosa);border-bottom:2px solid currentColor}
.precio{position:absolute;z-index:4;right:-12px;top:55%;width:86px;height:86px;transform:rotate(9deg);pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(91,28,58,.38))}
.precio > span{display:grid;place-items:center;align-content:center;width:100%;height:100%;text-align:center;background:var(--amarillo);color:var(--ciruela);font:400 17px/1 var(--f-display);clip-path:var(--sello-clip,circle(50%))}
.precio small{display:block;font:800 9px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.precio b{display:block;font-weight:400}
.precio .p-corto{display:none}
.precio i{display:block;font:800 7.5px/1 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;font-style:normal;margin-top:2px}
.etiqueta:hover .etiqueta__colgante,.etiqueta:focus-within .etiqueta__colgante{animation:columpio 1.3s ease-in-out}
.etiqueta__papel:focus-visible{outline:0}
.etiqueta__colgante:has(.etiqueta__papel:focus-visible){outline:4px solid var(--ciruela);outline-offset:6px}
.etiqueta:hover .fl-flor{transform:translateY(-7px);transition:transform .4s calc(var(--i,0) * 40ms) cubic-bezier(.3,1.7,.5,1)}
.fl-flor{transition:transform .5s calc(var(--i,0) * 30ms) cubic-bezier(.3,1.4,.5,1)}
@keyframes columpio{0%{transform:rotate(var(--r0,0deg))}20%{transform:rotate(calc(var(--r0,0deg) - 4.5deg))}45%{transform:rotate(calc(var(--r0,0deg) + 3.4deg))}70%{transform:rotate(calc(var(--r0,0deg) - 1.6deg))}100%{transform:rotate(var(--r0,0deg))}}
.etiqueta.pendiente{opacity:0}
.etiqueta.en-vista{animation:cuelga 1s var(--ret,0s) cubic-bezier(.2,1.3,.4,1) both}
@keyframes cuelga{0%{opacity:0;transform:translateY(-34px) rotate(-7deg)}55%{opacity:1}100%{opacity:1;transform:none}}
.rieles__vacio{grid-column:1/-1;font:700 28px var(--f-mano)}

/* ============================ CÓMO SE ARMA ============================ */
.proceso{position:relative;padding:clamp(100px,12vw,190px) var(--borde) clamp(80px,10vw,150px);background:var(--papel)}
.proceso__cabecera{max-width:760px;margin:0 auto clamp(40px,6vw,80px);text-align:center}
.proceso__cabecera .sello-mini{justify-content:center}
.proceso__titulo{font:400 clamp(44px,7vw,100px)/.95 var(--f-display);letter-spacing:-.015em}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);position:relative;z-index:2}
.paso{position:relative;padding-top:22px}
.paso:nth-child(even){margin-top:46px}
.paso__num{position:absolute;z-index:3;left:-6px;top:0;width:54px;height:54px;display:grid;place-items:center;font:400 28px/1 var(--f-display);color:#fff;background:var(--rosa);
  clip-path:polygon(50% 0,61% 9%,75% 6%,81% 19%,94% 25%,91% 39%,100% 50%,91% 61%,94% 75%,81% 81%,75% 94%,61% 91%,50% 100%,39% 91%,25% 94%,19% 81%,6% 75%,9% 61%,0 50%,9% 39%,6% 25%,19% 19%,25% 6%,39% 9%)}
.paso__dibujo{display:flex;align-items:flex-end;justify-content:center;height:200px;margin-bottom:18px}
.paso__dibujo > svg{display:block;flex:none;height:100%;width:auto;max-width:100%;overflow:visible}
.paso h3{font:400 clamp(28px,2.4vw,36px)/1.05 var(--f-script);color:var(--ciruela)}
.paso p{margin-top:10px;font-size:16.5px}
.liston-doble{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
.liston-doble > svg{display:block;flex:none;height:100%;width:auto}
.liston-doble > svg:nth-of-type(2){height:78%;margin-left:-6px}
.liston-doble > .tijera-sola{position:absolute;left:calc(50% - 40px);top:-4px;height:74px;width:auto;overflow:visible}
.proceso__tallo{position:absolute;left:0;right:0;top:50%;width:100%;height:130px;margin-top:-10px;z-index:1;opacity:.9}
.proceso__tallo path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 2.8s cubic-bezier(.5,0,.2,1) .1s,opacity .2s}
.sin-js .proceso__tallo path,.tallo-listo .proceso__tallo path{stroke-dashoffset:0;opacity:1}

/* ============================ CONTACTO ============================ */
.contacto{position:relative;background:var(--pizarra);color:#fff;overflow:hidden;
  background-image:radial-gradient(ellipse at 70% 10%,rgba(255,255,255,.1),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(0,0,0,.2),transparent 60%)}
.contacto__interior{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:clamp(80px,10vw,150px) var(--borde) clamp(80px,10vw,150px);text-align:center}
.contacto__interior .sello-mini{justify-content:center}
.contacto__titulo{font:400 clamp(52px,9vw,128px)/.95 var(--f-script);text-shadow:4px 5px 0 var(--pizarra-osc)}
.contacto__titulo span{color:var(--amarillo)}
.contacto__parrafo{margin:28px auto 0;max-width:34em;font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.92)}
.contacto__acciones{margin-top:44px;display:flex;flex-wrap:wrap;gap:22px 38px;justify-content:center;align-items:center}
.enlace-tiza{font:700 26px/1 var(--f-mano);color:#fff;text-decoration:none;border-bottom:2px dashed var(--amarillo);padding-bottom:3px}
.enlace-tiza:hover{color:var(--amarillo)}
.contacto__datos{list-style:none;margin:70px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}
.contacto__datos li{border-top:2px dashed rgba(255,255,255,.4);padding-top:16px}
.contacto__datos b{display:block;font:800 12px/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--amarillo);margin-bottom:8px}
.contacto__datos span{font-size:16px;color:rgba(255,255,255,.92)}

/* ============================ PIE ============================ */
.pie{background:var(--rosa);color:#fff;padding:26px var(--borde) calc(26px + env(safe-area-inset-bottom))}
.pie__fila{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pie__loto{width:62px;flex:none}
.pie__nombre{font:400 24px/1.1 var(--f-script)}
.pie__nombre b{font-weight:400}
.pie__nota{font-size:13.5px;opacity:.9;margin-top:4px}
.pie__repetir{margin-left:auto;background:none;border:2px solid #fff;color:#fff;font:800 12.5px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.pie__repetir:hover{background:#fff;color:var(--rosa)}

/* ============================ DETALLE (MODAL) ============================ */
.modal{border:0;padding:0;margin:auto;max-width:min(1040px,calc(100vw - 24px));width:100%;background:transparent;color:var(--tinta);overflow:visible}
.modal::backdrop{background:rgba(91,28,58,.66);backdrop-filter:blur(2px)}
.modal[open]{animation:abre .5s cubic-bezier(.2,1.2,.4,1)}
@keyframes abre{from{opacity:0;transform:translateY(40px) rotate(-1.5deg) scale(.97)}to{opacity:1;transform:none}}
.modal__hoja{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);background:#fff;max-height:calc(100svh - 32px);overflow:auto;
  clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%,0 34px)}
.modal__arte{background:var(--rosa-papel);padding:48px 28px 28px;display:grid;place-items:center;
  background-image:radial-gradient(circle at 50% 38%,rgba(255,255,255,.7),transparent 62%)}
.modal__arte svg{width:min(100%,480px);height:auto;overflow:visible}
.modal__cuerpo{padding:44px clamp(22px,3vw,44px) 34px}
.modal__cerrar{position:absolute;z-index:5;top:12px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--tinta);color:#fff;font-size:18px}
.modal__cerrar:hover{background:var(--rosa)}
.modal__titulo{font:400 clamp(44px,5vw,66px)/.95 var(--f-script);color:var(--ciruela);margin-bottom:10px}
.modal__desc{font-size:17px;max-width:32em}
.modal__tamanos{border:0;padding:0;margin:22px 0 0}
.modal__tamanos legend{font:800 12px/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--rosa);padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:0;padding:2px;background:var(--ciruela);color:var(--ciruela);cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.chip > span{display:block;background:#fff;font:800 13px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;padding:10px 24px 10px 14px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.chip[aria-pressed="true"] > span{background:var(--ciruela);color:#fff}
.chip small{font-weight:700;opacity:.8;margin-left:6px;letter-spacing:.04em}
.modal__dedicatoria{display:block;margin-top:24px;font:800 12px/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--rosa)}
.modal__dedicatoria textarea{display:block;width:100%;margin-top:10px;padding:12px 14px;border:2px solid var(--ciruela);background:#fff;font:600 24px/1.15 var(--f-mano);color:var(--tinta);resize:vertical;border-radius:0}
.tarjeta-viva{position:relative;margin-top:16px;min-height:112px;padding:16px 20px;background:#fffdf8;transform:rotate(-1.2deg);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(240,100,139,.3) 31px 32px);
  box-shadow:0 0 0 1px rgba(91,28,58,.14),6px 7px 0 var(--rosa-papel);clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.tarjeta-viva p{font:700 28px/32px var(--f-mano);color:var(--tinta);white-space:pre-wrap;word-break:break-word;min-height:32px}
.tarjeta-viva p:empty::before{content:"Aquí se verá tu mensaje, escrito a mano…";color:#b9a2ac;font-weight:600}
.tarjeta-viva p.escribe{animation:escribe .9s steps(24) both}
@keyframes escribe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.modal__pie{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;flex-wrap:wrap}
.modal__precio{font:400 40px/1 var(--f-display);color:var(--ciruela)}
.modal__precio small{display:block;font:800 11px/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--rosa);margin-bottom:6px}
.modal__chat{margin-top:20px;background:#dcf8c6;border-radius:2px 18px 18px 18px;padding:14px 16px;font-size:15.5px;color:#1a2e1a;position:relative}
.modal__chat b{display:block;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#2d6a3a;margin-bottom:6px}
.modal__chat em{display:block;margin-top:10px;font-size:13px;color:#4c6b4c}

html.bloqueo,html.modal-abierto{overflow:hidden}
.aviso{position:fixed;z-index:120;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);text-align:center;
  background:var(--tinta);color:#fff;font:700 15px/1.35 var(--f-texto);padding:15px 26px;transition:opacity .3s,transform .4s cubic-bezier(.2,1.2,.4,1);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.aviso.visible{opacity:1;transform:translate(-50%,0)}

/* ============================ ENTRADA DE SECCIONES ============================ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--ret,0s)}
.rev.en-vista{opacity:1;transform:none}
.sin-js .rev{opacity:1;transform:none}
.garabato-dib path{transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .2s}
.en-vista .garabato-dib path,.garabato-dib.en-vista path{stroke-dashoffset:0}

/* ============================ RESPONSIVO ============================ */
@media (max-width:1100px){
  .rieles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etiqueta:nth-child(3n+1)::before,.etiqueta:nth-child(3n)::before{left:calc(var(--sep) / -2 - 1px);right:calc(var(--sep) / -2 - 1px)}
  .etiqueta:nth-child(2n+1)::before{left:calc(var(--borde) * -1 - 2px)}
  .etiqueta:nth-child(2n)::before,.etiqueta:last-child::before{right:calc(var(--borde) * -1 - 2px)}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px}
  .proceso__tallo{display:none}
}
@media (max-width:860px){
  .cinta-nav__enlaces{position:absolute;top:var(--alto-cinta);left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--rosa-vivo);padding:8px var(--borde) 18px;transform:translateY(-120%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;z-index:-2;box-shadow:0 6px 0 rgba(91,28,58,.22)}
  .cinta-nav__enlaces.abierto{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .cinta-nav__enlaces a{padding:15px 0;font-size:14px;border-bottom:2px dashed rgba(255,255,255,.4)}
  .cinta-nav__burger{display:block;margin-left:auto;order:3}
  .cinta-nav__pedir{margin-left:auto}
  .cinta-nav__burger{margin-left:0}
  .manifiesto{grid-template-columns:1fr}
  .manifiesto__tarjeta{margin-top:20px}
  .contacto__datos{grid-template-columns:1fr}
  .heroe__pie{flex-direction:column;align-items:flex-start;gap:16px}
  .heroe__acciones{justify-content:flex-start}
  .modal__hoja{grid-template-columns:1fr}
  .modal__arte{padding:40px 20px 10px}
  .modal__arte svg{width:min(100%,320px)}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .cinta-nav__marca{font-size:23px}
  .rieles{gap:26px 12px;--sep:12px}
  .etiqueta{padding-top:46px}
  .etiqueta__arte{margin:34px 6px 0;aspect-ratio:400 / 430}
  .etiqueta__texto{padding:0 11px 0}
  .etiqueta__nombre{font-size:24px;line-height:1}
  .etiqueta__detalle{font-size:9.5px;letter-spacing:.08em;margin-top:6px}
  .etiqueta__ver{font-size:17px;margin-top:10px}
  .etiqueta__papel{padding-bottom:16px}
  .etiqueta__papel::after{inset:6px}
  .precio{width:58px;height:58px;right:-8px;top:44px;font-size:17px}
  .precio small{font-size:7px;margin-bottom:1px}
  .precio .p-largo{display:none}
  .precio .p-corto{display:block}
  .pasos{grid-template-columns:1fr}
  .paso:nth-child(even){margin-top:0}
  .paso__dibujo{height:140px}
  .filtro{width:78px}.filtro__disco{width:66px;height:66px}.filtro__disco svg{width:34px;height:34px}
  .pie__repetir{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
  .etiqueta.pendiente{opacity:1}
  .garabato-dib path,.proceso__tallo path{stroke-dashoffset:0}
}