/* The Golden Tag · hoja única · móvil primero (90 % del tráfico es teléfono) */
@font-face{font-family:"Unbounded";src:url(../fonts/Unbounded-var.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/CormorantGaramond-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
/* letras del láser: solo se usan dentro del grabado */
@font-face{font-family:"Allura";src:url(../fonts/Allura-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Dancing Script";src:url(../fonts/DancingScript-var.woff2) format("woff2");font-weight:400 700;font-display:swap} /* ≈ Monotype Corsiva, solo para el nombre en corte (Karly 28-oct 13:11) */
@font-face{font-family:"Libre Baskerville";src:url(../fonts/LibreBaskerville-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/Montserrat-var.woff2) format("woff2");font-weight:100 900;font-display:swap} /* taste-skill-ignore: letra del láser, solo dentro del grabado */

:root{
  /* papel, tinta y el oro: una impresión a dos tintas más el acento */
  --bg:#F4EFE4; --surface:#E9E2D2; --ink:#1C1A17; --muted:#5A5347;
  --accent:#C9A24F; --accent-ink:#1C1A17;
  --field-dark:#1C1A17; --field-dark-ink:#F4EFE4; --field-dark-muted:#CFC6B4;
  --field-red:#B8302A; --field-red-ink:#F6EBDD;
  --steel:#D9D4C8; --steel-ink:#3A362F;
  --ok:#3D6B47; --warn:#8A5A12; --bad:#B8302A;
  --font-display:"Unbounded","Helvetica Neue",Arial,sans-serif;
  --font-text:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --step-small:clamp(1rem,0.97rem + 0.15vw,1.0625rem);  /* 16–17: Cormorant se lee chica en el teléfono */
  --step-body:clamp(1.1875rem,1.1rem + 0.35vw,1.3125rem);   /* 19–21: Cormorant pide cuerpo */
  --step-lead:clamp(1.45rem,1.25rem + 0.9vw,2rem);           /* 23–32 */
  --step-head:clamp(2rem,1.3rem + 3.4vw,3.75rem);           /* 32–60 */
  --step-display:clamp(2.5rem,1.2rem + 7vw,7rem);           /* 40–112 */
  --margin:clamp(1rem,2.2vw,2rem); --gutter:clamp(0.75rem,1.4vw,1.5rem);
  --gap-section:clamp(3.5rem,3vw + 2rem,9rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--step-body);line-height:1.5;font-kerning:normal;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1;letter-spacing:-0.025em;margin:0;text-wrap:balance;hyphens:none}
h2{font-size:var(--step-head);max-width:16ch}
h3{font-size:var(--step-lead);font-weight:500;line-height:1.1;letter-spacing:-0.01em}
p{margin:0;max-width:62ch;text-wrap:pretty}
p+p{margin-top:.9em}
.lead{font-size:var(--step-lead);line-height:1.3;max-width:34ch}
.small{font-size:var(--step-small);line-height:1.45}
.muted{color:var(--muted)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.07em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* botón: una sola forma en toda la página, rectangular, plano */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;padding:0 1.5rem;background:var(--ink);color:var(--bg);font-family:var(--font-display);font-weight:500;font-size:1rem;letter-spacing:0;text-decoration:none;transition:background .18s var(--ease-out),transform .18s var(--ease-out)}
.btn:hover{background:#000}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--accent);color:var(--accent-ink)}
.btn.gold:hover{background:#B8923F}
.btn.paper{background:var(--surface);color:var(--ink)}
.btn.paper:hover{background:#fff}
.link{font-family:var(--font-display);font-size:.875rem;text-decoration:underline;text-underline-offset:.22em}

/* barra: marca, tres enlaces, una acción */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;padding-block:.5rem;background:var(--bg)}
.bar .mark{font-family:var(--font-display);font-weight:600;font-size:1rem;text-decoration:none;letter-spacing:-0.02em}
.bar nav{display:none;gap:1.15rem;font-family:var(--font-display);font-size:.875rem}
.bar nav a{text-decoration:none;white-space:nowrap}
.bar nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.bar .btn{display:none;min-height:44px;padding-inline:1.1rem;font-size:.9rem}
.bar .menu{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:.875rem;padding-inline:.5rem}
.bar.over{background:transparent;color:var(--bg);position:absolute;left:0;right:0}
.bar.over .btn{background:var(--bg);color:var(--ink)}
.sheetnav{display:none}
.sheetnav.open{display:grid;position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--bg);padding:var(--margin) var(--margin) 3rem;align-content:start;gap:.5rem;font-family:var(--font-display);font-size:1.3rem;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 28-oct 12:25: con 13 enlaces se cortaba abajo */
.sheetnav a{text-decoration:none;padding:.5rem 0}
.sheetnav .close{justify-self:end;font-size:1rem;min-height:44px}
@media (min-width:1400px){.bar nav{display:flex}.bar .menu{display:none}.bar .btn{display:inline-flex}} /* Karly 28-oct 16:37: + «¿No sabes qué grabar?» y «Pulseras permanentes» arriba; con 8 enlaces el menú solo cabe sin partirse desde 1400 px */

/* ---------- primera pantalla: la plaquita sobre la foto ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:calc(60px + var(--margin)) var(--margin) var(--margin);isolation:isolate}
.hero .room{position:absolute;inset:0;z-index:-1;overflow:hidden;background-color:#4A4744;
  /* concreto hecho por código (Karly 27-oct 11:05): base concreto de marca, manchas grandes y poro fino; sin foto detrás de la plaquita */
  background-image:
    radial-gradient(120% 80% at 15% 10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(90% 70% at 85% 90%, rgba(0,0,0,.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .49 0 0 0 0 .47 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .54 0 0 0 0 .52 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:auto,auto,600px 600px,240px 240px}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.08) translate(-1.2%,-1%)}}
.plate{position:relative;width:min(100%,920px);background:var(--bg);color:var(--ink);padding:2.1rem 1.1rem 1.1rem;display:grid;gap:.9rem;grid-template-areas:"title" "lead" "live" "foot" "copy";
  /* el huequito del tag, troquelado en el borde superior */
  -webkit-mask:radial-gradient(circle 11px at 50% 18px,transparent 98%,#000 100%);mask:radial-gradient(circle 11px at 50% 18px,transparent 98%,#000 100%)} /* taste-skill-ignore: es una máscara (troquel), no un relleno */
.plate h1{grid-area:title;display:flex;justify-content:space-between;font-size:clamp(1.9rem,1.2rem + 3.2vw,3.4rem);font-weight:600;letter-spacing:-0.02em;padding-top:.4rem}
.plate .lead{grid-area:lead}.plate .engrave{grid-area:live}.plate .copy{grid-area:copy;display:grid;gap:.6rem}.plate .foot{grid-area:foot}
.plate .lead{font-size:clamp(1.25rem,1.1rem + 1vw,1.75rem);max-width:none;line-height:1.2}
.plate .facts{display:grid;gap:.15rem;font-size:var(--step-body);line-height:1.3}
.plate .foot{display:grid;gap:.75rem;padding-top:.1rem}
.plate .foot .btn{width:100%}
.plate .foot .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--step-small)}
@media (min-width:720px){
  .plate{padding:2.25rem 2rem 1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"title title" "lead lead" "ctrl live" "copy live" "foot foot";column-gap:2rem;row-gap:1rem}
  .plate .engrave{display:contents}
  .plate .engrave .controls{grid-area:ctrl;align-content:start}
  .plate .engrave .preview{grid-area:live;display:grid;gap:.5rem;grid-template-rows:minmax(300px,1fr) auto}
  .plate .engrave .tag{min-height:300px}
  .plate .copy{align-content:end}
  .plate .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .plate .foot .btn{width:auto;grid-column:2}
  .plate .foot .row{display:contents}
  .plate .foot .row .credit{grid-column:1;grid-row:1}
  .plate .foot .row .link{grid-column:3;grid-row:1;justify-self:end}
}

/* el grabado en vivo (la cosa viva) */
.engrave{display:grid;gap:.75rem}
.engrave .preview{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
.engrave .tag{background:transparent;color:var(--ink);display:grid;align-items:center;justify-items:center;padding:0;min-width:0}

.engrave svg{width:auto;height:250px;max-width:100%;justify-self:center}
@media (max-width:719px){.engrave .controls{order:-1}.engrave{gap:.5rem}} /* teléfono: la palabra arriba y el Tag debajo, así se ven los dos con el teclado abierto */
@media (min-width:720px){.engrave svg{height:440px}}
.engrave svg .metal{fill:#CBC6BA}
.engrave svg .edge{fill:#B9B3A6}
.engrave svg text{fill:#3A362F}
.engrave .controls{display:grid;gap:.6rem}
.engrave label{display:grid;gap:.3rem;font-size:var(--step-small);color:var(--muted)}
.engrave input[type=text]{font:inherit;font-size:var(--step-lead);line-height:1.2;color:var(--ink);background:var(--surface);border:0;padding:.55rem .8rem;width:100%;min-height:52px}
.engrave input[type=text]::placeholder{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{flex:0 0 auto;min-height:44px;padding:0 .85rem;background:var(--surface);color:var(--ink);font-size:1rem;transition:background .15s var(--ease-out)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.chip.face{font-size:1.15rem;line-height:1}
.fit{font-size:var(--step-small);color:var(--muted);min-height:1.4em}
.fit.bad{color:var(--field-red)}

/* ---------- secciones ---------- */
.section{padding-block:var(--gap-section)}
.section+.section:not(.dark):not(.red):not(.steelbg){padding-top:2.5rem}
.section>.wrap>h2,.section h2.top{margin-bottom:clamp(1.5rem,3vw,3rem)}

/* showcase: foto cuadrada + columna (split) */
.show{display:grid;gap:1.5rem}
.show .photo img{aspect-ratio:1;object-fit:cover;width:100%}
.show .col{display:grid;gap:1.25rem;align-content:start}
.show .tabs{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-family:var(--font-display);font-size:1rem}
.show .tabs button{min-height:44px;color:var(--muted)}
.show .tabs button[aria-selected=true]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:.12em}
.show .cells{display:grid;gap:.5rem}
.show .cells a{display:grid;align-content:center;min-height:64px;padding:.6rem 1rem;font-family:var(--font-display);font-size:1rem;text-decoration:none;background:var(--ink);color:var(--bg)}
.show .cells a.alt{background:var(--surface);color:var(--ink)}
.show .cells a span{display:block;font-family:var(--font-text);font-size:var(--step-small);font-weight:400;margin-top:.15rem;opacity:.9}
@media (min-width:900px){
  .show{grid-template-columns:1fr 1fr;gap:var(--gutter);min-height:88svh;align-items:stretch}
  .show .photo{padding:40px}
  .show .col{align-content:space-between;gap:2rem}
  .show .cells{grid-template-columns:1fr 1fr}
  .show .cells a{min-height:72px}
}

/* gallery: foto + franja de etiqueta (el swing tag) */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{display:grid;text-decoration:none}
.tile img{aspect-ratio:4/5;object-fit:cover;width:100%}
.tile img[src*='/fb/']{object-fit:contain;background:#fff;padding:8%}
.tile .strip{padding:10px 12px;min-height:84px;display:grid;gap:.2rem;font-size:var(--step-small);line-height:1.3}
.tile .strip .r1{display:grid;grid-template-columns:1fr auto;gap:.5rem;font-family:var(--font-display);font-size:.875rem}
.tile .strip .r2{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.tile.a .strip{background:var(--ink);color:var(--bg)}
.tile.b .strip{background:var(--accent);color:var(--accent-ink)}
.tile.c .strip{background:var(--surface);color:var(--ink)}
.tile.d .strip{background:var(--field-red);color:var(--field-red-ink)}
.tile:hover img{opacity:.92}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;row-gap:28px}}

/* how-it-works: el recibo sobre fondo oscuro */
.dark{background:var(--field-dark);color:var(--field-dark-ink)}
.dark .muted{color:var(--field-dark-muted)}
.slipwrap{display:grid;gap:2rem}
.slip{background:var(--bg);color:var(--ink);width:100%;max-width:480px;padding:1.5rem 1.25rem 2.5rem;justify-self:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),97.5% 100%,95% calc(100% - 12px),92.5% 100%,90% calc(100% - 12px),87.5% 100%,85% calc(100% - 12px),82.5% 100%,80% calc(100% - 12px),77.5% 100%,75% calc(100% - 12px),72.5% 100%,70% calc(100% - 12px),67.5% 100%,65% calc(100% - 12px),62.5% 100%,60% calc(100% - 12px),57.5% 100%,55% calc(100% - 12px),52.5% 100%,50% calc(100% - 12px),47.5% 100%,45% calc(100% - 12px),42.5% 100%,40% calc(100% - 12px),37.5% 100%,35% calc(100% - 12px),32.5% 100%,30% calc(100% - 12px),27.5% 100%,25% calc(100% - 12px),22.5% 100%,20% calc(100% - 12px),17.5% 100%,15% calc(100% - 12px),12.5% 100%,10% calc(100% - 12px),7.5% 100%,5% calc(100% - 12px),2.5% 100%,0 calc(100% - 12px))}
.slip h3{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-top:1.6rem;margin-bottom:.4rem}
.slip h3:first-of-type{margin-top:0}
.slip .row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.6rem;padding:.3rem 0}
.slip .row .what{position:relative}
.slip .row .who{white-space:nowrap}
.slip .row+.row{margin-top:.1rem}
.slip .total{display:flex;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--bg);padding:.7rem 1rem;margin:1.5rem -1.25rem 0;font-family:var(--font-display);font-size:.875rem;min-height:44px;align-items:center}
.slip .head{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:.875rem;margin-bottom:1rem}
@media (min-width:900px){
  .slipwrap{grid-template-columns:5fr 1fr 5fr;align-items:start}
  .slipwrap .text{grid-column:1}
  .slipwrap .slip{grid-column:3;justify-self:start;padding:2rem 2rem 3rem}
  .slip .total{margin-inline:-2rem}
}

/* list: la hoja de precios */
.sheet{background:var(--bg);color:var(--ink);width:100%;max-width:640px;margin-inline:auto;padding:2.5rem 1.4rem 2.75rem;text-align:center;
  -webkit-mask:radial-gradient(circle 10px at 10px 0,transparent 9.5px,#000 10px) 0 0/20px 20px repeat-x,radial-gradient(circle 10px at 10px 100%,transparent 9.5px,#000 10px) 0 100%/20px 20px repeat-x,linear-gradient(#000,#000) 0 20px/100% calc(100% - 40px) no-repeat; /* taste-skill-ignore: es una máscara (troquel), no un relleno */
  mask:radial-gradient(circle 10px at 10px 0,transparent 9.5px,#000 10px) 0 0/20px 20px repeat-x,radial-gradient(circle 10px at 10px 100%,transparent 9.5px,#000 10px) 0 100%/20px 20px repeat-x,linear-gradient(#000,#000) 0 20px/100% calc(100% - 40px) no-repeat} /* taste-skill-ignore: es una máscara (troquel), no un relleno */
.sheet h3.title{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);letter-spacing:-0.02em}
.sheet .note{margin:.5rem auto 0;max-width:38ch}
.sheet .group{margin-top:2.75rem}
.sheet .group h4{font-family:var(--font-display);font-weight:500;font-size:1rem;margin:0 0 1rem}
.sheet .item{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;text-align:left;max-width:420px;margin:0 auto .9rem;align-items:baseline}
.sheet .item .d{grid-column:1/-1;font-size:var(--step-small);color:var(--muted);line-height:1.35}
.sheet .hours{margin-top:2.5rem;line-height:1.4}
.steelbg{background:var(--surface)}
@media (min-width:900px){.sheet{padding:4rem 3rem;max-width:1040px}.sheet .groups{columns:2;column-gap:4rem}.sheet .group{break-inside:avoid;margin-top:0;margin-bottom:2.75rem}.sheet .item{max-width:none}}

/* meses */
.months{display:grid;gap:1.5rem}
.months .photo img{aspect-ratio:4/5;object-fit:cover;width:100%}
.monthlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.monthlist button{display:grid;gap:.4rem;justify-items:start;padding:.7rem .75rem;min-height:72px;background:var(--surface);text-align:left;font-family:var(--font-display);font-size:.875rem;transition:background .15s var(--ease-out)}
.monthlist button i{display:block;width:22px;height:22px;border-radius:50%;background:var(--c)}
.monthlist button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.monthpick{display:grid;gap:.5rem;align-content:start}
.monthpick .out{font-size:var(--step-lead);line-height:1.25;min-height:2.6em;max-width:none}
.monthpick .out .pr{display:block;font-size:.9rem;opacity:.8;margin-top:.25rem}
@media (min-width:900px){.months{grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:center}.monthlist{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* regalar: campo rojo */
.red{background:var(--field-red);color:var(--field-red-ink)}
.gifts{display:grid;gap:1.5rem}
.gift{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;text-decoration:none;color:inherit}
.gift img{aspect-ratio:1;object-fit:cover;width:96px}
.gift b{font-family:var(--font-display);font-weight:500;font-size:1rem;display:block;margin-bottom:.2rem}
.gift span{line-height:1.35;display:block}
@media (min-width:900px){.gifts{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--gutter)}.gift{grid-template-columns:160px 1fr}.gift img{width:160px}}

/* faq: fichas apiladas con pestaña */
.cards{display:grid;gap:0;max-width:880px;margin-inline:auto}
.card{position:relative;margin-top:-12px;padding:1.75rem 1.25rem 1.5rem;background:var(--surface);color:var(--ink)}
.card:first-child{margin-top:0}
.card+.card{padding-top:2.25rem}
.card:nth-child(odd){background:var(--steel)}
.card:nth-child(3n){background:var(--accent);color:var(--accent-ink)}
.card .tab{display:none}
.card summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:var(--step-lead);line-height:1.15;min-height:44px;display:flex;align-items:center}
.card summary::-webkit-details-marker{display:none}
.card details[open] summary{margin-bottom:.75rem}
.card p{max-width:50ch}
@media (min-width:900px){.card{padding:2.25rem 2.5rem 2rem;margin-top:-16px}}

/* cupón de pedido */
.coupon{position:relative;background:var(--accent);color:var(--accent-ink);padding:1.5rem 1rem;display:grid;gap:1.25rem}
.coupon::before,.coupon::after{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:var(--bg);top:calc(46% - 14px);left:-14px}
.coupon::after{left:auto;right:-14px} /* taste-skill-ignore: es una máscara (troquel), no un relleno */
.coupon .perf{border-top:5px dotted var(--bg);margin-inline:14px}
.coupon h3{font-size:clamp(1.5rem,1.2rem + 2vw,2.6rem);font-weight:600;letter-spacing:-0.02em;max-width:14ch}
.coupon form{display:grid;gap:10px}
.coupon input,.coupon textarea,.coupon select{font:inherit;color:var(--ink);background:#E3C676;border:0;min-height:54px;padding:.6rem .9rem;width:100%}
.coupon textarea{min-height:96px;resize:vertical}
.coupon ::placeholder{color:#5A4A1F}
.coupon .btn{width:100%;min-height:58px}
@media (min-width:900px){
  .coupon{grid-template-columns:46fr 5px 54fr;gap:0;padding:0;min-height:420px}
  .coupon::before{top:-14px;left:calc(46% - 14px)}.coupon::after{top:auto;bottom:-14px;left:calc(46% - 14px);right:auto} /* taste-skill-ignore: es una máscara (troquel), no un relleno */
  .coupon .left{padding:48px;display:grid;align-content:space-between}
  .coupon .perf{border-top:0;border-left:5px dotted var(--bg);margin:14px 0}
  .coupon form{padding:48px;align-content:center}
}

/* pie: el reverso de la plaquita */
footer.back{background:var(--field-dark);color:var(--field-dark-ink);padding:var(--gap-section) 0 2rem}
footer .name{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,9.5vw,9rem);letter-spacing:-0.04em;line-height:.95;white-space:nowrap;overflow:hidden}
footer .cols{display:grid;gap:1.5rem;margin-top:2rem}
footer .cols a{text-decoration:none}
footer .cols a:hover{text-decoration:underline}
footer .cols p{line-height:1.4}
@media (min-width:900px){footer .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}}

/* movimiento: entradas por sección, sin esconder nada si falla el script */
.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .in{opacity:0;transform:translateY(20px);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out);transition-delay:var(--d,0ms)}
  .js .in.on{opacity:1;transform:none}
}

/* volver: siempre visible arriba de cada página interna */
.backrow{margin:0 0 .75rem}
.volver{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem 0 0;font-family:var(--font-display);font-size:.875rem;text-decoration:none}
.volver::before{content:"";width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:.6rem}
.volver:hover{text-decoration:underline;text-underline-offset:.25em}

/* símbolos en la portada */
.symbank{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.symbank figure{margin:0;background:var(--surface);aspect-ratio:1;display:grid;place-items:center;padding:10px}
.symbank img{max-width:100%;max-height:100%;object-fit:contain}
.ejemplos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2rem}
.ejemplos figure{margin:0}
.ejemplos img{aspect-ratio:1;object-fit:cover;width:100%}
.ejemplos figcaption{font-size:var(--step-small);color:var(--muted);line-height:1.3;margin-top:.4rem}
@media (min-width:900px){.symbank{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.ejemplos{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}

/* v11: regalar grande, justo después del hero */
.bigift{padding-top:3rem}
.bigift h2.xl{font-size:clamp(2.2rem,8vw,4.2rem);line-height:.95;margin-bottom:1.6rem}
.bigift .gift{grid-template-columns:120px 1fr;gap:1.1rem}
.bigift .gift img{width:120px;object-fit:contain;background:transparent}
.bigift .gift b{font-size:1.25rem}
.bigift .gift span{font-size:1rem}
@media (min-width:900px){.bigift .gift{grid-template-columns:200px 1fr}.bigift .gift img{width:200px}.bigift .gift b{font-size:1.5rem}}
/* tienda por categorías */
.tiles.cats{display:block}
.tiles.cats > .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:2rem}
@media (min-width:900px){.tiles.cats > .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;row-gap:28px}}
.tcat.basics{margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--steel)}
.tcat-h p{margin:0;max-width:40ch}
.tcat{margin-bottom:2.5rem}
.tcat-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.tcat-h h2{font-family:var(--font-display);font-weight:500;font-size:1.6rem;margin:0}
.tcat-h .chip{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:500} /* 28-oct 10:53: «Ver las 27» casi no se veía */
.tcat .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:900px){.tcat .tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}

/* material y calidad (27-oct) */
.quality .qlead{max-width:44ch;font-size:var(--step-lead);line-height:1.35;margin:0 0 1.5rem}
.quality .layers{margin:0 0 2rem;background:#fff;padding:1rem .75rem}
.quality .layers svg{width:100%;height:auto;display:block}






.quality .qgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.quality .q{background:var(--surface);padding:1.1rem 1.1rem 1.25rem}
.quality .q h3{font-size:1.1rem;margin-bottom:.4rem}
.quality .q p{margin:0}
.quality .qh{font-family:var(--font-display);font-size:26px;font-weight:600;fill:var(--ink)}
.quality .qn{font-family:var(--font-text);font-size:25px;font-weight:600;fill:#6B5320}
.quality .qin{font-family:var(--font-text);font-size:32px;fill:#2E2B26}
.quality .layers figcaption{font-size:var(--step-small);color:var(--muted);margin-top:.5rem}
.quality .layers{padding:1rem}
/* página de producto: la foto va arriba */
@media (max-width:899px){[data-view=personalizar].pieza .conf .preview{order:-1}}

/* compra por categoría (27-oct) */
.catgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:900px){.catgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.catcard{position:relative;display:block;text-decoration:none;color:var(--bg);background:var(--ink);overflow:hidden}
.catcard img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .4s var(--ease-out,ease)}
.catcard:hover img{transform:scale(1.03)}
.catcard .catname{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:28px 12px 12px;background:linear-gradient(transparent,rgba(20,18,15,.82))}
.catcard .catname b{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.catcard .catname small{font-size:var(--step-small);opacity:.9}
.catcard.arma{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:96px;padding:18px 16px;background:var(--ink)}
.catcard.arma .catname{position:static;background:none;padding:0}
.catcard.arma .arrow{font-family:var(--font-display);font-size:1.6rem}
@media (min-width:900px){.catcard.arma{grid-column:span 2;grid-row:span 1}}
.plate .foot .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plate .foot .btns .btn{width:100%;padding:0 .75rem}
@media (min-width:720px){.plate .foot .btns{grid-column:2;grid-row:1;display:flex;gap:8px}.plate .foot .btns .btn{width:auto;padding:0 1.5rem}}

/* v23 (Karly 27-oct 13:56): en el hero «Tu palabra» se veía muy pequeño y no se entendía que ahí se escribe */
.engrave label.wordlabel{gap:.35rem;color:var(--ink)}
.engrave .wordlabel .ttl{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + .8vw,1.5rem);font-weight:600;line-height:1.2}
.engrave .wordlabel .sub{font-size:var(--step-small);color:var(--muted)}
.engrave .wordlabel input[type=text]{background:#fff;border:2px solid var(--ink);font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);min-height:60px;padding:.6rem .9rem}
.engrave .wordlabel input[type=text]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- v23: páginas Calidad, Preguntas frecuentes, ¿Cuál es mi talla? y banner de envíos ---------- */
.shipbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;background:var(--ink);color:var(--bg);padding:1rem 1.25rem;margin:1.25rem 0}
.shipbar b{font-family:var(--font-display);font-weight:600}
.shipbar .carriers{display:flex;gap:.5rem}
.shipbar .carriers span{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;background:var(--bg);color:var(--ink);padding:.2rem .7rem}
.shipbar>span:last-child{font-size:var(--step-small);opacity:.9}
.faqsearch{display:grid;gap:.35rem;max-width:880px;margin:0 auto 1.5rem;font-family:var(--font-display);font-weight:500}
.faqsearch input{font:inherit;font-family:var(--font-text);font-size:1.15rem;padding:.7rem .9rem;border:2px solid var(--ink);background:#fff;min-height:52px;width:100%}
.faqcards .card ul.pays{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.4rem}
.faqcards .card ul.pays li{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline;border-bottom:1px solid var(--steel);padding-bottom:.4rem}
.faqcards .card ul.pays b{font-family:var(--font-display);font-weight:600;min-width:9ch}
.faqcards .card ul.pays span{color:var(--muted);font-size:var(--step-small)}
.faqnone{text-align:center;margin-top:1rem}
.resenas{margin-top:3rem}
.resgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:1.25rem}
.res{margin:0;background:var(--surface);padding:1rem;display:grid;gap:.6rem}
.res img{width:100%;aspect-ratio:1;object-fit:cover}
.res blockquote{margin:0;font-size:1.05rem;line-height:1.5}
.res figcaption{font-size:var(--step-small);color:var(--muted)}
.resask{margin-top:2rem;max-width:52ch}
[data-calidad-clone] .quality{padding-block:1.5rem 0}
.tallatabs{margin:1rem 0 1.5rem}
.tsec h2{font-size:var(--step-lead);margin:0 0 .75rem}
.tsec h3{font-family:var(--font-display);font-size:1.1rem;margin:1.5rem 0 .4rem}
.tsec .lead{max-width:52ch}
.sizer{background:var(--surface);padding:1rem 1.25rem 1.25rem;margin-top:1rem;max-width:720px}
.sizer input[type=range]{width:100%;min-height:44px;accent-color:var(--ink)}
.cardbox,.ringbox{display:flex;justify-content:center;align-items:center;padding:.75rem 0;overflow:hidden}
.cardrect{border:2px dashed var(--ink);border-radius:3mm;background:rgba(201,162,79,.18);display:grid;place-items:center;max-width:100%}
.cardrect span{font-size:var(--step-small);color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.ringbox{min-height:180px}
.ringcircle{border-radius:50%;border:2px solid var(--field-red);background:radial-gradient(circle,rgba(184,48,42,.08),rgba(184,48,42,.02))}
.sizeout{font-size:1.1rem;margin-top:.5rem}
.howto{max-width:720px;margin-top:1.5rem}
.steps3 svg,.wristfig svg{width:100%;height:auto;max-width:640px;display:block}
.neckfig svg{width:100%;height:auto;max-width:760px;display:block;margin-inline:auto;background:#fff}
.tablewrap{overflow-x:auto;margin-top:1.25rem;max-width:720px}
.sizetable{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.sizetable caption{text-align:left;font-family:var(--font-display);font-weight:500;padding-bottom:.5rem}
.sizetable th,.sizetable td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--steel)}
.sizetable th{font-family:var(--font-display);font-weight:500;font-size:var(--step-small)}

/* regla en pantalla para el hilito (27-oct) */
.ruler{background:var(--surface);padding:1rem 1.25rem 1.25rem;margin-top:1rem;max-width:720px}
.ruler h3{margin-top:0}
.rulerwrap{display:flex;justify-content:center;padding:.5rem 0}
.rulerwrap svg{display:block}
.ruler input[type=range]{width:100%;min-height:44px;accent-color:var(--ink)}
/* tarjetas en teléfono (28-oct): nombre arriba y precio debajo, sin partir el nombre en tres renglones */
@media (max-width:560px){
  .tile .strip .r1{grid-template-columns:1fr;gap:.1rem}
  .tile .strip .r1 .num{font-size:1rem}
  .tile .strip .r2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 .5rem}
}
/* enlace «Mi pedido (n)» en la barra (28-oct) */
.bar .cartlink{font-family:var(--font-display);font-size:.9rem;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.4rem;margin-right:.5rem}
.bar .cartlink b{background:var(--accent);color:var(--accent-ink);border-radius:999px;min-width:1.5em;height:1.5em;display:inline-grid;place-items:center;font-size:.8rem;padding:0 .35em}
.sheetnav [data-cartn]{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:.05em .5em;font-size:.8em;margin-left:.3em}
#cartToast{display:block;margin-top:.5rem;min-height:1.2em}
/* «Así se lo han llevado» (28-oct): carrusel con desplazamiento lateral */
.llevado .tcat-h{display:grid;gap:.25rem;margin-bottom:1rem}
.llevado .tcat-h p{margin:0}
.llevado.tight{padding-block:1.5rem}
.lcar{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lcar figure{flex:0 0 78%;max-width:340px;scroll-snap-align:start;margin:0;background:#fff}
.lcar img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.lcar figcaption{padding:.5rem .6rem .7rem;font-size:var(--step-small);color:var(--muted)}
@media (min-width:700px){.lcar figure{flex-basis:300px}}

/* 28-oct 11:43 (Karly): botones dobles, permanentes, fotograbados, inspo, «También hacemos» */
.acts2{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}
.acts2 .btn{flex:1 1 220px}
.steps3{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:10px}
.steps3 li{background:var(--surface);padding:1.1rem 1.1rem 1.25rem;display:grid;gap:.3rem}
.steps3 b{font-family:var(--font-display);font-weight:500;font-size:1.1rem}
.steps3 span{line-height:1.45}
.permvideo{margin:2.5rem 0 0}
.permvideo video{width:100%;max-height:70vh;background:#000;display:block}
.permvideo figcaption{font-size:var(--step-small);color:var(--muted);margin-top:.5rem}
.fotosteps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:12px}
.fotosteps li{display:grid;gap:.35rem;background:var(--surface);padding:12px 12px 16px}
.fotosteps img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#fff;margin-bottom:.4rem}
.fotosteps b{font-family:var(--font-display);font-weight:500;font-size:1.1rem}
.fotosteps span{line-height:1.45}
.inspnav{display:flex;flex-wrap:wrap;gap:8px;margin:1.5rem 0 0}
.inspnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 .9rem;border:1px solid var(--line,#ddd);text-decoration:none;color:inherit;font-size:var(--step-small);background:var(--surface)}
.insp{margin-top:3rem}
.insp h2{font-family:var(--font-display);font-weight:500;font-size:1.6rem;margin:0 0 .25rem}
.insp>p{margin:0 0 1rem;max-width:44ch}
.inspgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inspgrid a{display:block;background:#fff}
.inspgrid a.wide{grid-column:1/-1}
.inspgrid img{width:100%;height:auto;display:block}
.inspcta{margin:1rem 0 0}
.masgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mascard{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--bg);background:var(--ink);overflow:hidden}
.mascard img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#fff;transition:opacity .3s}
.mascard:hover img{opacity:.92}
.mascard .t{display:grid;gap:2px;align-content:start;padding:10px 12px 14px;min-height:84px}
.mascard .t b{font-family:var(--font-display);font-size:1.05rem;font-weight:600;overflow-wrap:anywhere}
.mascard .t small{font-size:var(--step-small);opacity:.9;line-height:1.35}
.mascard:first-child{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:96px;padding:18px 16px;background:var(--field-red);color:var(--field-red-ink)}
.mascard:first-child .t{position:static;background:none;padding:0}
.mascard:first-child .arrow{font-family:var(--font-display);font-size:1.6rem}
@media (min-width:720px){.steps3{grid-template-columns:repeat(3,1fr)}.fotosteps{grid-template-columns:repeat(3,1fr)}.inspgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.inspgrid a.wide{grid-column:span 2}.masgrid{grid-template-columns:1.2fr 1fr 1fr}.mascard:first-child{grid-column:auto}}
#precios .acts2 .btn.paper{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
/* 28-oct 12:08 (Karly): la String en «¿No sabes qué regalar?» salía cortada (object-fit cover) y sin el borde blanco estilo revista */
.gift img.sticker{object-fit:contain;padding:4px;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.4px 1.4px 0 #fff) drop-shadow(-1.4px -1.4px 0 #fff) drop-shadow(1.4px -1.4px 0 #fff) drop-shadow(-1.4px 1.4px 0 #fff)}

/* 28-oct 12:17 (Karly): inspo con previa en vivo (Round 25 + Mini 25); tarjeta de portada sin lámina; «Fotograbados» no se corta */
.mascard.words .sample{display:grid;place-content:center;gap:.1rem;aspect-ratio:1;background:#fff;color:var(--ink);font-family:'Allura',cursive;font-size:1.9rem;line-height:1.1;text-align:center;padding:12px}
.mascard.words .sample i{font-style:normal}
.mascard.words .sample i:nth-child(2){font-family:'Montserrat',sans-serif;font-size:1.1rem;letter-spacing:.08em}
.mascard.words .sample i:nth-child(4){font-family:'Libre Baskerville',serif;font-size:1.1rem}
.inspolab{display:grid;gap:1rem;background:var(--surface);padding:14px 12px 16px}
.lab-tags{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;align-items:end}
.lab-tag{margin:0;background:#fff;padding:10px 8px 6px;display:grid;gap:4px;justify-items:center}
.lab-tag svg{width:100%;height:auto;display:block;max-height:46vh}
.lab-tag figcaption{font-size:var(--step-small);color:var(--muted)}
.lab-ctrl{display:grid;gap:.6rem}
.lab-ctrl .field{display:grid;gap:4px}
.lab-ctrl .lbl{font-size:var(--step-small);color:var(--muted)}
.lab-ctrl input{min-height:48px;padding:0 .75rem;font:inherit;font-size:1.1rem;border:1px solid var(--line,#ddd);background:#fff;color:var(--ink);width:100%}
.lab-ctrl .acts2{margin-top:.5rem}
.ideas{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.ideas button{min-height:44px;padding:0 .9rem;background:var(--surface);color:var(--ink);border:0;font:inherit;font-size:1rem;cursor:pointer}
.ideas button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.ideas button.glyph{font-size:1.35rem;min-width:44px}
.dibujos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dibujos figure{margin:0;background:#fff;padding:8px;display:grid;gap:6px}
.dibujos img{width:100%;height:auto;display:block}
.dibujos figcaption{font-size:var(--step-small);color:var(--muted);line-height:1.3}
@media (min-width:720px){.inspolab{grid-template-columns:1.2fr 1fr;align-items:start}.lab-tag svg{max-height:360px}.dibujos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.inspolab .btn.paper{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ideas button.glyph{font-family:'Libre Baskerville','DejaVu Sans',serif;font-variant-emoji:text}
/* inspo v41.4: dibujos recortados de las láminas de Karly (atlas img/inspo/<sec>.webp + data/inspo.json) */
.lab-pick{display:flex;align-items:center;gap:.6rem;font-size:var(--step-small)}
.lab-pick .lbl{color:var(--muted)}
.lab-pick button{margin-left:auto;background:none;border:0;font:inherit;font-size:var(--step-small);text-decoration:underline;color:var(--ink);cursor:pointer;min-height:32px}
.draws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:.75rem}
.draws button{display:grid;gap:4px;justify-items:center;background:#fff;border:2px solid transparent;padding:8px 4px 6px;font:inherit;font-size:.78rem;line-height:1.15;color:var(--ink);cursor:pointer;text-align:center}
.draws button[aria-pressed=true]{border-color:var(--ink)}
.draws .dw{width:100%;aspect-ratio:1;display:block}
.draws span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ideas{margin-top:.6rem}
@media (min-width:720px){.draws{grid-template-columns:repeat(6,minmax(0,1fr))}}