/* AutomateK · mejoras de diseño de la portada. 2026-09-05, marketing-disenador.

   NO es un rediseño: es una capa que corrige cuatro cosas medidas sobre la web
   publicada. Va la ÚLTIMA de todas las hojas (después de movil.css) porque su
   trabajo es ganar a los suelos de tamaño que movil.css impone en <=899 px.

   Se quita entera borrando su línea <link> de index.html, y la portada vuelve
   exactamente a como estaba. Los tres enlaces .plnCta del HTML se quedarían sin
   estilo pero seguirían funcionando como enlaces.

   PASO BASE: 8 px. Medio paso (4 px) permitido y declarado. Bordes de 1 y 1,5 px
   no cuentan como espaciado. Aquí NO se toca ningún color de marca: el azul de
   la web es #1C4BD8 y esta hoja no lo cambia (ver «Qué queda por decidir»).

   Lo que arregla, en orden:
     1. La jerarquía en móvil, que hoy no existe: movil.css sube a 16 px seis
        niveles distintos y los deja iguales. Aquí se recupera la escala con
        tamaño y peso, sin bajar el cuerpo de lectura de 16 px.
     2. El titular del héroe en móvil, que a 32,8 px pesa menos que el adorno.
     3. Los espaciados del héroe y de planes, contra el paso de 8.
     4. El bloque de planes: cada plan pasa a tener su propia acción.
*/

/* ─────────────────────────────────────────────────────────────────────────
   1 · JERARQUÍA EN MÓVIL — cuatro escalones donde hoy hay dos
   ─────────────────────────────────────────────────────────────────────────
   El cuerpo de lectura se queda en 16 px (no se toca: era el motivo de la regla
   de movil.css). Lo que se recupera es el escalón de RÓTULO: son etiquetas, no
   texto corrido, y a 13 px con peso 600 y su interletraje se leen mejor que a
   16 px sin distinguirse de lo que hay al lado.
   Salto medido rótulo→cuerpo: 16/13 = 1,23× en tamaño y +200 en peso. */
@media (max-width:899px){
  .s33,            /* «SOFTWARE Y AUTOMATIZACIÓN PARA PYMES» */
  .s75,            /* «LO QUE HOY SE HACE A MANO» */
  .plnNom,         /* «OPERACIÓN» / «CRECIMIENTO» / «SOFTWARE» */
  .plnDetSum,      /* «VER EL DETALLE» */
  .mirKpiT, .mirGrafT, .mirDecT,
  .prcQuien, .prcMeta{
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:.12em !important;
  }
  .plnRec{font-size:11px !important;letter-spacing:.1em !important}

  /* El escalón de GANCHO: la frase que resume cada plan era 16/400, igual que
     los cuatro puntos de debajo. Sube a 18/600.
     Salto medido gancho→cuerpo: 18/16 = 1,13× en tamaño y +200 en peso. */
  .plnTxt{font-size:18px !important;line-height:1.44 !important}

  /* La promesa del héroe («…o te devolvemos el primer mes») era 16/600 gris
     oscuro: el mismo tamaño que el párrafo de encima. Sube a peso 700, NO de
     tamaño: a 17 px pasaba de 2 a 3 líneas y se metía debajo del aviso de
     cookies (medido: 45 px de alto → 72 px). Salto medido promesa→párrafo:
     +300 en peso, mismo tamaño. */
  .s48{font-weight:700 !important;line-height:1.38 !important;margin:12px 0 0 !important}
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · EL TITULAR DEL HÉROE MANDA EN MÓVIL, Y EL ADORNO CEDE SITIO
   ─────────────────────────────────────────────────────────────────────────
   Medido antes, a 390×844: titular 32,8 px y 67 px de alto; el adorno de la
   esfera, 168 px. El adorno pesaba dos veces y media más que el mensaje.
   movil.css topa el titular en 40 px con !important, así que aquí se sube el
   tope y el múltiplo, y se recorta la esfera para pagar la diferencia. En
   escritorio (>=900 px) no cambia nada: el titular sigue en 80 px. */
@media (max-width:899px){
  .s34{font-size:clamp(36px,9.6vw,52px) !important;margin:12px 0 0 !important}
  /* esfera.js sustituye #globeCv por #esferaCv al arrancar: van los dos. */
  #globeCv,#esferaCv{width:min(128px,33vw) !important}
  #kTilt{margin:12px auto 0 !important}
  #heroRow{padding:0 0 24px !important}
  .s27{padding:12px 0 !important}
  .s42{margin:12px 0 12px !important}
}
@media (max-width:359px){
  .s34{font-size:32px !important}
}

/* En una ventana baja el adorno se va del todo. No es una adaptación: es la
   decisión de que el mensaje y el botón valen más que el dibujo.
   Medido a 390×740: con la esfera puesta, el aviso de cookies cae encima del
   botón principal Y de la promesa; sin ella, ni lo roza. El aviso NO se toca:
   su tamaño lo manda el consentimiento informado, no el diseño.
   El lienzo lleva role="img" con su texto alternativo; al ocultarlo con
   display:none deja de anunciarse, que es lo correcto para un adorno. */
@media (max-width:899px) and (max-height:800px){
  #kTilt{display:none !important}
}

/* Y por debajo de 700 px de alto se aprieta un escalón más. Medido a 375×667:
   sin esto la última línea de la promesa cae 6 px por debajo del borde del
   aviso. No es «adaptación»: es que a ese alto el aire sobra y el mensaje no. */
@media (max-width:899px) and (max-height:700px){
  .s27{padding:8px 0 !important}
  #heroRow{padding:0 0 16px !important}
  .s42{margin:8px 0 8px !important}
  .s48{margin:8px 0 0 !important}
}

/* Último escalón, para el móvil pequeño de verdad (360×640, 375×667 con barra
   del navegador). El botón baja de 56 a 48 px de alto: sigue por encima del
   mínimo táctil de 44 px de la pauta, y son 8 px que la promesa necesita.
   Medido a 360×640: sin esto, la última línea de la promesa se mete 11 px
   debajo del aviso. */
@media (max-width:899px) and (max-height:660px){
  #heroCta a.s44{min-height:48px !important;padding-top:0 !important;padding-bottom:0 !important}
  .s42{margin:8px 0 4px !important}
}


/* ═══ it-desarrollador · 2026-09-05, SEGUNDA PASADA ═══════════════════════
   LA MISMA ESCALERA DE VENTANA BAJA, AHORA TAMBIÉN EN ESCRITORIO.

   Qué se arregla: en 1280x600 el aviso de cookies se sentaba encima del botón
   principal del héroe (27 px de solape; `elementFromPoint` en el centro del
   botón devolvía el aviso) y en 1280x650 encima del enlace «Cómo funciona».
   Es la avería D7 otra vez, esta vez en ventana baja de escritorio.

   Por qué esto NO es una decisión de diseño nueva: la decisión ya está escrita
   veinte líneas más arriba, en la escalera de móvil de esta misma hoja — «En
   una ventana baja el adorno se va del todo. No es una adaptación: es la
   decisión de que el mensaje y el botón valen más que el dibujo». Lo único que
   se hace aquí es aplicarla también cuando la ventana es ancha y baja. No se
   quita ni un elemento, no se cambia ni un tamaño de letra y no se toca el
   aviso: su alto lo manda el texto del consentimiento.

   Qué manda el número 760: por encima de 760 px de alto el aviso ya no llega
   al héroe (medido: 1024x768 deja 73 px de aire; 1440x900, 300 px), y 761 es
   justo donde `cookies.css` deja de apretar el aviso y le pone medida a la
   línea. Un solo corte para las dos cosas.

   Medido a 1280x600 · antes: héroe 735 px de contenido en 600 de ventana,
   botón en 495..544, aviso en 516..600, TAPADO.
   Las cifras de después están en `07-comprobar-arreglos.py`, comprobación 1. */
@media (min-width:900px) and (max-height:760px){
  #kTilt{display:none !important}
  .s27{padding:8px 0 !important}
  .s31{padding:0 0 24px !important}
}


/* ─────────────────────────────────────────────────────────────────────────
   3 · REJILLA DE 8 EN EL HÉROE Y EN PLANES
   ─────────────────────────────────────────────────────────────────────────
   Valores sustituidos: 18→16 · 22→24 · 32→32 · 16→16 · 20→24 · 12→12.
   Medio paso (4 px) usado a propósito en dos sitios y declarado abajo. */
h1.s34{margin:16px 0 0}          /* era 18px 0 0 */
.s42{margin:24px 0 32px}         /* era 18px 0 32px */
.s43{gap:24px}                   /* era 22px */
.s48{margin:16px 0 0;gap:8px}    /* era 16px / gap 9px */
.s48tick{width:24px;height:24px;border-radius:8px}  /* era 20px / 6px */
.s48tick svg{width:12px;height:12px}                /* era 11px */

.plnPrecio{margin:24px 0 0}      /* era 20px */
.plnTxt{margin:16px 0 0}         /* era 18px */
.plnLista{margin:16px 0 0;gap:12px}  /* era 18px / gap 12px (medio paso, se queda) */
.plnItem{gap:8px}                /* era 10px */
.plnCheck{width:16px;height:16px;border-radius:4px;margin-top:4px}  /* era 15/5/3 */
.plnCheck svg{width:10px;height:10px}
.plnDet{margin:24px 0 0;padding-top:16px}  /* era 20px / 16px */
.plnCond{gap:8px;padding:8px 24px}          /* era gap 11px / padding 10px 20px */
.plnIncl{gap:8px}                            /* era 11px */

/* ─────────────────────────────────────────────────────────────────────────
   4 · «VER EL DETALLE» PARECE PULSABLE
   ─────────────────────────────────────────────────────────────────────────
   Era el único elemento accionable de cada tarjeta y estaba a 11 px, en gris de
   texto secundario y sin área táctil. Ahora: color de acción, 44 px de alto y
   el signo dentro de una diana redonda. No cambia el texto ni el comportamiento. */
.plnDetSum{
  min-height:44px;
  color:#1C4BD8;
  font-weight:600;
}
.plnDetSig{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:999px;
  background:rgba(28,75,216,.1);
  font-size:16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   5 · CADA PLAN TIENE SU PROPIA ACCIÓN
   ─────────────────────────────────────────────────────────────────────────
   Hoy la sección entera tenía UNA sola salida, al final del todo y después de
   un bloque negro de 400 px. Quien decide en la tarjeta de CRECIMIENTO tiene
   que volver a bajar buscando dónde se pulsa.
   El literal del botón es el que YA está publicado en .plnBtn y en .cieBtn: no
   se inventa texto nuevo. El plan del que sale va en el aria-label. */
.plnCta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;
  margin:24px 0 0;
  padding:0 24px;
  background:#FFFFFF;
  border:1.5px solid #1C4BD8;
  color:#1C4BD8;
  font-weight:600;font-size:16px;line-height:1;
  border-radius:999px;
  text-decoration:none;
  transition:background-color .2s, color .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.plnCta:hover{background:#1C4BD8;color:#FFFFFF;transform:translateY(-2px)}
.plnCta:active{transform:translateY(0)}
/* En la tarjeta recomendada el botón va relleno: es el único sitio de la
   sección donde el color de marca hace de acento, y por eso se ve solo. */
.plnCardRec .plnCta{background:#1C4BD8;color:#FFFFFF}
.plnCardRec .plnCta:hover{filter:brightness(1.08);background:#1C4BD8;color:#FFFFFF}
/* La tarjeta usa `grid-template-rows: subgrid` con CINCO filas declaradas en
   planes.css, para que precio, frase y lista queden a la misma altura en las
   tres. Al añadir el botón hay SEIS hijos: sin esta línea el sexto cae en una
   fila implícita y se pinta encima del «Ver el detalle», que desaparece.
   Se vio en la captura de 1440 y por eso está escrito aquí. */
@media (min-width:901px){
  .plnGrid{grid-template-rows:repeat(6,auto)}
  .plnCard{grid-row:span 6}
  /* El botón se queda pegado al fondo de la tarjeta aunque la lista sea corta:
     los tres quedan a la misma altura y la comparación se lee de un vistazo. */
  .plnCta{align-self:end}
}
.plnCard{position:relative}

/* ─────────────────────────────────────────────────────────────────────────
   6 · AIRE ENTRE LA CABECERA Y LAS TARJETAS DE PLANES
   ─────────────────────────────────────────────────────────────────────────
   La columna del medio sobresale 16 px arriba y abajo (es la recomendada). Sin
   hueco propio, ese realce se comía el aire de la cabecera. */
.plnCab{margin-bottom:clamp(32px,4.8vw,56px)}   /* era clamp(34px,4.6vw,50px) */
.plnGrid{column-gap:16px}                        /* era 16px, se confirma */
.plnComp{margin-top:clamp(32px,3.8vw,48px)}      /* era clamp(30px,3.8vw,46px) */
.plnPie{margin-top:24px;gap:16px}                /* era clamp(14px,1.6vw,20px) / 16px */

/* ─────────────────────────────────────────────────────────────────────────
   7 · MOVIMIENTO: TODO LO DE ESTA HOJA SE APAGA
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .plnCta,.plnCta:hover,.plnCta:active{transition:none;transform:none}
  .plnDetSig{transition:none}
  /* Y de paso el botón principal del héroe, que NO es de esta hoja y que la
     portada deja con 0,3 s de transición aunque el sistema pida no moverse.
     Medido: getComputedStyle('.s44').transitionDuration = '0.3s, 0.3s, 0.2s'
     con prefers-reduced-motion: reduce activo. */
  .s44,.s44:hover,.plnBtn,.plnBtn:hover,.cieBtn,.cieBtn:hover,
  .plnCard,.plnCard:hover{transition:none !important;transform:none !important}
}

/* ─────────────────────────────────────────────────────────────────────────
   EXCEPCIONES AL PASO DE 8, DECLARADAS UNA A UNA
   ─────────────────────────────────────────────────────────────────────────
   Barrido: se quitan comentarios y puntos de corte de media query, y se listan
   los valores px que quedan. Salen 19; catorce son múltiplos de 8 o no son
   espaciado. Éstas son las excepciones, una a una:

   · 1,5 px — grosor del borde de .plnCta. Es borde, no espaciado.
   · 2 px   — translateY(-2px) del hover de .plnCta. Es recorrido de movimiento,
              no espaciado, y se apaga con prefers-reduced-motion.
   · 4 px   — MEDIO PASO. En tres sitios: .plnCheck margin-top y border-radius, y
              .s42 margin-bottom en ventanas de menos de 660 px de alto.
   · 10 px  — lado del SVG dentro del recuadro de 16 px de .plnCheck. Es tamaño
              de icono. A 8 px el dibujo se pierde; a 12 px toca el borde.
   · 12 px  — PASO Y MEDIO. Gap de .plnLista y los márgenes verticales del héroe
              en móvil. A 8 px la lista se apelmaza; a 16 px la tarjeta crece
              16 px por cada hueco sin ganar nada.
   · 11, 13, 18, 32, 36, 52 px — tamaños de letra, no espaciados.
   · 44 px  — altura mínima táctil de .plnDetSum. Es el mínimo de la pauta y NO
              se sube a 48 porque engordaría la tarjeta sin motivo.
   · 999 px — radio de píldora. No es espaciado.

   NO hay ningún ajuste óptico en esta hoja: trabajo sin ver la pantalla y los
   ajustes ópticos los pide alguien con ojos.
   NO se toca ningún color de marca. El azul de la web es #1C4BD8 y esta hoja
   sólo lo reutiliza donde ya estaba.
*/

/* ══════════════════════════════════════════════════════════════════════════
   AÑADIDO EL 2026-09-05 POR `it-desarrollador` · clases nuevas de la portada
   Cada una existe porque el HTML de hoy la usa. Se quitan borrando este bloque
   y las líneas de HTML que las nombran (están listadas en
   salidas/2026-09-05-web/05-cambios-aplicados.md).
   Paso base 8 px, igual que el resto de esta hoja. Sin colores nuevos: sólo
   #1C4BD8 (azul ya publicado), #0B0B0C, #F5F5F7 y los grises que ya usa la web.
   ══════════════════════════════════════════════════════════════════════════ */

/* Enlace de la promesa del héroe a la garantía entera. La versión corta de la
   garantía no puede quedarse sola en la pantalla (04-legal, bloque F, punto 1):
   o está la larga a la vista, o hay un clic señalado que lleve a ella. */
.s48mas{margin-left:8px;color:#1C4BD8;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.s48mas:hover{text-decoration-thickness:2px}

/* Rótulo «Datos de ejemplo» dentro de cada tarjeta con cifras del bloque del
   panel. Antes había uno solo y al final del bloque: se leía después de las
   cifras. Va sobre fondo oscuro (.mirCard es #08080A). */
/* 2026-09-05 · responsive. `flex:0 0 auto` impedía que este rótulo encogiera:
   en 320 px medía 293 px dentro de un hueco de 248 y se salía 8 px de la
   pantalla (span.mirEjemplo right=328 con clientWidth=320). Es el rótulo
   obligatorio de «Datos de ejemplo»: no se puede recortar ni esconder, así que
   se le deja encoger y partir en dos líneas. `0 1 auto` + `min-width:0` es lo
   único que permite a un elemento flex bajar de su ancho de contenido. */
.mirEjemplo{display:inline-flex;align-items:center;flex:0 1 auto;
  min-width:0;max-width:100%;
  padding:4px 12px;border-radius:999px;
  background:rgba(28,75,216,.18);border:1px solid rgba(120,160,255,.55);
  color:#C8D8FF;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Salida de la sección del panel: hasta hoy se leía todo el argumento y el
   precio sin un botón de reserva a la vista durante 6,2 pantallas de escritorio
   y 10,7 de móvil (01-conversion, apartado 2.1). */
.mirAcc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin:32px 0 0}
.mirBtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;
  background:#1C4BD8;color:#FFFFFF;font-weight:600;font-size:16px;line-height:1;
  border-radius:999px;text-decoration:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1),filter .2s}
.mirBtn:hover{transform:translateY(-2px);filter:brightness(1.09)}
.mirBtnSec{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  background:transparent;color:#F5F5F7;font-weight:600;font-size:16px;line-height:1;
  border:1.5px solid rgba(245,245,247,.45);border-radius:999px;text-decoration:none;
  transition:border-color .2s,background-color .2s}
.mirBtnSec:hover{background:rgba(245,245,247,.08);border-color:rgba(245,245,247,.8)}

/* Capacidad publicada: «una implantación a la vez» (decisión del 05-09 y
   04-legal, bloque E). Va dentro del bloque negro de la comparación, que ya
   tiene su propio color de texto. */
.plnCap{margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(245,245,247,.14);
  font-size:16px;line-height:1.6;color:#A1A1A6;text-wrap:pretty}

/* Pie del desglose de la calculadora: dice que la tarifa de la hora es la misma
   aquí y en el panel, y que es un ejemplo. */
.cstDeriv{margin:16px 0 0;font-size:13px;line-height:1.55;color:#61697A;text-wrap:pretty}

/* Correo dentro de la caja de cierre, que es de fondo oscuro. */
.cieMail{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mirBtn,.mirBtnSec,.s48mas{transition:none !important}
}

@media (max-width:899px){
  .mirAcc{flex-direction:column;align-items:stretch;gap:12px}
  .mirBtn,.mirBtnSec{width:100%}
  .mirEjemplo{font-size:10px;letter-spacing:.04em}
  .plnCap{font-size:16px}
}

/* ── EL AVISO DE COOKIES DEJA DE SENTARSE ENCIMA DEL BOTÓN (avería D7) ──────
   2026-09-05 · responsive.
   El aviso es `position:fixed` abajo, así que en una ventana baja se pone
   encima de lo que cierre la primera pantalla. Medido en 1280x600 antes del
   arreglo: franja 516..600, botón principal `a.s44` 495..544, 27 px pisados y
   `elementFromPoint` en el centro del botón devolvía `aside.ck-aviso` — el
   botón no se podía pulsar. En 375x560 pisaba 42 px del enlace «Cómo
   funciona». En 390x844 no pisaba nada: por eso la avería parecía cerrada.

   Lo que SÍ se arregla aquí, porque es una trampa de verdad: al final del todo
   el último enlace del pie —«lista de subencargados del aviso legal»— quedaba
   debajo del aviso y NO se podía pulsar por mucho que se bajara, porque el
   aviso va fijo y ya no queda página que correr. Medido antes del arreglo en
   1280x600, 375x560 y 390x844: `elementFromPoint` en el centro del enlace
   devolvía el aviso en los tres. `cookies.js` publica el alto real del aviso en
   `--ck-espacio` y la página se deja ese hueco al final, así que no hay nada
   que quede atrapado. Al aceptar o rechazar, la variable desaparece y el hueco
   con ella. Es alto, no aire lateral: el margen de los lados no se toca.

   Lo que NO se arregla aquí y vuelve a `marketing-disenador`: en 1280x600 el
   aviso se sienta encima del botón principal del héroe (27 px). Ahí el héroe
   mide 735 px de contenido en una ventana de 600, así que para subir el botón
   hay que decidir QUÉ cede en el héroe, y eso es diseño, no adaptación. */
/* 2026-09-05, segunda pasada · esta regla se ha mudado a `cookies.css`, que
   es la hoja que cargan las CINCO páginas con aviso y no sólo la portada. El
   mismo criterio escrito en dos sitios se separa el día que alguien ajusta
   uno de los dos. Aquí no queda nada. */


/* ═══ marketing-responsive (anchos) · 2026-09-05 ══════════════════════════
   Todo lo de aqui sale de una medicion con el navegador, no de leer el CSS.

   1) El logotipo de la cabecera es un enlace a la portada y medía 22 px de
      alto en 320, 23 en 390 y 26 en 1440 (a.s6). Es un objetivo de dedo
      suelto: 44 px. `align-items:baseline` se queda como estaba, que es lo
      que alinea la K.

   2) El rotulo obligatorio «Datos de ejemplo · no son de ningun cliente» del
      panel espejo bajaba a 10 px en cuanto la ventana era de movil
      (span.mirEjemplo, font-size 10px en <=899). 10 px en versalitas sobre
      fondo negro es el tamaño mas pequeño de toda la web, y es justo el
      rotulo que 04-legal exige que se VEA. Sube a 12 px, que es el que ya
      cabe: el rotulo puede partir en dos lineas desde el arreglo del
      desbordamiento de esta misma mañana (`flex:0 1 auto; min-width:0`).
      Comprobado en 320, 375 y 390: 0 desbordes y el rotulo entero a la vista. */
.s6{min-height:44px}

@media (max-width:899px){
  .mirEjemplo{font-size:12px;letter-spacing:.04em}
}