/* =============================================================================
   ASTREA · VERSIÓN MÓVIL (v3 — 2026-08-04)

   No es el lienzo encogido: es una web de móvil. El motor (js/movil.js) saca el
   contenido de las réplicas y lo agrupa en secciones; aquí se le da forma.
   Todo dentro de la media query: el escritorio no se toca NUNCA.
   ============================================================================= */
@media (max-width: 820px){

  body.es-movil{background:#fff !important;overflow-x:hidden}
  .movil{width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}

  /* =========================================================================
     SECCIONES — ritmo y aire
     ========================================================================= */
  .movil__sec{
    position:relative;
    padding:4.5rem 1.5rem;
    background:#fff;color:#111;
  }
  /* nada de fondos planos: un degradado casi imperceptible da profundidad */
  .movil__sec:not(.movil__sec--oscura):not(.movil__sec--foto){
    background:linear-gradient(180deg,#fff 0%,#faf7f9 55%,#fff 100%);
  }
  /* el :not() importa: si la sección lleva foto de fondo, este degradado la taparía */
  .movil__sec--oscura:not(.movil__sec--foto){
    background:radial-gradient(120% 80% at 50% 0%,#181018 0%,#000 70%) !important;
    color:#fff;
  }
  .movil__sec--oscura{color:#fff}
  .movil__sec--oscura *{color:#fff !important}

  .movil__sec--foto{background-size:cover;background-position:center;color:#fff}
  .movil__sec--foto::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.88));
  }
  /* doble clase a propósito: con una sola empata con `.movil__sec > *` de abajo,
     el z-index no aplicaría y el texto quedaría DEBAJO del velo */
  .movil .movil__sec.movil__sec--foto > *{position:relative !important;z-index:1}
  .movil__sec--foto *{color:#fff !important}

  /* Las piezas del lienzo, sueltas del posicionamiento — ESTÉN DONDE ESTÉN.
     Tiene que alcanzar también a las que el motor mete dentro del hero o de una
     tarjeta: con `> *` solo llegaba a las hijas directas y las anidadas seguían
     en absoluto (se solapaban) y con white-space:pre (se salían de pantalla). */
  .movil .t,.movil .tw,.movil .capa,
  .movil .boton,.movil .cta,.movil .btn,
  .movil .logo-nav,.movil .nav-link,.movil .red,.movil .regla,.movil .puntos,
  .movil__sec > *,.movil__hero > *,.movil__card > *{
    position:static !important;
    left:auto !important;top:auto !important;
    width:auto !important;height:auto !important;max-width:100% !important;
    white-space:normal !important;
  }
  .movil__sec > *{margin:0 0 1.25rem}
  .movil__sec > *:last-child{margin-bottom:0}
  .movil .ln{display:inline !important;white-space:normal !important}

  /* =========================================================================
     TIPOGRAFÍA — tamaños de teléfono
     ========================================================================= */
  .movil__sec h1,.movil__sec h2,
  .movil__sec .anton,.movil__sec .anton-it{
    font-size:clamp(1.85rem,8.4vw,2.5rem) !important;
    line-height:1.06 !important;letter-spacing:.005em;
    margin-bottom:1.35rem;
  }
  .movil__sec h3,.movil__sec h4{font-size:1.35rem !important;line-height:1.22 !important}
  .movil__sec p,.movil__sec li{font-size:1.06rem !important;line-height:1.62 !important}
  .movil__sec p span,.movil__sec .ln,.movil__sec .ln span{
    font-size:inherit !important;line-height:inherit !important;
  }
  .movil__sec b,.movil__sec strong{font-weight:700}
  .movil__sec .regla{
    display:block;width:100% !important;height:1px !important;
    background:currentColor;opacity:.18;margin:2rem 0;
  }

  /* =========================================================================
     CABECERA — barra con marca + hamburguesa
     ========================================================================= */
  .movil__nav{
    display:flex;flex-direction:column;justify-content:flex-start;
    min-height:92vh;padding:0 0 3rem;
  }
  .movil__barra{
    position:relative;z-index:3;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.15rem 1.4rem;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .movil__barra .logo-nav{
    margin:0 !important;font-size:1.6rem !important;letter-spacing:.2em;
  }
  .movil__ham{
    width:46px;height:46px;display:grid;place-content:center;gap:6px;
    background:none;border:0;cursor:pointer;padding:0;
  }
  .movil__ham span{
    display:block;width:26px;height:2px;background:currentColor;
    transition:transform .28s ease,opacity .2s ease;
  }
  .abierto .movil__ham span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .abierto .movil__ham span:nth-child(2){opacity:0}
  .abierto .movil__ham span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .movil__enlaces{
    position:relative;z-index:3;
    display:grid;overflow:hidden;
    max-height:0;opacity:0;
    transition:max-height .34s ease,opacity .24s ease;
    background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  }
  .abierto .movil__enlaces{max-height:60vh;opacity:1}
  .movil__enlaces .nav-link{
    position:static !important;margin:0 !important;
    padding:1.05rem 1.5rem;
    font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.06em;
    border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;
  }

  /* el hero: ocupa la pantalla y el titular manda */
  .movil__hero{
    position:relative;z-index:2;
    flex:1;display:flex;flex-direction:column;justify-content:center;
    padding:3.5rem 1.5rem 0;text-align:center;
  }
  .movil__hero > *{margin:0 0 1.35rem;max-width:100%}
  .movil__hero h1,.movil__hero .anton{
    font-size:clamp(2.1rem,9.2vw,3rem) !important;line-height:1.04 !important;
  }
  .movil__hero p{font-size:1.08rem !important;letter-spacing:.14em;text-transform:uppercase}
  .movil__hero .puntos{justify-content:center;margin-top:.5rem}

  /* =========================================================================
     TARJETAS DE SERVICIO
     ========================================================================= */
  .movil__card{
    background:#fff;border:1px solid rgba(229,0,151,.22);border-radius:16px;
    padding:1.6rem 1.4rem;margin:0 0 1.1rem;
    box-shadow:0 8px 24px rgba(20,0,14,.06);
  }
  .movil__card > *{margin:0 0 .7rem !important;width:auto !important;position:static !important}
  .movil__card > *:last-child{margin-bottom:0 !important}
  .movil__card a{font-size:1.3rem !important;line-height:1.15 !important;display:block}
  .movil__card p{font-size:1rem !important;line-height:1.55 !important;opacity:.85}

  /* =========================================================================
     FOTOS
     ========================================================================= */
  .movil img{
    position:static !important;
    width:100% !important;height:auto !important;max-width:100% !important;
  }
  .movil__foto{
    max-height:46vh;object-fit:cover !important;
    border-radius:14px;margin:0 0 1.6rem;
  }
  .movil .capa{overflow:visible !important;height:auto !important;width:auto !important}

  /* =========================================================================
     BOTONES
     ========================================================================= */
  .movil__sec .boton,.movil__sec .btn,.movil__sec .cta,
  .movil__sec .agendar,.movil__sec .comprar,.movil__sec .enviar{
    display:flex !important;align-items:center;justify-content:center;
    width:100% !important;min-height:58px;height:auto !important;
    margin:1.9rem 0 .3rem;padding:1rem 1.2rem;
    border:1.5px solid currentColor;border-radius:999px;
    font-size:1.02rem !important;letter-spacing:.06em;text-align:center;
  }

  /* =========================================================================
     TESTIMONIOS
     ========================================================================= */
  .movil__sec .testi{position:static !important;width:100% !important;height:auto !important;display:block}
  .movil__sec .testi__slide p{font-size:1.02rem !important;line-height:1.62 !important}
  .movil__sec .flecha{
    position:static !important;display:inline-grid !important;
    width:48px !important;height:48px !important;margin:1.2rem .4rem 0;
    font-size:26px !important;
  }
  .movil__sec .puntos{
    position:static !important;display:flex;justify-content:center;
    gap:12px;margin-top:1.4rem;
  }

  /* =========================================================================
     PIE — marca › enlaces › conecta conmigo › redes › correo
     ========================================================================= */
  .movil__pie{
    display:flex;flex-wrap:wrap;gap:.8rem 1.3rem;justify-content:center;align-items:center;
    padding:3.2rem 1.5rem 3.8rem;border-top:1px solid rgba(229,0,151,.22);
  }
  .movil__pie > *{margin:0 !important}
  .movil__pie a{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;text-decoration:none}
  .movil__pie a.t{
    order:1;flex:0 0 100%;text-align:center;
    font-family:var(--f-logo) !important;font-size:2.1rem !important;letter-spacing:.16em;
    margin-bottom:.5rem !important;
  }
  .movil__pie .nav-link{order:2}
  .movil__pie h4{
    order:3;flex:0 0 100%;text-align:center;
    font-size:1.3rem !important;margin:1.8rem 0 .3rem !important;
  }
  .movil__pie .red{
    order:4;width:46px !important;height:46px !important;
    display:grid;place-items:center;border-radius:50%;
  }
  .movil__pie a[href^="mailto"]:not(.red){
    order:5;flex:0 0 100%;text-align:center;
    font-family:var(--f-alt),sans-serif !important;font-size:1rem !important;
    margin-top:1.2rem !important;
  }
}