/* El blog de la web pública (ultimolatido.com/blog), con la identidad «Escribanía»: marfil, tinta
   azul-negra, azul pluma para los enlaces, oro viejo solo en filetes. Cormorant Garamond en los
   titulares y Hanken Grotesk en el texto. Páginas estáticas: esta hoja es todo lo que cargan.
   Los colores son los de src/styles/tokens.css (src/blog/blog.test.ts comprueba que coinciden). */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/assets/cormorant-garamond-latin-wght-normal-CUoBjw-S.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/assets/cormorant-garamond-latin-wght-italic-C-nL33vl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/hanken-grotesk-latin-wght-normal-CaVRRdDk.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/pinyon-script-latin-400-normal-HCoaxbyT.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --desk: #f5f0e6;
  --surface: #fbf8f1;
  --ink: #1d2433;
  --ink-2: #545b6b;
  --action: #24345e;
  --on-action: #fbf8f1;
  --oro: #a88a5c;
  --rule: #dcd3c2;
  --font-display: 'Cormorant Garamond Variable', 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
  --font-firma: 'Pinyon Script', 'Snell Roundhand', cursive;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-sheet: 0 0.5px 0 rgb(40 30 20 / 0.06), 0 1px 2px rgb(40 30 20 / 0.1), 0 6px 12px -4px rgb(40 30 20 / 0.12),
    0 28px 44px -20px rgb(40 30 20 / 0.26);
  --measure: 40rem;
  --gutter: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  /* «Sobre la mesa»: el papel de algodón con su grano (la variable vive en mesa.css). */
  background: var(--desk);
  background: var(--mesa);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
p,
li {
  text-wrap: pretty;
  hyphens: auto;
}
a {
  color: var(--action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -10rem;
  background: var(--surface);
  padding: 0.75rem 1rem;
  z-index: 2;
}
.skip:focus {
  top: 1rem;
}
.eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}

/* ——— Cabecera y pie ——— */
.site-header,
.site-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
}
.brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--action);
}
.site-header nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.site-header nav a,
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.site-header nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--oro);
}
.site-header nav .site-header-app {
  color: var(--action);
  font-weight: 600;
}
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
.site-footer > span {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ——— La entrada ——— */
main {
  padding: 0 var(--gutter);
}
.post,
.blog-header {
  max-width: var(--measure);
  margin: 0 auto;
}
.crumbs {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 1.5rem;
}
.crumbs a {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}
.post-header {
  margin-top: 0.5rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--surface);
  box-shadow: var(--hoja-sombra);
  border-top: 2px solid var(--oro);
  rotate: -0.6deg;
}
.post-header h1,
.blog-header h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-top: 0.9rem;
}
.post-meta {
  margin: 1.25rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.post-contents {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 1px solid var(--oro);
}
.post-contents p {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.post-contents ol {
  margin: 0;
  padding-left: 1.25rem;
}
.post-contents li {
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* En línea: con un título de dos líneas, el número sigue a la altura de la primera. */
.post-contents a {
  display: inline;
}
.post-body {
  padding-top: 0.5rem;
}
.post-body h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 3rem 0 1rem;
  scroll-margin-top: 1.5rem;
}
.post-body h3 {
  font-size: 1.5rem;
  margin: 2rem 0 0.5rem;
  scroll-margin-top: 1.5rem;
}
.post-body p,
.post-body ul,
.post-body ol {
  margin: 0 0 1.2rem;
}
.post-body li {
  margin-bottom: 0.5rem;
}
.post-body ol li::marker {
  color: var(--action);
  font-weight: 650;
}
/* Las listas, con gotas de tinta en lugar de viñetas. */
.post-body ul {
  list-style: none;
  padding-left: 1.5rem;
}
.post-body ul > li {
  position: relative;
}
.post-body ul > li::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 35% 35%, #4a5f99, var(--action) 60%);
}
.post-body strong {
  font-weight: 650;
}
/* Las cartas y frases de ejemplo: hojas sueltas sobre la mesa, cada una un poco girada. */
.post-body blockquote {
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  box-shadow: var(--hoja-sombra);
  rotate: -0.5deg;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.5;
}
.post-body blockquote:nth-of-type(even) {
  rotate: 0.6deg;
}
.post-body blockquote p {
  margin: 0;
}
.post-body blockquote p + p {
  margin-top: 0.9rem;
}

/* ——— La invitación a la app ——— */
.app-invite {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 2rem 1.75rem;
  background: var(--surface);
  box-shadow: var(--hoja-sombra);
  rotate: 0.4deg;
  scroll-margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: 1.5rem 2rem;
  align-items: center;
}
.app-invite-copy {
  min-width: 0;
}
.app-invite .big-envelope {
  width: 100%;
}
.app-invite .big-envelope-name {
  font-size: 1.75rem;
}
.app-invite h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 0.6rem 0 0.8rem;
}
.app-invite-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--ink-2);
}
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.5rem;
  min-width: 10.5rem;
  padding: 0.4rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--ink);
  color: var(--on-action);
  text-decoration: none;
  line-height: 1.2;
}
.store-badge small {
  font-size: 0.8125rem;
  opacity: 0.85;
}
.store-badge strong {
  font-size: 1.125rem;
  font-weight: 650;
}
.store-badge.is-soon {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.store-badge.is-soon small {
  color: var(--ink-2);
  opacity: 1;
}
.app-invite .app-invite-note {
  margin: 1rem 0 0;
}
.app-invite-note a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 600;
}

/* ——— Listas de entradas ——— */
.blog-header {
  padding: 2.5rem 0 1rem;
}
.blog-header .ink-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.blog-header .ink-row .ink-object {
  width: 4.5rem;
  height: 3.375rem;
}
.lede {
  font-size: 1.1875rem;
  color: var(--ink-2);
  margin: 1.25rem 0 0;
}
.related,
.blog-list {
  max-width: 72rem;
  margin: 4rem auto 0;
}
.blog-list {
  margin-top: 2.5rem;
}
.related > h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.post-list {
  gap: 1.75rem 1.25rem;
}
.post-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.post-card .ink-object {
  width: 4.5rem;
  height: 3.375rem;
  margin-bottom: 0.25rem;
}
.post-card h3 {
  font-size: 1.5rem;
}
.post-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.post-card h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--oro);
}
.post-card > p:last-child {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 40rem) {
  .site-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .post-body blockquote {
    padding: 1.25rem 1.25rem;
    font-size: 1.1875rem;
  }
  .app-invite {
    padding: 1.5rem 1.25rem;
    grid-template-columns: 1fr;
    rotate: 0deg;
  }
  .post-header {
    padding: 1.5rem 1.25rem 1.25rem;
    rotate: 0deg;
  }
  .app-invite .big-envelope {
    width: min(100%, 15rem);
  }
  .blog-header .ink-row .ink-object {
    width: 3.5rem;
    height: 2.625rem;
  }
  .store-badge {
    flex: 1 1 10rem;
  }
}
@media print {
  .site-header nav,
  .app-invite,
  .related {
    display: none;
  }
}

/* ——— «Sobre la mesa» (30-10, diseño aprobado) para la web pública: portada y blog ———
   La mesa de escribanía (papel de algodón con grano y luz de ventana arriba a la izquierda), hojas
   sueltas algo giradas, objetos dibujados a tinta, sobres de verdad y el sobre grande que se abre.
   Copia, para la web, de lo que la app tiene al final de src/styles/app.css en la rama `pasos`.
   La usan la portada (importada en Landing.tsx) y las páginas del blog (se añade a blog.css). */
:root {
  --mesa:
    radial-gradient(120% 60% at 15% 0%, rgb(255 250 238 / 0.95), rgb(255 250 238 / 0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #f7f2e8, #efe7d8);
  --hoja-sombra: 0 1px 1px rgb(60 40 20 / 0.12), 0 10px 16px -12px rgb(60 40 20 / 0.5);
}

/* Una hoja suelta sobre la mesa: sin radio, con su sombra y algo girada. */
.hoja {
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: var(--hoja-sombra);
}
.hojas > :nth-child(5n + 1) { rotate: -1.4deg; }
.hojas > :nth-child(5n + 2) { rotate: 1.1deg; }
.hojas > :nth-child(5n + 3) { rotate: 0.8deg; }
.hojas > :nth-child(5n + 4) { rotate: -1deg; }
.hojas > :nth-child(5n + 5) { rotate: 0.4deg; }

.ink-object {
  display: block;
  width: 6rem;
  height: 4.5rem;
  flex-shrink: 0;
}

/* El avance, como gotas de tinta: la de ahora, recién mojada. */
.ink-dots {
  list-style: none;
  counter-reset: none;
}
.ink-dots > li::before {
  content: '';
  display: block;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 35% 35%, #4a5f99, var(--action) 60%);
  box-shadow: 0 0 0 3px rgb(36 52 94 / 0.12);
}

/* ——— El sobre realista, por detrás, con su montón ——— */
.paper-envelope {
  position: relative;
  display: block;
  aspect-ratio: 296 / 212;
}
.paper-envelope svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgb(60 40 20 / 0.28)) drop-shadow(0 1px 1px rgb(60 40 20 / 0.18));
}
.paper-envelope svg.under {
  transform: translate(7px, 9px) rotate(4deg);
  filter: drop-shadow(0 6px 8px rgb(60 40 20 / 0.22));
}
.paper-envelope svg.under-2 {
  transform: translate(-6px, 13px) rotate(-3deg);
  filter: drop-shadow(0 6px 8px rgb(60 40 20 / 0.2));
}

/* ——— El sobre grande: un <details> que se abre al tocarlo ——— */
.big-envelope {
  position: relative;
  display: block;
  width: min(100%, 17.5rem);
  margin: 0.25rem auto 0.125rem;
  transition: margin-top 600ms var(--ease-out) 300ms;
}
.big-envelope > summary {
  position: relative;
  display: block;
  aspect-ratio: 1.42;
  list-style: none;
  cursor: pointer;
  perspective: 700px;
}
.big-envelope > summary::-webkit-details-marker {
  display: none;
}
.big-envelope > summary > span {
  position: absolute;
}
.big-envelope-body {
  inset: 0;
  background: linear-gradient(170deg, #f4eddf, #e6dbc5);
  box-shadow: 0 1px 1px rgb(60 40 20 / 0.15), 0 22px 30px -18px rgb(60 40 20 / 0.6);
}
.big-envelope-lining {
  inset: 0;
  background: repeating-linear-gradient(135deg, rgb(36 52 94 / 0.2) 0 2px, transparent 2px 8px), #ece3d2;
}
.big-envelope-letter {
  left: 7%;
  right: 7%;
  top: 8%;
  height: 84%;
  z-index: 2;
  overflow: hidden;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
  color: #24345e;
  font-family: 'Pinyon Script', var(--font-firma, cursive);
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: left;
  transition: transform 900ms var(--ease-out) 550ms;
}
.big-envelope-pocket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.big-envelope-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 800ms var(--ease-in-out), z-index 0s 400ms;
}
.big-envelope-flap span {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.big-envelope-flap .out {
  background: linear-gradient(180deg, #f1e9da, #e5dac4);
}
.big-envelope-flap .in {
  transform: rotateX(180deg);
  background: repeating-linear-gradient(135deg, rgb(36 52 94 / 0.2) 0 2px, transparent 2px 8px), #ede5d5;
}
.big-envelope-wax {
  left: 50%;
  top: 62%;
  z-index: 6;
  width: 2.8rem;
  height: 2.8rem;
  margin: -1.4rem 0 0 -1.4rem;
  display: grid;
  place-items: center;
  border-radius: 52% 48% 50% 50% / 49% 53% 47% 51%;
  background: radial-gradient(circle at 36% 32%, #b53646, #8e1f2f 55%, #5f1220);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.35), inset 0 -2px 3px rgb(0 0 0 / 0.3);
  color: #4e0e19;
  transition: opacity 300ms, transform 300ms;
}
.big-envelope-wax svg {
  width: 1.2rem;
  height: 1.2rem;
}
.big-envelope-name {
  left: 0;
  right: 0;
  bottom: 7%;
  z-index: 5;
  text-align: center;
  color: var(--action);
  font-family: 'Pinyon Script', var(--font-firma, cursive);
  font-size: 2rem;
  line-height: 1;
  transition: opacity 300ms;
}
.big-envelope[open] {
  margin-top: 4.5rem;
}
.big-envelope[open] .big-envelope-flap {
  transform: rotateX(178deg);
  z-index: 1;
}
.big-envelope[open] .big-envelope-wax,
.big-envelope[open] .big-envelope-name {
  opacity: 0;
  transform: scale(0.9);
}
.big-envelope[open] .big-envelope-letter {
  transform: translateY(-58%);
}
.big-envelope:not([open]) > summary {
  animation: envelope-breathe 3.2s ease-in-out infinite;
}
@keyframes envelope-breathe {
  50% {
    transform: translateY(-2px);
  }
}
.big-envelope > summary:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .big-envelope,
  .big-envelope > summary,
  .big-envelope-flap,
  .big-envelope-letter,
  .big-envelope-wax,
  .big-envelope-name {
    animation: none !important;
    transition: none !important;
  }
}

/* ——— La portada (30-10): el sobre sobre la mesa, que se abre y deja la carta encima ——— */
.landing-desk {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(100%, 28rem);
  margin-inline: auto;
}
.landing-desk:focus { outline: none; }
.landing-desk .landing-example {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-2, #545b6b);
}
/* Las etiquetas de papel: con su ojal, algo giradas. */
.desk-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.8rem; }
.desk-tag {
  position: relative;
  min-height: 44px;
  padding: 0.45rem 1.05rem 0.45rem 1.65rem;
  border: 0;
  clip-path: polygon(0.85rem 0, 100% 0, 100% 100%, 0.85rem 100%, 0 50%);
  background: linear-gradient(180deg, #f6efe1, #eadfca);
  color: var(--ink, #1d2433);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 500;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgb(60 40 20 / 0.22));
  transition: transform 200ms var(--ease-out), background-color 200ms;
}
.desk-tag::before {
  content: '';
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.21rem;
  border-radius: 50%;
  background: #d9ccb2;
  box-shadow: inset 0 1px 1px rgb(60 40 20 / 0.35);
}
.desk-tag:nth-child(1) { rotate: -2deg; }
.desk-tag:nth-child(2) { rotate: 1.5deg; }
.desk-tag:nth-child(3) { rotate: -1deg; }
.desk-tag[aria-pressed='true'] {
  background: linear-gradient(180deg, #fbf8f1, #f1e8d6);
  color: var(--action, #24345e);
  transform: translateY(-3px);
  text-decoration: underline;
  text-decoration-color: var(--lacre, #8e1f2f);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}
.desk-tag:focus-visible { outline: 3px solid var(--oro, #a88a5c); outline-offset: 3px; }

.desk-scene { position: relative; width: 100%; height: 31rem; }
.desk-envelope {
  position: absolute;
  left: 50%;
  top: 5rem;
  width: min(88%, 21rem);
  aspect-ratio: 1.42;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 800px;
  transform: translateX(-50%) rotate(-2deg);
  transition: transform 800ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 200ms;
  animation: desk-envelope-in 600ms var(--ease-out, ease-out) both;
}
@keyframes desk-envelope-in { from { opacity: 0; transform: translate(-50%, 18px) rotate(-4deg); } }
.desk-envelope > span { position: absolute; }
.desk-envelope-body {
  inset: 0;
  background: linear-gradient(170deg, #f5eee0, #e6dbc5);
  box-shadow: 0 1px 1px rgb(60 40 20 / 0.15), 0 26px 34px -20px rgb(60 40 20 / 0.6);
}
.desk-envelope-lining { inset: 0; background: repeating-linear-gradient(135deg, rgb(36 52 94 / 0.2) 0 2px, transparent 2px 8px), #ece3d2; }
.desk-envelope-peek {
  left: 7%;
  right: 7%;
  top: 8%;
  height: 84%;
  z-index: 2;
  padding: 0.8rem 0.9rem;
  background: #fbf8f1;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
  color: #24345e;
  font-family: 'Pinyon Script', cursive;
  font-size: 1.5rem;
  text-align: left;
  transition: transform 800ms var(--ease-out, ease-out) 500ms;
}
.desk-envelope-pocket { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.desk-envelope-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 800ms var(--ease-in-out, ease-in-out), z-index 0s 400ms;
}
.desk-envelope-flap span { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.desk-envelope-flap .out { background: linear-gradient(180deg, #f2eadb, #e3d7c0); }
.desk-envelope-flap .in { transform: rotateX(180deg); background: repeating-linear-gradient(135deg, rgb(36 52 94 / 0.2) 0 2px, transparent 2px 8px), #ede5d5; }
.desk-envelope-wax {
  left: 50%;
  top: 62%;
  z-index: 6;
  width: 3.1rem;
  height: 3.1rem;
  margin: -1.55rem 0 0 -1.55rem;
  display: grid;
  place-items: center;
  border-radius: 52% 48% 50% 50% / 49% 53% 47% 51%;
  background: radial-gradient(circle at 36% 32%, #b53646, #8e1f2f 55%, #5f1220);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.35), inset 0 -2px 3px rgb(0 0 0 / 0.3);
  color: #4e0e19;
  transition: opacity 300ms, transform 300ms;
}
.desk-envelope-wax svg { width: 1.3rem; height: 1.3rem; }
.desk-envelope-name {
  left: 0;
  right: 0;
  bottom: 7%;
  z-index: 5;
  text-align: center;
  color: var(--action, #24345e);
  font-family: 'Pinyon Script', cursive;
  font-size: 2.2rem;
  line-height: 1;
  transition: opacity 300ms;
}
.desk-envelope:not([aria-expanded='true']) .desk-envelope-body { animation: desk-breathe 3.2s ease-in-out infinite; }
@keyframes desk-breathe { 50% { transform: translateY(-2px); } }
.desk-envelope:focus-visible { outline: 3px solid var(--oro, #a88a5c); outline-offset: 6px; }

/* Abierto: el sobre baja y se aparta, la carta sube y queda encima. */
.is-open .desk-envelope { cursor: default; transform: translate(-50%, 11.5rem) rotate(-5deg) scale(0.86); }
.is-open .desk-envelope-flap { transform: rotateX(178deg); z-index: 1; }
.is-open .desk-envelope-wax,
.is-open .desk-envelope-name { opacity: 0; transform: scale(0.9); }
.is-open .desk-envelope-peek { transform: translateY(-50%); }
.desk-letter {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 8;
  width: min(94%, 22.5rem);
  box-sizing: border-box;
  padding: 1.5rem 1.6rem 1.4rem;
  background:
    repeating-linear-gradient(transparent 0 calc(2.05rem - 1px), rgb(36 52 94 / 0.08) calc(2.05rem - 1px) 2.05rem) 0 1.55rem / 100% calc(100% - 2.6rem) no-repeat,
    linear-gradient(180deg, #fcf9f2, #f5efe2);
  box-shadow: 0 1px 1px rgb(60 40 20 / 0.12), 0 22px 30px -18px rgb(60 40 20 / 0.55);
  color: #24345e;
  font-family: 'Pinyon Script', cursive;
  font-size: 1.35rem;
  line-height: 2.05rem;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 9rem) rotate(-3deg) scale(0.9);
  transition: opacity 600ms var(--ease-out, ease-out) 700ms, transform 900ms var(--ease-out, ease-out) 700ms;
}
.desk-letter p { margin: 0 0 0.35rem; padding-inline-end: 0.3rem; }
.desk-letter .desk-letter-greeting { font-size: 1.75rem; margin-bottom: 0.2rem; }
.desk-letter .desk-letter-signature { margin: 0.6rem 0 0; text-align: right; font-size: 1.6rem; }
.is-open .desk-letter { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) rotate(1.2deg); }

@media (max-width: 480px) {
  .desk-scene { height: 29rem; }
  .desk-letter { font-size: 1.2rem; line-height: 1.85rem; padding: 1.2rem 1.2rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .desk-envelope, .desk-envelope-flap, .desk-envelope-peek, .desk-letter { transition: none; animation: none; }
  .desk-envelope-body { animation: none !important; }
}
@media (max-width: 480px) {
  .desk-scene { height: 27rem; }
  .desk-envelope { top: 4.5rem; }
}