/* De Antaño · capa artesanal: papel cálido, bordes de barro, trazos a mano y sellos.
   Se carga después de brand.css; solo añade detalles, no cambia la estructura. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

:root{
 --brand-paper:#FAF4EC;
 --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
 --wave-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V11C14 4 26 3 40 8s27 9 42 4 26-10 42-6 24 8 36 4V20Z'/%3E%3C/svg%3E");
 --wave-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0V9C14 16 26 17 40 12s27-9 42-4 26 10 42 6 24-8 36-4V0Z'/%3E%3C/svg%3E");
 --wave-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M1 4c4-4 7-4 11 0s7 4 11 0 7-4 10 0' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
 --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C60 4 120 3 180 5s90 3 117-1c-20 5-60 7-110 7S40 13 3 9Z' fill='%23C97141'/%3E%3C/svg%3E");
}
body,body[data-theme]{--cream:var(--brand-paper)}

/* Papel y barro: un grano más presente que se funde con el color. */
.grain{opacity:.07!important;mix-blend-mode:multiply}

/* La línea de los títulos pequeños se vuelve la onda del símbolo. */
.eyebrow:before{width:30px!important;height:8px!important;background:currentColor!important;opacity:.85!important;-webkit-mask:var(--wave-line) center/contain no-repeat;mask:var(--wave-line) center/contain no-repeat}


/* Bordes de barro: las secciones se encuentran con una onda, no con un corte recto. */
.statement,.marquee,.andino-story,.manifesto,.site-footer{position:relative}
.statement{overflow:clip visible}
.statement:after,.andino-story:before,.manifesto:before,.site-footer:before{content:'';position:absolute;left:0;right:0;top:-17px;height:18px;background:inherit;background-image:none;-webkit-mask:var(--wave-up) 0 0/320px 100% repeat-x;mask:var(--wave-up) 0 0/320px 100% repeat-x;pointer-events:none;z-index:2}
.statement:after{background:var(--brand-brown)}
.manifesto{overflow:clip visible}
.marquee{overflow:clip visible;z-index:2}
.marquee:after{content:'';position:absolute;left:0;right:0;bottom:-17px;height:18px;background:inherit;-webkit-mask:var(--wave-down) 0 0/280px 100% repeat-x;mask:var(--wave-down) 0 0/280px 100% repeat-x;pointer-events:none}
.andino-story:before{-webkit-mask-size:360px 100%;mask-size:360px 100%}
.site-footer:before{background:#B8623A;-webkit-mask-size:300px 100%;mask-size:300px 100%}

/* Notas a mano. */
.hand-note{display:inline-block;font-family:var(--hand);font-weight:600;font-size:clamp(23px,2.1vw,31px);line-height:1;letter-spacing:0;text-transform:none;color:var(--brand-terracotta);transform:rotate(-4deg);transform-origin:left center}
.hand-note.on-dark{color:#F2C9A8}
.cinema-heading .hand-note{display:block;margin:-14px 0 30px 4px;color:#F6D9BF}
.section-head>p .hand-note,.artisan-intro .hand-note{display:block;margin-top:14px}
.teaser-kiln{position:relative}
.teaser-kiln .hand-note{position:absolute;left:30px;bottom:26px;z-index:3;color:#FCEBD9;font-size:clamp(26px,2.6vw,38px);text-shadow:0 2px 14px #3b14047a}

/* Sello de taller que gira despacio. */
.seal{position:absolute;width:clamp(96px,9vw,128px);aspect-ratio:1;z-index:3;pointer-events:none;color:var(--brand-terracotta)}
.seal svg{width:100%;height:100%;animation:sealSpin 40s linear infinite}
.seal text{fill:currentColor;font:600 8.6px Inter,Archivo,sans-serif;letter-spacing:2.1px}
.seal img{position:absolute;inset:31%;width:38%;height:38%;object-fit:contain}
.seal.on-dark{color:#F2C9A8}.seal.on-dark img{filter:brightness(0) invert(88%) sepia(18%) saturate(500%) hue-rotate(-12deg)}
.statement .seal{top:70px;right:clamp(20px,7vw,120px)}
.teaser-kiln .seal{top:28px;left:28px;right:auto;color:#FCEBD9}.teaser-kiln .seal img{filter:brightness(0) invert(95%)}
@keyframes sealSpin{to{transform:rotate(360deg)}}

/* Formas de alfarería: arcos en el taller y esquinas suaves en las piezas. */
.artisan-gallery video{border-radius:8px!important}
.tone-card{border-radius:6px}
.andino-story figure img{border-radius:8px}
.andino-story figcaption{text-align:center}

/* Fondos alternos para que las secciones claras no se vean iguales. */
.tone-explorer{background:var(--brand-paper)}
.artisan-closing{background:#F4EADF}
.collection{background:var(--brand-paper)}

/* Botones y enlaces con calidez de barro. */
.text-link{transition:gap .5s cubic-bezier(.2,.7,.2,1),color .3s}
.text-link:hover{gap:56px;color:var(--brand-terracotta)}
.statement .text-link:hover,.manifesto .text-link:hover{color:#F2C9A8}

@media(max-width:700px){
 .seal{width:78px}.statement .seal{top:14px;right:12px;width:68px}
 .hand-note{font-size:23px}
}
@media(prefers-reduced-motion:reduce){.seal svg{animation:none}.text-link{transition:none}}
.motion-paused .seal svg{animation-play-state:paused}
/* "Pausar movimiento" cierra el pie en el mismo terracota, como una línea más del pie. */
.site-footer+.motion-toggle,.motion-toggle{background:#B8623A!important;color:#FCEBD9!important;border-top:1px solid #fcfaf933!important;opacity:.95}
.motion-toggle:hover{color:#fff!important}
/* Botones del formulario de pedido con el café de la marca en lugar del oliva anterior. */
.craft-form button[type=submit]{background:var(--brand-brown)!important;transition:background .3s}
.craft-form button[type=submit]:hover{background:var(--brand-terracotta)!important}
/* Pocillos de cada colección: el trazo mide lo que la palabra y toma el color de su esmalte. */
.ritual-type em{position:relative;width:fit-content;margin-inline:auto;padding-bottom:0}
.ritual-type em:after{content:'';position:absolute;left:2%;right:2%;bottom:.02em;height:.09em;background:var(--ritual-brush,#C97141);opacity:.85;-webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat;pointer-events:none}
.ritual-scene[data-finish="arena"]{--ritual-brush:#C9925F}
.ritual-scene[data-finish="oceano"]{--ritual-brush:#2F6377}
.ritual-scene[data-finish="gris"]{--ritual-brush:#6E6C67}
/* Franja de Artesanías con la textura de la marca en lugar del patrón geométrico. */
.craft-zigzag{height:64px!important;background:linear-gradient(#663016c4,#663016c4),url('/assets/brand/texture.svg') center 31%/auto 420px repeat-x,var(--brand-brown)!important;border:0!important}
/* Inicio: fila de tarjetas con lo que sigue; la elegida crece hasta volverse el fondo. */
.hero-deck{position:absolute;z-index:5;left:66%;top:50%;transform:translateY(-30%);display:flex;gap:18px;overflow:visible}
.hero-card{flex:none;display:flex;flex-direction:column;gap:12px;width:clamp(150px,11.5vw,200px);padding:0;border:0;background:none;color:#FCF3E8;text-align:left;text-decoration:none;cursor:pointer;opacity:0;transform:translateX(60px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero-deck.is-dealt .hero-card{opacity:1;transform:none}
.hero-deck.is-dealt .hero-card:nth-child(2){transition-delay:.08s}.hero-deck.is-dealt .hero-card:nth-child(3){transition-delay:.16s}.hero-deck.is-dealt .hero-card:nth-child(4){transition-delay:.24s}
.hero-card:nth-child(n+3){opacity:.0}
.hero-deck.is-dealt .hero-card:nth-child(n+3){opacity:.78}
.hero-card-img{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:8px;box-shadow:0 22px 40px #1f0d0566;outline:1px solid #fcf3e833;outline-offset:-1px}
.hero-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-card:hover .hero-card-img img,.hero-card:focus-visible .hero-card-img img{transform:scale(1.08)}
.hero-card-text small{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.hero-card-text b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.35vw,22px);margin-top:4px;letter-spacing:-.01em}
.hero-card.is-leaving{opacity:0!important;transition:opacity .2s}
.hero-card:first-child .hero-card-img{outline:2px solid #F2C9A8;outline-offset:4px}
.hero-ghost{position:absolute;z-index:1;overflow:hidden;border-radius:8px;transition:left .95s cubic-bezier(.7,0,.2,1),top .95s cubic-bezier(.7,0,.2,1),width .95s cubic-bezier(.7,0,.2,1),height .95s cubic-bezier(.7,0,.2,1),border-radius .95s cubic-bezier(.7,0,.2,1),opacity .7s ease;pointer-events:none}
.hero-ghost.is-full{border-radius:0}
.hero-ghost.is-out{opacity:0}
.hero-ghost img{width:100%;height:100%;object-fit:cover}
.cinema-shade{z-index:2}.cinema-heading,.cinema-bottom{z-index:6}
#hero-title .line{transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),filter .4s}
#hero-title.is-swapping .line{opacity:0!important;transform:translateY(-22px)!important;filter:blur(6px)}
#hero-title.is-swapping .line+.line{transition-delay:.06s}
@media(max-width:1100px){.hero-deck{left:64%}}
@media(max-width:900px){.hero-deck{display:none}}
@media(prefers-reduced-motion:reduce){.hero-card,.hero-ghost,#hero-title .line{transition:none}}
.hero.cinema{overflow:hidden}
.hero-ghost.is-flip img{transform:scaleX(-1)}
.hero-ghost.is-cover{transition:opacity .7s ease}