/* Tipografías locales (OFL): Literata y Reenie Beanie */
@font-face{font-family:"Literata";src:url(../fonts/literata.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(../fonts/literata-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(../fonts/reenie-beanie.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --papel: oklch(0.965 0.018 82);
  --papel-2: oklch(0.935 0.026 78);
  --mesa: oklch(0.885 0.03 70);
  --tinta: oklch(0.28 0.03 125);
  --tinta-suave: oklch(0.42 0.028 120);
  --lapiz: oklch(0.54 0.13 45);
  --lapiz-suave: oklch(0.54 0.13 45 / .16);
  --linea: oklch(0.28 0.03 125 / .14);
  --serif: "Literata", Georgia, serif;
  --mano: "Reenie Beanie", cursive;
  --ancho: 1240px;
  --lectura: 36rem;
  --ease: cubic-bezier(.22,1,.36,1);
  --radio: 7px;
  --radio-peq: 4px;
  --sobre: oklch(0.58 0.125 46);
  --solapa: linear-gradient(180deg, oklch(0.53 0.12 44), oklch(0.57 0.125 46));
  --matasellos: oklch(0.95 0.02 85);
  --bloque: oklch(0.44 0.05 130);
  --bloque-texto: var(--papel);
  --bloque-acento: oklch(0.87 0.075 88);
  --fondo-carta: oklch(0.88 0.03 115);
  --fondo-sus: oklch(0.91 0.03 92);
  --fondo-pd: oklch(0.88 0.03 115);
  --sello: oklch(0.47 0.05 130);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  line-height:1.62;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
/* grano de papel muy sutil */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  background-image: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:400;line-height:1.08;text-wrap:balance;letter-spacing:-.012em}
p,li,dd{text-wrap:pretty}
em{font-style:italic}
a{color:inherit}
.envoltorio{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1rem, 4vw, 3rem)}
.mano{font-family:var(--mano);font-weight:400;letter-spacing:.015em;word-spacing:.18em;line-height:1}
.etiqueta{font-family:var(--mano);word-spacing:.18em;font-size:2.1rem;line-height:1;color:var(--lapiz);display:inline-block;transform:rotate(-2deg);margin-bottom:.35rem}

/* ---------- cabecera ---------- */
.cabecera{padding-block:1.4rem}
.cabecera .envoltorio{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem}
.marca{font-style:italic;font-size:1.45rem;text-decoration:none;letter-spacing:-.01em}
.marca span{color:var(--lapiz)}
.nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem);font-size:1rem;align-items:baseline}
.nav a{text-decoration:none;color:var(--tinta-suave);transition:color .3s}
.nav a:hover{color:var(--tinta)}
.nav .boton-texto{color:var(--tinta);border-bottom:1px solid var(--tinta);padding-bottom:1px}
@media (max-width:640px){.nav a:not(.boton-texto){display:none}}

/* ---------- portada ---------- */
.portada{padding-block:clamp(2.5rem,7vw,6rem) clamp(4rem,9vw,8rem);overflow-x:clip}
.portada .envoltorio{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.portada .titular{font-size:clamp(2.5rem, 1.5rem + 3.6vw, 4.7rem);font-weight:350;margin-block:1.2rem 1.6rem}
.portada .titular em{color:var(--lapiz);font-weight:350}
.portada .entrada{max-width:30rem;color:var(--tinta-suave)}
.acciones{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;margin-top:2.4rem}
.boton{
  display:inline-block;font:inherit;font-size:1.05rem;text-decoration:none;cursor:pointer;
  background:var(--tinta);color:var(--papel);border:0;padding:1rem 1.7rem;border-radius:var(--radio);
  transition:transform .4s var(--ease), background .3s;
}
.boton:hover{transform:translateY(-2px);background:oklch(0.22 0.03 125)}
.boton:focus-visible,.nav a:focus-visible,summary:focus-visible,.opcion input:focus-visible+span{outline:2px solid var(--lapiz);outline-offset:3px}
.enlace{color:var(--tinta);text-underline-offset:.3em;text-decoration-thickness:1px}
.proxima{display:flex;align-items:center;gap:1rem}
.proxima .mano{font-size:1.7rem;color:var(--lapiz);transform:rotate(-2deg)}

/* objeto: sobre + carta */
.objeto{position:relative;aspect-ratio:4/4.3;max-width:520px;justify-self:end;width:100%}
.sobre{
  position:absolute;inset:14% 0 0 6%;background:var(--sobre);
  box-shadow:0 1px 0 oklch(1 0 0 / .6) inset, 0 30px 60px -30px oklch(0.3 0.04 60 / .45), 0 2px 6px oklch(0.3 0.04 60 / .12);
  transform:rotate(-5deg);border-radius:var(--radio);
}
.sobre::after{ /* solapa */
  content:"";position:absolute;inset:0 0 auto 0;height:52%;
  background:var(--solapa);
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 1px 0 oklch(0.3 0.04 60 / .12));
}
.sello{
  border-radius:var(--radio-peq);
  position:absolute;right:7%;top:8%;width:74px;height:90px;z-index:1;background:var(--sello);color:var(--papel);
  display:grid;place-items:center;text-align:center;font-style:italic;font-size:.8rem;line-height:1.15;
  border:5px dotted var(--papel-2);outline:1px solid oklch(0.56 0.13 36 / .35);outline-offset:-10px;
  transform:rotate(4deg);
}
.sello b{display:block;font-weight:400;font-size:1.6rem;font-style:normal}
.matasellos{
  position:absolute;right:15%;top:14%;width:118px;height:118px;border-radius:50%;z-index:2;
  border:1.5px solid color-mix(in oklch, var(--matasellos) 55%, transparent);display:grid;place-items:center;text-align:center;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklch, var(--matasellos) 75%, transparent);transform:rotate(-14deg);
}
.matasellos::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid color-mix(in oklch, var(--matasellos) 35%, transparent)}
.carta{
  position:absolute;left:0;bottom:4%;width:78%;padding:2.2rem 2rem 2.4rem;background:var(--papel);
  transform:rotate(2.5deg);border-radius:var(--radio-peq);z-index:3;
  box-shadow:0 24px 50px -24px oklch(0.3 0.04 60 / .5), 0 1px 3px oklch(0.3 0.04 60 / .15);
}
.carta .saludo{font-size:2.4rem;color:var(--tinta);margin-bottom:.6rem}
.carta p{font-size:.98rem;line-height:1.9;color:var(--tinta-suave)}
.carta p:not(.mano){background:repeating-linear-gradient(180deg, transparent 0 calc(1lh - 3px), var(--linea) calc(1lh - 3px) calc(1lh - 2px))}
.nota-objeto{position:absolute;right:2%;bottom:-6%;z-index:4;font-size:1.9rem;color:var(--lapiz);transform:rotate(-5deg)}
.nota-objeto::before{content:"↖";font-family:var(--serif);font-size:1.1rem;margin-right:.35rem;display:inline-block;transform:rotate(-10deg)}
.carta .firma{font-size:1.9rem;color:var(--tinta);margin-top:.6rem;text-align:right}

/* ---------- la carta (manifiesto) ---------- */
.manifiesto{background:var(--fondo-carta);padding-block:clamp(4rem,10vw,9rem)}
.hoja{
  max-width:46rem;margin-inline:auto;background:var(--papel);position:relative;border-radius:var(--radio);
  padding:clamp(2.2rem,6vw,5rem) clamp(1.4rem,7vw,5.5rem) clamp(2.5rem,6vw,4.5rem);
  box-shadow:0 40px 80px -40px oklch(0.3 0.04 60 / .55), 0 2px 5px oklch(0.3 0.04 60 / .12);
}
.hoja .fecha{text-align:right;color:var(--tinta-suave);font-size:1.7rem;margin-bottom:2rem;max-width:none}
.hoja .saludo{font-size:clamp(2.6rem,2rem + 2.5vw,3.6rem);margin-bottom:1.4rem}
.hoja p{margin-bottom:1.25em;max-width:var(--lectura)}
.hoja .inicio::first-letter{font-size:3.4em;float:left;line-height:.82;padding:.08em .1em 0 0;color:var(--lapiz);font-weight:350}
.subrayado{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.18em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 4, 90 10, 130 6 S 185 5, 198 7' fill='none' stroke='%23b8573a' stroke-width='3.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") no-repeat left 100%/0% .6em;
  transition:background-size 1.6s var(--ease) .3s;
}
.visible .subrayado{background-size:100% .6em}
.nota-margen{
  position:absolute;right:-9.5rem;width:8rem;color:var(--lapiz);font-size:1.9rem;line-height:1;transform:rotate(-4deg);
}
.nota-margen::before{content:"";display:block;width:2.4rem;height:1px;background:var(--lapiz);opacity:.5;margin:0 0 .4rem -2.8rem;transform:rotate(8deg)}
@media (max-width:1100px){.nota-margen{position:static;display:block;width:auto;margin:-.4rem 0 1.4rem;transform:rotate(-1.5deg)}.nota-margen::before{display:none}}
.hoja .despedida{margin-top:2.4rem;font-size:2rem;line-height:1.1;color:var(--tinta)}
.hoja .firma{font-size:2.6rem;margin-top:.2rem;transform:rotate(-3deg);display:inline-block}

/* ---------- el ritual: hoja plegada en tres ---------- */
.ritual{padding-block:clamp(4.5rem,10vw,9rem)}
.ritual .envoltorio{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.ritual h2,.temas h2,.suscripcion h2,.preguntas h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem);font-weight:350}
.ritual .intro{position:sticky;top:3rem}
.ritual .intro p{color:var(--tinta-suave);margin-top:1.3rem;max-width:26rem}
.plegada{border-radius:var(--radio);overflow:hidden;background:var(--papel-2);box-shadow:0 30px 60px -35px oklch(0.3 0.04 60 / .45)}
.pliegue{
  display:grid;grid-template-columns:clamp(2.4rem,2rem + 1.4vw,3.4rem) 1fr;gap:.4rem 1.2rem;padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,3rem);
  position:relative;
}
.pliegue:nth-child(1){background:linear-gradient(180deg, var(--papel-2), oklch(0.915 0.027 77))}
.pliegue:nth-child(2){background:linear-gradient(180deg, oklch(0.95 0.02 80), var(--papel-2))}
.pliegue:nth-child(3){background:linear-gradient(180deg, oklch(0.915 0.027 77), var(--papel-2))}
.pliegue + .pliegue{border-top:1px solid oklch(0.3 0.04 60 / .12);box-shadow:0 -1px 0 oklch(1 0 0 / .55)}
.pliegue .num{grid-row:span 3;font-variant-numeric:lining-nums;font-size:clamp(2.6rem,2rem + 2vw,3.8rem);font-weight:350;font-style:italic;color:var(--lapiz);line-height:.9}
.pliegue h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.pliegue p{color:var(--tinta-suave);max-width:30rem}
.pliegue .apunte{grid-column:2;font-family:var(--mano);word-spacing:.18em;font-size:2rem;line-height:1;color:var(--lapiz);transform:rotate(-1.5deg);transform-origin:left;margin-top:.35rem}

/* ---------- temas ---------- */
.temas{padding-block:0 clamp(4.5rem,10vw,9rem)}
.temas .cabeza{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem;border-bottom:1px solid var(--linea);padding-bottom:1.6rem}
.temas .cabeza p{color:var(--tinta-suave);max-width:24rem}
.lista-temas{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 2.4rem;font-size:clamp(2rem,1.3rem + 3.2vw,4.4rem);font-weight:350;line-height:1.25}
.lista-temas li{position:relative}
.nota-temas{font-family:var(--mano);word-spacing:.18em;font-size:2rem;color:var(--lapiz);margin-top:1.2rem;transform:rotate(-1.5deg);transform-origin:left}
.lista-temas li:nth-child(even){font-style:italic;color:var(--tinta-suave)}
.lista-temas li:nth-child(3){color:var(--lapiz)}

/* ---------- para quién ---------- */
.quien{background:var(--bloque);color:var(--bloque-texto);padding-block:clamp(4.5rem,10vw,8rem)}
.quien .envoltorio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.quien h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem);font-weight:350}
.quien h2 em{color:var(--bloque-acento)}
.quien ul{list-style:none;font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
.quien li{padding:.85rem 0 .85rem 2.4rem;border-bottom:1px solid oklch(0.965 0.018 82 / .14);position:relative}
.quien li::before{content:"✓";font-family:var(--mano);font-size:1.9rem;position:absolute;left:.1rem;top:.35rem;color:var(--bloque-acento)}
.quien .coda{grid-column:2;color:var(--bloque-acento);font-family:var(--mano);word-spacing:.18em;font-size:2.1rem;line-height:1.1;transform:rotate(-1.5deg);transform-origin:left}

/* ---------- suscripción: tarjeta de respuesta ---------- */
.suscripcion{padding-block:clamp(4.5rem,10vw,9rem);background:var(--fondo-sus)}
.suscripcion .envoltorio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.suscripcion .texto p{color:var(--tinta-suave);margin-top:1.3rem;max-width:28rem}
.suscripcion h2{font-size:clamp(2.3rem,1.5rem + 3vw,4rem)}
.pasos-sus{list-style:none;counter-reset:paso;margin-top:2rem;max-width:28rem;border-top:1px solid var(--linea)}
.pasos-sus li{counter-increment:paso;display:grid;grid-template-columns:2.2rem 1fr;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--linea);color:var(--tinta-suave);font-size:1.02rem}
.pasos-sus li::before{content:counter(paso) ".";color:var(--lapiz);font-size:1.4rem;font-weight:350}
.pasos-sus b{font-weight:500;color:var(--tinta)}
.tarjeta{
  background:var(--papel);position:relative;padding:clamp(1.6rem,4vw,2.8rem);border-radius:0 0 var(--radio) var(--radio);
  box-shadow:0 30px 60px -30px oklch(0.3 0.04 60 / .5);
}
.tarjeta::before{ /* línea de corte */
  content:"";position:absolute;left:0;right:0;top:-1px;height:0;border-top:2px dashed color-mix(in oklch, var(--tinta) 30%, transparent);
}
.tarjeta .tijera{position:absolute;top:-.95rem;left:1.4rem;background:var(--fondo-sus);padding:0 .4rem;font-size:1rem;color:var(--tinta-suave)}
.tarjeta .titulo-tarjeta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--linea);padding-bottom:1rem;margin-bottom:1.4rem}
.tarjeta .titulo-tarjeta h3{font-size:1.5rem;font-style:italic}
.tarjeta .titulo-tarjeta span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
fieldset{border:0;margin-bottom:1.6rem}
legend{font-family:var(--mano);word-spacing:.18em;color:var(--lapiz);font-size:1.8rem;line-height:1;margin-bottom:.3rem}
.opcion{display:block;cursor:pointer}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion > span{
  display:grid;grid-template-columns:1.9rem 1fr auto;align-items:baseline;gap:.2rem .8rem;
  padding:1rem .2rem;border-bottom:1px solid var(--linea);
}
.casilla{width:1.25rem;height:1.25rem;border:1.5px solid var(--tinta);display:inline-block;position:relative;align-self:center;border-radius:var(--radio-peq)}
.casilla::after{content:"✓";font-family:var(--mano);position:absolute;left:.05rem;top:-.95rem;font-size:2.3rem;color:var(--lapiz);opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .25s, transform .45s var(--ease)}
.opcion input:checked + span .casilla::after{opacity:1;transform:scale(1) rotate(-8deg)}
.opcion .nombre{font-size:1.3rem}
.opcion .detalle{grid-column:2;font-size:.95rem;font-style:italic;color:var(--tinta-suave)}
.regalo-nota{font-style:normal;color:var(--lapiz);font-size:1.55rem;white-space:nowrap;display:inline-block;transform:rotate(-3deg);margin-left:.2rem}
.opcion .precio{font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem);font-weight:350;grid-row:span 2}
.opcion .precio small{font-size:.9rem;font-style:italic;color:var(--tinta-suave)}
.regalo-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.regalo-extra > div{overflow:hidden}
.con-regalo .regalo-extra{grid-template-rows:1fr}
.regalo-extra p{font-size:.98rem;color:var(--tinta-suave);padding-top:.9rem;font-style:italic}
.boton-pago{font-size:1.1rem;padding:1.1rem 1.8rem}
.fila-envio{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem;margin-top:.4rem}
.primera{font-size:1.05rem}
.primera .mano{font-size:2rem;color:var(--lapiz)}
.garantias{margin-top:1.6rem;font-size:.9rem;color:var(--tinta-suave);display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}

/* ---------- preguntas ---------- */
.preguntas{padding-block:clamp(4.5rem,10vw,9rem)}
.preguntas .envoltorio{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem)}
details{border-bottom:1px solid var(--linea)}
details:first-child{border-top:1px solid var(--linea)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:350;color:var(--lapiz);transition:transform .4s var(--ease);font-size:1.5rem;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 1.5rem;color:var(--tinta-suave);max-width:34rem}

/* ---------- posdata / pie ---------- */
.posdata{background:var(--fondo-pd);padding-block:clamp(3.5rem,8vw,6rem);text-align:center}
.posdata p{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);font-weight:350;max-width:44rem;margin-inline:auto}
.posdata .pd{font-family:var(--mano);color:var(--lapiz);font-size:1.3em;margin-right:.3rem}
.posdata .boton{margin-top:2.2rem}
@media (min-width:900px){.posdata .frase{display:block;white-space:nowrap}}
/* P. D. potente en teja */
.posdata{background:oklch(0.54 0.125 44);color:oklch(0.97 0.015 85);padding-block:clamp(5rem,12vw,10rem);position:relative;overflow:hidden}
.posdata::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%, oklch(0.6 0.13 46 / .55), transparent 60%)}
.posdata .envoltorio{position:relative}
.posdata p{font-size:clamp(1.7rem,1.1rem + 2vw,3rem);font-weight:350;line-height:1.2;max-width:none;letter-spacing:-.015em}
.posdata .pd{display:block;color:oklch(0.87 0.075 88);font-size:clamp(2.6rem,2rem + 2vw,3.8rem);line-height:1;margin:0 0 .6rem;transform:rotate(-3deg)}
.posdata .boton{margin-top:3rem;background:oklch(0.97 0.015 85);color:oklch(0.38 0.1 42);font-size:1.15rem;padding:1.15rem 2.1rem}
.posdata .boton:hover{background:oklch(0.87 0.075 88)}
.posdata .boton:focus-visible{outline-color:oklch(0.97 0.015 85)}
.pie{padding-block:2rem;font-size:.92rem;color:var(--tinta-suave)}
.pie .envoltorio{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.pie nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.pie a{text-decoration:none}
.pie a:hover{color:var(--tinta)}

/* ---------- entradas ---------- */
.aparece{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.aparece.visible{opacity:1;transform:none}
.portada .aparece:nth-child(2){transition-delay:.12s}
.objeto .carta{animation:posar 1.6s var(--ease) .35s both}
.objeto .sobre{animation:posar-sobre 1.4s var(--ease) both}
@keyframes posar{from{opacity:0;transform:translate(-30px,40px) rotate(-3deg)}to{opacity:1;transform:rotate(2.5deg)}}
@keyframes posar-sobre{from{opacity:0;transform:translateY(30px) rotate(-9deg)}to{opacity:1;transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .aparece{opacity:1;transform:none}
  .subrayado{background-size:100% .6em}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .portada .envoltorio,.ritual .envoltorio,.quien .envoltorio,.suscripcion .envoltorio,.preguntas .envoltorio{grid-template-columns:1fr}
  .objeto{justify-self:center;max-width:440px}
  .ritual .intro{position:static}
  .quien .coda{grid-column:auto}
}
@media (max-width:480px){
  .etiqueta{font-size:1.8rem}
  .carta{width:86%;padding:1.6rem 1.3rem 1.8rem}
  .carta .saludo{font-size:2rem}
  .carta p{font-size:.9rem}
  .matasellos{width:92px;height:92px;font-size:.52rem;right:12%}
  .sello{width:60px;height:74px}
  .opcion > span{grid-template-columns:1.7rem 1fr auto}
}

/* ---------- accesibilidad ---------- */
.saltar{position:absolute;left:1rem;top:-4rem;background:var(--tinta);color:var(--papel);padding:.6rem 1rem;z-index:300;text-decoration:none}
.saltar:focus{top:1rem}
.con-nota{position:relative}
.aviso{background:color-mix(in oklch, var(--lapiz) 14%, var(--papel));border-left:0;padding:.9rem 1.1rem;margin-bottom:1.4rem;font-size:.98rem}

/* ---------- páginas sueltas ---------- */
.pagina{background:var(--fondo-carta);padding-block:clamp(2.5rem,7vw,6rem) clamp(4rem,9vw,8rem)}
.hoja-pagina h1{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.4rem);font-weight:350;margin-bottom:2rem}
.hoja-pagina h1 a{text-decoration:none}
.hoja-pagina .saludo{font-size:clamp(2.4rem,2rem + 2vw,3.2rem);margin-bottom:.6rem}
.contenido{max-width:var(--lectura)}
.contenido > * + *{margin-top:1.1em}
.contenido h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:400;margin-top:2.2em}
.contenido h3{font-size:1.25rem;font-weight:500;margin-top:1.8em}
.contenido ul,.contenido ol{padding-left:1.3em}
.contenido li + li{margin-top:.4em}
.contenido a{color:var(--tinta);text-underline-offset:.25em;text-decoration-color:var(--lapiz)}
.contenido a:hover{color:var(--lapiz)}
.contenido table{width:100%;border-collapse:collapse;font-size:.92rem}
.contenido th,.contenido td{border-bottom:1px solid var(--linea);padding:.5rem .4rem;text-align:left;vertical-align:top}
.correo-contacto{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem)}
.hoja-gracias h1{max-width:30rem}
.hoja-pagina .firma{font-size:2.6rem;margin-top:.2rem;transform:rotate(-3deg);display:inline-block}
.hoja-pagina .despedida{margin-top:2.4rem;font-size:2rem;line-height:1.1}
.condiciones{margin-top:.8rem;font-size:.85rem;color:var(--tinta-suave)}
.condiciones a{color:inherit;text-underline-offset:.2em}

/* El H1 es la etiqueta manuscrita de la portada (palabras clave); el titular grande es un párrafo. */
h1.etiqueta{font-weight:400;letter-spacing:.015em;text-wrap:initial}
.portada .titular{line-height:1.08;text-wrap:balance;letter-spacing:-.012em}

/* ---------- fotografías ---------- */
.banda-foto{position:relative;margin:0;background:var(--fondo-carta)}
.banda-foto img{display:block;width:100%;height:clamp(280px,42vw,620px);object-fit:cover;object-position:center 45%}
.banda-foto figcaption{position:absolute;right:clamp(1rem,5vw,4rem);bottom:clamp(.8rem,3vw,2rem);font-size:clamp(1.8rem,1.4rem + 1.5vw,2.8rem);color:var(--papel);transform:rotate(-3deg);text-shadow:0 2px 12px oklch(0.2 0.03 60 / .55)}
.foto-ritual{display:block;width:100%;max-width:26rem;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);margin-top:2.2rem;box-shadow:0 24px 50px -30px oklch(0.3 0.04 60 / .55)}
.foto-pegada{position:relative;margin:2.4rem 0 0;max-width:15rem;background:var(--papel);padding:.7rem .7rem 2.2rem;border-radius:var(--radio-peq);transform:rotate(-3deg);box-shadow:0 22px 44px -26px oklch(0.3 0.04 60 / .6)}
.foto-pegada::before{content:"";position:absolute;top:-.8rem;left:50%;width:5.5rem;height:1.6rem;margin-left:-2.75rem;background:oklch(0.9 0.035 92 / .8);transform:rotate(4deg);box-shadow:0 1px 2px oklch(0.3 0.04 60 / .15)}
.foto-pegada img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.foto-preguntas{display:block;width:100%;max-width:18rem;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio);margin-top:2.4rem;box-shadow:0 24px 50px -30px oklch(0.3 0.04 60 / .55)}
@media (max-width:900px){
  .foto-ritual{max-width:none;aspect-ratio:16/10}
  .foto-pegada{display:none}
  .foto-preguntas{display:none}
}