/* /creemos: estructura tipo Locomotive (bloques de color, grilla de 3 columnas,
   imágenes que se revelan de pixelado a nítido) con la paleta de la presentación. */
:root {
  --azul: #23469a;
  --rosa: #feadce;
  --amarillo: #f6fa97;
  --gris: #272624;
  --pad: clamp(16px, 2.5vw, 36px);
  --fondo: var(--azul);
  --tinta: var(--rosa);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: "Neue Montreal", Helvetica, Arial, sans-serif; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35;
  transition: background-color .6s ease, color .6s ease;
}
body.tono-rosa { --fondo: var(--rosa); --tinta: var(--azul); }
body.tono-gris { --fondo: var(--gris); --tinta: var(--rosa); }
body.tono-amarillo { --fondo: var(--amarillo); --tinta: #000; }
body::after { /* grano */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
p { margin: 0; }

/* Barra superior fija */
.cr-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px;
  padding: 18px var(--pad); mix-blend-mode: difference; color: #fff;
}
.cr-logo img { width: 72px; height: auto; display: block; }
.cr-nav { justify-self: start; }
.cr-nav a, .cr-talk { text-decoration: none; }
.cr-nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.cr-nav a:hover, .cr-talk:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Título */
.cr-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) 6vh; position: relative; }
.cr-eyebrow { font-size: .85em; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2em; }
.cr-titulo { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(64px, 15vw, 260px); line-height: .85; letter-spacing: -.02em; margin: 0; }
.cr-scroll { position: absolute; right: var(--pad); bottom: 6vh; font-size: 1.6em; }

/* Mezcla tipográfica animada */
[data-mezcla] .ml { display: inline-block; text-align: center; }
[data-mezcla] .mp { display: inline-block; white-space: nowrap; }
[data-mezcla] .t-r, .t-r { font-family: "Instrument Serif", Georgia, serif; font-style: normal; }
[data-mezcla] .t-i, .t-i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; }
[data-mezcla] .t-p { font-family: "Pixelify Sans", monospace; font-size: .6em; }
[data-mezcla] .t-n { font-family: "Neue Montreal", Helvetica, Arial, sans-serif; font-size: .7em; }

/* Grilla tipo Locomotive: etiqueta | imagen | texto */
.cr-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--pad); row-gap: 24px;
  padding: 18vh var(--pad); align-items: start;
}
.cr-label { grid-column: 1; font-size: 1em; }
.cr-media { grid-column: 1; grid-row: 2; margin: 0; max-width: 360px; }
.cr-media img, .cr-media canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.cr-texto { grid-column: 2 / span 2; grid-row: 1 / span 2; display: grid; gap: 1.1em; max-width: 46em; font-size: 1.3em; }
.cr-grande { font-size: clamp(48px, 7vw, 120px); line-height: .9; margin-bottom: .2em; }

/* Creencias */
.cr-creencias { padding: 6vh 0 12vh; }
.cr-creencia {
  display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--pad);
  padding: 5vh var(--pad); border-top: 1px solid currentColor;
  font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.7vw, 46px); line-height: 1.02; letter-spacing: -.01em;
}
.cr-creencia:last-child { border-bottom: 1px solid currentColor; }
.cr-num { font-family: "Pixelify Sans", monospace; font-weight: 400; font-size: .7em; }
.cr-rosa { background: var(--rosa); color: var(--azul); border-color: var(--rosa); }
.cr-creencia .cr-a, .cr-creencia .cr-b { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.cr-creencia .cr-b { transition-delay: .12s; }
.cr-creencia.visto .cr-a, .cr-creencia.visto .cr-b { opacity: 1; transform: none; }

/* Números */
.cr-datos { grid-column: 2 / span 2; grid-row: 1 / span 2; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4vh var(--pad); }
.cr-datos dt { font-size: 1em; margin-bottom: .3em; }
.cr-datos dd { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(64px, 10vw, 170px); line-height: .85; }
.cr-nota { font-size: .85em; max-width: 24em; margin-top: .8em; }

/* Cita */
.cr-cita { padding: 22vh var(--pad); }
.cr-cita blockquote { margin: 0 auto; max-width: 1100px; text-align: center; }
.cr-cita blockquote p { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(34px, 4.8vw, 82px); line-height: 1; }
.cr-cita footer { margin-top: 2em; font-size: .8em; letter-spacing: .05em; text-transform: uppercase; max-width: 36em; margin-inline: auto; }

/* Cierre */
.cr-cierre { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding: 10vh var(--pad); }
.cr-cta { text-decoration: none; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(54px, 9.5vw, 170px); line-height: .9; letter-spacing: -.02em; }
.cr-cta:hover .cr-flecha { transform: translateX(.15em); }
.cr-flecha { display: inline-block; transition: transform .25s ease; }

.cr-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px var(--pad); background: #000; color: var(--amarillo); font-size: .9em; }
.cr-footer a { text-decoration: none; margin-right: .6em; }

/* Celular */
@media (max-width: 820px) {
  .cr-top { grid-template-columns: auto 1fr auto; }
  .cr-nav { display: none; }
  .cr-grid, .cr-creencia { grid-template-columns: 1fr; }
  .cr-media, .cr-texto, .cr-datos, .cr-label { grid-column: 1; grid-row: auto; }
  .cr-media { max-width: 70%; }
  .cr-creencia { row-gap: 10px; }
  .cr-datos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .cr-creencia .cr-a, .cr-creencia .cr-b { opacity: 1; transform: none; transition: none; }
}