/* «Mesa de taller»: la web como una mesa de trabajo artesana. Papel rasgado entre secciones,
   un hilo que se va cosiendo con el scroll, tarjetas sujetas con cinta washi, etiquetas colgadas,
   sellos de tinta y anotaciones a lápiz. Paleta pastel de style.css.
   Las clases .js-motion e .is-* las gestiona assets/motion.js. */
:root{
 --ease-out:cubic-bezier(.2,.75,.25,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
 --kraft:#a98f73;--ink-stamp:#bf6f52;
 --tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9L9 6l11 4 11-5 13 4 12-5 11 4 13-2 13 5 12-5 13 3 13-5 13 4 13-2 13 4 13-5 13 4 12-3 13 4 13-5 13 3 13 1V18H0Z'/%3E%3C/svg%3E");
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .25 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@view-transition{navigation:auto}
body{overflow-x:clip}
::selection{background:#edc878;color:#344b63}

/* Textura de papel sobre toda la página */
body::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;background:var(--grain);opacity:.09;mix-blend-mode:multiply}

/* Cabecera: papel con costura discontinua al bajar */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px dashed transparent;transition:border-color .3s ease}
.site-header.is-scrolled{border-bottom-color:rgba(233,139,104,.5)}
.site-header .nav{transition:min-height .3s ease,padding .3s ease}
.site-header.is-scrolled .nav{min-height:68px;padding:10px 0}
.site-header .site-logo{transition:max-height .3s ease}
.site-header.is-scrolled .site-logo{max-height:46px}
.site-header .navlinks a{text-decoration:underline wavy transparent 1.5px;text-underline-offset:7px;transition:text-decoration-color .25s ease,color .2s ease}
.site-header .navlinks a:hover,.site-header .navlinks a[aria-current=page]{text-decoration-color:#e98b68}
.site-header .navlinks a[aria-current=page]{color:var(--ink-stamp)}

/* Papel rasgado entre secciones */
.hero::after,.page-hero::after,.section.cream::after,.section.cream::before,.cta::before,.footer::before{content:'';position:absolute;left:0;right:0;z-index:2;height:18px;background:var(--paper);-webkit-mask:var(--tear) repeat-x 0 100%/260px 100%;mask:var(--tear) repeat-x 0 100%/260px 100%;pointer-events:none}
.hero::after,.page-hero::after,.section.cream::after{bottom:-1px}
.section.cream::before,.cta::before,.footer::before{top:-1px;transform:scaleY(-1)}
.section.cream::after{-webkit-mask-position:90px 100%;mask-position:90px 100%}
.cta::before{-webkit-mask-position:170px 100%;mask-position:170px 100%}
.footer{position:relative}
body:has(.cta) .footer::before{background:#d98568}

/* El hilo conductor: se va cosiendo a medida que se hace scroll */
.workbench{position:relative}
.thread{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none}
.thread-stitch{fill:none;stroke:#e98b68;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:9 7}
.thread-reveal{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:var(--sewn,1)}
.thread-needle{position:absolute;z-index:6;left:0;top:0;width:30px;height:30px;color:#7398b6;pointer-events:none;transform:translate(var(--nx,0px),var(--ny,0px)) translate(-50%,-50%) rotate(var(--na,0deg));opacity:var(--needle-on,0);transition:opacity .3s ease}
.thread-needle svg{display:block;width:100%;height:100%}

/* Anotaciones a mano */
.hand-note{display:inline-flex;align-items:flex-end;gap:6px;font:700 clamp(1.35rem,2.2vw,1.7rem)/1 'Caveat',cursive;color:var(--ink-stamp);rotate:-4deg}
.hero-note{margin:16px 0 0 60px}
.hero-note svg{width:58px;height:38px;flex:0 0 58px}
.section-head .hand-note{margin:-8px 0 0 10px;rotate:-6deg}
.hand-note path{stroke-dasharray:1;stroke-dashoffset:0}
.motion-ready .hand-note{opacity:0;transition:opacity .5s ease .2s}
.motion-ready .hand-note.is-drawn{opacity:1}
.motion-ready .hand-note path{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-out) .5s}
.motion-ready .hand-note.is-drawn path{stroke-dashoffset:0}

/* Trazo a lápiz bajo los titulares */
.has-scribble{position:relative;display:inline-block}
.scribble{position:absolute;left:-2%;bottom:-.34em;width:min(104%,340px);height:.36em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:#edc878;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.cta .scribble path{stroke:#fffaf4;opacity:.6}
.motion-ready .scribble path{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) .25s}
.motion-ready .is-drawn>.scribble path{stroke-dashoffset:0}

/* Botones: etiqueta cosida que se pulsa */
.btn{outline:1.5px dashed rgba(255,250,244,.55);outline-offset:-6px;box-shadow:0 3px 0 rgba(52,75,99,.22);transition:background .25s ease,border-color .25s ease,color .25s ease,translate .15s ease,box-shadow .2s ease}
.btn:hover{translate:0 -2px;box-shadow:0 5px 0 rgba(160,80,55,.32)}
.btn:active{translate:0 2px;box-shadow:0 1px 0 rgba(52,75,99,.22)}
.btn.btn-light{outline-color:rgba(82,111,136,.38)}
.cta .btn{outline-color:rgba(52,75,99,.3);box-shadow:0 3px 0 rgba(52,75,99,.25)}
.cta .btn:hover{background:#344b63;border-color:#344b63;color:#fff;outline-color:rgba(255,250,244,.5)}

/* Enlaces de las tarjetas con subrayado ondulado */
.tile-body>a,.section-head>a,.card-detail-link{font-weight:700;color:#526f88;text-decoration:underline wavy transparent 1.5px;text-underline-offset:5px;transition:text-decoration-color .25s ease,color .2s ease}
.tile-body>a:hover,.section-head>a:hover,.card-detail-link:hover{color:var(--ink-stamp);text-decoration-color:currentColor}

/* Tarjetas: piezas apoyadas sobre la mesa, sujetas con cinta washi */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{row-gap:34px}
.tile{position:relative;overflow:visible;rotate:var(--tilt,0deg);box-shadow:0 1px 0 rgba(52,75,99,.05),0 12px 26px -14px rgba(52,75,99,.3);transition:rotate .45s var(--ease-spring),translate .45s var(--ease-spring),box-shadow .35s ease}
.tile:hover{transform:none;rotate:0deg;translate:0 -6px;box-shadow:0 24px 40px -18px rgba(52,75,99,.38)}
.grid>.tile:nth-child(4n+1){--tilt:-1.1deg;--tape:rgba(237,200,120,.78)}
.grid>.tile:nth-child(4n+2){--tilt:.8deg;--tape:rgba(115,152,182,.55)}
.grid>.tile:nth-child(4n+3){--tilt:-.5deg;--tape:rgba(173,130,168,.55)}
.grid>.tile:nth-child(4n+4){--tilt:1.2deg;--tape:rgba(169,182,160,.7)}
.tile .tile-img{border-radius:10px 10px 0 0}
.tile::before{content:'';position:absolute;z-index:4;top:-11px;left:50%;width:92px;height:24px;translate:-50% 0;rotate:-3deg;background:repeating-linear-gradient(45deg,var(--tape,rgba(237,200,120,.78)) 0 7px,rgba(255,250,244,.45) 7px 14px);clip-path:polygon(3% 0,97% 0,100% 25%,97% 50%,100% 75%,97% 100%,3% 100%,0 75%,3% 50%,0 25%);transition:rotate .45s var(--ease-spring)}
.tile:hover::before{rotate:2deg}
.motion-ready .tile:not(.is-placed):not(.is-settled){opacity:0}
.js-motion .tile.is-placed{animation:placeDown .75s var(--ease-out) backwards;animation-delay:calc(var(--ri,0)*110ms)}
@keyframes placeDown{from{opacity:0;scale:1.07;translate:0 -22px;rotate:calc(var(--tilt,0deg) * 4)}}

/* Etiquetas de los dibujos: sello de tinta */
.card-art .tile-art-label{padding:7px 13px;border:2px solid currentColor;border-radius:4px;outline:1px solid currentColor;outline-offset:3px;background:rgba(255,250,244,.85);box-shadow:none;color:var(--ink-stamp);font:700 .74rem 'DM Sans',sans-serif;letter-spacing:.17em;text-transform:uppercase;rotate:-5deg}
.card-art.is-in-view .tile-art-label{animation:stamp .5s .35s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes stamp{from{scale:1.9;opacity:0}60%{scale:.94;opacity:1}to{scale:1}}
/* 4 · Eventos: entrada y destello */
.art-agenda:not(:has(img)){background:#e9eff2}
.art-agenda:not(:has(img))::before{width:60%;height:44%;left:20%;top:24%;border-radius:10px;background:linear-gradient(90deg,#9db6c6 0 68%,#c8d7df 68%);clip-path:polygon(0 0,100% 0,100% 36%,94% 50%,100% 64%,100% 100%,0 100%,0 64%,6% 50%,0 36%);transform:rotate(-8deg)}
.art-agenda:not(:has(img))::after{width:22%;height:34%;left:64%;top:10%;bottom:auto;border-radius:0;background:#edc878;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);transform:rotate(12deg)}
.art-agenda.is-in-view:not(:has(img))::before{animation:ticketSlide 1s cubic-bezier(.2,.75,.25,1) both}
.art-agenda.is-in-view:not(:has(img))::after{animation:starPop .8s .15s cubic-bezier(.2,.75,.25,1) both}
@keyframes ticketSlide{from{transform:rotate(4deg) translateX(-30px);opacity:.3}to{transform:rotate(-8deg) translateX(0);opacity:1}}

/* Agenda: etiquetas colgadas de un clavo que se balancean */
.tag-board .grid{row-gap:64px;padding-top:34px}
.tag-board .grid>.tile{--tilt:0deg;transform-origin:50% -32px}
.tag-board .tile::before{top:-34px;width:12px;height:36px;rotate:0deg;clip-path:none;background:radial-gradient(circle at 50% 5px,var(--ink-stamp) 4px,transparent 4.5px),linear-gradient(var(--kraft),var(--kraft)) 50% 4px/2px 100% no-repeat}
.tag-board .tile::after{content:'';position:absolute;z-index:4;top:-4px;left:50%;width:16px;height:16px;translate:-50% 0;border:2px solid var(--kraft);border-radius:50%;background:var(--paper)}
.tag-board .tile:hover{translate:0 0;animation:swing 1.5s ease-in-out}
.tag-board .tile:hover::before{rotate:0deg}
@keyframes swing{20%{rotate:4deg}45%{rotate:-3deg}65%{rotate:1.5deg}85%{rotate:-.6deg}100%{rotate:0deg}}

/* Objetos de artesanía apoyados en la página: cada uno hace su gesto al aparecer */
.has-doodles{position:relative;isolation:isolate}
.doodles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.has-doodles>.wrap{position:relative;z-index:1}
.doodle{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;opacity:.8;rotate:var(--r,0deg);filter:drop-shadow(2px 3px 0 rgba(52,75,99,.08))}
.doodle svg{display:block;width:100%;height:100%}
.doodle-blue{color:#7398b6}.doodle-orange{color:#e98b68}.doodle-sun{color:#e3b45a}.doodle-purple{color:#ad82a8}.doodle-sage{color:#8fa086}.doodle-light{color:#fffaf4;opacity:.55}
.motion-ready .has-doodles:not(.is-doodles-in) .doodle{opacity:0}
.js-motion .is-doodles-in .doodle svg{animation:dropIn .8s var(--ease-spring) backwards;animation-delay:calc(var(--i,0)*150ms + .2s)}
.js-motion .is-doodles-in .doodle-yarn svg{animation-name:yarnRoll;animation-duration:1.4s;animation-timing-function:var(--ease-out)}
.js-motion .is-doodles-in .doodle-spool svg{animation-name:spoolSpin;animation-duration:1.2s}
.js-motion .is-doodles-in .doodle-scissors svg{animation-name:snip;animation-duration:1s}
.js-motion .is-doodles-in .doodle-needle svg{animation-name:stitch;animation-duration:1.1s}
.js-motion .is-doodles-in .doodle-star svg{animation:twinkle 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*400ms)}
@keyframes dropIn{from{opacity:0;translate:0 -30px;scale:.85}}
@keyframes yarnRoll{from{opacity:0;translate:-70px 0;rotate:-240deg}}
@keyframes spoolSpin{from{opacity:0;transform:rotateY(360deg) translateY(-12px)}}
@keyframes snip{0%{opacity:0;rotate:0deg}20%{opacity:1;rotate:-14deg}40%{rotate:8deg}60%{rotate:-10deg}80%{rotate:5deg}}
@keyframes stitch{0%{opacity:0;translate:-14px 14px}30%{opacity:1;translate:6px -6px}55%{translate:-8px 8px}80%{translate:3px -3px}}
@keyframes twinkle{from{scale:.82;opacity:.55}to{scale:1.08;opacity:1}}

/* Hero: la ilustración se monta como un collage, pieza a pieza */
.hero-visual{position:relative;min-width:0}
.js-motion .hero-inner>div:first-child>:not(h1){animation:softIn .7s var(--ease-out) backwards}
.js-motion .hero-inner>div:first-child>.eyebrow{animation-delay:.05s}
.js-motion .hero-inner>div:first-child>p{animation-delay:.6s}
.js-motion .hero-inner>div:first-child>.actions{animation-delay:.75s}
.js-motion .hero-inner>div:first-child>.hero-note{animation-delay:1.1s}
.js-motion .hero h1{animation:writeIn 1.2s var(--ease-out) .15s backwards}
.js-motion .hero-art{animation:paperIn .8s var(--ease-out) .1s backwards}
.js-motion .art-arch{animation:pieceIn .7s var(--ease-out) .45s backwards}
.js-motion .art-sun{animation:pieceIn .7s var(--ease-spring) .65s backwards}
.js-motion .art-copy{animation:pieceIn .8s var(--ease-out) .85s backwards}
.js-motion .art-caption{animation:softIn .6s ease 1.25s backwards}
@keyframes softIn{from{opacity:0;translate:0 12px}}
@keyframes writeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes paperIn{from{opacity:0;scale:.96;rotate:-2deg}}
@keyframes pieceIn{from{opacity:0;translate:0 -36px;rotate:-10deg;scale:1.12}}

/* Bloques ilustrados como lámina sujeta con cinta */
.feature-art{position:relative;isolation:isolate;border-radius:6px;rotate:-1.5deg;outline:2px dashed rgba(255,250,244,.7);outline-offset:-14px;box-shadow:0 20px 40px -22px rgba(52,75,99,.5)}
.feature-art span{position:relative;z-index:2}
.feature-art::before,.feature-art::after{content:'';position:absolute;z-index:3;width:110px;height:26px;background:repeating-linear-gradient(45deg,rgba(255,250,244,.75) 0 7px,rgba(237,200,120,.6) 7px 14px);clip-path:polygon(3% 0,97% 0,100% 25%,97% 50%,100% 75%,97% 100%,3% 100%,0 75%,3% 50%,0 25%)}
.feature-art::before{top:4px;left:-26px;rotate:-38deg}
.feature-art::after{bottom:4px;right:-26px;rotate:-38deg}
.motion-ready .split>.feature-art{opacity:0;transition:opacity .6s ease,rotate .9s var(--ease-spring),translate .9s var(--ease-spring);rotate:-7deg;translate:0 26px}
.motion-ready .split>.feature-art.is-placed{opacity:1;rotate:-1.5deg;translate:0 0}

/* Cabeceras de páginas interiores */
.page-hero{overflow:hidden;padding:90px 0 84px}
.page-hero h1{font-size:clamp(3rem,7vw,6rem)}

/* Llamada a la acción como parche cosido */
.cta{overflow:hidden;padding:90px 0}
.cta-inner{outline:2px dashed rgba(255,250,244,.55);outline-offset:26px;border-radius:2px}
.cta h2{font-size:clamp(2.2rem,5vw,4rem);max-width:720px}

#reserva{scroll-margin-top:110px}

@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.thread,.thread-needle{display:none}}
@media(max-width:780px){
 .site-header .navlinks#site-menu a{text-decoration:none}
 .site-header .navlinks#site-menu.is-open a{animation:menuIn .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*40ms)}
 .site-header.is-scrolled .nav{min-height:62px;padding:8px 0}
 .doodle{width:calc(var(--s)*.7);opacity:.5}
 .doodle:nth-child(n+4){display:none}
 .hero-note{margin-left:30px}
 .page-hero{padding:56px 0 54px}
 .cta{padding:64px 0}
 .cta-inner{outline-offset:16px}
}
@media(max-width:500px){.grid-4{grid-template-columns:1fr}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}

/* Aviso de cookies: nota de papel sujeta con cinta (assets/consent.js) */
.cookie-note{position:fixed;z-index:900;left:20px;bottom:20px;width:min(390px,calc(100% - 32px));padding:26px 22px 20px;border:1px solid var(--line);border-radius:6px;background:var(--paper);box-shadow:0 24px 50px -18px rgba(52,75,99,.45);rotate:-1deg;translate:0 28px;opacity:0;transition:opacity .35s ease,translate .5s var(--ease-spring)}
.cookie-note.is-open{opacity:1;translate:0 0}
.cookie-note::before{content:'';position:absolute;top:-11px;left:50%;width:96px;height:24px;translate:-50% 0;rotate:-3deg;background:repeating-linear-gradient(45deg,rgba(237,200,120,.8) 0 7px,rgba(255,250,244,.5) 7px 14px);clip-path:polygon(3% 0,97% 0,100% 25%,97% 50%,100% 75%,97% 100%,3% 100%,0 75%,3% 50%,0 25%)}
.cookie-note .cookie-note-title{margin:0 0 6px;font:700 1.65rem/1 'Caveat',cursive;color:var(--ink-stamp)}
.cookie-note p{margin:0 0 16px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.cookie-note a{color:#526f88;font-weight:700;text-decoration:underline wavy rgba(82,111,136,.45) 1.5px;text-underline-offset:4px}
.cookie-note-actions{display:flex;gap:10px}
.cookie-note-actions .btn{flex:1;padding:11px 14px;text-align:center}
.cookie-settings{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover,.footer-bottom .cookie-settings:hover{color:#fff}

/* Páginas legales: una hoja sujeta con cinta */
.legal-sheet{position:relative;max-width:820px;margin:0 auto;padding:clamp(28px,5vw,60px);border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:0 22px 44px -26px rgba(52,75,99,.4)}
.legal-sheet::before{content:'';position:absolute;top:-12px;left:50%;width:120px;height:26px;translate:-50% 0;rotate:-2deg;background:repeating-linear-gradient(45deg,rgba(115,152,182,.55) 0 7px,rgba(255,250,244,.5) 7px 14px);clip-path:polygon(3% 0,97% 0,100% 25%,97% 50%,100% 75%,97% 100%,3% 100%,0 75%,3% 50%,0 25%)}
.legal-sheet h2{margin:38px 0 12px;font-size:clamp(1.4rem,2.4vw,1.85rem)}
.legal-sheet h2:first-child{margin-top:0}
.legal-sheet p,.legal-sheet li{color:#4f5a63;line-height:1.75;overflow-wrap:anywhere}
.legal-sheet ul{margin:0 0 16px;padding-left:1.2em}
.legal-sheet li{margin:4px 0}
.legal-sheet li::marker{color:#e98b68}
.legal-sheet a{color:#526f88;font-weight:700}
.legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:30px;font-size:.92rem}
.legal-nav a,.legal-nav .cookie-settings{color:#526f88;font-weight:700}
.legal-nav a[aria-current=page]{color:var(--ink-stamp);text-decoration:underline wavy;text-underline-offset:5px}
/* Información básica de protección de datos bajo los formularios */
.form-legal{margin:0;padding:12px 14px;border-left:3px solid #edc878;border-radius:4px;background:#fbf5eb;color:var(--muted);font-size:.78rem;font-weight:400;line-height:1.55}
.form-legal a,.form label a{color:#526f88;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:500px){.cookie-note{left:16px;right:16px;bottom:16px;width:auto;rotate:0deg}}

@media(prefers-reduced-motion:reduce){
 .tile,.tile::before,.feature-art,.btn,.cookie-note{transition:none}
 .tag-board .tile:hover,.card-art .tile-art-label{animation:none!important}
}