/* raul-cruz.com · La nota de remisión
   Hojas blancas del talonario sobre la copia amarilla; tres tintas: imprenta, folio rojo y pluma azul. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/azeret-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #FFFFFF;
  --copy-yellow: #F3E3A3;
  --copy-yellow-deep: #E9D47E;
  --ink: #262420;
  --ink-deep: #121110;
  --folio-red: #C3342B;
  --pen-blue: #2A44B0;
  --muted: #5E5F59;
  --rule: #C9C9C2;
  --photo-ground: #E4E2DC;

  --f-display: "Familjen Grotesk", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-hand: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --f-folio: "Azeret Mono", ui-monospace, Menlo, monospace;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 40px;
  --s-entre-hojas: clamp(24px, 5vw, 48px);
  --s-hoja: clamp(20px, 4.5vw, 48px);

  --sombra-hoja: 0 1px 0 rgb(0 0 0 / 0.06), 0 10px 22px -14px rgb(38 36 32 / 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ink) var(--copy-yellow);
}

body {
  margin: 0;
  background: var(--copy-yellow);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  caret-color: var(--pen-blue);
  -webkit-font-smoothing: antialiased;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

::selection { background: rgb(42 68 176 / 0.2); color: var(--ink-deep); }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--pen-blue); }

:focus-visible {
  outline: 3px solid var(--pen-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 0px));
  top: -100px;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  font-weight: 700;
}
.saltar:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

main {
  display: grid;
  gap: var(--s-entre-hojas);
  padding-block: calc(var(--s-entre-hojas) + env(safe-area-inset-top, 0px)) var(--s-entre-hojas);
}

/* ---------- La hoja del talonario ---------- */

.hoja {
  position: relative;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  background: var(--paper);
  box-shadow: var(--sombra-hoja);
  padding: calc(var(--s-hoja) + 10px) var(--s-hoja) var(--s-hoja);
  scroll-margin-top: var(--s-md);
}

/* Perforación del talonario: los hoyitos dejan ver la copia amarilla. */
.hoja::before {
  content: "";
  position: absolute;
  inset: 10px 0 auto;
  height: 6px;
  background: radial-gradient(circle, var(--copy-yellow) 2.2px, transparent 2.6px) 7px 0 / 13px 6px repeat-x;
}

.folio {
  font-family: var(--f-folio);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--folio-red);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.folio span { font-size: 0.8125rem; margin-right: 2px; }

.etiqueta,
.campo dt,
.renglones th,
.membrete__giro {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pluma {
  font-family: var(--f-hand);
  font-weight: 400;
  color: var(--pen-blue);
  font-size: 1.3rem;
  line-height: 1.1;
}

.hoja__encabezado,
.membrete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}

.hoja__encabezado h2 {
  font-size: clamp(1.625rem, 3.8vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* ---------- Hero ---------- */

.membrete__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.membrete__giro { margin-top: 6px; color: var(--muted); letter-spacing: 0.03em; }
.membrete .folio { font-size: 1rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "campos foto"
    "titulo titulo"
    "lead lead";
  column-gap: var(--s-md);
  margin-top: var(--s-md);
}
.hero__campos { grid-area: campos; align-self: start; }
.hero__foto { grid-area: foto; width: 120px; margin-top: 4px; }
.hero__titulo {
  grid-area: titulo;
  margin-top: 20px;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero__lead {
  grid-area: lead;
  margin-top: var(--s-md);
  font-size: 1.125rem;
  max-width: 46ch;
}

.campos { margin: 0; display: grid; gap: 2px; }
.campo {
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.campo dt { flex: none; }
.campo dd { margin: 0; min-width: 0; }
.campo time {
  font-family: var(--f-folio);
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Foto engrapada: ligeramente chueca, con dos grapas arriba. */
.foto-engrapada {
  position: relative;
  margin: 0;
  background: var(--photo-ground);
  padding: 5px;
  transform: rotate(2deg);
  box-shadow: 0 2px 4px -1px rgb(38 36 32 / 0.25), 0 10px 18px -12px rgb(38 36 32 / 0.4);
}
.foto-engrapada img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-engrapada::before,
.foto-engrapada::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 22px;
  height: 5px;
  border: 1.5px solid #8D8C86;
  border-bottom: 0;
  background: linear-gradient(#B9B8B2, #8D8C86);
  border-radius: 1px;
  z-index: 1;
}
.foto-engrapada::before { left: 16%; }
.foto-engrapada::after { right: 16%; }

.hero__pedido {
  display: grid;
  margin-top: 18px;
}

.renglones {
  width: 100%;
  border-collapse: collapse;
}
.renglones th {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1.5px solid var(--ink);
}
.renglones td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.renglones th:first-child,
.renglones__cant { width: 4rem; }
.renglones__cant {
  font-family: var(--f-folio);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sello {
  justify-self: end;
  margin-top: -10px;
  margin-right: 4px;
  padding: 7px 12px;
  border: 2.5px solid var(--folio-red);
  border-radius: 3px;
  color: var(--folio-red);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
  animation: sellar 560ms var(--ease-out) 200ms both;
}

@keyframes sellar {
  from { transform: rotate(-11deg) scale(1.4); opacity: 0; }
  55% { opacity: 1; }
  to { transform: rotate(-6deg) scale(1); opacity: 1; }
}

/* ---------- Botones ---------- */

.acciones {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.acciones__principal { display: grid; gap: 6px; }
.acciones__nota,
.acciones__correo { font-size: 0.9375rem; color: var(--muted); }
.acciones__nota { text-align: center; }
.acciones__correo a,
.contacto__correo a { color: var(--ink); font-weight: 700; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 4px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.boton:active { transform: translateY(2px) scale(0.985); transition-duration: 70ms; }
.boton .icono { width: 20px; height: 20px; flex: none; }

.boton--whatsapp {
  min-height: 52px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 14px -8px rgb(18 17 16 / 0.6);
}
.boton--whatsapp:hover { background: var(--ink-deep); }
.boton--whatsapp:active { box-shadow: 0 2px 4px -2px rgb(18 17 16 / 0.6); }

.boton--agenda {
  background: var(--copy-yellow);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.boton--agenda:hover { background: var(--copy-yellow-deep); }
.boton--agenda:active { background: var(--copy-yellow-deep); }

.boton--compacto { min-height: 48px; }

/* ---------- Qué hago ---------- */

.giros {
  margin-top: var(--s-md);
  font-size: 1.125rem;
  max-width: 62ch;
}

.conceptos {
  list-style: none;
  margin: var(--s-md) 0 0;
  padding: 0;
}
.conceptos li {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.conceptos li:last-child { border-bottom: 0; padding-bottom: 0; }
.conceptos h3 { font-size: 1.25rem; line-height: 1.2; }
.conceptos p { max-width: 58ch; }

.enlace-caso { margin-top: var(--s-lg); font-weight: 700; }

.trabajos { margin-top: var(--s-xl); display: grid; gap: 10px; }
.trabajos__titulo { font-size: 1.25rem; line-height: 1.2; }
.trabajos__giro { width: 34%; font-weight: 700; }
.trabajos__nota { font-size: 0.9375rem; color: var(--muted); }
.trabajos { scroll-margin-top: var(--s-md); }
.trabajos__caso {
  display: block;
  width: fit-content;
  margin-top: 8px;
  padding-block: 4px;
  font-weight: 700;
}

/* ---------- Caso de estudio (página propia) ---------- */

.membrete__nombre a { color: inherit; text-decoration: none; }
.membrete__nombre a:hover { text-decoration: underline; text-decoration-color: var(--pen-blue); }
.volver { margin-top: var(--s-md); font-weight: 700; }
.volver a { display: inline-block; padding-block: 8px; }
.caso__titulo {
  margin-top: var(--s-sm);
  font-size: clamp(1.9rem, 6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.caso__lead { margin-top: var(--s-md); font-size: 1.125rem; max-width: 52ch; }
.caso__ficha { margin-top: var(--s-lg); max-width: 30rem; }
.hoja--caso .caso__ficha + .caso__campos { margin-top: var(--s-lg); border-top: 2px solid var(--ink); }

.caso__campos { margin: var(--s-md) 0 0; display: grid; gap: 4px; }
.campo--bloque { display: grid; gap: 4px; padding: 12px 0 10px; }

.pendiente {
  font-family: var(--f-folio);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  background: var(--copy-yellow);
  padding: 2px 6px;
}

.antes-despues {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-lg);
}
.antes-despues__col {
  border: 1.5px solid var(--ink);
  padding: var(--s-md);
}
.antes-despues__col--despues { border-color: var(--pen-blue); }
.antes-despues ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.caso__lista { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.campo--bloque dd p + .caso__lista { margin-top: 8px; }
.captura img { width: 100%; height: auto; border: 1px solid var(--rule); }

.capturas {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-lg);
}
.captura { margin: 0; }
.captura__espacio {
  aspect-ratio: 16 / 10;
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--rule);
  background: #FAFAF8;
}
.captura figcaption { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }

.testimonio {
  margin: var(--s-lg) 0 0;
  padding: var(--s-md) 0 0;
  border-top: 2px solid var(--ink);
}
.testimonio p { font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; }
.testimonio footer { margin-top: 8px; color: var(--muted); }

.caso__cierre {
  display: grid;
  gap: 12px;
  margin-top: var(--s-lg);
  font-weight: 700;
}

/* ---------- Cómo trabajo ---------- */

.pasos {
  position: relative;
  list-style: none;
  margin: var(--s-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-lg);
}
/* Una sola línea continua une los cuatro pasos. */
.pasos::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 0.75px);
  top: 1.25rem;
  bottom: 1.25rem;
  width: 1.5px;
  background: var(--ink);
}
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-md);
}
.paso__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  font-family: var(--f-folio);
  font-weight: 600;
  color: var(--folio-red);
  font-variant-numeric: tabular-nums;
}
.paso h3 { font-size: 1.25rem; line-height: 1.2; padding-top: 0.45rem; }
.paso p { margin-top: 4px; max-width: 56ch; }
.pluma--nota {
  display: inline-block;
  margin-top: 6px;
  font-size: 1.5rem;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.observaciones {
  margin-top: var(--s-xl);
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.observaciones__texto { margin-top: 8px; max-width: 60ch; font-size: 1.125rem; }
.observaciones__texto strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

/* ---------- Quién soy ---------- */

.quien {
  display: grid;
  gap: var(--s-xl);
  margin-top: var(--s-lg);
}
.quien__foto { width: min(220px, 70%); justify-self: center; transform: rotate(-1.5deg); }
/* Recuerdos del tianguis y de Help Land: una fila de fotos chicas al final del texto. */
.recuerdos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 520px;
  margin-top: 4px;
}
.recuerdo { padding-bottom: 2px; transform: rotate(-2deg); }
.recuerdo + .recuerdo { transform: rotate(2.5deg); }
.recuerdo img { aspect-ratio: 3 / 2; object-fit: cover; }
.recuerdo figcaption {
  padding: 2px 2px 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: center;
}
.quien__texto { display: grid; gap: var(--s-md); min-width: 0; }
.quien__texto > p { max-width: 62ch; }

.ficha { margin: 0 0 var(--s-sm); display: grid; }

.firma { margin-top: var(--s-md); width: min(300px, 100%); }
.firma__trazo { font-size: 2.6rem; line-height: 1; padding-left: 12px; transform: rotate(-4deg); transform-origin: left bottom; }
.firma__linea {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Contacto ---------- */

.contacto__lead {
  margin-top: var(--s-md);
  font-size: 1.1875rem;
  max-width: 50ch;
}
.contacto {
  display: grid;
  gap: var(--s-lg);
  margin-top: var(--s-lg);
}
.contacto__opcion { display: grid; gap: 8px; }
.contacto__opcion p { font-size: 0.9375rem; color: var(--muted); }
.contacto__opcion--principal .boton { min-height: 58px; font-size: 1.1875rem; }
.dato {
  font-family: var(--f-folio);
  font-weight: 600;
  margin-inline: 6px; /* aire para el anillo de foco */
  color: var(--ink);
  user-select: all;
}
.contacto__correo { color: var(--muted); }

/* ---------- Pie ---------- */

.pie {
  max-width: 58rem;
  margin-inline: auto;
  padding-block: var(--s-md) calc(var(--s-xl) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  display: grid;
  gap: 8px;
}
.pie a { color: var(--ink); }
.pie__talonario {
  font-family: var(--f-folio);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Barra fija de WhatsApp (celular) ---------- */

.barra-whatsapp {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: var(--paper);
  border-top: 2px solid var(--ink);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
}
.barra-whatsapp .boton { width: 100%; }
.barra-whatsapp.esta-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 280ms var(--ease-out), visibility 0s;
}

@media (max-width: 899px) {
  body { padding-bottom: 84px; }
}

/* ---------- Botón de compartir ----------
   Círculo en celular (sube cuando aparece la barra de WhatsApp); píldora con texto
   desde 900px, en el margen amarillo. */

.compartir {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--f-display);
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 8px 18px -12px rgb(0 0 0 / .25);
  cursor: pointer;
  transition: bottom 280ms var(--ease-out), background-color 150ms;
}
.compartir[hidden] { display: none; }
.compartir:hover { background: var(--copy-yellow); }
.compartir:active { transform: translateY(1px); }
.compartir .icono { width: 20px; height: 20px; flex: none; }
.compartir__texto { display: none; }
.barra-whatsapp.esta-visible ~ .compartir { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
/* En celular solo aparece junto con la barra: si no, taparía los botones de WhatsApp
   del inicio y de Contacto. */
@media (max-width: 899px) {
  .compartir { visibility: hidden; opacity: 0; transition: bottom 280ms var(--ease-out), opacity 200ms, visibility 0s linear 200ms; }
  .barra-whatsapp.esta-visible ~ .compartir { visibility: visible; opacity: 1; transition: bottom 280ms var(--ease-out), opacity 200ms, visibility 0s; }
}

.compartir__aviso {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 21;
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
.compartir__aviso.esta-visible { opacity: 1; }

@media (min-width: 900px) {
  .compartir {
    right: 24px;
    bottom: 24px;
    width: auto;
    padding: 0 18px 0 14px;
  }
  .compartir__texto { display: inline; }
  .compartir__aviso { right: 24px; bottom: 80px; }
}

/* ---------- Movimiento al llegar (solo si site.js puso .anima en <html>) ----------
   Sin JS o con movimiento reducido, todo se ve completo desde el inicio. */

.anima .pasos::before {
  transform-origin: top;
  transition: transform 900ms var(--ease-out);
}
.anima .pasos:not(.visto)::before { transform: scaleY(0); }

.anima .escribe {
  clip-path: inset(-20% -10% -20% -10%);
  transition: clip-path 750ms cubic-bezier(0.45, 0, 0.25, 1) 150ms;
}
/* Se observa el contenedor: un elemento recortado no cuenta como visible. */
.anima [data-anima]:not(.visto) .escribe { clip-path: inset(-20% 100% -20% -10%); }

/* ---------- Pantallas medianas y grandes ---------- */

@media (min-width: 600px) {
  .acciones {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
  .acciones__correo { grid-column: 1 / -1; }
  .acciones__nota { text-align: left; }
  .acciones--sin-agenda { grid-template-columns: minmax(0, 26rem); }
  .contacto--sin-agenda { grid-template-columns: minmax(0, 28rem); }
  .caso__cierre .boton { justify-self: start; }
  .capturas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .antes-despues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Columnas a la medida de su texto: "Atención: en persona y a distancia" no cabe en una mitad exacta. */
  .ficha { grid-template-columns: auto auto; column-gap: var(--s-lg); }
  .contacto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .contacto__correo { grid-column: 1 / -1; }
}

/* Junto a la foto, la ficha solo cabe en dos columnas desde 960px. */
@media (min-width: 760px) and (max-width: 959px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "campos foto"
      "titulo foto"
      "lead foto";
    column-gap: var(--s-xl);
    margin-top: var(--s-lg);
  }
  .hero__foto { width: 240px; margin-top: 8px; align-self: start; }
  .hero__titulo { margin-top: var(--s-md); }
  .hero__campos { max-width: 26rem; }
  .hero__pedido { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-lg); }
  .sello { margin-top: 0; font-size: 0.9375rem; padding: 9px 16px; }

  .conceptos li { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: var(--s-lg); }
  .conceptos li:last-child { padding-bottom: 0; }

  .quien { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .recuerdos { gap: 22px; }
  .recuerdo figcaption { font-size: 1.0625rem; }
  .quien__foto { width: 100%; margin-top: 8px; }
}

@media (min-width: 900px) {
  body { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .barra-whatsapp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sello { animation: none; }
  .barra-whatsapp, .barra-whatsapp.esta-visible, .boton { transition: none; }
}

/* ---------- Página no encontrada ---------- */

.pagina-404 { padding-bottom: 0; }
.hoja--404 { display: grid; }
.pluma--404 {
  justify-self: start;
  margin-top: var(--s-md);
  padding: 2px 12px;
  border: 2px solid var(--folio-red);
  color: var(--folio-red);
  font-size: 1.5rem;
  transform: rotate(-4deg);
}
.hoja--404 .acciones { margin-top: var(--s-lg); }

/* ---------- Aviso de privacidad ---------- */

.pagina-legal { padding-bottom: 0; }
.legal { display: grid; gap: var(--s-md); }
.legal .hoja__encabezado h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.25rem; line-height: 1.2; margin-top: var(--s-md); }
.legal p, .legal ul { max-width: 38rem; }
.legal ul { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.legal__resumen { font-size: 1.1875rem; padding: var(--s-md) 0; border-bottom: 1px solid var(--rule); }
.legal__volver { margin-top: var(--s-md); font-weight: 700; }

/* ---------- Ayudas ---------- */

/* Texto solo para lector de pantalla. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlaces de texto con área táctil de 44px: una capa invisible centrada en el
   enlace, así no mueve el renglón y el anillo de foco se queda en el texto. */
.dato,
.acciones__correo a,
.contacto__correo a,
.legal a,
.quien__texto a,
.membrete__nombre a,
.volver a,
.pie a {
  position: relative;
}
.dato::after,
.acciones__correo a::after,
.contacto__correo a::after,
.legal a::after,
.quien__texto a::after,
.membrete__nombre a::after,
.volver a::after,
.pie a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}
.pie a,
.legal a,
.quien__texto a { white-space: nowrap; }
/* Que el área del teléfono no alcance el borde del botón de WhatsApp. */
.contacto__opcion--principal p { margin-top: 6px; }