/* landing.css — la página pública de Invitamía.
   ─────────────────────────────────────────────────────────────────────────────
   La marca: negro, marfil, oro. Geométrica de tracking amplio para el logotipo,
   Cormorant para lo que se lee despacio. Es lo primero que ve alguien que llegó
   de un anuncio, y tiene que verse caro antes de leer una sola palabra.

   El movimiento está tomado de una landing que funciona (reveal al entrar, barra
   de progreso, brillo que barre el botón, contadores, marquesina, flotar). Pero
   traducido: allá es naranja y rápido; aquí es oro y lento. Una boda no grita.

   TODO lo que se mueve se apaga con prefers-reduced-motion. Sin excepción.

   Las INVITACIONES son otra cosa (invitacion.css): marfil, oro, script, y la
   paleta que escoja cada cliente. Esa es su fiesta, no nuestra marca.
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️ D36 · VA PRIMERO Y NO SE BORRA. */
[hidden] { display: none !important; }

:root {
  --negro:   #0a0a0a;
  --negro-2: #121212;
  --negro-3: #191919;
  --blanco:  #f4f3f1;
  --marfil:  #f6f2ea;
  --gris:    #8f8b86;
  --gris-2:  #5c5854;
  --linea:   #262422;
  --linea-2: #3a3734;
  --oro:     #c9a961;
  --oro-2:   #8a7440;

  --sans:  'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Cormorant Garamond', ui-serif, Georgia, serif;
  --script:'Pinyon Script', 'Cormorant Garamond', cursive;

  --gutter: 1.5rem;
  --ancho:  64rem;
  --lento:  cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.7;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ═══════════════════════════════════ barra de progreso
   Un pelo de oro arriba que dice cuánto falta. Es la pieza más barata que hace
   sentir que la página está viva. */
.progreso { display: none; }
/* Se dibuja SOLO donde el navegador sabe ligar una animación al scroll. Es CSS puro:
   nada de JavaScript tocando .style.width, que la CSP (style-src 'self') bloquea — y con
   razón: si un día alguien logra meter HTML aquí, que no pueda además meterle estilos.
   Donde no hay soporte, simplemente no hay barra. Nadie la echa de menos. */
@supports (animation-timeline: scroll()) {
  .progreso {
    display: block; position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    background: linear-gradient(to right, var(--oro-2), var(--oro));
    z-index: 60; pointer-events: none;
    transform: scaleX(0); transform-origin: 0 50%;
    animation: llenarse linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes llenarse { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* La etiqueta diminuta con mucho aire. El text-indent compensa el espacio que el tracking
   le cuelga a la última letra: sin eso, un texto "centrado" queda medio carácter corrido. */
.eyebrow, .titulo-seccion, .plan-moneda, .pie-marca {
  font-size: .6rem; font-weight: 400; letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--gris-2); margin: 0;
}
/* El punto de oro antes de la etiqueta: marca dónde empieza a leer el ojo. */
.eyebrow--punto { display: inline-flex; align-items: center; gap: .7rem; text-indent: 0; }
.eyebrow--punto::before {
  content: ''; width: 4px; height: 4px; background: var(--oro);
  transform: rotate(45deg); flex: none;
}

/* La regla de un pelo con el rombo al centro. */
.regla { display: flex; align-items: center; justify-content: center; gap: .9rem;
         margin: 0 auto 2.5rem; width: min(10rem, 50%); }
.regla::before, .regla::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--linea-2)); }
.regla::before { background: linear-gradient(to left, transparent, var(--linea-2)); }
.regla i { width: 4px; height: 4px; background: var(--oro); transform: rotate(45deg); flex: none; }

/* ═══════════════════════════════════ portada */
.hero {
  min-height: 100svh; display: grid; align-content: center; justify-items: center;
  text-align: center; padding: 6rem var(--gutter) 5rem; position: relative;
  max-width: 46rem; margin: 0 auto;
}
/* Un halo de oro muy tenue detrás del logotipo, que respira. Sin él, el negro se ve plano. */
.hero::before {
  content: ''; position: absolute; top: 28%; left: 50%; width: min(42rem, 120vw);
  aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,169,97,.10), transparent 62%);
  pointer-events: none; animation: respirar 11s ease-in-out infinite;
}
@keyframes respirar { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
                      50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); } }

.hero-titulo, .marca-grande {
  font-family: var(--sans); font-weight: 200; margin: 1.75rem 0 0;
  /* El tracking cuenta: 9 letras a .34em ocupan como 12. Por eso el tope es 7.6vw y no 11:
     con 11 se partía en "INVITAMÍ / A", que es exactamente como no se lee una marca. */
  font-size: clamp(1.45rem, 7.6vw, 4rem); line-height: 1.05;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--blanco); position: relative;
}
/* Cada letra del logotipo entra por su cuenta. Es lo primero que se ve y dura 1 segundo. */
.hero-titulo .letra {
  display: inline-block; opacity: 0; transform: translateY(.45em);
  animation: letraEntra .85s var(--lento) forwards;
}
@keyframes letraEntra { to { opacity: 1; transform: none; } }
/* El retardo va AQUÍ y no en un style="" desde JavaScript: la CSP es style-src 'self',
   así que un estilo en línea se bloquea. La política está bien; el que estaba mal era yo. */
.hero-titulo .letra:nth-child(1) { animation-delay: 0s; }
.hero-titulo .letra:nth-child(2) { animation-delay: .055s; }
.hero-titulo .letra:nth-child(3) { animation-delay: .11s; }
.hero-titulo .letra:nth-child(4) { animation-delay: .165s; }
.hero-titulo .letra:nth-child(5) { animation-delay: .22s; }
.hero-titulo .letra:nth-child(6) { animation-delay: .275s; }
.hero-titulo .letra:nth-child(7) { animation-delay: .33s; }
.hero-titulo .letra:nth-child(8) { animation-delay: .385s; }
.hero-titulo .letra:nth-child(9) { animation-delay: .44s; }
.hero-titulo .letra:nth-child(n+10) { animation-delay: .5s; }

.hero-frase {
  font-family: var(--serif); font-size: clamp(1.2rem, 4.5vw, 1.6rem); font-weight: 300;
  color: var(--gris); margin: 2.25rem auto 0; max-width: 26rem; line-height: 1.55;
  text-wrap: balance;
}
.hero-frase em { font-style: italic; color: var(--blanco); }
.hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
                margin-top: 3rem; }
.hero-nota { font-size: .68rem; color: var(--gris-2); margin: 2rem 0 0;
             letter-spacing: .16em; text-transform: uppercase; }

.scroll-pista { position: absolute; bottom: 2.5rem; width: 1px; height: 3rem;
                background: var(--linea-2); overflow: hidden; }
.scroll-pista span { display: block; width: 100%; height: 45%; background: var(--oro);
                     animation: bajar 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bajar { 0% { transform: translateY(-110%); } 100% { transform: translateY(240%); } }

/* ═══════════════════════════════════ secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 4.5rem var(--gutter); }
.titulo-seccion { text-align: center; margin: 0 0 2.75rem; }
.parrafo { font-family: var(--serif); font-size: 1.25rem; font-weight: 300; color: var(--gris);
           text-align: center; max-width: 30rem; margin: 0 auto 2rem; line-height: 1.6; }
.nota-chica { font-size: .78rem; color: var(--gris-2); text-align: center;
              margin: 2rem auto 0; max-width: 28rem; line-height: 1.7; }

/* Una banda a todo lo ancho rompe el ritmo y hace que la página no sea una sola columna.
   En Orangutan son naranjas; aquí es marfil, y el texto se invierte a negro. */
.banda { background: var(--marfil); color: var(--negro); margin: 0; padding: 5rem 0; }
.banda .titulo-seccion, .banda .eyebrow { color: var(--oro-2); }
.banda .parrafo { color: #4a453e; }
.banda-frase {
  font-family: var(--serif); font-weight: 300; text-align: center;
  font-size: clamp(1.5rem, 5.4vw, 2.5rem); line-height: 1.32; margin: 0 auto;
  max-width: 40rem; color: var(--negro); text-wrap: balance;
  padding-inline: var(--gutter);
}
.banda-frase i { font-family: var(--script); font-style: normal; color: var(--oro-2);
                 font-size: 1.25em; line-height: .9; }

/* ═══════════════════════════════════ los números que cuentan solos */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
          background: var(--linea); border-block: 1px solid var(--linea); }
.cifra { background: var(--negro); padding: 2rem .5rem; text-align: center; }
.cifra b {
  display: block; font-family: var(--serif); font-weight: 300; color: var(--blanco);
  font-size: clamp(1.9rem, 7vw, 2.9rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.cifra span { display: block; margin-top: .6rem; font-size: .58rem; letter-spacing: .24em;
              text-transform: uppercase; color: var(--gris-2); }

/* ═══════════════════════════════════ el teléfono con la invitación de verdad */
.demo { display: grid; gap: 3rem; align-items: center; }
.telefono {
  width: min(19rem, 82vw); margin: 0 auto; aspect-ratio: 9/19.5; position: relative;
  border: 1px solid var(--linea-2); border-radius: 2.25rem; padding: .55rem;
  background: var(--negro-2);
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.10);
  transition: transform .8s var(--lento);
}
.telefono::after {   /* la bocina */
  content: ''; position: absolute; top: 1.15rem; left: 50%; transform: translateX(-50%);
  width: 3.4rem; height: .28rem; border-radius: 1rem; background: var(--negro-3); z-index: 2;
}
.telefono iframe, .telefono .pantalla {
  width: 100%; height: 100%; border: 0; border-radius: 1.8rem; display: block;
  background: var(--marfil);
}
/* Se inclina un pelo siguiendo el cursor. En táctil no pasa nada, y está bien. */
@media (hover: hover) and (pointer: fine) {
  .telefono:hover { transform: perspective(1400px) rotateY(-6deg) rotateX(3deg) translateY(-6px); }
}

/* ═══════════════════════════════════ qué lleva */
.rejilla { display: grid; gap: 1px; background: var(--linea);
           border: 1px solid var(--linea); }
.cosa { background: var(--negro-2); padding: 2rem var(--gutter);
        transition: background .35s ease, transform .35s var(--lento); position: relative; }
.cosa::before {   /* hilo de oro que crece al pasar por encima */
  content: ''; position: absolute; left: var(--gutter); top: 0; height: 1px; width: 0;
  background: var(--oro); transition: width .5s var(--lento);
}
.cosa:hover { background: var(--negro-3); }
.cosa:hover::before { width: 2.5rem; }
.cosa h3 { font-family: var(--serif); font-weight: 300; font-size: 1.4rem;
           margin: 0 0 .5rem; line-height: 1.25; color: var(--blanco); }
.cosa p { margin: 0; color: var(--gris); font-size: .92rem; }

/* ═══════════════════════════════════ los pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.pasos li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; align-items: start; }
.paso-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--oro);
          width: 3rem; height: 3rem; border: 1px solid var(--linea-2);
          display: grid; place-content: center; font-variant-numeric: lining-nums;
          transition: border-color .4s ease, color .4s ease; }
.pasos li:hover .paso-n { border-color: var(--oro); }
.pasos h3 { font-family: var(--serif); font-weight: 300; font-size: 1.35rem;
            margin: .35rem 0 .35rem; line-height: 1.25; color: var(--blanco); }
.pasos p { margin: 0; color: var(--gris); font-size: .92rem; }

/* ═══════════════════════════════════ marquesina de ocasiones */
.marquesina { overflow: hidden; border-block: 1px solid var(--linea); padding: 1.4rem 0;
              -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
              mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquesina ul { display: flex; gap: 3rem; margin: 0; padding: 0; list-style: none;
                 width: max-content; animation: correr 38s linear infinite; }
.marquesina li { font-family: var(--serif); font-size: 1.15rem; color: var(--gris-2);
                 white-space: nowrap; display: flex; align-items: center; gap: 3rem; }
.marquesina li::after { content: ''; width: 4px; height: 4px; background: var(--oro-2);
                        transform: rotate(45deg); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ═══════════════════════════════════ precios */
.precios { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.plan { background: var(--negro-2); padding: 2.75rem var(--gutter); text-align: center;
        transition: background .4s ease; position: relative; }
.plan:hover { background: var(--negro-3); }
.plan h3 { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; margin: 0 0 1.25rem;
           color: var(--blanco); }
.plan-precio { font-family: var(--serif); font-size: 3rem; font-weight: 200;
               font-variant-numeric: lining-nums tabular-nums; margin: 0; line-height: 1;
               color: var(--blanco); }
.plan-moneda { margin: .85rem 0 2rem; }
.plan ul { list-style: none; margin: 0 0 0; padding: 0; text-align: left;
           display: inline-block; }
.plan li { font-size: .88rem; color: var(--gris); padding-left: 1.4rem; position: relative;
           margin-bottom: .5rem; line-height: 1.6; }
.plan li::before { content: '—'; position: absolute; left: 0; color: var(--oro-2); }

/* ═══════════════════════════════════ botones */
.botones { display: grid; gap: .75rem; justify-items: center; }
.boton-lleno, .boton-linea {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 1.05rem 2.25rem; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: .62rem; font-weight: 400;
  letter-spacing: .28em; text-indent: .28em; text-transform: uppercase;
  border-radius: 0; position: relative; overflow: hidden;
  transition: background .35s ease, color .35s ease, border-color .35s ease,
              transform .35s var(--lento);
}
.boton-lleno { background: var(--blanco); color: var(--negro); border: 1px solid var(--blanco); }
.boton-lleno:hover { background: transparent; color: var(--blanco); transform: translateY(-2px); }
.boton-lleno.grande { padding: 1.3rem 3rem; }
/* El brillo que barre el botón cada tanto. Es lo que hace que el ojo vuelva ahí. */
.boton-lleno::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(201,169,97,.55) 50%, transparent 62%);
  transform: translateX(-130%); animation: barrer 5.5s ease-in-out infinite;
}
@keyframes barrer { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
/* Cuando no hay número de WhatsApp todavía, el botón deja de parecer un botón:
   uno que lleva a "wa.me/undefined" es peor que no tener botón. */
.boton-lleno[aria-disabled="true"] { background: transparent; color: var(--gris-2);
  border-color: var(--linea-2); cursor: default; transform: none; }
.boton-lleno[aria-disabled="true"]::after { animation: none; content: none; }
.boton-linea { background: transparent; color: var(--gris); border: 1px solid var(--linea-2); }
.boton-linea:hover { border-color: var(--blanco); color: var(--blanco); transform: translateY(-2px); }
.banda .boton-lleno { background: var(--negro); color: var(--marfil); border-color: var(--negro); }
.banda .boton-lleno:hover { background: transparent; color: var(--negro); }

/* ═══════════════════════════════════ el botón que sigue, abajo a la derecha
   Aparece cuando ya pasaste la portada, para que el que se convenció a media página
   no tenga que buscar dónde. */
.flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.4rem; text-decoration: none;
  background: var(--blanco); color: var(--negro);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--blanco);
  opacity: 0; transform: translateY(1.5rem); pointer-events: none;
  transition: opacity .5s var(--lento), transform .5s var(--lento);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.5);
}
.flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
/* En teléfono no cabe con ese tracking: se salía de la pantalla por la derecha.
   Se mide con el ancho de verdad, no a ojo: max-width lo obliga a caber siempre. */
.flotante { max-width: calc(100vw - 2rem); white-space: nowrap; }
@media (max-width: 26rem) {
  .flotante { left: 1rem; right: 1rem; justify-content: center;
              letter-spacing: .16em; padding: .95rem 1rem; }
}
.flotante i { width: 5px; height: 5px; background: var(--oro-2); transform: rotate(45deg); flex: none; }
.flotante[aria-disabled="true"] { background: var(--negro-2); color: var(--gris);
  border-color: var(--linea-2); cursor: default; }

/* ═══════════════════════════════════ pie */
.pie { text-align: center; padding: 4rem var(--gutter) 5.5rem; }
.pie-marca { font-family: var(--sans); font-weight: 200; font-size: 1.35rem;
             letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
             color: var(--blanco); margin: 0 0 1.25rem; }
.pie-liga a { font-size: .74rem; color: var(--gris-2); text-decoration: none;
              letter-spacing: .1em; border-bottom: 1px solid var(--linea-2);
              padding-bottom: .2rem; transition: color .3s ease, border-color .3s ease; }
.pie-liga a:hover { color: var(--blanco); border-color: var(--oro); }

/* ═══════════════════════════════════ aparecer al bajar */
.aparece > * { opacity: 0; transform: translateY(1.2rem);
               transition: opacity 1s var(--lento), transform 1s var(--lento); }
.aparece.visible > * { opacity: 1; transform: none; }
.aparece.visible > *:nth-child(2) { transition-delay: .08s; }
.aparece.visible > *:nth-child(3) { transition-delay: .16s; }
.aparece.visible > *:nth-child(4) { transition-delay: .24s; }
.aparece.visible > *:nth-child(n+5) { transition-delay: .32s; }

/* ═══════════════════════════════════ NADA se mueve si la persona pidió que no
   Va al final para ganarle a todo lo de arriba. Una animación que marea no es un detalle:
   hay gente a la que le provoca náusea de verdad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .aparece > * { opacity: 1; transform: none; }
  .hero-titulo .letra { opacity: 1; transform: none; }
  .flotante { transition: none; }
  .telefono:hover { transform: none; }
}

/* ═══════════════════════════════════ tableta y computadora
   El teléfono es el caso normal. Esto es el añadido, no al revés. */
@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; }
  body { font-size: 17px; }
  .seccion { padding: 6rem var(--gutter); }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .precios { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
  .demo { grid-template-columns: 1fr 1fr; gap: 4rem; text-align: left; }
  .demo .titulo-seccion, .demo .parrafo { text-align: left; margin-left: 0; }
  .flotante { right: 2rem; bottom: 2rem; }
}
@media (min-width: 64rem) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════ utilidades
   Existen porque la CSP es style-src 'self' y un style="" en el HTML se bloquea.
   Es una política estricta a propósito: si un día alguien logra meter HTML en una página,
   no puede además meterle estilos. Mejor estas cinco clases que aflojar eso. */
.izq              { text-align: left; }
.izq .parrafo     { text-align: left; margin-left: 0; }
.centro           { text-align: center; }
.en-linea         { display: inline-flex; }
.botones.izq      { justify-items: start; }
.sin-aire-arriba  { padding-block: 0; }
.titulo-izq       { text-align: left; margin: 1.25rem 0 1.5rem; }
.aire-arriba      { margin-top: 1.5rem; }
.aire-arriba-mas  { margin-top: 1.75rem; }
.hereda           { color: inherit; }

/* ═══════════════════════════════════ la invitación de muestra, dentro del teléfono
   Es una maqueta, no la invitación de verdad: la CSP dice frame-ancestors 'none' y esa
   política no se toca por una demostración. La de verdad se abre con el botón de al lado.
   Está en el marfil y el oro de las invitaciones, que NO es la marca de la plataforma:
   ahí manda la fiesta del cliente, no nosotros. */
.pantalla { background: #f6f2ea; display: grid; place-items: center; overflow: hidden; }
.mini {
  text-align: center; color: #2b2723; padding: 1.5rem 1.35rem;
  font-family: var(--serif); width: 100%;
  animation: miniEntra 1.1s var(--lento) both .35s;
}
@keyframes miniEntra { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.mini-sello {
  width: 3.1rem; height: 3.1rem; margin: 0 auto 1.1rem; border-radius: 50%;
  border: 1px solid rgba(138,116,64,.45); display: grid; place-content: center;
  font-size: .62rem; letter-spacing: .12em; color: var(--oro-2);
}
.mini-tipo { font-family: var(--sans); font-size: .5rem; letter-spacing: .34em; text-indent: .34em;
             text-transform: uppercase; color: #8d8madd; color: #8a857d; margin: 0 0 .7rem; }
.mini-nombres { font-family: var(--script); font-size: 1.95rem; line-height: 1.15; margin: 0;
                color: #2b2723; font-weight: 400; }
.mini-nombres span { font-size: .8em; color: var(--oro-2); }
.mini-frase { font-style: italic; font-size: .78rem; color: #6f6a62; margin: 1rem auto .9rem;
              max-width: 15rem; line-height: 1.5; }
.mini-fecha { font-size: 1.25rem; letter-spacing: .18em; margin: 0; color: #2b2723;
              font-variant-numeric: lining-nums tabular-nums; }
.mini-regla { width: 2.6rem; height: 1px; background: rgba(138,116,64,.4); margin: 1.2rem auto; }
.mini-para { font-family: var(--sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
             color: #8a857d; margin: 0 0 .35rem; }
.mini-lugares { font-size: .92rem; font-style: italic; color: #4a453e; margin: 0 0 1.1rem; }
.mini-boton {
  display: inline-block; font-family: var(--sans); font-size: .5rem; letter-spacing: .24em;
  text-indent: .24em; text-transform: uppercase; color: #2b2723;
  border: 1px solid rgba(43,39,35,.28); padding: .7rem 1.2rem;
}
@media (prefers-reduced-motion: reduce) { .mini { animation: none; } }

/* ═══════════════════════════════════ teléfono: que se vea COMPUESTA, no estirada
   Medido a 320 y 375: no se desbordaba nada y no había scroll horizontal, pero la
   portada era casi todo aire y los dos botones tenían anchos distintos. Que no se
   rompa no es lo mismo que que se vea bien. */
@media (max-width: 40rem) {
  .hero { min-height: auto; padding: 5rem var(--gutter) 4.5rem; }
  .hero-frase { margin-top: 1.6rem; }
  .hero-botones { margin-top: 2.2rem; gap: .6rem; width: 100%; }
  /* Los dos botones, el mismo ancho. Dos anchos distintos apilados se leen como un error. */
  .hero-botones > * { width: 100%; }
  .hero-nota { margin-top: 1.4rem; line-height: 1.6; }
  .scroll-pista { position: static; margin: 2.6rem auto 0; height: 2.2rem; }

  .seccion { padding: 3.25rem var(--gutter); }
  .banda   { padding: 3.5rem 0; }
  .titulo-seccion { margin-bottom: 2rem; }
  .regla { margin-bottom: 1.8rem; }
  .demo  { gap: 2rem; }
  .cifra { padding: 1.5rem .4rem; }
  .cosa  { padding: 1.5rem var(--gutter); }
  .plan  { padding: 2.25rem var(--gutter); }
  .pasos { gap: 1.75rem; }
  .pie   { padding: 3rem var(--gutter) 5.5rem; }

  /* El botón de abajo tapa el final de la página si no se le deja sitio. */
  body { padding-bottom: 4.5rem; }
}

/* Pantallas cortas (un iPhone SE acostado, una ventana chica): la portada no puede
   ocupar una altura fija o el botón principal queda fuera de vista. */
@media (max-height: 44rem) {
  .hero { min-height: auto; padding-block: 4rem 3.5rem; }
  .hero::before { display: none; }
}