/* ============================================================================
   LAS PIEZAS DE LA PORTADA · compartidas con las guías, el blog y la 404.

   Todo vive bajo `.presentacion`. La portada añade lo suyo en `inicio.css` —el
   riel de las horas, la maqueta del día que se prueba, el precio y la firma— y
   las guías lo suyo en `seo/estilo.css`. Lo que hay aquí lo comparten todas.

   EL GIRO DEL 9 DE OCTUBRE DE 2026. Las piezas dejaron de ser tarjetas blancas
   sobre lavanda y pasaron a vestirse de su superficie: violeta, tinta, lila o
   blanco (ver «LAS CUATRO SUPERFICIES» en `estilo.css`). Ninguna lleva un
   color escrito para el texto: lo leen de `--txt`, `--txt-2` y `--acento`, así
   que la misma pregunta frecuente se lee igual sobre lila que sobre blanco.

   LA APLICACIÓN VA DENTRO DE UN TELÉFONO, y con su propio vestido: el tema
   claro de la aplicación de verdad, esté sobre la superficie que esté (ver
   `movil.css`).
   ========================================================================== */
.presentacion [hidden] { display: none !important; }
.presentacion button { font: inherit; cursor: pointer; }
.presentacion section { scroll-margin-top: 84px; }
/* Las migas de las guías van entre la barra y el héroe, los dos violetas: el
   fondo de la página también lo es, para que no haya una franja blanca en
   medio. El artículo del blog es lectura larga, y va en blanco. */
.presentacion.t-guia, .presentacion.t-pagina, .presentacion.t-blog { background: var(--violeta); }
.presentacion .envoltura { width: min(100% - 44px, 1080px); margin-inline: auto; }

/* ── LOS TRAMOS ────────────────────────────────────────────────────────── */
.presentacion .portada-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.presentacion .seccion-producto { padding: clamp(56px, 7vw, 104px) 0; }
.presentacion .hero-rejilla { display: grid; align-items: center; gap: 44px 64px; }
.presentacion .firma-marca, .presentacion .rotulo {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--txt-2); margin-bottom: 22px;
}
.presentacion h1 { font-size: clamp(44px, 6.2vw, 96px); line-height: .96; letter-spacing: -.062em; max-width: 13ch; }
/* SUBRAYADO LILA Y NO BLOQUE. En las guías el énfasis del titular es media
   frase —«ajusta lo que cambia.»— y un bloque de color detrás de varias
   líneas apretadas pisaba la línea de arriba. La portada, que lo tiene en
   una sola palabra, sí lo pone en bloque (ver `inicio.css`). */
.presentacion h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--lila); text-decoration-thickness: .08em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.presentacion .hero-texto { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 42ch; color: var(--txt-2); margin-top: 28px; }
.presentacion .hero-texto + .hero-texto { margin-top: 12px; font-size: 17px; }
.presentacion .acciones { margin-top: 32px; }
.presentacion .letra-pequena { max-width: 46ch; color: var(--txt-2); }
.presentacion .letra-pequena b { color: var(--txt); }
.presentacion h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.052em; max-width: 18ch; margin-bottom: 20px; }
.presentacion h3 { color: var(--txt); }
.presentacion .intro, .presentacion .historia-copy > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--txt-2); max-width: 46ch; }
.presentacion .historia-copy > p + p { margin-top: 14px; }
.presentacion .historia-copy > .pasa { font-size: 24px; font-weight: 600; color: var(--txt); margin-bottom: 16px; }
.presentacion strong { color: var(--txt); }
.presentacion .hero-producto { position: relative; min-width: 0; }

/* ══ EL MÓVIL vive en `movil.css` ═══════════════════════════════════════════
   El teléfono, sus piezas y las señales de fuera se fueron a su propio
   archivo el 10 de octubre de 2026, porque ahora también los usa la guía de
   la aplicación, que lo importa al compilar. Lo que queda aquí es lo de
   alrededor: el pie de cada maqueta y las secciones. */

/* EN EL MÓVIL, LOS TELÉFONOS AL 88 % Y EN EL CENTRO. A lo ancho de la
   pantalla medían 339 × 732: más alto que lo que se ve de una vez en el
   navegador de un teléfono, y no había forma de ver el teléfono entero. El
   dueño los pidió al menos un 10 % más pequeños (13 de octubre de 2026).
   `zoom` y no `transform`, como en el ordenador: con `transform` seguirían
   ocupando su alto entero. Solo en la web: la guía de la aplicación tiene
   su propio tamaño (`bienvenida.css`).

   EL ANCHO TAMBIÉN VA AL 88 %. Dentro de un `zoom` el 100 % es el ancho del
   padre dividido por el zoom, así que con el `min(100%, 360px)` de siempre
   el teléfono se quedaba en 360 × .88 = 317 px: un 6 % menos, no un 12.
   MEDIDO a 375: 298 px de ancho (eran 339); a 320, 243 (eran 276).

   Con un punto más de especificidad que `movil.css`, que se carga después. */
@media (max-width: 599px) {
  .presentacion figure.maqueta { align-items: center; }
  .presentacion .maqueta .ventana { zoom: .88; width: min(calc(100% * .88), 360px); }
}

/* Los teléfonos se tocan: cada toque es un paso (`demostraciones.js`, `senales.js`). */
.presentacion figure.maqueta .ventana { cursor: pointer; }

/* EL DEDO Y SU ONDA, encima del teléfono y fuera de él (ver `dedo.js`):
   blanco con el filo de la tinta, que se ve sobre la pantalla clara, sobre el
   violeta, la tinta y el lila. La yema es el punto que toca, y el giro es
   alrededor de ella. Va por encima de las notas: la mano está delante. */
.presentacion .maqueta > .dedo { position: absolute; left: 0; top: 0; z-index: 12; width: 44px; opacity: 0; pointer-events: none; will-change: transform; }
.presentacion .maqueta > .dedo svg { display: block; width: 100%; height: auto; transform: rotate(-8deg); transform-origin: 35.4% 2.6%; filter: drop-shadow(0 7px 9px rgba(16, 14, 26, .38)); }
.presentacion .maqueta > .onda {
  position: absolute; left: 0; top: 0; z-index: 11; width: 40px; height: 40px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: rgba(83, 58, 253, .3); box-shadow: 0 0 0 2px rgba(83, 58, 253, .55);
}

/* ── LO DE FUERA · el pie de cada maqueta ──────────────────────────────── */
.presentacion .ventana-pie { max-width: 360px; font-size: 15px; line-height: 1.5; color: var(--txt-2); }
.presentacion .ventana-pie b { color: var(--txt); font-weight: 600; }
.presentacion .demo-pie { width: min(100%, 360px); display: flex; align-items: center; gap: 12px; min-height: 66px; }
.presentacion .demo-pie p { flex: 1; font-size: 15px; line-height: 1.45; color: var(--txt-2); }
.presentacion .demo-control {
  flex: 0 0 auto; min-width: 66px; min-height: 44px; padding: 8px; border: 0; background: transparent;
  color: var(--acento); font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}

/* ══ EL MÉTODO EN PESTAÑAS ═════════════════════════════════════════════════ */
.presentacion .metodo-breve { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; padding: 0; margin: 26px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--txt-2); }
.presentacion .metodo-breve li + li::before { content: '·'; color: var(--acento); margin-right: 14px; }
.presentacion .guia-pestanas { display: flex; gap: 16px; max-width: 520px; margin: 40px 0 34px; }
.presentacion .guia-pestanas button { flex: 1; min-width: 0; min-height: 58px; padding: 10px 0; background: none; border: 0; border-top: 2px solid var(--linea); color: var(--txt-2); text-align: left; font-size: 16px; font-weight: 600; }
.presentacion .guia-pestanas button[aria-selected="true"] { color: var(--txt); border-color: var(--acento); }
.presentacion .guia-pestanas .mono { display: block; font-size: 11.5px; margin-bottom: 4px; color: var(--acento); }
/* ARRIBA Y NO AL CENTRO: con el teléfono, el panel mide 800 px, y el texto
   centrado quedaba flotando a media altura con un hueco vacío encima. */
.presentacion .guia-panel { display: grid; gap: 28px 64px; align-items: start; margin-top: 36px; }
.presentacion .guia-panel + .guia-panel { border-top: 1px solid var(--linea); padding-top: 36px; }
.presentacion .guia-panel[role="tabpanel"] { margin-top: 0; border-top: 0; padding-top: 0; }
.presentacion .guia-texto h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 18px; max-width: 16ch; }
.presentacion .guia-texto p { font-size: 17.5px; line-height: 1.6; color: var(--txt-2); max-width: 40ch; }
.presentacion .guia-texto p + p { margin-top: 12px; }
.presentacion .aprende { margin-top: 44px; font-size: 16px; color: var(--txt-2); }
.presentacion .aprende a { color: var(--acento); font-weight: 600; text-underline-offset: 4px; }
.presentacion .puente { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.presentacion .puente h3 { font-size: 26px; letter-spacing: -.035em; margin-bottom: 8px; }
.presentacion .puente p { color: var(--txt-2); font-size: 16px; max-width: 50ch; }

/* ══ HISTORIAS Y RESÚMENES ═════════════════════════════════════════════════ */
.presentacion .historia-rejilla { display: grid; gap: 40px 64px; align-items: start; }
.presentacion .resumen-dia { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea); }
.presentacion .resumen-dia div { min-width: 0; }
.presentacion .resumen-dia dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--txt-2); }
.presentacion .resumen-dia dd { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.035em; }
.presentacion .resumen-dia .resumen-pendiente { grid-column: 1 / -1; }
.presentacion .resumen-dia .resumen-pendiente dd { font-size: 16px; font-weight: 500; letter-spacing: 0; }

/* ══ PREGUNTAS ═════════════════════════════════════════════════════════════
   Las mismas en la portada y en las guías, y sobre la superficie que toque:
   el lila de una guía o el blanco de la portada. */
.presentacion .faq { margin-top: 30px; border-top: 2px solid var(--txt); max-width: 62ch; }
.presentacion .faq details { border-bottom: 1px solid var(--linea); }
.presentacion .faq summary { position: relative; min-height: 44px; padding: 19px 40px 19px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--txt); }
.presentacion .faq summary::-webkit-details-marker { display: none; }
.presentacion .faq summary::after { content: ''; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--txt-2); border-bottom: 2px solid var(--txt-2); transform: rotate(45deg); }
.presentacion .faq details[open] summary::after { top: 29px; transform: rotate(225deg); }
.presentacion .faq summary:hover { color: var(--acento); }
.presentacion .faq summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.presentacion .faq p { padding: 0 0 20px; color: var(--txt-2); font-size: 16.5px; line-height: 1.6; }
.presentacion .faq p + p { margin-top: -8px; }
.presentacion .faq strong { color: var(--txt); font-weight: 600; }
.presentacion .faq a { color: var(--acento); font-weight: 600; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .presentacion .faq summary::after { transition: transform .2s, top .2s; } }

/* ── ANCHOS ────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .presentacion .hero-rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .presentacion .guia-panel, .presentacion .historia-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .presentacion .envoltura { width: calc(100% - 32px); }
  .presentacion .resumen-dia dd { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .presentacion *, .presentacion *::before, .presentacion *::after { animation: none !important; transition: none !important; }
}