/* =============================================================================
   ASTREA · WEB DE MÓVIL  (2026-08-04)

   Versión de teléfono maquetada a mano, con secciones normales. Vive dentro del
   MISMO archivo que la de escritorio: por encima de 820 px se ve el lienzo de
   Canva y esto se esconde; por debajo, al revés.

   El escritorio NO se toca: esta hoja solo añade.
   ============================================================================= */

.mov{display:none}

@media (max-width: 820px){

  /* el lienzo de Canva desaparece; manda la versión de móvil */
  #escenario{display:none !important}
  .mov{display:block}
  body{background:#fff;overflow-x:hidden}

  .mov{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    color:#141014;-webkit-font-smoothing:antialiased;
  }
  .mov *{box-sizing:border-box;margin:0}
  .mov img{display:block;max-width:100%}
  .mov a{text-decoration:none;color:inherit}

  /* ---------------------------------------------------------------
     BARRA + MENÚ
     --------------------------------------------------------------- */
  .mov__barra{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;
    padding:.9rem 1.25rem;
    background:rgba(10,6,10,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  /* 🔴 Va con `.mov` delante a propósito: `.mov a{color:inherit}` (arriba) tiene
     más peso que `.mov__marca` a secas y le ganaba, así que ASTREA heredaba el
     casi-negro del texto y se perdía sobre la barra oscura. */
  .mov .mov__marca{
    font-family:var(--f-logo,Impact,sans-serif);
    font-size:1.62rem;letter-spacing:.2em;color:#fff;   /* antes 1.5rem */
    /* Retoques de Mendo (7-ago), mirándolo en el móvil: un pelín a la derecha y
       bien centrado de arriba abajo. El `letter-spacing` mete un hueco DETRÁS de
       la última letra, así que el texto se veía escorado a la izquierda: por eso
       el margen de la derecha compensa, en vez de empujar solo desde la izquierda.
       Y `line-height:1` + el `padding` lo cuadran de alto (Impact monta muy alto
       dentro de su línea y quedaba pegado arriba). */
    margin-left:7px;margin-right:-7px;
    line-height:1;padding-top:3px;
  }
  .mov__ham{
    width:44px;height:44px;display:grid;place-content:center;gap:6px;
    background:none;border:0;padding:0;cursor:pointer;
  }
  .mov__ham span{
    display:block;width:25px;height:2px;background:#fff;
    transition:transform .28s ease,opacity .18s ease;
  }
  .mov.abierto .mov__ham span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mov.abierto .mov__ham span:nth-child(2){opacity:0}
  .mov.abierto .mov__ham span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .mov__menu{
    position:sticky;top:63px;z-index:39;
    display:grid;max-height:0;overflow:hidden;opacity:0;
    background:rgba(10,6,10,.97);
    /* cerrado de verdad: sin visibility, los enlaces siguen siendo alcanzables
       con el tabulador y los lee el lector de pantalla aunque no se vean */
    visibility:hidden;pointer-events:none;
    transition:max-height .34s ease,opacity .22s ease,visibility 0s .34s;
  }
  .mov.abierto .mov__menu{
    max-height:70vh;opacity:1;
    visibility:visible;pointer-events:auto;
    transition:max-height .34s ease,opacity .22s ease,visibility 0s 0s;
  }
  .mov__menu a{
    padding:1.05rem 1.35rem;color:#fff;
    font-family:'Bebas Neue',sans-serif;font-size:1.28rem;letter-spacing:.06em;
    border-bottom:1px solid rgba(255,255,255,.09);
  }

  /* ---------------------------------------------------------------
     HERO — alto natural, no pantalla completa
     --------------------------------------------------------------- */
  .mov__hero{
    position:relative;isolation:isolate;
    padding:3.4rem 1.4rem 3rem;text-align:center;color:#fff;
    background:#120a12;
  }
  /* La foto de portada la pone CADA página con --hero. Antes estaba fijada aquí
     la del Home, así que todas las páginas enseñaban la misma (y tapaba la suya).
     OJO con la ruta: la escribe el HTML pero la pinta esta hoja, y el navegador
     la busca DESDE ESTA CARPETA. Por eso va desde la raíz (/img-…): con ruta
     relativa buscaba /css/img-… y las 13 portadas salían en negro. */

  /* Portada de solo titular: sin un alto mínimo se quedaba en una franja de
     134 px y la foto no se veía. Las que llevan retrato (--foto) ya son altas
     por su propia imagen, y las que no tienen foto (--sinfoto) no lo necesitan. */
  .mov__hero:not(.mov__hero--foto):not(.mov__hero--sinfoto){
    min-height:36vh;
    display:flex;flex-direction:column;justify-content:center;
  }
  .mov__hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:var(--hero,none) center 28% / cover no-repeat;
    background-color:#120a12;
  }
  .mov__hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(10,4,10,.62),rgba(10,4,10,.86));
  }
  .mov__hero h1{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    /* letras separadas (.055em): el patrón de los cursos/Shop que aprobó Mendo
       el 8-ago («un poquito más separadas, adáptalo a las demás») */
    font-size:clamp(1.75rem,7.6vw,2.3rem);line-height:1.08;letter-spacing:.055em;
  }
  .mov__hero h1 em{font-style:italic;display:block}
  .mov__hero .lema{
    margin-top:1.1rem;font-size:.94rem;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.86);
  }

  /* Portada con retrato integrado: el titular arriba y la foto entrando a sangre
     por abajo, fundida al fondo — la composición que el Canva hace en el lienzo. */
  .mov__hero--foto{padding-bottom:0;overflow:hidden}
  /* 🔴 Lleva `.mov` delante Y `max-width:none` por la misma razón: la regla
     general `.mov img{max-width:100%}` pesa más que `.mov__hero__foto` a secas y
     recortaba esta foto a 345 px en una pantalla de 390. Con el margen negativo,
     se iba a la izquierda y dejaba una franja de 45 px por la derecha donde
     asomaba el fondo: parecía la misma foto puesta dos veces. */
  .mov .mov__hero__foto{
    max-width:none;
    width:calc(100% + 2.8rem);margin:2.1rem -1.4rem 0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 88%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 88%,transparent 100%);
  }
  .mov__hero--foto .lema{margin-bottom:.2rem}

  /* PORTADA CON FIRMA («Soy Astrea, canal espiritual y sanadora»).
     Mendo lo quería más grande y en dos líneas, pero medido en el navegador no
     hay tamaño que cumpla las dos cosas: pasando de 32 px, «canal espiritual y
     sanadora» se parte y salen tres.
     La solución sale de su propio escritorio, que es la referencia: allí el
     «SOY ASTREA,» va GRANDE y la segunda línea más pequeña. Así la primera puede
     crecer todo lo que haga falta y la segunda cabe entera. */
  .mov__hero--firma h1{
    font-size:clamp(2.15rem,10.2vw,2.75rem);   /* antes: 7,6vw → 29,6 px */
    line-height:1.04;
  }
  /* La segunda línea, más grande pero sin alcanzar a la primera. El tope real
     para que quepa entera es ~30 px a 390 de ancho: por eso 0,7em y un pelín de
     espaciado negativo, que da margen sin que se note. */
  .mov__hero--firma h1 em{
    font-size:.7em;display:block;margin-top:.3em;letter-spacing:-.02em;
  }

  /* PORTADA DEL HOME · pedido de Mendo (7-ago), viéndolo en el móvil:
     más alta, con más aire, el titular menos apretado entre líneas y la frase
     de abajo en su rosa. Va con clase propia y SOLO en el home: las otras 12
     páginas se quedan como estaban.
     Revertir = quitar `mov__hero--aire` del index.html. */
  /* Los dos `:not` van a propósito: sin ellos, la regla de arriba
     (`.mov__hero:not(--foto):not(--sinfoto){min-height:36vh}`) pesa más y el
     alto nuevo no se aplicaba — medido: se quedaba en 309 px en vez de subir. */
  .mov__hero--aire:not(.mov__hero--foto):not(.mov__hero--sinfoto){
    min-height:46vh;
    padding-top:4.2rem;padding-bottom:3.6rem;
  }
  .mov__hero--aire h1{line-height:1.26}          /* antes 1.08, iba apretado */
  .mov__hero--aire .lema{
    color:var(--magenta,#e50097);                 /* antes blanco al 86% */
    margin-top:2rem;                              /* separada del titular */
  }

  /* Una sección con FOTO DE FONDO. La foto la pone cada página con `--foto`,
     igual que la portada hace con `--hero`, para que la hoja no tenga que saber
     de qué página se trata. Encima va un velo oscuro: sin él, el titular blanco
     se pierde sobre las zonas claras de la foto. */
  .mov__sec--foto{position:relative;isolation:isolate;overflow:hidden}
  /* `--foco` = qué parte de la foto se enseña. No es un capricho: la foto del
     estudio tiene la LÁMPARA ENCENDIDA en el centro, casi blanca, y el texto
     blanco encima de esa mancha no se lee (medido: 4,0 de contraste, por debajo
     del 4,5 que se considera cómodo). Bajando el encuadre se usa la parte de
     abajo, que es rosa uniforme, y ahí el mismo texto sube a 6,8. */
  .mov__sec--foto::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:var(--foto,none) center var(--foco,22%) / cover no-repeat;
    background-color:#120a12;
  }
  /* El velo se puede graduar desde cada página con `--velo1`/`--velo2`: no es lo
     mismo una foto oscura donde hace falta poco, que un fondo claro como el del
     estudio rosa, donde Mendo lo quiere «un pelín, pero nada casi». */
  .mov__sec--foto::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,
      rgba(8,3,8,var(--velo1,.72)), rgba(8,3,8,var(--velo2,.86)));
  }
  .mov__sec--foto{padding-top:3.2rem;padding-bottom:3.2rem}

  /* Fotos de su vida: son un ÁLBUM (en el lienzo van montadas en collage),
     así que en móvil van con marco, no sueltas a pantalla completa. */
  .mov__recuerdo{
    display:block;width:79%;margin:2rem auto;
    padding:.55rem .55rem 1.9rem;background:#fff;
    box-shadow:0 12px 28px rgba(25,0,18,.22);
    transform:rotate(-1.7deg);
  }
  .mov__recuerdo:nth-of-type(even){transform:rotate(1.5deg)}
  .mov__recuerdo img{width:100%;display:block}
  .mov__recuerdo figcaption{
    font-family:var(--f-script,'Brittany Signature',cursive);
    color:#4a424a;font-size:1.32rem;line-height:1;text-align:center;
    margin-top:.75rem;
  }

  /* hero sin foto de fondo: solo titular, sobre oscuro */
  .mov__hero--sinfoto{background:radial-gradient(120% 80% at 50% 0%,#1b111b,#000 72%)}
  .mov__hero--sinfoto::before,.mov__hero--sinfoto::after{display:none}
  .mov__hero--sinfoto h1 em{
    display:block;font-style:normal;font-size:.82em;opacity:.9;margin-top:.35rem;
  }

  /* ---------------------------------------------------------------
     SECCIONES
     --------------------------------------------------------------- */
  .mov__sec{padding:3.4rem 1.4rem}

  /* foto dentro del texto, a ancho de pantalla */
  .mov__foto{
    width:100%;border-radius:14px;margin:0 0 1.6rem;
    max-height:62vh;object-fit:cover;
  }
  .mov__sec p + .mov__foto,.mov__sec h2 + .mov__foto{margin-top:1.6rem}

  /* frase de entrada de un bloque */
  .mov__entradilla{
    font-size:1.14rem !important;line-height:1.45 !important;font-weight:700;
    margin-bottom:1.1rem;
  }
  .mov__sec--clara{background:linear-gradient(180deg,#fff,#faf6f9)}
  .mov__sec--oscura{
    background:radial-gradient(115% 75% at 50% 0%,#1b111b,#000 72%);
    color:#fff;
  }
  .mov__sec h2{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:clamp(1.6rem,7vw,2.05rem);line-height:1.1;margin-bottom:1.1rem;
    letter-spacing:.055em; /* mismo patrón que los h1 (coherencia 8-ago) */
  }
  .mov__sec p{font-size:1.04rem;line-height:1.62}
  .mov__sec p + p{margin-top:.95rem}
  .mov__sec--centro{text-align:center}

  /* Conóceme */
  .mov__retrato{width:100%;border-radius:16px;margin-bottom:1.6rem}
  .mov__sec .firma{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:1.45rem;line-height:1.15;margin-bottom:1rem;
  }

  /* Formas de trabajar */
  /* 🔴 Va con `.mov__sec` delante a propósito: `.mov__sec p{font-size:1.04rem}`
     (arriba) pesa más que `.mov__script` a secas, así que el tamaño de esta firma
     NUNCA se aplicaba — se quedaba en 16,6 px como un párrafo normal, y por eso
     se veía pequeña. Mismo caso que el de la marca ASTREA. */
  .mov__sec .mov__script,.mov__script{
    font-family:var(--f-script,'Brittany Signature',cursive);
    /* Por debajo del titular de la sección a propósito: ese mide 27,3 px a 390
       (clamp 7vw) y esta firma no puede ganarle. Antes se quedaba en 16,6 px por
       el fallo de peso de reglas; 2,6rem fue pasarse: era el doble que el titular. */
    color:var(--magenta,#e50097);font-size:1.5rem;line-height:1.1;
    margin:.3rem 0 1.9rem;
  }
  /* «Formas de trabajar conmigo» · rehecho el 7-ago porque Mendo lo vio «feo y
     sucio, y no tan legible», y tenía razón: eran cajas BLANCAS sobre un fondo
     también blanco (#fff sobre #fff→#faf6f9), así que no las despegaba nada más
     que un borde al 22% y una sombra al 6% — se veía plano y emborronado. Y solo
     había 16 px entre una y otra.
     Se ha ido a mirar el ESCRITORIO, que es la referencia: allí NO hay tarjetas,
     son titulares grandes en negro sobre blanco limpio (Anton itálica, 47 px).
     Así que aquí se hace lo mismo, con una raya fina para separarlas y sin caja.
     Revertir = volver a poner el bloque de la caja, que queda apuntado aquí:
       background:#fff; border:1px solid rgba(229,0,151,.22); border-radius:16px;
       padding:1.5rem 1.35rem; margin-bottom:1rem;
       box-shadow:0 8px 22px rgba(25,0,18,.06);  h3 a 1.32rem */
  .mov__card{
    display:block;background:none;border:0;border-radius:0;box-shadow:none;
    padding:1.7rem 0;margin:0;
    border-bottom:1px solid rgba(20,16,20,.13);
  }
  .mov__card:last-of-type{border-bottom:0;padding-bottom:.4rem}
  /* 1,34rem = 21,4 px, POR DEBAJO del titular de la sección (27,3). Estuvo en
     1,72rem (27,5) y era el fallo que Mendo veía como «raro»: los tres nombres
     pesaban lo mismo —más, de hecho— que el titular que los agrupa, así que la
     sección parecía una lista de titulares sueltos sin cabecera. */
  .mov__card h3{
    font-family:var(--f-display,'Anton',sans-serif);font-style:italic;
    text-transform:uppercase;font-size:1.34rem;line-height:1.1;margin-bottom:.5rem;
    color:#141014;
  }
  .mov__card p{font-size:1.125rem;line-height:1.5;color:#4a424a;max-width:34ch}/* 18px, antes 15,8 */
  .mov__card .ir{
    display:inline-block;margin-top:.85rem;
    font-family:'Bebas Neue',sans-serif;font-size:1.02rem;letter-spacing:.1em;
    color:var(--magenta,#e50097);
  }

  /* Tarjeta de servicio con foto (Sesiones) */
  /* Borde NEGRO y sin sombra, como en el escritorio (allí es `1.5px solid #000`).
     Lo pidió Mendo el 7-ago: «el borde de la card debe ir en negro, esto para
     todos». Antes era rosa al 20% con sombra, y flotaba. */
  .mov__servicio{
    display:block;background:#fff;border-radius:10px;overflow:hidden;
    border:1.5px solid #000;margin-bottom:1.4rem;
    box-shadow:none;
  }
  .mov__servicio__foto{width:100%;height:230px;object-fit:cover;display:block}

  /* CABECERA DE TARJETA DE SERVICIO · calcada del escritorio (7-ago).
     Mendo comparó las dos y dijo «no tienen nada que ver», con razón:
     · En el escritorio la foto va RECORTADA (la caja mide 322×296 y dentro se
       coloca la imagen de 740×1315 desplazada a -168/-575), así que solo se ve
       la pared rosa con el halo. En móvil se metía la foto ENTERA y salían los
       trípodes y el techo del estudio.
     · Y el título va DENTRO de la foto, abajo a la izquierda y en blanco; en
       móvil estaba fuera, debajo, en negro.
     Aquí se reproduce ese mismo encuadre con porcentajes, para que valga sea
     cual sea el ancho del teléfono. Los números salen de la propia referencia,
     no a ojo: 230% de zoom y el punto 40%/56% de la imagen. */
  .mov__servicio__cab{
    position:relative;display:block;
    aspect-ratio:322/296;                     /* la misma proporción que allí */
    /* Encuadre 40% 56%: el MISMO trozo de foto que enseña el escritorio, con el
       halo brillante. Se probó a subirlo al 30% para ganar contraste, pero la
       tarjeta se quedaba apagada («está oscurita», Mendo) — y lo que manda es
       parecerse a la referencia. El título se sostiene con la sombra de abajo. */
    background:var(--foto,none) 40% 56% / 230% auto no-repeat #2a1226;
    display:flex;align-items:flex-end;
  }
  /* Con `.mov__servicio` delante: la regla `.mov__servicio h3` de más abajo pesa
     lo mismo y, por ir después, le ganaba — el título salía negro y a 22 px.
     Sin velo oscuro encima de la foto: lo quitó Mendo el 7-ago. El título cae
     sobre la pared rosa (no sobre el halo), así que se lee sin ayuda. */
  .mov__servicio .mov__servicio__cab h3{
    position:relative;z-index:2;
    margin:0 0 1.15rem;padding:0 1.05rem;    /* más aire abajo y por la izquierda */
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:clamp(1.85rem,8.6vw,2.4rem);line-height:1.02;
    color:#fff;text-align:left;
    /* NO es la capa oscura que se quitó: es una sombra pegada a la letra. La foto
       tiene el halo casi blanco justo detrás y sin esto el título se perdía
       (contraste 1,6 medido). Así se lee y la tarjeta sigue brillante. */
    text-shadow:0 1px 10px rgba(58,0,42,.55), 0 1px 2px rgba(58,0,42,.4);
  }
  .mov__servicio__txt{padding:1.5rem 1.35rem 1.6rem}
  .mov__servicio h3{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:1.4rem;line-height:1.1;margin-bottom:.5rem;color:#141014;
  }
  /* En la letra de titulares como en el escritorio, pero EN ROSA: lo pidió Mendo
     el 7-ago (allí es negro, aquí manda él). */
  .mov__servicio .dato{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:1.06rem;letter-spacing:.02em;
    color:var(--magenta,#e50097);margin-bottom:.8rem;
  }
  .mov__servicio p{font-size:1rem;line-height:1.55;color:#4a424a}
  .mov__servicio .mov__entradilla{color:#141014;margin-bottom:.5rem}
  .mov__servicio .ir{
    display:inline-block;margin-top:1rem;
    font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:.1em;
    color:var(--magenta,#e50097);
  }

  /* Listas de "qué incluye" / "qué vas a trabajar" */
  .mov__lista{list-style:none;padding:0;margin:1.4rem 0 0}
  .mov__lista li{
    position:relative;padding:0 0 0 1.7rem;margin-bottom:1rem;
    font-size:1.02rem;line-height:1.5;
  }
  .mov__lista li::before{
    content:"";position:absolute;left:0;top:.55em;
    width:9px;height:9px;border-radius:50%;background:var(--magenta,#e50097);
  }

  /* Precio y botón de compra.
     Nota de Astrea: el botón COMPRAR **pasa** a turquesa al tocarlo — no nace
     turquesa. En reposo va como el resto; el turquesa es la respuesta. */
  .mov__precio{
    font-family:var(--f-display,'Anton',sans-serif);
    font-size:2.4rem !important;line-height:1;margin-top:1.8rem;
  }
  .mov__cta--comprar{margin-top:1rem}
  /* doble clase a propósito: tiene que ganarle a la respuesta magenta de
     .mov__cta:hover, que se define más abajo */
  .mov__cta.mov__cta--comprar:active{border-color:#0cc0df;color:#0cc0df;background:none}
  @media (hover:hover){
    .mov__cta.mov__cta--comprar:hover{border-color:#0cc0df;color:#0cc0df;background:none}
  }

  /* Lista con check (los ✅ del texto original) */
  .mov__lista--check li::before{display:none}
  .mov__lista--check li{padding-left:0}

  /* Es / no es para ti */
  .mov__si,.mov__no{
    font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.04em;
    margin:2.2rem 0 .2rem;
  }
  .mov__si{color:#1f9e56}
  .mov__no{color:#c8385f}
  .mov__lista--no li::before{background:#c8385f}

  /* Tarjetas de forma de pago */
  .mov__plan-card{
    border:1px solid rgba(255,255,255,.28);border-radius:16px;
    padding:1.6rem 1.2rem;margin-bottom:1rem;
  }
  .mov__sec--clara .mov__plan-card{border-color:rgba(20,16,20,.18)}
  /* la nota que va debajo de las tres formas de pago (no es una tarjeta más) */
  .mov__pago-nota{font-size:.94rem;opacity:.8;margin:.2rem 0 1.4rem}
  .mov__plan-card .tipo{
    font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.1em;
    opacity:.85;margin-bottom:.4rem;
  }
  .mov__plan-card .cifra{
    font-family:var(--f-display,'Anton',sans-serif);font-size:2.6rem !important;line-height:1;
    margin-bottom:.5rem;
  }
  .mov__plan-card .peq{font-size:.96rem !important;opacity:.8;line-height:1.4}

  /* Preguntas frecuentes (acordeón nativo) */
  .mov__faq{margin-top:1.6rem}
  .mov__faq details{
    border-bottom:1px solid rgba(20,16,20,.16);padding:.3rem 0;
  }
  .mov__sec--oscura .mov__faq details{border-color:rgba(255,255,255,.18)}
  .mov__faq summary{
    list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;position:relative;
    font-family:'Bebas Neue',sans-serif;font-size:1.16rem;letter-spacing:.03em;line-height:1.25;
  }
  .mov__faq summary::-webkit-details-marker{display:none}
  .mov__faq summary::after{
    content:"+";position:absolute;right:.2rem;top:1rem;
    font-size:1.5rem;line-height:1;color:var(--magenta,#e50097);transition:transform .2s;
  }
  .mov__faq details[open] summary::after{content:"–"}
  .mov__faq p{padding:0 0 1.2rem;font-size:1rem !important;line-height:1.58 !important;opacity:.9}

  /* Inversión / planes */
  .mov__inversion{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:1.6rem;margin:2.2rem 0 1rem;text-align:center;
  }
  .mov__plan{text-align:center;font-size:1.15rem !important;letter-spacing:.08em}
  .mov__precio--peq{font-size:1.7rem !important;opacity:.9}
  .mov__precio .peq{
    display:block;font-family:var(--f-body);font-size:.95rem;letter-spacing:.04em;
    opacity:.75;margin-top:.2rem;
  }
  .mov__sec--centro .mov__precio,.mov__sec--oscura .mov__precio{text-align:center}

  /* Formularios */
  .mov__form{margin-top:2rem;display:grid;gap:.9rem}
  .mov__form input,.mov__form textarea{
    width:100%;padding:1rem 1.1rem;font-size:1rem;font-family:inherit;
    border:1px solid rgba(255,255,255,.35);border-radius:12px;
    background:rgba(255,255,255,.06);color:inherit;
  }
  .mov__sec--clara .mov__form input,.mov__sec--clara .mov__form textarea{
    border-color:rgba(20,16,20,.2);background:#fff;
  }
  .mov__form input::placeholder,.mov__form textarea::placeholder{color:inherit;opacity:.55}
  .mov__form textarea{resize:vertical;min-height:150px}
  .mov__form button{
    width:100%;min-height:58px;margin-top:.4rem;
    border:1.5px solid currentColor;border-radius:999px;background:none;color:inherit;
    font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.1em;cursor:pointer;
  }
  .mov__form .nota{font-size:.95rem !important;opacity:.75;text-align:center;margin-top:.4rem}

  /* Encuesta de aplicación */
  .mov__encuesta{gap:1.6rem}
  .mov__encuesta label{display:block;font-size:1.02rem;line-height:1.45}
  .mov__encuesta label > input,.mov__encuesta label > textarea{margin-top:.6rem}
  .mov__encuesta fieldset{border:0;padding:0;margin:0}
  .mov__encuesta legend{font-size:1.02rem;line-height:1.45;margin-bottom:.7rem}
  .mov__encuesta .nota{
    display:block;font-size:.92rem;opacity:.7;text-align:left;margin:.25rem 0 .7rem;
  }
  .mov__encuesta .op{
    display:flex;align-items:flex-start;gap:.7rem;
    padding:.85rem 1rem;margin-bottom:.5rem;
    border:1px solid rgba(255,255,255,.25);border-radius:12px;
    font-size:.99rem;line-height:1.4;
  }
  .mov__sec--clara .mov__encuesta .op{border-color:rgba(20,16,20,.18)}
  .mov__encuesta .op input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--magenta,#e50097)}
  /* respuesta del formulario: se dice lo que ha pasado de verdad */
  .mov__aviso{
    margin:1rem 0 .2rem;padding:.9rem 1rem;border-radius:12px;
    font-size:.96rem;line-height:1.45;text-align:left;
  }
  .mov__aviso--bien{background:rgba(31,158,86,.14);border:1px solid #1f9e56;color:#1f9e56}
  .mov__aviso--mal{background:rgba(200,56,95,.12);border:1px solid #c8385f;color:#c8385f}

  /* Testimonios */
  .mov__testi p{font-size:1.02rem;line-height:1.64}
  .mov__testi .autor{margin-top:1.1rem;font-style:italic;opacity:.8}

  /* Botón */
  .mov__cta{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:58px;margin-top:1.9rem;padding:1rem 1.2rem;
    border:1.5px solid currentColor;border-radius:999px;
    font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.1em;
  }

  /* ---------------------------------------------------------------
     RESPUESTA AL TOQUE / AL PASAR EL CURSOR
     El lienzo de escritorio ya la tiene (.btn:hover, .scard:hover,
     .comprar:hover…) y aquí faltaba entera: nada respondía al tocarlo.
     :active = dedo en el móvil · el bloque hover = ratón (visor y tablet).
     --------------------------------------------------------------- */
  .mov__cta,.mov__form button,.mov__card,.mov__servicio,
  .mov__menu a,.mov__pie nav a,.mov__redes a,.mov__pie .correo,
  .mov__faq summary,.mov__card .ir,.mov__servicio .ir{
    transition:background-color .25s ease,color .25s ease,
               border-color .25s ease,transform .18s ease;
  }

  /* Botón principal: se rellena de magenta, como .btn:hover del lienzo */
  .mov__cta:active,.mov__form button:active{
    background:var(--magenta,#e50097);border-color:var(--magenta,#e50097);color:#fff;
  }

  /* Tarjetas: se marcan al tocarlas */
  .mov__card:active,.mov__servicio:active{
    border-color:var(--magenta,#e50097);transform:scale(.985);
  }
  .mov__card:active .ir,.mov__servicio:active .ir{color:var(--magenta,#e50097)}

  /* Enlaces del menú, del pie y redes */
  .mov__menu a:active{background:rgba(229,0,151,.22)}
  .mov__pie nav a:active,.mov__pie .correo:active{color:#000}
  .mov__redes a:active{background:var(--magenta,#e50097);color:#fff}
  .mov__faq summary:active{color:var(--magenta,#e50097)}

  @media (hover:hover){
    .mov__cta:hover,.mov__form button:hover{
      background:var(--magenta,#e50097);border-color:var(--magenta,#e50097);color:#fff;
      cursor:pointer;
    }
    .mov__card:hover,.mov__servicio:hover{
      border-color:var(--magenta,#e50097);
      box-shadow:0 14px 32px rgba(229,0,151,.18);
    }
    .mov__card:hover .ir,.mov__servicio:hover .ir{color:var(--magenta,#e50097)}
    .mov__menu a:hover{background:rgba(229,0,151,.22)}
    .mov__pie nav a:hover,.mov__pie .correo:hover{color:#000}
    .mov__redes a:hover{background:var(--magenta,#e50097);color:#fff}
    .mov__faq summary:hover{color:var(--magenta,#e50097);cursor:pointer}
  }

  /* ---------------------------------------------------------------
     PIE
     --------------------------------------------------------------- */
  /* Pie replicado del de agendamiento.html en móvil («precioso», Mendo 8-ago):
     alineado a la izquierda, menú en columna Bebas 1.4rem, marca 2.2rem/.1em,
     CONECTA CONMIGO 22px, correo 1.2rem y las redes 46px debajo del correo.
     Los números son los medidos en agendamiento a 390px. */
  .mov__pie{
    padding:2.6rem 1.4rem;text-align:left;
    background:#fff;border-top:1px solid rgba(229,0,151,.25);
  }
  .mov__pie .marca{
    font-family:var(--f-logo,Impact,sans-serif);font-size:2.2rem;letter-spacing:.1em;
    color:var(--magenta,#e50097);display:block;margin-bottom:.8rem;
  }
  .mov__pie nav{
    display:block;margin-bottom:1.2rem;
  }
  .mov__pie nav a{
    font-family:'Bebas Neue',sans-serif;font-size:1.4rem;display:block;line-height:1.6;
    color:var(--magenta,#e50097);
  }
  .mov__pie h4{
    font-family:var(--f-display,'Anton',sans-serif);text-transform:uppercase;
    font-size:22px;color:var(--magenta,#e50097);margin-bottom:.6rem;font-weight:400;
  }
  .mov__redes{display:flex;gap:.7rem;margin-top:1rem}
  .mov__redes a{
    width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
    border:1.5px solid var(--magenta,#e50097);color:var(--magenta,#e50097);
  }
  .mov__pie .correo{
    font-family:var(--f-alt,'DM Sans',sans-serif);font-size:1.2rem;
    color:var(--magenta,#e50097);
    /* es un enlace de verdad (abre el correo): que se pueda dar con el dedo */
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* ---------------------------------------------------------------
     CARRUSEL DE TESTIMONIOS (móvil) — mismos textos que el escritorio
     --------------------------------------------------------------- */
  .mov .mov__testi__caja{margin:.4rem 0 0}
  .mov .testi__slide{display:none}
  .mov .testi__slide.on{display:block;animation:movfade .5s ease}
  .mov .testi__slide p{margin:0 0 .9rem;font-size:1rem;line-height:1.62;opacity:.94}
  .mov .testi__slide p:last-child{margin-bottom:0}
  .mov .testi__slide .autor{opacity:1;font-weight:700}
  @keyframes movfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* el lienzo los tiene en absoluto; en el teléfono van en el flujo normal */
  .mov .puntos{position:static !important;display:flex;justify-content:center;gap:14px;margin-top:1.5rem}
  .mov .puntos i{
    width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.42);
    cursor:pointer;transition:background .25s ease,transform .25s ease;
  }
  .mov .puntos i.on{background:#fff;transform:scale(1.15)}

  /* ---------------------------------------------------------------
     CINTA EN MOVIMIENTO (móvil) — la franja negra del Shop
     --------------------------------------------------------------- */
  .mov .mov__cinta{
    width:100vw;margin-left:calc(50% - 50vw);
    background:#000;padding:.6rem 0;overflow:hidden;
  }
  .mov .mov__cinta .cinta__txt{
    white-space:nowrap;padding-right:60px;margin:0;
    font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  }
  .mov .cinta__pista{display:flex;width:max-content;animation:cinta 26s linear infinite}
  @keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.mov .cinta__pista{animation:none}}

  /* ---------------------------------------------------------------
     LISTA DE CONSULTAS ESPECIALIZADAS
     --------------------------------------------------------------- */
  .mov .mov__lista{list-style:none;margin:.2rem 0 1.6rem;padding:0}
  .mov .mov__lista li{
    padding:.85rem 0;font-size:1.02rem;line-height:1.4;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  /* Esta lista se separa con una línea, no con bola: sin esto el punto
     magenta se quedaba pintado ENCIMA de la primera letra (padding-left 0). */
  .mov .mov__lista li::before{display:none}
  .mov .mov__lista li:last-child{border-bottom:0}
  /* Los dos puntos que llevan a las limpiezas se PULSAN: la fila entera es el
     enlace y mide lo que el dedo necesita (antes eran 24 px de texto). */
  .mov .mov__lista li:has(> .mov__esp){padding:0}
  .mov .mov__esp{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    min-height:48px;padding:.85rem 0;
    color:inherit;text-decoration:none;
  }
  .mov .mov__esp::after{content:"→";opacity:.6;font-size:1.05rem}
  .mov .mov__esp:active{opacity:.65}

  /* portada del teléfono: las 3 partes del carrusel */
  .mov .hero__slide{display:none}
  .mov .hero__slide.on{display:block;animation:movfade .55s ease}
  .mov .mov__hero__car{margin:0}
  .mov .mov__hero .puntos{margin:1.2rem 0 .2rem}
  /* Home: más aire entre el titular, la frase y los puntos del carrusel
     (pedido de Mendo, 7-ago: «un pelín más, nada, minucia»). */
  .mov .mov__hero--aire .puntos{margin:2rem 0 .2rem}
}