/* AutomateK · ajustes de móvil. El móvil es la versión principal: la mayoría
   del tráfico llega desde Instagram, así que aquí manda el pulgar.

   Reglas que se aplican en toda la hoja:
     · ningún texto por debajo de 16 px;
     · objetivos táctiles de 44 px como mínimo, y 56 px los botones de acción;
     · nada que se desplace en horizontal;
     · 20 px de margen lateral (18 px por debajo de 360 px) para que el texto
       no toque los bordes.

   Va la última en cargarse y por eso lleva !important donde tiene que ganar a
   los bloques de móvil que ya había en portada.css. Se quita borrando su línea
   de index.html y el escritorio queda exactamente igual. */

/* Fuera de la consulta de medios solo esto: el icono del menú no existe en
   escritorio, donde los cuatro enlaces van a la vista en la cabecera. */
.navBurger{display:none}

@media(max-width:899px){

/* ── Base ─────────────────────────────────────────────────────────────── */

html,body{max-width:100%;overflow-x:hidden}
body{font-size:16px}
html{scroll-padding-top:80px}

/* Margen lateral único en todas las secciones y bandas. */
section,.cnfBanda,.pie{padding-left:20px !important;padding-right:20px !important}
.s25{padding-left:20px !important;padding-right:20px !important}

/* Suelo de 16 px. Los rótulos monoespaciados en mayúsculas suben a 16 px y a
   cambio pierden parte del interletraje: a 16 px con .14em no caben. */
.s1,.s9,.s11,.s14,.s33,.s42,.s48,.s75,.s78,.s79,.s101,
.cstQi,.cstBigU,.cstAnioK,.cstSub,.cstSum,
.fljItem,.fljKick,.fljName,
.mirWho,.mirHora,.mirMsgT,.mirNum,.mirTxt,.mirDecT,.mirDecTxt,.mirPie,
.mirKpiT,.mirKpiN,.mirGrafT,.mirGrafN,.mirEje,.mirNota,
.prcT,.prcMeta,.prcQuien,.prcTxt,.prcTxtTu,
.cnfTxt,
.plnNom,.plnRec,.plnMes,.plnTxt,.plnItem,.plnDetSum,.plnDetTxt,.plnIncl,
.plnCompB,.plnPieTxt,.plnCond,
.s319,.s322,
.cieLinea,.cieAlt,
.pieT,.pieEnl,.pieLinea{font-size:16px !important}

.s75,.cstAnioK,.cstBigU,.fljKick,.mirKpiT,.mirGrafT,.mirDecT,.mirEje,
.prcMeta,.prcQuien,.plnNom,.plnRec,.plnDetSum,.pieT{letter-spacing:.05em !important}
.s33{letter-spacing:.1em !important}

/* Botones de acción: anchos, altos y sin nada que competa al lado. */
.s44,.plnBtn,.cieBtn{width:100% !important;min-height:56px !important;justify-content:center !important}
.s21,.s19{min-height:56px}
.s11,.plnDetSum,.cstSum,.s319{min-height:48px}

/* ── Movimiento: en móvil, quieto ─────────────────────────────────────
   Las siluetas de puntos (esfera, reloj, flujo, pasos y la K del cierre) ya
   vienen formadas — eso lo resuelve cada guion — y aquí se apagan los bucles
   de CSS que quedaban: anillos, latidos, brillos y la entrada del titular. */
.fljRing,.mirDot,.s41,.s63,.s126,.s162,.s215,.ak-parte-dot{animation:none !important}
.s35,.s36,.s37,.s38,.s184,.s186,.s187{
  animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;
}

/* ── Cabecera: menú desplegable ───────────────────────────────────────
   Visibles solo el logotipo, el teléfono y el botón de agendar. Los cuatro
   enlaces de sección pasan al panel que abre el icono. */
#nav{flex-wrap:nowrap !important;row-gap:0 !important;gap:6px !important;padding:9px 10px !important}
.s5{flex:1 1 auto;min-width:0;overflow:hidden}
.s7{font-size:17px}
.s13{flex:0 0 auto;gap:6px !important}

/* En móvil la única acción es agendar: el teléfono sale de la cabecera y de la
   barra de abajo. Sigue estando en el cierre y en el pie, que es donde se busca
   a propósito. */
#navTel{display:none !important}
#navTelTxt{display:none !important}
.s19{display:none !important}
.s21{flex:1 1 auto}

.navcta{font-size:16px;padding:0 16px;min-height:44px;flex:0 0 auto}
.s22{font-size:16px}

.navBurger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;padding:0;
  background:#FFFFFF;border:1px solid #E5E5E7;border-radius:999px;
  color:#1D1D1F;cursor:pointer;
}
.navBurger svg{width:21px;height:21px}
.navBurgerCerrar{display:none}
#nav[data-menu="abierto"] .navBurger{background:#1C4BD8;border-color:#1C4BD8;color:#FFFFFF}
#nav[data-menu="abierto"] .navBurgerAbrir{display:none}
#nav[data-menu="abierto"] .navBurgerCerrar{display:block}

#navLinks{
  position:absolute;top:100%;left:0;right:0;z-index:1;
  display:none;flex-direction:column;order:0 !important;flex-basis:auto !important;
  gap:0 !important;padding:6px 10px 10px !important;overflow:visible !important;
  background:#FFFFFF;border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 34px -22px rgba(11,11,12,.34);
}
#nav[data-menu="abierto"] #navLinks{display:flex}
#navLinks a{
  display:flex !important;align-items:center;min-height:54px;
  padding:0 10px !important;border:0 !important;border-radius:12px !important;
  background:none !important;font-size:17px !important;font-weight:500;
  color:#1D1D1F !important;white-space:nowrap;
}
#navLinks a+a{border-top:1px solid #EFEFF2 !important;border-radius:0 !important}

/* El logotipo cede un punto de tamaño en las pantallas más estrechas. */
@media(max-width:359px){
  .s7{font-size:16px}
}

/* ── Héroe ────────────────────────────────────────────────────────────
   Titular, botón y garantía tienen que verse juntos sin desplazar, así que la
   esfera baja al final: es el remate, no el reclamo. */
#top{min-height:auto !important}
.s27{padding:16px 0 !important}
#heroRow{padding:2px 0 28px !important;gap:0 !important}
#heroTop{order:1}
#kTilt{order:2 !important;margin:14px auto 4px !important}
#heroBottom{order:3 !important}
.s34{font-size:clamp(30px,8.4vw,40px) !important;margin:12px 0 0 !important;letter-spacing:-.03em}
.s42{margin:12px 0 18px !important;line-height:1.55}
#heroCta{justify-content:stretch !important;gap:14px !important}
.s48{margin:14px 0 0 !important;line-height:1.4}
#globeCv,#esferaCv{width:min(168px,44vw) !important}

/* ── Lo que ya te está costando ───────────────────────────────────────
   El reloj arriba, las tres frases debajo con una línea que las separa, y la
   cifra al final. Todo en vertical. */
#calcGrid{grid-template-columns:1fr !important}
.cstL{align-items:stretch !important;text-align:left !important;padding:24px 20px !important}
.cstClock{width:min(196px,52vw) !important;margin:2px auto 22px !important}
.cstQ{gap:0 !important;margin:14px 0 0 !important}
.cstQi{font-size:17px !important;line-height:1.5;padding:15px 0;border-top:1px solid #ECECEF}
.cstQi:first-child{border-top:0}
#calcRight{padding:24px 20px !important}
.cstBig{font-size:clamp(56px,15vw,78px) !important;margin-top:14px !important}
.cstAnioV{font-size:34px !important}
.cstDet{text-align:left}
.s77{gap:16px}
.s101{margin-top:20px !important;text-align:left}

/* ── La solución ──────────────────────────────────────────────────────
   Entra arriba, la K en medio, sale abajo. El flujo vertical ya lo monta
   flujo.css: aquí solo sube el cuerpo de letra. */
.fljItem{font-size:17px !important;gap:12px !important}
.fljList{gap:14px !important}
.fljDisc{width:78px !important;height:78px !important}

/* ── Míralo por dentro ────────────────────────────────────────────────
   Parte diario y panel, uno debajo del otro. Las cuatro tarjetas del panel en
   dos columnas de dos: en una sola fila no se leen y en una columna el panel
   se hace interminable. */
.mirGrid{grid-template-columns:1fr !important;gap:16px !important}
.mirCard{padding:20px 18px !important;border-radius:20px}
.mirKpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
.mirKpi{padding:14px 13px !important}
.mirKpiV{font-size:26px !important}
.mirNota{text-align:left;margin-top:18px !important}

/* ── Cómo funciona ────────────────────────────────────────────────────
   Cuatro pasos apilados con la línea de progreso en vertical (proceso.css). */
.prcT{font-size:19px !important}
.prcGar{font-size:17px !important;margin-top:32px !important}

/* ── Banda de confianza: dos filas de dos ─────────────────────────────── */
.cnfBanda{padding-top:20px !important;padding-bottom:20px !important}
.cnfLista{grid-template-columns:1fr 1fr !important;gap:18px 16px !important}
.cnfTxt{line-height:1.45}
.cnfIco{width:20px;height:20px;margin-top:2px}

/* ── Planes ───────────────────────────────────────────────────────────
   Tres tarjetas apiladas, de menor a mayor precio: el orden del HTML. */
.plnGrid{grid-template-columns:1fr !important;row-gap:16px !important}
.plnCard{padding:24px 20px !important}
.plnCifra{font-size:38px !important}
.plnComp{padding:26px 20px !important}
.plnCompT{font-size:18px !important}
.plnPie{align-items:stretch}
.plnIncl{align-items:flex-start;text-align:left}

/* ── Preguntas ────────────────────────────────────────────────────────
   La primera abierta la deja portada.js; aquí solo el tamaño de la fila. */
.s319{padding:18px !important;line-height:1.4}
.s322{padding:0 18px 20px !important;line-height:1.6}

/* ── Cierre ───────────────────────────────────────────────────────────
   La K más pequeña para que el titular, la garantía y el botón entren juntos. */
.cieSec{padding-top:56px !important;padding-bottom:60px !important}
.cieMarca{width:96px !important;margin-bottom:20px !important}
.cieTit{font-size:clamp(27px,7.6vw,34px) !important}
.cieLineas{margin-top:16px !important}
.cieCaja{margin-top:26px !important;padding:24px 20px !important;border-radius:22px}
.cieGar{font-size:17px !important}
.cieBtn{margin-top:22px !important;min-height:60px !important;font-size:18px !important;padding:0 20px !important}
.cieAlt{margin-top:18px !important}
.cieTel{font-size:19px !important}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pieLista{gap:2px}
.pieEnl{padding:9px 0}

}

/* Márgenes algo más estrechos en las pantallas pequeñas de verdad, para no
   comerse el ancho de línea. Y el héroe se aprieta un escalón más: a este
   ancho el titular ocupa una línea de más y la garantía se iba al pliegue. */
@media(max-width:359px){
  section,.cnfBanda,.pie,.s25{padding-left:18px !important;padding-right:18px !important}
  .cstL,#calcRight,.mirCard,.plnCard,.cieCaja{padding-left:16px !important;padding-right:16px !important}
  .s34{font-size:28px !important;margin-top:10px !important}
  .s42{margin:12px 0 16px !important}
  .s44{font-size:16px !important;padding-left:16px !important;padding-right:16px !important}
  .s27{padding:12px 0 !important}
}