/* =========================================================
   Ana Simón Estudio · CELULAR (v11, 14 oct 2026)
   Se carga después de las hojas de cada página y solo actúa
   con menos de 1024 px: el escritorio queda igual.

   Escala tipográfica única (igual en las 10 páginas)
   Goudy  T1 40 · T2 32 · T3 24 · T4 20 · T5 18
   Jost   texto 16 (interlineado 1,6 largos · 1,45 cortos)
          chico 13 · siempre Light (300)
   Grises de texto: rótulos y números al 70 %, texto al 100 %.
   Gris de fondo (solo tiras y instructivo): F · pizarra #D6DBDD
   ========================================================= */

@media (max-width: 1023px) {

  :root {
    --gris: #D6DBDD;
    --t1: 40px; --t2: 32px; --t3: 24px; --t4: 20px; --t5: 18px;
    --j1: 16px; --j2: 13px;
    --tenue: 0.7;
  }

  .solo-cel { display: block; }
  .barra { display: none !important; }

  /* ---------- Jost: Light (300) en todo el celular ---------- */
  .ab-d, .acc-btn .mas, .acc-btn .nn, .acc-r p, .barra-der, .cab-nav, .chico, .cierre-res a.fl, .cq-d, .cq-n, .ct ul, .ct-u, .cuerpo,
  .dx-item .desp p, .dx-n, .es-nom-es, .etiq, .ficha-d, .ficha-n, .fila .d, .fila .d2, .gc-ext, .hoja .epi, .intro-fecha, .j, .lbl, .mas,
  .med-r, .menu-con, .menu-gc .r, .menu-gc .v, .num, .paso-d, .paso-n, .pie-f2, .pie-marca a, .pie-nav, .pq-cab .pq-num, .pq-tira p,
  .precio .ext, .pv-sec p, .quien-txt a.fl, .re-d, .re-opc .re-a, .re-r, .rotulo, .rotulo-s, .rs-cond a, .rs-sub .nota, .ses-det p,
  .ses-item a.fl, .sesion-cab a, .sonido, .tc-cita figcaption, .tc-nombres button, .tx-col h1.lbl, .pq-n,
  .ins .r, .ins figcaption { font-weight: 300 !important; }

  /* ---------- Header con fondo liso (color de la sección de abajo, lo pone movil.js) ---------- */
  .cab-fondo { display: none; }
  .cab {
    height: 72px; background: var(--cab-bg, var(--blanco)); color: var(--negro);
    mix-blend-mode: normal; pointer-events: auto; z-index: 39; /* debajo de la textura de papel (40): mismo tono que la sección */
  }
  .cab-osc .cab { color: var(--blanco); }
  .hamb, .compacto .hamb { color: inherit; }
  .hamb span { background: currentColor; }

  /* ---------- Textos: aparecen enseguida (sin fundido gris) ---------- */
  .js .revela, .js .rv, .js .rvj, .js .ent, .js .ap-tit, .js .ap-p, .js .ses-lista, .js .sesiones .rotulo-s,
  .js .fichas figure, .js .sm-p1.rvj, .js .sm-cta {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .ln { transform: none; transition: none; }

  /* ---------- Fotos: fundido suave al entrar, desde el color de la sección ---------- */
  img.fo { transition: opacity 0.9s ease; }
  img.fo:not(.fo-ok) { opacity: 0; }
  .cel-foto { margin: 0; }
  .cel-foto img { width: 100%; height: auto; }

  /* ---------- Escala tipográfica ---------- */
  /* T1 · títulos de apertura */
  .sv-ap h1, .gc-txt h1, .ct h1, .rs-frase .g, .ap-tit { font-size: var(--t1); line-height: 1.05; }
  /* T2 · títulos de sección */
  .ses-tit h2, .quien-txt h2, .es-txt h2, .tit { font-size: var(--t2); line-height: 1.1; }
  .cierre-frase p { font-size: min(var(--t2), 7.4vw); line-height: 1.1; }
  /* T3 · subtítulos */
  .dossier h2, .sesion-cab h2, .pq-cab p, .pq-tira h3, .paso-t, .cq-t, .sv-cab h2, .sv-art h3, .ses-nom, .re-cab h2, .re-t,
  .cierre-res h2, .sm-mirada, .ins-t, .med-p { font-size: var(--t3); line-height: 1.3; }
  .cq-t { line-height: 1.1; }
  /* T4 · texto destacado en Goudy */
  .sm-p1, .ap-p, .tc-cita blockquote p, .es-txt p, .quien-txt p, .pv-int, .tx-mas p { font-size: var(--t4); line-height: 1.45; }
  /* T5 · ítems de listas en Goudy */
  .dx-t, .acc-btn .q, .sv-ind .t, .sel .n, .ficha-t, .ses-sub, .precio, .fila .precio, .menu-sec { font-size: var(--t5); line-height: 1.3; }
  .fila .n { font-size: 16px; }
  /* Jost · texto corrido */
  .cuerpo, .acc-r p, .pv-sec p { font-size: var(--j1); line-height: 1.6; }
  .ficha-d, .dx-item .desp p, .pq-tira p, .ses-det p, .paso-d, .cq-d, .re-d, .ab-d, .ct ul, .hoja .epi,
  .sesion-cab a, a.fl, .re-opc .re-a, .menu-con, .pie-nav, .pie-marca a, .chico, .rs-frase .cuerpo, .gc-der .cuerpo {
    font-size: var(--j1); line-height: 1.45;
  }
  .cuerpo, .acc-r p, .pv-sec p { line-height: 1.6; }
  /* Jost · textos chicos (mínimo 13) */
  .rotulo-s, .lbl, .num, .ficha-n, .dx-n, .paso-n, .cq-n, .med-r, .re-r, .tc-cita figcaption, .tc-nombres button, .fila .d, .fila .d2,
  .rs-sub .nota, .rs-cond a, .gc-ext, .gc-elegi .lbl, .es-nom-es, .acc-btn .nn, .pie-f2, .sonido, .barra-der, .precio .ext, .ct-u,
  .rs-sub .n, .rs-sub .precio, .menu-gc .r, .intro-fecha .linea { font-size: var(--j2); }
  .tc-nombres button { font-size: 14px; }

  /* ---------- Grises de texto: menos transparentes ---------- */
  .rotulo-s, .lbl, .num, .dx-n, .acc-btn .nn, .med-r, .re-r, .tc-cita figcaption, .tc-nombres .rotulo-s, .dossier .rotulo-s,
  .sesiones .rotulo-s span, .es-nom-es, .gc-elegi .lbl, .gc-ext, .rs-sub .nota, .fila .d, .fila .d2, .precio .ext,
  .consulta, .sv-regalo > span, .sonido { opacity: var(--tenue); }
  .paso-d, .cq.on .cq-d, .re-d, .ab-d, .rs-frase .cuerpo, .rs-cond a { opacity: 1; }
  .pie-f2 { color: rgba(255, 255, 255, 0.75); }
  .ap-p { color: #4F4E4A; }

  /* =========================================================
     HOME
     ========================================================= */
  /* Portada: n.º 46, sin espera y con el título sobre la foto */
  .hero { position: relative; height: min(125vw, calc(100svh - 230px)); min-height: 380px; margin-top: 0; }
  .hero img { object-position: 50% 45%; }
  .hoja { position: relative; height: auto; }
  .hoja > .escena { position: relative; height: auto; padding: 40px 24px 72px; display: block; }
  .hoja > .escena { padding-top: 32px; }
  .hoja h1 { font-size: var(--t3); line-height: 1.3; text-align: center; }
  .hoja h1 .linea > span { transform: none !important; opacity: 1 !important; }
  .hoja h1 > .linea:first-child { font-size: var(--t2); line-height: 1.1; margin-bottom: 12px; }
  .hoja .epi { margin-top: 24px; max-width: 34ch; }

  /* La sesión: tira de fichas sobre el gris */
  .sesion { background: var(--gris); box-shadow: none; padding: 64px 0 72px; }
  .sesion-cab { gap: 16px; }

  /* Tu dossier: n.º 54 a todo el ancho con el título encima */
  .dossier { box-shadow: none; }
  .dossier .cel-foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
  .dossier .escena { padding: 40px 24px 88px; }
  .dossier .rotulo-s, .dossier h2 { position: absolute; left: 24px; right: 24px; margin: 0; }
  .dossier .rotulo-s { top: calc(-125vw + 32px); }
  .dossier h2 { top: calc(-125vw + 56px); }

  /* Lo que cambia: tira deslizable de tarjetas sin fotos, sobre el gris */
  .pq { height: auto !important; background: var(--gris); box-shadow: none; }
  .pq-panel { position: static; height: auto; overflow: visible; background: transparent; padding: 64px 0 72px; }
  .pq-panel > .escena { position: static; width: auto; height: auto; }
  .pq-hueco, .pq-marco, .pq .tex, .pq-cab .pq-num { display: none !important; }
  .pq-cab { position: static; opacity: 1 !important; padding: 0 24px; }
  .pq-tira {
    position: static; width: auto; height: auto; transform: none !important; margin-top: 32px; padding: 0 24px;
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    scrollbar-width: none; counter-reset: pq;
  }
  .pq-tira::-webkit-scrollbar { display: none; }
  .pq-tira article {
    position: static; flex: 0 0 76vw; max-width: 340px; width: auto; height: auto; min-height: 250px; box-sizing: border-box;
    padding: 20px 20px 24px; background: var(--blanco); opacity: 1 !important; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: flex-start; counter-increment: pq;
  }
  .pq-tira article::before {
    content: '0' counter(pq); margin-bottom: auto; padding-bottom: 40px;
    font-family: var(--jost); font-weight: 300; font-size: var(--j2); letter-spacing: 0.06em;
  }
  .pq-tira p { margin-top: 10px; max-width: none; }

  /* Las sesiones: pase de cinco fotos a todo el ancho con el título encima */
  .sesiones { box-shadow: none; }
  .sesiones .cel-foto { position: relative; }
  .sesiones .cel-foto { aspect-ratio: 2 / 3; overflow: hidden; }
  .sesiones .cel-foto img { aspect-ratio: 2 / 3; object-fit: cover; }
  /* Pase lento: n.º 64, 67, 62 y 69, en el orden de una sesión, con fundido entre una y otra */
  .pase img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
  .pase img.on { opacity: 1; }
  .sesiones .cel-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }
  .ses-linea { display: none; }
  .sesiones .escena { padding: 40px 24px 88px; }
  .ses-tit { position: absolute; left: 24px; right: 24px; top: -150px; color: var(--blanco); }
  .sesiones .rotulo-s { margin-top: 0; }

  /* Quién: n.º 88 entera, a todo el ancho */
  .quien { box-shadow: none; }
  .quien-foto { aspect-ratio: 2 / 3; }
  .quien-foto img { object-position: 50% 50%; }

  /* Cierre: sin frenos; frase, foto y reserva una debajo de la otra */
  .cierre { height: auto; box-shadow: none; }
  .cierre-panel { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 88px; }
  .cierre-frase { padding-top: 0; }
  .cierre-foto { display: none !important; }
  .cierre-frase, .cierre-foto, .cierre-res {
    position: relative; inset: auto; left: auto; top: auto; margin: 0;
    opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto;
  }
  .cierre-frase p { padding: 0 24px; }
  .cierre-foto { width: 150px; height: 225px; }
  .cierre-res { padding: 0 24px; gap: 10px; margin-top: 36px !important; }
  .cierre-res a.fl + a.fl { margin-top: 0; }
  .cierre-res h2 { font-size: 15px !important; letter-spacing: 0.2em; margin-bottom: 8px; }
  .cierre .pie { margin-top: 80px; }
  .cierre .pie { position: relative; align-self: stretch; opacity: 1 !important; pointer-events: auto; }

  /* =========================================================
     MÉTODO
     ========================================================= */
  .es-panel { padding-top: 120px; }
  .es-txt p { color: var(--blanco); }
  .ap .escena, .es-txt { text-align: center; }
  .ap-p, .es-txt p { text-wrap: pretty; }
  .rueda { display: none; }
  .es-foto { margin: 40px -24px 0; position: relative; aspect-ratio: 800 / 533; }
  .es-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .es-foto img.on { opacity: 1; }
  .es-foto img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
  /* La medición: aire debajo del texto y sin raya en el paso a blanco */
  .med { background: var(--carbon); padding-top: 0; padding-bottom: 72px; }
  .med-escena { gap: 24px; }
  .med-foto { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 80%, transparent); }
  .med-txt { text-align: center; }
  .med-p { text-wrap: balance; }
  .onl .raya { display: none; }
  .on-escena { padding-top: 64px; padding-bottom: 0 !important; }
  /* Sesión online: salen las máscaras, entra el instructivo */
  .abanico, .ab-txt { display: none !important; }
  .ins { margin: 56px -24px 0; padding: 40px 0 48px; background: var(--gris); }
  .ins-cab { padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
  .ins .r { margin: 0; font-family: var(--jost); font-size: var(--j2); letter-spacing: 0.14em; opacity: var(--tenue); }
  .ins-t { margin: 0; }
  .ins-tira {
    margin-top: 24px; padding: 0 24px; display: flex; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none;
  }
  .ins-tira::-webkit-scrollbar { display: none; }
  .ins-tira figure { margin: 0; flex: 0 0 38%; scroll-snap-align: start; }
  .ins-tira img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
  .ins figcaption { padding-top: 8px; font-family: var(--jost); font-size: var(--j2); letter-spacing: 0.06em; }

  /* =========================================================
     SOBRE MÍ
     ========================================================= */
  .sm-ap { padding-top: 72px; }
  .sm-nom, .sm-velo { display: none; }
  .sm-p1 .nom { text-transform: none; letter-spacing: 0; }
  .sm-f47 { background: transparent; }
  .js .sm-f47 { opacity: 1; filter: none; }
  .sm-txt, .sm-p1, .sm-mirada { text-align: center; text-wrap: pretty; }
  .sm-cierre .sm-panel { min-height: 0; padding: 72px 24px 80px; }
  .sm-cta { font-size: var(--t3); justify-content: center; }

  /* =========================================================
     GIFT CARDS · sin pantalla completa: el bloque mide lo que mide la foto
     ========================================================= */
  .gc-ap .sm-panel { height: auto; min-height: 100svh; box-sizing: border-box; padding: 72px 0 0; display: flex; align-items: center; justify-content: center; }
  .gc-vent { position: relative; left: auto; top: auto; margin: 0; transform: none; width: 80vw; max-width: 440px; }

  /* =========================================================
     MÉTODO · Reservar: el bloque ocupa todo el ancho (estaba centrado y angosto)
     ========================================================= */
  .re-escena { margin: 0; width: 100%; box-sizing: border-box; }

  /* =========================================================
     FOOTER · más chico y ordenado: nombre, 6 links en dos columnas, una línea final
     ========================================================= */
  .pie { padding: 32px 24px 28px; gap: 0; }
  .pie-f1 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .pie-marca, .pie-nav { display: contents; }
  .pie-marca span { grid-column: 1 / -1; margin-bottom: 10px; font-size: 15px; }
  .pie-marca a, .pie-nav a, .pie-nav span { font-size: var(--j2); line-height: 1.4; text-decoration: none; }
  .pie-f2 { display: none; }

  /* =========================================================
     REGLA DE CELULAR (16 oct): títulos, entradas y párrafos centrados;
     listas numeradas y pasos de un proceso quedan a la izquierda.
     ========================================================= */
  /* Home */
  .hoja h1 { padding-bottom: 28px; border-bottom: 1px solid var(--negro); }   /* raya fina, estilo Kinfolk */
  .hoja .epi { margin-top: 28px; }
  /* Home: La sesión, Tu dossier, Lo que cambia, Las sesiones y Testimonios quedan a la izquierda */
  .quien-txt { align-items: center; text-align: center; }
  .quien-txt a.fl { align-self: center; }

  /* Lo que cambia: una sola banda continua (sin cuadros separados), se sigue deslizando */
  .pq-tira { gap: 0; padding: 0; scroll-padding-left: 0; }
  .pq-tira article { flex-basis: 78vw; max-width: none; border-left: 1px solid rgba(0, 0, 0, 0.12); padding: 24px 24px 28px; }
  .pq-tira article:first-child { border-left: 0; }

  /* Método */
  .ob .tit, .pr-escena .tit, .on-escena .tit { text-align: center; }
  .ins-cab { align-items: center; text-align: center; }
  .re-cab { text-align: center; }

  /* Páginas interiores */
  .sv-ap h1, .sv-cab { text-align: center; }
  .sv-cab { align-items: center; }
  .rs h1, .rs-frase { text-align: center; }
  .gc-txt h1, .gc-der > .cuerpo { text-align: center; }
  .ct-in { align-items: center; text-align: center; }
  .ct-c { align-items: center; }
  .tx-col h1.lbl, .tx-mas { text-align: center; }
  .tx-mas { align-items: center; }
  .tx-mas a { align-self: center; }

  /* Cartel de cookies: a lo ancho, con 16 de margen; texto a la izquierda (es un aviso, no un párrafo) */
  .ck { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 420px; margin: 0 auto; padding: 24px 24px 12px; font-weight: 300; font-size: var(--j1); text-align: left; }
  .barra-vis .ck { bottom: 16px; }
  .ck-f { gap: 28px; }
  .pv-ck { font-weight: 300; font-size: var(--j1); } /* a la izquierda, como el texto de Privacidad en celular */
}