/* =========================================================
   SOLO CELULAR. Se carga con media="(max-width: 719px)" en cada página,
   después de los estilos propios de la página.
   No puede afectar a escritorio. No cambia ninguna palabra.
   Crítica y motivos en critica-movil.md
   ========================================================= */

/* ---------- 1. Párrafos: más cortos a la vista ---------- */
.m-p { display: block; }
.m-p + .m-p { margin-top: 12px; }
.prosa p + p { margin-top: 22px; }
/* Primera idea de cada bloque: entrada grande. Rompe el gris parejo */
.prosa > p:first-child:not(.golpe, .entrada):not(:has(.m-p)),
.prosa > p:first-child .m-p:first-child,
.gusto__texto h2 + p .m-p:first-child, .gusto__texto h2 + p:not(:has(.m-p)),
.empresa__abre h2 + p .m-p:first-child, .empresa__abre h2 + p:not(:has(.m-p)),
.testimonios__abre h2 + p .m-p:first-child, .testimonios__abre h2 + p:not(:has(.m-p)),
.conferencias__intro .m-p:first-child, .camino > p:first-child .m-p:first-child {
  font-size: 19px; line-height: 1.38; font-weight: 500; letter-spacing: -.012em; color: var(--azul);
}
.sobre-oscuro .prosa > p:first-child:not(.golpe):not(:has(.m-p)),
.sobre-oscuro .prosa > p:first-child .m-p:first-child { color: var(--blanco); }
.entrada { font-size: 21px; }

/* Frases que ya están en el texto, destacadas */
.m-fuerte { display: block; margin-block: 14px; padding-left: 14px; border-left: 4px solid var(--rojo); font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--azul); }
.sobre-oscuro .m-fuerte { color: var(--blanco); }
.m-grande { display: block; margin-block: 26px 22px; font-family: var(--angosta); font-weight: 800; font-size: clamp(38px, 11.4vw, 46px); line-height: 1; letter-spacing: -.005em; color: var(--azul); text-wrap: balance; }
.sobre-oscuro .m-grande { color: var(--blanco); }
.prosa .golpe, .prosa p + .golpe { margin-top: 38px; margin-bottom: 34px; }

/* ---------- 2. Deslizador: nativo, con la siguiente tarjeta asomando ---------- */
.desliza { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding: 0 var(--m); margin: 0; border: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.desliza::-webkit-scrollbar { display: none; }
.desliza > * { flex: 0 0 min(84%, 330px); scroll-snap-align: start; margin: 0 !important; }
.desliza > .testimonios__pausa { display: none; }
.desliza:focus-visible { outline-offset: -3px; }
/* Pista: línea con avance y flecha. Sin palabras */
.desliza-pista { position: relative; height: 16px; margin: 14px var(--m) 0; }
.desliza-pista::before { content: ""; position: absolute; left: 0; right: 16px; top: 7px; height: 2px; background: var(--linea); }
.desliza-pista i { position: absolute; left: 0; top: 6px; height: 4px; width: calc((100% - 16px) * var(--avance, .25)); background: var(--rojo); transition: width .12s linear; }
.desliza-pista::after { content: ""; position: absolute; right: 2px; top: 3px; width: 10px; height: 10px; border-top: 2.5px solid var(--azul); border-right: 2.5px solid var(--azul); transform: rotate(45deg); }

/* Testimonios como tarjetas */
.desliza > .dicho { display: flex; flex-direction: column; padding: 22px 20px 20px; border: 0; background: var(--palido); }
.palido .desliza > .dicho, .libro .desliza > .dicho, .obra--b .desliza > .dicho { background: var(--blanco); }
.desliza > .dicho blockquote { font-size: 17px; line-height: 1.46; font-weight: 500; }
.desliza > .dicho figcaption { margin-top: auto; padding-top: 18px; gap: 16px; }
.desliza > .dicho .cara { width: 64px; height: 64px; }
.libro .desliza { padding-inline: 0; margin-top: 18px; scroll-padding-inline: 0; }
.libro .desliza-pista { margin-inline: 0; }
.libro .dicho:first-of-type { margin-top: 0; }
.dicho--grande { border-top: 0; padding-block: 8px 34px; }
.dicho--grande blockquote { font-size: 24px; line-height: 1.26; font-weight: 700; letter-spacing: -.02em; }
.testimonios { padding-bottom: 8px; }
.testimonios__mas { padding-block: 26px 44px; }

/* Ideas sueltas: tarjeta con franja */
.ideas.desliza { margin-top: 26px; }
.ideas.desliza > li { padding: 20px 18px 22px; border: 0; border-top: 6px solid var(--celeste); background: var(--palido); }
.ideas.desliza strong { font-size: 22px; margin-bottom: 10px; }
.retorno__lista.desliza > li { padding: 20px 18px 22px; border: 0; border-left: 6px solid var(--rojo); background: var(--palido); }

/* ---------- 3. Listas: sin rayas, menos alto ---------- */
.lista__items { border-top: 0; margin-top: 12px; }
.lista__items li { padding-block: 9px; border-bottom: 0; }
.lista__items li::before { top: 16px; }
.puntos li { padding-block: 8px; border-top: 0; }
.puntos li::before { top: 16px; }
.puntos--mini li { padding-block: 5px; }
.puntos--mini li::before { top: 12px; }

/* ---------- 4. Preguntas plegadas (menu.js las convierte en details) ---------- */
details.plegable { padding: 0; }
details.plegable > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 0; cursor: pointer; list-style: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h3 { font-size: 20px; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; margin: 0; }
details.plegable > summary::after { content: "+"; flex: none; width: 22px; font: 400 30px/22px var(--texto); color: var(--rojo); text-align: center; }
details.plegable[open] > summary::after { content: "\2212"; }
details.plegable > :not(summary) { padding-bottom: 20px; }
details.plegable > p { margin-top: 0; }
.faq__lista details.plegable { padding: 0 var(--m); }
.condiciones details.cond { border-top: 1px solid var(--linea); padding-block: 0; }
.condiciones details.cond > summary h3 { font-size: 22px; }
.cond > ul { padding-bottom: 18px; }

/* ---------- 5. Logos y datos: lo mismo en menos espacio ---------- */
.empresas h2, .empresas__t { padding-block: 30px 18px; font-size: 22px; }
.empresas__logos { grid-template-columns: repeat(3, 1fr); }
.empresas__logos li { height: 74px; padding: 10px; }
.empresas__logos li:nth-child(odd) { border-right: 0; }
.empresas__logos li:not(:nth-child(3n)) { border-right: 1px solid var(--linea); }
.empresas__logos li:last-child { grid-column: 1 / -1; border-right: 0; }
.empresas__logos img { max-width: 84px; max-height: 46px; }

.franja__dato { padding-block: 12px 14px; }
.filas > div { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 14px; padding-block: 11px; }
.filas dd { margin-top: 0; overflow-wrap: anywhere; }

/* ---------- 6. Pasos: número al costado ---------- */
.paso { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; }
.paso > * { grid-column: 2; }
.paso .paso__num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.seccion.paso { display: block; }
.seccion.paso > * { grid-column: auto; }

/* ---------- 7. Pie compacto ---------- */
.pie__logo { padding-block: 20px 6px; }
.pie__logo img { width: 124px; }
.pie__banda { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 12px; padding: 4px var(--m) 20px; }
.pie__banda > div { padding: 10px 0; border-bottom: 0; }
.pie__banda > div:nth-child(3) { grid-column: 1 / -1; }
.pie dt { font-size: 15px; }
.pie dd { font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.pie__enlaces { gap: 2px 12px; }

/* ---------- 8. Fotos añadidas solo para celular ---------- */
.m-foto { margin-block: 30px 6px; }
.sub { font-size: 16px; }
.m-foto { margin-block: 0 30px; }
.retorno .m-foto, .liderty-paso .m-foto { margin-block: 26px 0; }
.tema .m-foto { margin-bottom: 0; }
.canal .m-foto { margin-block: 8px 26px; }
.capitulo .m-foto { margin-block: 0 34px; }

/* ---------- 9. Ajustes por página ---------- */
/* Tarjetas de testimonio: cada una mide lo que su texto, sin huecos */
.desliza:has(> .dicho) { align-items: flex-start; }
.desliza > .dicho figcaption { margin-top: 0; }
.desliza-pista + .dicho--grande { margin-top: 30px; }
/* Condiciones plegadas con su margen */
.condiciones details.cond { padding-inline: var(--m); }
/* Preguntas frecuentes: los temas se distinguen de las preguntas */
.tema h2.t3 { font-family: var(--angosta); font-size: clamp(42px, 12.6vw, 52px); line-height: .98; letter-spacing: -.005em; }
.tema details.pregunta p { padding-right: 0; }
/* Libros: cada obra, con portada más baja y dichos a todo el ancho */
.obra__foto { padding-block: 24px; }
.obra__foto img { max-height: 230px; }
.obra--regalo .obra__foto img { max-height: 300px; }
.obra__dichos { margin-top: 22px; }
.obra__dichos .desliza { margin-inline: calc(var(--m) * -1); }
.obra__dichos .desliza-pista { margin-inline: 0; }
/* Canal: cada grupo como tarjeta */
.canal .desliza > .canal__grupo { padding: 20px 18px 16px; border: 0; border-top: 6px solid var(--rojo); background: var(--palido); }
/* Conferencias: cada una como tarjeta, con su botón al final */
.desliza > .conf { display: flex; flex-direction: column; padding: 22px 18px 20px; border: 0; border-top: 6px solid var(--azul); background: var(--palido); }
.desliza > .conf .conf__nombre { font-size: clamp(40px, 11.5vw, 48px); }
.desliza > .conf .conf__res { display: flex; flex-direction: column; flex: 1; }
.desliza > .conf .btn { margin-top: auto; }
.desliza > .conf .conf__res > p:last-of-type { margin-bottom: 16px; }
.conferencias .desliza { margin-top: 26px; }
/* Las tres cosas que hago: foto arriba, sin franja doble */
.tres.desliza > .tres__uno p { padding: 14px 2px 0; }
.modulos .desliza > li { padding: 16px 16px 18px 38px; border: 0; background: var(--palido); }
.modulos .desliza > li::before { left: 16px; top: 23px; }
.senal, .franja__dato { font-size: 16px; }
.modulos .desliza { margin-inline: calc(var(--m) * -1); }
.retorno .m-foto { margin-bottom: 28px; }
.tema .m-foto { margin-bottom: 24px; }