/* ═══════════════════════════════════════════════════════════════════════════
   AIMA · assets/movil/ficha-producto.css — LAS FICHAS DE PRODUCTO en la
   versión de móvil nueva · lo que comparten las cinco
   ───────────────────────────────────────────────────────────────────────────
   26/10/2026 · Bratney: «adaptamos todo Productos, y cada producto a móvil. Que
   no se pierda la estética; si tienes que quitar, quitas; y preparamos vídeos
   o animaciones». Las cinco fichas (Packs de marketing, Diseño gráfico
   identidad, Diseño web y SEO, Tecnologías e IA y Extensiones de AMI) abren
   igual: la APERTURA de assets/aima-producto.css, la sala a oscuras con el
   tráiler del producto. Esto es lo que las cinco hacen igual en un teléfono:

     1 · la cabecera, negra mientras está encima de la apertura (body.ap-sobre,
         lo pone aima-producto.js), y la página empieza debajo de ella
     2 · la apertura: la pantalla del tráiler arriba, el titular en Anton que
         llena el ancho renglón a renglón, la frase, los botones a lo ancho
     3 · la barra de capítulos: no se ve mientras se está en la apertura
     4 · la barra de compra (.apd), un poco más baja, a la izquierda de AMI
     5 · el cierre: el titular, la frase y los botones uno encima del otro

   Va entre el chasis (assets/aima-movil-2.css) y la hoja de cada ficha
   (assets/movil/<ficha>.css). Su guion: assets/movil/ficha-producto.js.
   Todo bajo html.m2: sin esa clase, esta hoja no toca nada.

   🔴 SI EL GUION NO LLEGA, LA PÁGINA SE LEE. Lo que entra animado solo se
   esconde con las clases que pone el guion (m2-ap-l, m2-ap-tras): sin ellas,
   la apertura está entera y quieta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA CABECERA Y EL PRINCIPIO DE LA PÁGINA ─────────────────────────── */
/* La apertura ya deja sitio a la cabecera en su propio relleno (está hecha
   para ir debajo de ella, como en el ordenador): <main> va sin el hueco del
   chasis, ni el de la cabecera ni el de la barra de capítulos. */
html.m2 main,html.m2.m2-con-riel main,html.m2.m2-con-riel.m2-sin-riel main{padding-top:0}
/* Encima de la sala, la cabecera es de la sala: negra y sólida (el chasis la
   pone blanca con !important; el desenfoque de aima-producto.css no va en un
   teléfono). Las letras y los iconos ya los pone en hueso aima-producto.css. */
html.m2 .brandbar{transition:background-color .35s var(--m2-ease),border-color .35s}
html.m2 body.ap-sobre .brandbar{background:#0B0B0D!important;border-bottom-color:transparent!important;box-shadow:none!important}
html.m2 body.ap-sobre .brandbar .aima-yo{color:#F2F2F0}

/* «Volver a productos»: arriba a la izquierda, sobre la sala, con sitio para el pulgar */
html.m2 main > .volver-prod{top:calc(var(--head-h) + 6px)!important;left:calc(var(--m2-lado) - 10px)!important;
  min-height:44px;padding:0 10px;font-size:10.5px!important;letter-spacing:.2em!important;opacity:.78}

/* ── 2 · LA APERTURA ─────────────────────────────────────────────────────── */
html.m2 .ap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--head-h) + 52px) var(--m2-lado) 30px}
html.m2 .ap-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
/* la pantalla, primero y un poco más ancha que el texto */
html.m2 .ap-pantalla{order:-1;margin:0 -6px}
html.m2 .ap-marco{border-radius:12px}
/* los golpes los pinta el tráiler cuando llega (a veces segundos después):
   su sitio va guardado desde el principio, para que no empujen la página */
html.m2 .ap-golpes{margin:14px 6px 0;gap:8px;min-height:40px}
html.m2 .ap-golpes button{min-height:40px;padding-top:11px;font-size:10.5px}
html.m2 .ap-texto{margin-top:26px;max-width:none}
html.m2 .ap-kicker{margin:0 0 14px;font-size:10px;letter-spacing:.26em}

/* El titular: cada renglón del de ordenador (.l) es un renglón aquí, y todos
   del mismo cuerpo: el que deja al más largo llenar el ancho (lo mide
   ficha-producto.js en --m2-ap-t; sin él, el de abajo). Anton, en mayúsculas,
   con su palabra en rojo: un cartel. */
html.m2 .ap .ap-h1{font-size:var(--m2-ap-t,clamp(38px,calc((100cqi - 40px) / var(--m2-ap-r,5)),88px));line-height:.94;letter-spacing:.006em;margin:0}
/* el cuerpo de partida: el ancho de su renglón más largo, en veces su cuerpo
   («MARKETING.» mide 4,49). Así, al medirlo ficha-producto.js, no salta nada;
   si el titular cambia, se mide igual y solo se nota un salto pequeño. */
html.m2[data-movil="packs"] .ap .ap-h1{--m2-ap-r:4.49}
html.m2[data-movil="pack-identidad"] .ap .ap-h1{--m2-ap-r:5.93}
html.m2[data-movil="landing-pages"] .ap .ap-h1{--m2-ap-r:4.47}
html.m2[data-movil="automatizaciones"] .ap .ap-h1{--m2-ap-r:4.87}
html.m2[data-movil="extensiones"] .ap .ap-h1{--m2-ap-r:4.81}
html.m2 .ap .ap-h1 .l{display:block;white-space:nowrap}
html.m2 .ap .ap-h1 .l + .l::before{content:none}
/* la ranura de cada renglón recorta solo por abajo: las tildes de las
   mayúsculas (DISEÑO, GRÁFICO, TECNOLOGÍAS) sobresalen por arriba */
html.m2 .ap .ap-h1 .l:has(> .m2-ap-l){clip-path:inset(-.6em -.4em 0 -.4em);animation:none!important}
html.m2 .ap .ap-h1 .m2-ap-l{display:block;transform:translate3d(0,104%,0)}
html.m2.m2-va .ap .ap-h1 .m2-ap-l{transform:none;transition:transform 1.05s var(--m2-ease) var(--m2-d,.1s)}

html.m2 .ap-lema{margin-top:16px;font-size:clamp(23px,6.4cqi,27px);line-height:1.16}
html.m2 .ap-sub{margin-top:12px;font-size:14.5px;line-height:1.66;max-width:44ch}
html.m2 .ap-compra{margin-top:22px;padding-top:18px}
/* los botones: el principal a lo ancho; el otro debajo, más discreto */
html.m2 .ap-botones{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
html.m2 .ap-cta{justify-content:center;height:auto;min-height:54px;padding:12px 22px;font-size:15px;line-height:1.25;text-align:center}
html.m2 .ap-sec{justify-content:center;height:auto;min-height:50px;padding:10px 20px;font-size:14px;line-height:1.25;text-align:center;border-color:rgba(242,242,240,.2)}
/* la flecha de bajar, en su sitio (abajo del todo) y no encima de los botones */
html.m2 .ap-baja{position:relative;left:auto;bottom:auto;transform:none;align-self:center;margin:26px 0 0;
  min-height:44px;justify-content:center;font-size:9.5px}

/* La entrada: lo de la apertura espera al telón y al aviso de cookies
   (html.m2-va) y entra por orden. Las animaciones de aima-producto.css se
   apagan solo en lo que el guion ha cogido (.m2-ap-tras). */
html.m2 .ap .m2-ap-tras{animation:none!important;opacity:0;transform:translate3d(0,22px,0)}
html.m2 .ap .ap-pantalla.m2-ap-tras{transform:translate3d(0,26px,0) scale(.965)}
html.m2.m2-va .ap .m2-ap-tras{opacity:1;transform:none;
  transition:opacity .9s var(--m2-ease) var(--m2-d,0s),transform 1s var(--m2-ease) var(--m2-d,0s)}
/* lo que el tabulador alcanza se ve ya */
html.m2 .ap .m2-ap-tras:focus-within{opacity:1!important;transform:none!important}
/* Dos cosas de la sala que contaban como saltos de la página (CLS): el brillo
   que cruza el botón corría moviendo «left», y el grano se colgaba de la mitad
   del alto de la sala (inset:-50%), así que se movía cada vez que la sala
   cambiaba de alto (la letra que llega, el titular que se mide). Aquí el
   brillo corre con transform y el grano se cuelga de la pantalla. */
html.m2 .ap-cta::before{left:-40%;animation-name:m2-fp-brillo}
@keyframes m2-fp-brillo{0%,62%{transform:translate3d(0,0,0) skewX(-18deg)}82%,100%{transform:translate3d(444%,0,0) skewX(-18deg)}}
html.m2 .ap-luz::after{inset:auto;left:-50%;right:-50%;top:-50vh;height:calc(100% + 100vh)}
/* Sobre negro, el anillo del foco va en claro (el del chasis es tinta, y
   encima de la sala, de la cabecera negra o de una banda negra no se veía):
   en la sala, en la cabecera mientras está encima de ella, en la barra de
   compra y en lo que ficha-producto.js marca como puesto sobre negro */
html.m2 .ap :focus-visible,html.m2 body.ap-sobre .site-head :focus-visible,
html.m2 .apd :focus-visible,html.m2 .m2-fp-negro:focus-visible{outline-color:#F2F2F0}
/* el brillo que cruza el botón y las gemas corren solo mientras se ve la sala */
html.m2 .ap:not(.m2-vivo) .ap-cta::before,html.m2 .ap:not(.m2-vivo) .ap-gemas i,
html.m2 .ap:not(.m2-vivo) .ap-luz::after,html.m2 .ap:not(.m2-vivo) .ap-baja svg{animation-play-state:paused}

/* ── 3 · LA BARRA DE CAPÍTULOS: fuera mientras se está en la sala ─────────── */
/* Fuera de la vista, pero no escondida: el tabulador pasa por ella al salir
   de la cabecera (va antes de <main>), y si la alcanza, baja a su sitio */
html.m2.m2-en-ap .m2-riel{transform:translate3d(0,calc(-1 * (var(--head-h) + var(--m2-riel) + 4px)),0)}
html.m2.m2-en-ap .m2-riel:focus-within{transform:none}
/* lo que tapa arriba al llegar con el tabulador o con un ancla: la cabecera y la barra */
html.m2 .m2-fp-cap{scroll-margin-top:calc(var(--head-h) + var(--m2-riel) + 12px)}
/* y la burbuja de AMI tampoco sale encima de la sala: taparía el botón */
html.m2.m2-en-ap #ami-widget:not(.ami-open) .ami-launch{transform:translate3d(0,140%,0);opacity:0;pointer-events:none;
  visibility:hidden;transition:transform .6s var(--m2-rebote),opacity .35s,visibility 0s linear .6s}

/* ── 4 · LA BARRA DE COMPRA ───────────────────────────────────────────────
   La de aima-producto.css, de ordenador: aquí, pegada abajo a la izquierda y
   sin tapar la esquina de AMI (abajo a la derecha, 12 px + 56 px). */
html.m2 .apd{padding:0 calc(12px + 56px + 10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
html.m2 .apd-in{max-width:none;margin:0;height:56px;gap:10px;padding:0 6px 0 16px;
  background:#0B0B0D;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6),0 0 0 1px rgba(242,242,240,.08)}
html.m2 .apd-pre{order:-1;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
html.m2 .apd-pre b{font:400 21px/1 var(--m2-f-anton);letter-spacing:.01em}
html.m2 .apd-pre span{font-size:9.5px;letter-spacing:.02em;margin-top:3px;white-space:nowrap}
html.m2 .apd-pre small{display:none}
html.m2 .apd-cta{height:44px;padding:0 16px;font:600 13px var(--m2-f-mont);gap:7px;flex:none}
html.m2 .apd-nom,html.m2 .apd-lema{display:none}
/* la barra no se queda encima del pie ni del cierre (lo decide aima-producto.js),
   y lo que el tabulador alcanza abajo no se queda debajo de ella */
html.m2{scroll-padding-bottom:84px}
/* (con la barra de compra a la vista, ficha-producto.js le suma su alto) */

/* el final del pie no se queda debajo de AMI: se puede subir por encima */
html.m2 #pie{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* ── 5 · EL CIERRE ──────────────────────────────────────────────────────── */
html.m2 #cierre{padding:64px 0 72px;text-align:center}
html.m2 #cierre > div{padding-inline:var(--m2-lado)!important;max-width:none}
html.m2 #cierre h2{font:500 clamp(36px,11cqi,46px)/1.02 var(--m2-f-corm)!important;letter-spacing:-.012em;text-wrap:balance}
html.m2 #cierre h2 em{font-style:italic;color:var(--m2-rojo)}
html.m2 #cierre > div > p{font-size:15px;line-height:1.62;max-width:36ch;margin-inline:auto}
html.m2 #cierre .ops{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
html.m2 #cierre .ops > a{justify-content:center;min-height:52px;width:auto!important;margin:0!important}
/* la mascota del cierre salta cuando llega */
html.m2 #cierre .m2-fp-salta{transform-origin:50% 100%}
html.m2 #cierre .m2-fp-salta.m2-visto{animation:m2-fp-salta .7s var(--m2-rebote) .15s both}
@keyframes m2-fp-salta{0%{transform:translate3d(0,14px,0) scale(.8)}60%{transform:translate3d(0,-6px,0) scale(1.06)}100%{transform:none}}

/* ── 5b · SIN DESENFOQUE (es lo que más pesa en un teléfono) ─────────────── */
/* el aviso de cookies de la primera visita, y la niebla de lo que está en obras */
html.m2 #cookies{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(242,242,240,.97)!important}
html.m2 .nb-capa{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.95)!important}

/* ── 6 · LO QUE USAN LAS FICHAS ─────────────────────────────────────────── */
/* Un titular que sube renglón a renglón (AIMAFicha.renglones). La ranura
   recorta solo por abajo: las tildes de las mayúsculas sobresalen. */
html.m2 .m2-fp-ln{display:block;clip-path:inset(-.6em -.4em 0 -.4em);padding-bottom:.06em}
html.m2 .m2-fp-ln-in{display:block;transform:translate3d(0,105%,0)}
html.m2 .m2-fp-renglones.m2-visto .m2-fp-ln-in{transform:none;transition:transform .95s var(--m2-ease) var(--m2-d,0s)}
/* lo que se escribe solo (AIMAFicha.teclea): lo que falta, en transparente;
   el cursor, fuera de la línea, detrás de la última letra escrita */
html.m2 .m2-teclea-falta{-webkit-text-fill-color:transparent}
html.m2 .m2-teclea-cursor{position:absolute;display:inline-block;width:.42em;height:.9em;margin:.2em 0 0 3px;
  background:var(--m2-rojo);pointer-events:none;animation:m2-fp-caret 1s steps(1) infinite}
@keyframes m2-fp-caret{50%{opacity:0}}
/* el marcador de la ceja: el cuadrado imperfecto */
html.m2 .m2-fp-ceja{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font:600 10.5px/1.3 var(--m2-f-mont);letter-spacing:.26em;text-transform:uppercase;color:var(--m2-t2)}
html.m2 .m2-fp-ceja::before{content:"";flex:none;width:9px;height:8px;background:var(--m2-rojo);clip-path:var(--m2-facet)}

/* ── 7 · QUIETO ─────────────────────────────────────────────────────────── */
html.m2.m2-quieto .ap .ap-h1 .m2-ap-l,html.m2.m2-quieto .ap .m2-ap-tras,
html.m2.m2-quieto .m2-fp-ln-in{opacity:1!important;transform:none!important}
html.m2.m2-quieto .m2-teclea-cursor{display:none}
html.m2.m2-quieto #cierre .m2-fp-salta{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html.m2 .ap .ap-h1 .m2-ap-l,html.m2 .ap .m2-ap-tras,html.m2 .m2-fp-ln-in{opacity:1!important;transform:none!important;transition:none!important}
}