/* Rocío Morales — membrete, lista de tareas, carpetas, tique, carta, cupón y postal */

@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-display-latin-wght-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --mint:#CEE7D2;          /* fondo del logo */
  --mint-2:#BFDDC5;
  --paper:#FDFCF9;
  --paper-2:#EEF5EF;
  --ink:#111111;
  --ink-soft:#45514A;
  --ink-hover:#2E3A33;
  --night:#111111;
  --on-night:#F3F8F4;
  --on-night-soft:#B7CDBD;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:clamp(16px,2.6vw,32px);
  --wrap:1180px;
  --gap:clamp(96px,5vw + 72px,200px);
  --pad:clamp(24px,4.4vw,64px);
  --step-display:clamp(2.375rem,1.2rem + 5.6vw,6rem);
  --step-role:clamp(1.625rem,1.15rem + 2.1vw,3.25rem);
  --step-h2:clamp(2rem,1.45rem + 2.3vw,3.5rem);
  --step-lead:clamp(1.125rem,1.03rem + .4vw,1.375rem);
  --step-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-small:.875rem;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Relieve del papel sobre el escritorio menta */
  --lift:0 1px 2px rgba(23,52,34,.07),0 18px 36px -20px rgba(23,52,34,.30);
  --drop:drop-shadow(0 1px 1px rgba(23,52,34,.08)) drop-shadow(0 14px 16px rgba(23,52,34,.14));
  --drop-hover:drop-shadow(0 2px 2px rgba(23,52,34,.10)) drop-shadow(0 24px 24px rgba(23,52,34,.20));
  --error:#9B2C2C;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:12px;scrollbar-color:var(--ink) var(--mint)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--mint);color:var(--ink);font-family:var(--sans);font-size:var(--step-body);line-height:1.65;font-weight:400;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;caret-color:var(--ink)}
::selection{background:var(--ink);color:var(--mint)}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
p,ul,ol{margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
input,textarea,button,select{font:inherit;color:inherit}

.skip{position:absolute;left:var(--m);top:-200px;z-index:20;background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Botones y enlaces */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:14px 22px;background:var(--ink);color:var(--paper);border:0;border-radius:0;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--ink-hover)}
.btn:active{transform:translateY(1px)}
.btn .i-wa{width:20px;height:20px;flex:none;fill:currentColor}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn .i-wa{transition:rotate .35s var(--ease)}
  .btn:hover .i-wa{rotate:-10deg}
}
/* Contador de tareas marcadas en el botón de WhatsApp */
.btn .count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;margin-left:-2px;background:var(--mint);color:var(--ink);font-size:.8125rem;font-weight:700;line-height:1}
.btn .count[hidden]{display:none}
.btn.is-sending{opacity:.8;pointer-events:none}
.link{font-weight:500}

/* Página y telón del pie */
.page{position:relative}
main{position:relative;z-index:1;background:var(--mint);overflow-x:clip}

/* Barra superior */
.top{max-width:calc(var(--wrap) + 2 * var(--m));margin:0 auto;padding:16px var(--m);display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px}
.brand{margin-right:auto;font-family:var(--serif);font-weight:500;font-size:1.375rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;padding:8px 0}
.top-nav ul{display:flex;flex-wrap:wrap;gap:0 28px;list-style:none;padding:0}
.top-nav a{display:inline-block;padding:11px 0;font-size:.9375rem;font-weight:500;text-decoration:none}
.top-nav a:hover{text-decoration:underline}
.top-action{padding:11px 0;font-size:.9375rem;font-weight:700;text-decoration-thickness:2px;white-space:nowrap}
@media (max-width:860px){
  .top{padding-top:10px;padding-bottom:4px}
  .top-nav{order:3;flex:0 0 calc(100% + 2 * var(--m));min-width:0;margin-inline:calc(-1 * var(--m))}
  .top-nav ul{flex-wrap:nowrap;gap:0 20px;overflow-x:auto;padding-inline:var(--m);scrollbar-width:none}
  .top-nav ul::-webkit-scrollbar{display:none}
  .top-nav a{white-space:nowrap}
}

/* Hoja con membrete */
.hero{padding:clamp(8px,1.5vw,24px) var(--m) 0}
.sheet{position:relative;background:var(--paper);box-shadow:var(--lift)}
.lh{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lh-text{padding:var(--pad);container-type:inline-size}
.lh-mark{width:auto;height:clamp(64px,6.2vw,96px);margin-bottom:clamp(32px,4.4vw,64px)}
.h1-name{display:block;font-size:var(--step-display);line-height:.94;letter-spacing:-.028em}
@supports (font-size:1cqi){.lh-text .h1-name{font-size:clamp(1.75rem,15.4cqi,5.75rem)}}
.h1-role{display:block;margin-top:.3em;font-style:italic;font-weight:400;font-size:var(--step-role);line-height:1.05;letter-spacing:-.01em}
.lead{margin-top:clamp(28px,3.4vw,48px);max-width:32ch;font-size:var(--step-lead);line-height:1.5}
.lh-note{margin-top:14px;color:var(--ink-soft)}
.actions{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.lh-photo{position:relative;background:var(--mint-2)}
.lh-photo picture{overflow:hidden;overflow:clip}
.lh-photo picture,.lh-photo img{width:100%;height:100%}
.lh-photo img{object-fit:cover;object-position:50% 38%}
/* Clip que sujeta la foto a la hoja */
.clip{position:absolute;z-index:2;top:-28px;left:clamp(18px,3vw,34px);width:38px;height:auto;rotate:-12deg;filter:drop-shadow(1px 2px 1.5px rgba(23,52,34,.35));pointer-events:none}
@media (max-width:760px){
  .lh{grid-template-columns:1fr}
  .lh-photo img{height:auto;aspect-ratio:4/5}
  .clip{top:-24px;width:32px}
}

/* Lista de tareas (servicios) */
.services{padding:var(--gap) var(--m) 0}
.pad{max-width:var(--wrap);margin:0 auto;padding:calc(var(--pad) + 28px) var(--pad) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5.5vw,88px);align-items:start}
.pad::before{content:"";position:absolute;left:0;right:0;top:22px;border-top:7px dotted var(--mint)}
.pad-list{position:sticky;top:28px}
.pad-list.no-stick{position:static}
.pad h2{font-size:var(--step-h2)}
.pad-note{margin-top:14px;max-width:38ch;color:var(--ink-soft)}
.tasks{list-style:none;padding:0;margin-top:clamp(22px,2.8vw,36px);display:grid}
.task{position:relative}
.task input{position:absolute;left:0;top:17px;width:28px;height:28px;margin:0;opacity:0;cursor:pointer}
.task label{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:18px;padding:14px 0 16px;cursor:pointer}
.box{width:28px;height:28px;margin-top:3px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--paper);transition:background-color .2s var(--ease)}
.box svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:2.8;stroke-linecap:square;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .4s var(--ease)}
.task label:hover .box{background:var(--paper-2)}
.task input:checked + label .box{background:var(--ink)}
.task input:checked + label .box svg{stroke-dashoffset:0}
.task input:focus-visible + label .box{outline:3px solid var(--ink);outline-offset:3px}
.task-name{display:inline;font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;
  /* Rotulador menta al marcar la tarea (un solo color, sin degradado visible) */
  background:linear-gradient(var(--mint-2),var(--mint-2)) no-repeat 0 90%/0% 44%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s var(--ease)}
.task input:checked + label .task-name{background-size:100% 44%}
.task-desc{display:block;margin-top:4px;max-width:42ch;color:var(--ink-soft)}
.pad-send{margin-top:clamp(18px,2.2vw,28px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pad-count{flex-basis:100%;min-height:1.6em;font-size:var(--step-small);color:var(--ink-soft)}
/* Sin galería: la lista ocupa toda la hoja, en dos columnas */
.pad--solo{grid-template-columns:minmax(0,1fr)}
.pad--solo .pad-list{position:static}
.pad--solo .pad-head,.pad--solo .tasks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
.pad--solo .pad-head{display:grid;align-items:end}
.pad--solo .pad-note{margin-top:0;padding:0 0 .45em 46px}
@media (max-width:760px){
  .pad--solo .pad-head,.pad--solo .tasks{grid-template-columns:minmax(0,1fr)}
  .pad--solo .pad-note{margin-top:14px;padding:0}
}
.no-js .pad-count{display:none}
.mosaic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,24px);align-items:start}
.mosaic-col{display:grid;gap:clamp(14px,1.8vw,24px)}
.mosaic-col + .mosaic-col{padding-top:clamp(80px,10vw,160px)}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mint-2)}
/* Foto + título = botón que despliega el detalle del servicio */
.shot summary{display:block;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.shot summary::-webkit-details-marker{display:none}
.shot summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.shot picture{display:block;overflow:hidden;background:var(--mint-2)}
.shot-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:8px;font-size:.9375rem;font-weight:600;line-height:1.3}
.shot summary:hover .shot-name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.pm{position:relative;flex:none;width:28px;height:28px;background:var(--ink);transition:background-color .2s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;background:var(--paper);transition:transform .35s var(--ease)}
.pm::after{transform:rotate(90deg)}
.shot[open] .pm::after{transform:rotate(0deg)}
.shot summary:hover .pm{background:var(--ink-hover)}
.shot-more{padding:16px 16px 18px;background:var(--paper-2);font-size:.9375rem;line-height:1.55}
.shot-more .gain{margin-top:12px;font-weight:600}
.shot-more ul{list-style:none;padding:0;margin-top:6px;display:grid;gap:6px}
.shot-more li{display:flex;align-items:baseline;gap:10px}
.shot-more li::before{content:"";flex:0 0 7px;height:7px;background:var(--ink);transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){
  .shot img{transition:transform .6s var(--ease)}
  .shot summary:hover img{transform:scale(1.035)}
  .shot[open] .shot-more{animation:more-in .45s var(--ease)}
}
@keyframes more-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .pad{grid-template-columns:1fr}
  .pad-list{position:static}
  .mosaic{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:thin;scrollbar-color:var(--ink-soft) var(--paper-2)}
  .mosaic-col{display:contents}
  .mosaic-col + .mosaic-col{padding-top:0}
  .shot{flex:0 0 72%;order:var(--o);scroll-snap-align:start}
}

/* Carpetas: para quién */
.forwhom{max-width:calc(var(--wrap) + 2 * var(--m));margin:0 auto;padding:var(--gap) var(--m) 0}
.forwhom h2{font-size:var(--step-h2)}
.folders{margin-top:clamp(72px,7.5vw,112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.folder{position:relative;padding:clamp(28px,3.6vw,52px);background:var(--paper);filter:var(--drop)}
.folder--ink{margin-top:clamp(0px,5vw,72px);background:var(--ink);color:var(--on-night)}
.tab{position:absolute;bottom:100%;left:0;height:48px;display:flex;align-items:center;padding:0 48px 0 clamp(20px,2.4vw,28px);background:inherit;font-size:1.3125rem;font-weight:500;letter-spacing:-.01em;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 100%,0 100%)}
.folder--ink .tab{left:auto;right:0;padding:0 clamp(20px,2.4vw,28px) 0 48px;clip-path:polygon(30px 0,100% 0,100% 100%,0 100%)}
.folder-text{max-width:36ch;font-size:var(--step-lead);line-height:1.5}
.folder-list{list-style:none;padding:0;margin-top:clamp(20px,2.4vw,32px);display:grid;gap:10px}
.folder-list li{display:flex;align-items:baseline;gap:12px}
.folder-list li::before{content:"";flex:0 0 9px;height:9px;background:currentColor;transform:translateY(-1px)}
@media (max-width:760px){
  .folders{grid-template-columns:1fr;gap:80px}
  .folder--ink{margin-top:0}
}

/* Tique: cómo empezamos */
.how{max-width:calc(var(--wrap) + 2 * var(--m));margin:0 auto;padding:var(--gap) var(--m) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.how h2{font-size:var(--step-h2)}
.how-intro p{margin-top:20px;max-width:28ch;font-size:var(--step-lead);line-height:1.5}
.slip-wrap{rotate:1deg;filter:var(--drop)}
.slip{--sp:clamp(22px,3vw,40px);background:var(--paper);padding:clamp(28px,3.6vw,44px) var(--sp) calc(var(--sp) + 14px);clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), 98.2143% 100%, 96.4286% calc(100% - 14px), 94.6429% 100%, 92.8571% calc(100% - 14px), 91.0714% 100%, 89.2857% calc(100% - 14px), 87.5000% 100%, 85.7143% calc(100% - 14px), 83.9286% 100%, 82.1429% calc(100% - 14px), 80.3571% 100%, 78.5714% calc(100% - 14px), 76.7857% 100%, 75.0000% calc(100% - 14px), 73.2143% 100%, 71.4286% calc(100% - 14px), 69.6429% 100%, 67.8571% calc(100% - 14px), 66.0714% 100%, 64.2857% calc(100% - 14px), 62.5000% 100%, 60.7143% calc(100% - 14px), 58.9286% 100%, 57.1429% calc(100% - 14px), 55.3571% 100%, 53.5714% calc(100% - 14px), 51.7857% 100%, 50.0000% calc(100% - 14px), 48.2143% 100%, 46.4286% calc(100% - 14px), 44.6429% 100%, 42.8571% calc(100% - 14px), 41.0714% 100%, 39.2857% calc(100% - 14px), 37.5000% 100%, 35.7143% calc(100% - 14px), 33.9286% 100%, 32.1429% calc(100% - 14px), 30.3571% 100%, 28.5714% calc(100% - 14px), 26.7857% 100%, 25.0000% calc(100% - 14px), 23.2143% 100%, 21.4286% calc(100% - 14px), 19.6429% 100%, 17.8571% calc(100% - 14px), 16.0714% 100%, 14.2857% calc(100% - 14px), 12.5000% 100%, 10.7143% calc(100% - 14px), 8.9286% 100%, 7.1429% calc(100% - 14px), 5.3571% 100%, 3.5714% calc(100% - 14px), 1.7857% 100%, 0 calc(100% - 14px))}
.steps{list-style:none;padding:0;display:grid;gap:clamp(22px,2.6vw,32px)}
.step-when{font-size:.9375rem;font-weight:700}
.step-row{margin-top:6px;display:flex;align-items:baseline;gap:12px}
.step-what{font-family:var(--serif);font-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);line-height:1.25}
.leader{flex:1 1 24px;min-width:24px;border-bottom:4px dotted var(--ink);transform:translateY(-5px)}
.step-val{white-space:nowrap;font-size:.9375rem;font-weight:600}
.slip-total{margin:clamp(28px,3vw,40px) calc(-1 * var(--sp)) 0;padding:14px var(--sp);background:var(--ink);color:var(--paper);font-family:var(--serif);font-style:italic;font-size:1.375rem;line-height:1.3}
@media (max-width:760px){.how{grid-template-columns:1fr}}
@media (max-width:520px){
  .step-row{flex-wrap:wrap}
  .leader{display:none}
  .step-val{flex-basis:100%;color:var(--ink-soft)}
}

/* Carta: sobre mí */
.about{padding:var(--gap) var(--m) 0}
.letter{--lp:clamp(24px,5vw,64px);max-width:720px;margin:0 auto;padding:clamp(32px,5vw,64px) var(--lp) 0}
.letter h2{font-size:var(--step-h2)}
.letter-body{margin-top:clamp(20px,2.6vw,32px);display:grid;gap:18px;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.7}
.sign{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
.sign-photo{flex:none;rotate:-2.5deg}
/* Foto impresa: borde blanco y sombra corta, como una copia sujeta a la carta */
.sign-photo img{width:136px;aspect-ratio:4/5;object-fit:cover;padding:5px;background:#fff;box-shadow:0 1px 2px rgba(23,52,34,.12),0 12px 18px -10px rgba(23,52,34,.38)}
.sign-name{font-family:var(--serif);font-style:italic;font-size:1.75rem;line-height:1.1}
.sign-role{margin-top:4px;font-size:var(--step-small);color:var(--ink-soft)}
.strip{position:relative;margin:clamp(32px,4vw,48px) calc(-1 * var(--lp)) 0;padding:30px var(--lp) 28px;background:var(--paper-2);display:flex;flex-wrap:wrap;gap:10px 32px;font-weight:500}
.strip::before{content:"";position:absolute;left:0;right:0;top:-4px;border-top:7px dotted var(--mint)}

/* Preguntas */
.faq{margin-top:var(--gap);padding:clamp(88px,9vw,160px) var(--m);background:var(--night);color:var(--on-night-soft)}
.faq-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq h2{color:var(--mint);font-size:var(--step-h2)}
.faq-text{columns:2 30ch;column-gap:clamp(32px,4vw,56px)}
.faq-text p{break-inside:avoid;margin-bottom:24px;font-size:clamp(1rem,.97rem + .2vw,1.125rem);line-height:1.6}
.faq-text strong{color:var(--on-night);font-weight:600}
.faq :focus-visible{outline-color:var(--mint)}
@media (max-width:860px){.faq-in{grid-template-columns:1fr}}

/* Cupón: presupuesto */
.contact{padding:var(--gap) var(--m) clamp(104px,10vw,176px)}
.coupon{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--paper);box-shadow:var(--lift)}
.coupon-left{position:relative;padding:var(--pad);display:flex;flex-direction:column;gap:18px;border-right:6px dotted var(--mint)}
.coupon-left::before,.coupon-left::after{content:"";position:absolute;right:-17px;width:40px;height:40px;border-radius:50%;background:var(--mint)}
.coupon-left::before{top:-20px}
.coupon-left::after{bottom:-20px}
.coupon h2{font-size:var(--step-h2)}
.coupon-left > p:not(.direct){max-width:30ch;font-size:var(--step-lead);line-height:1.5}
.direct{margin-top:clamp(12px,2vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.coupon-form{padding:var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 18px;align-content:start}
.coupon-form > *{grid-column:1 / -1}
.coupon-form > .field--half{grid-column:auto}
@media (max-width:560px){.coupon-form > .field--half{grid-column:1 / -1}}
.field label,.field legend{display:block;margin-bottom:8px;padding:0;font-size:.9375rem;font-weight:600}
.field label span{font-weight:400;color:var(--ink-soft)}
.field input,.field textarea{display:block;width:100%;min-height:52px;padding:13px 14px;background:var(--paper-2);border:0;border-bottom:2px solid var(--ink);border-radius:0;font-size:1rem;appearance:none}
.field textarea{min-height:108px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.field input,.field textarea{transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field textarea:focus{background:#fff;box-shadow:inset 0 -2px 0 var(--ink)}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:var(--error);box-shadow:inset 0 -2px 0 var(--error);background:#FBF1F1}
.consent input:user-invalid{outline:2px solid var(--error);outline-offset:2px}
fieldset.field{min-width:0;margin:0;padding:0;border:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip label{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:10px 14px;background:var(--paper-2);font-size:.9375rem;font-weight:500;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.chip input:hover + label{background:var(--mint)}
.chip input:checked + label{background:var(--ink);color:var(--paper)}
.chip input:focus-visible + label{outline:3px solid var(--ink);outline-offset:2px}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:.9375rem}
.consent input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){
  .coupon{grid-template-columns:1fr}
  .coupon-left{border-right:0;border-bottom:6px dotted var(--mint)}
  .coupon-left::before,.coupon-left::after{top:auto;bottom:-13px;width:32px;height:32px}
  .coupon-left::before{left:-16px;right:auto}
  .coupon-left::after{right:-16px}
  .contact{overflow-x:clip}
}

/* Postal: pie */
.foot{position:relative;z-index:0;padding:clamp(72px,8vw,128px) var(--m) clamp(28px,3vw,44px);background:var(--mint-2)}
@media (min-width:900px) and (min-height:760px){.foot--curtain{position:sticky;bottom:0}}
.postcard{--sc:22px;max-width:var(--wrap);margin:0 auto;padding:clamp(60px,6.4vw,92px) var(--pad) clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);background:var(--paper);
  -webkit-mask:radial-gradient(circle var(--sc) at 50% 0,#0000 98%,#000) 50% 0/56px 100% repeat-x;
  mask:radial-gradient(circle var(--sc) at 50% 0,#0000 98%,#000) 50% 0/56px 100% repeat-x}
.pc-sign{font-family:var(--serif);font-size:var(--step-h2);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.pc-msg p + p{margin-top:16px;max-width:34ch;color:var(--ink-soft)}
.pc-addr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.pc-addr ul{grid-column:1;grid-row:1;list-style:none;padding:0;display:grid;gap:12px;font-size:1.0625rem}
.pc-wrap{max-width:var(--wrap);margin:0 auto;filter:var(--drop)}
/* Sello dentado y matasellos */
.pc-post{grid-column:2;grid-row:1;position:relative;width:100px;height:100px;filter:drop-shadow(0 2px 2px rgba(23,52,34,.18))}
.stamp{display:block;width:100px;height:100px;padding:6px;background:#fff;rotate:5deg;
  -webkit-mask:radial-gradient(3px at 3px 3px,#0000 97%,#000) -3px -3px/10px 10px,linear-gradient(#000 0 0) content-box;
  mask:radial-gradient(3px at 3px 3px,#0000 97%,#000) -3px -3px/10px 10px,linear-gradient(#000 0 0) content-box}
.stamp img{width:100%;height:100%}
.postmark{position:absolute;left:-26px;top:62px;width:104px;rotate:-9deg;color:var(--ink);opacity:.45;pointer-events:none}
.pc-addr li,.strip a,.direct a{overflow-wrap:anywhere}
.pc-imprint{grid-column:1 / -1;margin-top:clamp(16px,3vw,36px);text-align:center;font-size:var(--step-small);color:var(--ink-soft)}
.pc-imprint span{white-space:nowrap}
@media (max-width:760px){
  .postcard{grid-template-columns:1fr}
  .pc-addr{grid-template-columns:1fr}
  .pc-post{grid-column:1;grid-row:1;width:80px;height:80px}
  .stamp{width:80px;height:80px}
  .postmark{left:58px;top:18px;width:96px}
  .pc-addr ul{grid-row:2}
}

/* Zonas táctiles de 44 px para los enlaces sueltos */
.link,.strip a,.pc-addr a{display:inline-flex;align-items:center;min-height:44px}
.pc-addr ul{gap:2px}
.pc-addr li{display:flex;align-items:center;min-height:44px}
.direct{gap:6px}
.strip{padding-top:20px;padding-bottom:18px}

/* Móviles pequeños: el botón de WhatsApp entra en la primera pantalla */
@media (max-width:420px){
  .lh-mark{height:48px;margin-bottom:18px}
  .lh-text .lead{margin-top:18px;font-size:1.0625rem}
  .lh-note{margin-top:10px}
  .lh-text .actions{margin-top:20px}
}
/* Móvil en horizontal: pantalla muy baja */
@media (max-height:500px) and (orientation:landscape){
  .lh-mark{height:44px;margin-bottom:16px}
  .lh-text{padding-top:20px}
}

/* Páginas sencillas: gracias y 404 */
.simple{padding:clamp(8px,1.5vw,24px) var(--m) clamp(96px,10vw,160px)}
.note{max-width:760px;margin:0 auto;padding:var(--pad)}
.note h1{font-size:var(--step-h2)}
.note .lead{max-width:36ch}

/* Textos legales */
.legal{max-width:860px}
.legal .updated{margin-top:12px;font-size:var(--step-small);color:var(--ink-soft)}
.legal h2{margin-top:clamp(32px,3.4vw,44px);font-size:clamp(1.375rem,1.22rem + .6vw,1.75rem);line-height:1.2}
.legal p,.legal ul{margin-top:14px;max-width:70ch}
.legal ul{padding-left:1.25em}
.legal li + li{margin-top:6px}
.legal a{overflow-wrap:anywhere}

/* Primera capa RGPD bajo el formulario */
.rgpd{font-size:.8125rem;line-height:1.55;color:var(--ink-soft)}
.rgpd strong{font-weight:600;color:var(--ink)}
.legal .actions{margin-top:18px}

/* Aviso de cookies (solo con Google Analytics) */
.ck{position:fixed;z-index:40;right:var(--m);bottom:var(--m);width:min(440px,calc(100% - 2 * var(--m)));padding:20px 22px;background:var(--paper);box-shadow:0 0 0 1px rgba(17,17,17,.08),var(--lift);font-size:.9375rem;line-height:1.55}
.ck a{font-weight:600}
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ck .btn{min-height:44px;padding:10px 22px}
.ck-open:not(.btn){display:inline-flex;align-items:center;min-height:24px;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;cursor:pointer}
@media (max-width:560px){.ck{right:0;bottom:0;width:100%;padding:16px var(--m) calc(16px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:no-preference){.ck{animation:ck-in .45s var(--ease) both}}
@keyframes ck-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media print{.ck{display:none}}

/* Movimiento */
@media (prefers-reduced-motion:no-preference){
  /* Portada: la hoja llega, el monograma se estampa, el nombre sube, «asistente virtual» se escribe */
  .js .lh{animation:sheet-in 1s var(--ease) both}
  .js .lh-mark{animation:stamp-in .7s var(--ease) .15s both}
  .js .h1-name{animation:rise .9s var(--ease) .25s both}
  .js .h1-role{animation:write 1.1s cubic-bezier(.45,0,.2,1) .55s both}
  .js .lh-text .lead{animation:rise .9s var(--ease) .7s both}
  .js .lh-note{animation:rise .9s var(--ease) .8s both}
  .js .lh-text .actions{animation:rise .9s var(--ease) .9s both}
  .js .clip{animation:clip-on .9s var(--ease) 1.05s both}
  /* Foto de portada: se asienta al cargar y se desliza despacio al hacer scroll */
  .js .lh-photo img{scale:1.06;animation:photo-settle 1.8s var(--ease) both}
  @supports (animation-timeline:view()){
    .js .lh-photo img{animation:photo-settle 1.8s var(--ease) both,drift linear both;animation-timeline:auto,view();animation-range:normal,cover 0% cover 100%}
  }
  /* Entradas al hacer scroll, escalonadas */
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
  .js .folder--ink.reveal{transform:translate(32px,28px)}
  .js .reveal.is-in{opacity:1;transform:none}
  /* Tique: cada línea se imprime y su línea de puntos se traza */
  .js .slip .step,.js .slip .slip-total{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease) var(--d,0s)}
  .js .slip.is-in .step,.js .slip.is-in .slip-total{clip-path:inset(0 0 0 0)}
  .js .slip .leader{scale:0 1;transform-origin:left;transition:scale .7s var(--ease) calc(var(--d,0s) + .3s)}
  .js .slip.is-in .leader{scale:1 1}
  /* Carta: la firma se escribe */
  .js .letter .sign-name{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.4s cubic-bezier(.45,0,.2,1) .5s}
  .js .letter.is-in .sign-name{clip-path:inset(-20% -6% -20% 0)}
  /* Respuesta de los controles */
  .btn .count.pop{animation:pop .35s var(--ease)}
  .chip input:checked + label{animation:pop .3s var(--ease)}
  .btn.is-sending{animation:breathe 1.2s ease-in-out infinite}
}
/* Carpetas y sello: se levantan al pasar el ratón */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .folder{transition:translate .45s var(--ease),filter .45s var(--ease)}
  .js .folder.reveal{transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),translate .45s var(--ease),filter .45s var(--ease)}
  .folder:hover{translate:0 -6px;filter:var(--drop-hover)}
  .stamp{transition:rotate .5s var(--ease)}
  .pc-post:hover .stamp{rotate:0deg}
}
/* La galería solo se anima en ordenador; en móvil es un carrusel y las fotos ya están en su sitio */
@media (prefers-reduced-motion:no-preference) and (min-width:861px){
  .js .shot{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
  .js .shot.is-in{opacity:1;transform:none}
}
@keyframes sheet-in{from{transform:translateY(36px)}to{transform:none}}
@keyframes photo-settle{from{scale:1.14}to{scale:1.06}}
@keyframes drift{from{translate:0 -2.5%}to{translate:0 2.5%}}
@keyframes stamp-in{from{opacity:0;scale:1.3}to{opacity:1;scale:1}}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes write{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -4% -10% 0)}}
@keyframes clip-on{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
@keyframes pop{0%{scale:.6}60%{scale:1.15}100%{scale:1}}
@keyframes breathe{50%{opacity:.55}}