/* =========================================================================
   MOBILE OPTIMIZATION LAYER  ·  ginderhernandez.com
   -------------------------------------------------------------------------
   Objetivo: fluidez total en móvil SIN tocar el diseño de escritorio.
   TODO lo de este archivo vive dentro de @media (max-width:760px) o
   (pointer:coarse), por lo que el ordenador NO se ve afectado en absoluto.

   Estrategia: eliminar las capas caras para la GPU que se repintan en cada
   frame del scroll (backdrop-filter, blur grandes) manteniendo el look.
   ========================================================================= */

@media (max-width: 760px) {


  /* -----------------------------------------------------------------------
     1) BACKDROP-FILTER — el mayor coste durante el scroll.
     El nav fijo y los ~17 botones de play re-rasterizan todo lo que pasa
     por detrás en cada frame. Lo quitamos y compensamos con un fondo un
     pelín más opaco para que el "glass" siga leyéndose bien.
     ----------------------------------------------------------------------- */
  .glass,
  .nav,
  .langbtn,
  .pp,
  .vlabel,
  .cg-grip,
  .cg-tag,
  .vmodal-x,
  .modal-x,
  .link,
  .act-card,
  .about-card,
  .cta-float,
  .chip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Compensación de opacidad: al perder el desenfoque, damos algo más de
     cuerpo a los paneles clave para que no se vean "finos" ni transparentes
     de más. Solo tocamos alfa; respetamos formas, bordes y sombras. */
  .pp {
    background: rgba(14, 14, 18, 0.42) !important;
  }
  .vlabel {
    background: linear-gradient(rgba(7, 7, 9, 0) 0%, rgba(7, 7, 9, 0.72) 100%) !important;
  }

  /* -----------------------------------------------------------------------
     2) FILTROS BLUR grandes en capas decorativas.
     Los "blobs" de aura ya son radial-gradient que se desvanecen a
     transparente al 62%, así que sin el blur SIGUEN viéndose como glows
     suaves: quitamos el filtro y ahorramos GPU sin cambiar el aspecto.
     ----------------------------------------------------------------------- */
  .aura .blob,
  .i-aura,
  .c-aura,
  .cg-glow,
  .c-pointer {
    filter: none !important;
  }

  /* Los "streaks" (líneas de luz finas) sí dependen del blur para no verse
     como bordes duros: mejor ocultarlos en móvil (son muy sutiles). */
  .streak {
    display: none !important;
  }

  /* Los títulos .fp aparecen con un "enfoque" (de blur(15px) a nítido).
     Desenfocar texto grande es caro en móvil y puede dar tirones justo al
     revelarse. Quitamos SOLO el blur; la aparición (deslizar + fundido)
     se mantiene intacta y sigue viéndose premium. */
  .fp {
    filter: none !important;
  }

  /* -----------------------------------------------------------------------
     3) CAPAS DE GRANO / TEXTURA a pantalla completa.
     Mantenemos .grain (es un gradiente estático barato que da el look
     cinematográfico). Quitamos las capas redundantes que suman repintado
     sin aportar apenas: grain-film y mottle (mottle ya estaba oculto).
     ----------------------------------------------------------------------- */
  .grain-film,
  .mottle {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     4) Pistas de composición para el navegador: promocionar a su propia
     capa los elementos que sí se mueven, y NO malgastar memoria en los que
     no. Ayuda a que el scroll sea mantequilla.
     ----------------------------------------------------------------------- */
  .grain,
  .aura {
    will-change: auto !important;
  }
}


/* =========================================================================
   PARRILLA DE TRABAJO estilo INSTAGRAM / TIKTOK  (solo móvil)
   -------------------------------------------------------------------------
   En escritorio la parrilla es un mosaico grande (tall/wide). En móvil eso
   se convertía en 1 sola columna: 16 vídeos a pantalla completa = ~9.200px
   de scroll, todos en pausa. Aquí lo convertimos en una rejilla de 3
   columnas de miniaturas uniformes: se escanea todo de un vistazo y se toca
   la que más apetece. Reduce el scroll a ~1.300px.
   ========================================================================= */
@media (max-width: 760px) {

  #vgrid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  /* Todas las celdas iguales y verticales, ignorando tall/wide del mosaico */
  #vgrid .card {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 9 / 16 !important;
    grid-row: auto !important;
    grid-column: auto !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Póster a cubrir toda la celda + color de reserva para las miniaturas que
     aún cargan desde Vimeo (así ninguna celda se ve vacía). NO ponemos
     background-image aquí para no pisar el póster real (que va en el style). */
  #vgrid .card .poster {
    background-color: #131318 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: inherit !important;
  }

  /* Botón de play proporcional a la miniatura pequeña */
  #vgrid .card .pp {
    width: 42px !important;
    height: 42px !important;
    background: rgba(10, 10, 14, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
  }
  #vgrid .card .pp svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Miniaturas limpias tipo IG/TikTok: fuera texto, brillo de hover y barra
     (el nombre del proyecto sigue en el aria-label y en el modal al tocar). */
  #vgrid .card .vlabel,
  #vgrid .card .sheen,
  #vgrid .card .prog {
    display: none !important;
  }

  /* Un toque premium: leve realce al pulsar (feedback táctil) */
  #vgrid .card:active {
    transform: scale(0.97) !important;
    transition: transform 0.12s ease !important;
  }

  /* El encabezado de la sección respira un poco menos para que la rejilla
     entre antes en pantalla */
  .work .work-head {
    margin-bottom: 18px !important;
  }

  /* Aparición escalonada (cascada) de las miniaturas al revelarse */
  #vgrid .card:nth-child(3n + 2) { transition-delay: 0.06s !important; }
  #vgrid .card:nth-child(3n + 3) { transition-delay: 0.12s !important; }

  /* Tarjetas ocultas por el filtro de categoría */
  #vgrid .card.mo-hide { display: none !important; }
}


/* =========================================================================
   PAQUETE 1+2+3 · Experiencia móvil enriquecida  (solo móvil)
   ========================================================================= */
@media (max-width: 760px) {

  /* -----------------------------------------------------------------------
     TOQUE TÁCTIL PREMIUM — feedback visual al pulsar (se hunde levemente).
     ----------------------------------------------------------------------- */
  /* [A3 · 19-jul-2026] `transform:scale()` borraba el posicionamiento propio de
     los elementos que el tema ya coloca con transform (.cta-float con
     translateX(-50%), .reel-thumb con translateY(-.06em)) → saltaban al
     pulsarlos. `scale` es propiedad independiente: se compone después del
     transform, mismo feedback y ninguna posición pisada. */
  .chip:active,
  .link:active,
  .langbtn:active,
  .nav a:active,
  .reel-thumb:active,
  .about-photo:active,
  .cta-float:active,
  .mo-fchip:active {
    scale: 0.96 !important;
    transition: scale 0.1s ease !important;
  }

  /* -----------------------------------------------------------------------
     NAVEGACIÓN ESTILO APP · barra de progreso de scroll (arriba del todo).
     Colores de tu marca (el degradado del "último color").
     ----------------------------------------------------------------------- */
  .mo-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 100;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #f6a545, #ec6a9c 45%, #9a86f2 78%, #58a6ff);
    pointer-events: none;
    will-change: transform;
  }

  /* NAVEGACIÓN ESTILO APP · botón de WhatsApp por encima del área segura
     del móvil (home indicator del iPhone). */
  .cta-float {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* -----------------------------------------------------------------------
     REJILLA CON FILTROS · la barra de chips de categoría.
     ----------------------------------------------------------------------- */
  .mo-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 14px;
    margin: 0 0 2px;
  }
  .mo-filters::-webkit-scrollbar { display: none; }

  .mo-fchip {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(246, 246, 248, 0.82);
    font: 600 13px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.01em;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  }
  .mo-fchip.on {
    background: #f6f6f8;
    color: #0a0a0c;
    border-color: #f6f6f8;
  }

  /* Entrada en cascada de los chips (keyframes definidos en desktop-opt.css,
     que carga en todas las páginas). Keyframes y no transition para no
     retrasar el feedback táctil de los chips. */
  .mo-filters .mo-fchip {
    animation: dtChipIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) backwards;
  }
  .mo-filters .mo-fchip:nth-child(2) { animation-delay: 0.04s; }
  .mo-filters .mo-fchip:nth-child(3) { animation-delay: 0.08s; }
  .mo-filters .mo-fchip:nth-child(4) { animation-delay: 0.12s; }
  .mo-filters .mo-fchip:nth-child(5) { animation-delay: 0.16s; }

  /* -----------------------------------------------------------------------
     NAVEGACIÓN ESTILO APP · botón "volver arriba".
     Abajo a la izquierda para no chocar con el de WhatsApp (abajo dcha).
     ----------------------------------------------------------------------- */
  .mo-top {
    position: fixed;
    left: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(18, 18, 22, 0.6);
    color: #f6f6f8;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
    z-index: 45;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mo-top svg { width: 20px; height: 20px; }
  .mo-top.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mo-top:active { transform: scale(0.92) !important; }
  /* la salida es más rápida que la entrada (el sistema responde ya) */
  .mo-top:not(.show) { transition-duration: 0.18s, 0.18s; }

  /* -----------------------------------------------------------------------
     ASA DE ARRASTRE de los modales de vídeo (affordance de sheet nativa).
     Zona táctil generosa (44px), píldora visual pequeña. touch-action:none
     para que el gesto sea nuestro y no del scroll.
     ----------------------------------------------------------------------- */
  .mo-grab {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: -30px;
    width: 60px;
    height: 30px;
    z-index: 8;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    touch-action: none;
    cursor: grab;
  }
  .mo-grab::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  .mo-grab:active { cursor: grabbing; }
  .mo-grab:focus-visible {
    outline: 2px solid #ff9b5e;
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* CONSTELACIÓN en móvil: cascada de una columna, alternando izquierda/
     derecha por columna de origen; respiros anchos casi a sangre. El
     difuminado del borde lo hace la máscara de .gh-mist-media (heredada
     de desktop-opt.css, funciona en todos los tamaños). Blanco total. */
  .gh-mist { padding: 2vh 0 9vh; }
  .gh-mist-head { margin-bottom: 6vh; }
  .gh-mist-flow { gap: 6vh; padding: 0 18px; }
  .gh-mist-row { flex-direction: column; align-items: stretch; gap: 6vh; }
  .gh-mist-row > * { margin-top: 0 !important; }
  .gh-mist-item { height: auto !important; }
  .gh-ms-s { width: 56vw; }
  .gh-ms-m { width: 62vw; }
  .gh-ms-l { width: 72vw; }
  .gh-mc-1, .gh-mc-3 { align-self: flex-start; }
  .gh-mc-2 { align-self: flex-end; }
  /* !important: desktop-opt.css carga DESPUÉS de este archivo (gotcha
     conocido del proyecto) y sus reglas de ancho y botón ganarían. */
  .gh-mw-a, .gh-mw-b { width: 92vw !important; align-self: center !important; margin: 0 !important; }
  /* Botón sólido (política GPU: sin backdrop-filter) y COMPACTO: los
     nombres largos desbordaban las piezas estrechas en 375px. */
  .gh-mist-btn {
    background: rgba(70, 70, 74, 0.55) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    height: 40px !important;
    margin: -20px 0 0 0 !important;
    padding: 0 16px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  .gh-mist-btn i { font-size: 10px !important; }

  .gh-st-eyebrow { margin-bottom: 22px; }
  .act-card::before { font-size: 96px; top: -0.1em; }
}

/* #16 — SHOWREEL EN MÓVIL: el disparador medía ~14×19px (bajo los 44px de
   WCAG/Apple) y la etiqueta "Showreel" está oculta en móvil. Ampliamos el
   área táctil a ≥44px (::before invisible) y añadimos un glifo play que
   señala que es pulsable para ver el showreel completo. */
@media (max-width: 760px) {
  .reel-thumb { position: relative; }
  .reel-thumb::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: max(230%, 44px);
    height: max(150%, 44px);
    transform: translate(-50%, -50%);
    border-radius: 40%;
    z-index: 4;
  }
  .reel-thumb::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-38%, -50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 5;
  }
}

/* #20 — DOCK DE NAVEGACIÓN INFERIOR (móvil). Sólido (sin backdrop-filter =
   política GPU), centrado sobre la safe-area; se oculta al bajar. El back-to-top
   sube por encima para no solaparse; el WhatsApp queda a la derecha. */
@media (max-width: 760px) {
  .mo-dock {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 1px;
    max-width: calc(100vw - 118px);
    padding: 5px;
    border-radius: 999px;
    background: #0e0f14;
    border: 1px solid #ffffff1c;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  .mo-dock a {
    font-size: 12px;
    letter-spacing: 0.01em;
    color: #d3d6d9;
    text-decoration: none;
    padding: 0 11px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .mo-dock a:active { background: #ffffff18; color: #fff; }
  .mo-dock .mo-dock-lang { font-weight: 600; color: #fff; background: #ffffff16; padding: 0 13px; }
  .mo-dock-hidden { transform: translateX(-50%) translateY(180%); opacity: 0; pointer-events: none; }
  /* back-to-top por encima del dock para no solaparse */
  .mo-top { bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important; }

  /* #21 — chips de filtro ≥44px de alto (objetivo táctil WCAG/Apple) */
  .mo-fchip { min-height: 44px; }
}

/* Proceso (.journey) en MÓVIL — mundo LUZ: sin frost (GPU), la tarjeta azul
   translúcida necesita algo más de cuerpo para que el texto claro lea sobre el
   azul. Texto claro + halation heredados de tokens.css. */
@media (max-width: 760px) {
  .journey .act-card {
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
      0 24px 54px -30px rgba(30, 54, 82, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.40);
  }
}

/* =========================================================================
   [C1 · 19-jul-2026] EL FOTOGRAMA DEL PARÉNTESIS (móvil ≤760px)
   -------------------------------------------------------------------------
   El tema lo dejaba en .28em × .497778em → 14×25px con el h1 a 50px: un píxel
   sucio. Se sube un 43% lineal (×2 en área): 20,3 × 36,1px a 375px de ancho.

   9:16 NO ES ELEGIBLE, LO IMPONE EL JS DEL TEMA: en la rama
   matchMedia("(max-width:760px)") el bundle fija el flotante a width:d /
   height:d*16/9 con transformOrigin '0 0' y solo aplica scale(anchoBoton / d)
   — ESCALA SOLO POR ANCHO. En reposo se ve siempre ancho × ancho·16/9, dé el
   height que le dé el CSS. Por eso el propio tema pone .497778em (= .28·16/9).
   LA ALTURA DEBE SEGUIR SIENDO width×16/9 EXACTO: si el height del CSS es
   menor, el vídeo se derrama sobre la línea 3 del h1.

   ALTURA: mismo techo de .828em (el line-height .96 del h1 no cambia en la
   media query de 640px). .711111em deja .117em de margen, holgura suficiente
   incluso si un motor cae a métricas win de OS/2.
   ========================================================================= */
@media (max-width: 760px) {
  .reel-thumb {
    width: .40em; height: .711111em;   /* 9:16 exacto */
    /* El tema pone overflow:hidden en .reel-thumb, y eso RECORTABA el ::before
       de área táctil (líneas ~428-437) y su hit-testing: el área pulsable real
       era la caja del botón, no los 44px. Con visible, el ::before de
       max(230%,44px) × max(150%,44px) vuelve a contar. Seguro: en móvil el
       vídeo se va al <body>, y en la rama de reduced-motion queda con inset:0
       dentro del botón, así que no hay nada que desbordar. */
    overflow: visible;
  }
}

/* Esta hoja se enlaza con media="(max-width:760px),(pointer:coarse)", así que
   .reel-thumb:active{scale:.96!important} se aplicaba también en pantallas
   táctiles ANCHAS, donde el tema corre la rama de escritorio y relee el rect
   cada frame → al tocar, el flotante encogía un 4%. Con el fotograma al doble
   de tamaño ese salto pasa a ser visible. Se anula ahí. */
@media (min-width: 761px) {
  .reel-thumb:active { scale: 1 !important; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026] SISTEMA DE PROPORCIÓN Y RITMO EN MÓVIL
   --------------------------------------------------------------------------
   Diagnóstico (medido en emulación iPhone real, 390×844 dpr3): en la misma
   página convivían CUATRO márgenes laterales distintos —el h1 del hero a
   281px (margin auto de 28,5px sobre el wrap), el párrafo de la intro a
   265px (max-width fijo), los títulos a 338px (wrap) y las tarjetas del
   proceso a 390px, a sangre—. Esa disparidad es lo que se percibe como
   «las proporciones no se ven bien». Aquí se unifica TODO a un solo margen
   (--mg) y se sustituye el ritmo vertical en vh (que en móvil dispara
   huecos de 700px, p. ej. .color-sec con min-height:90vh) por una escala
   fija en px. Escritorio intacto: todo vive en max-width:760px.
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --mg: 24px;        /* margen lateral ÚNICO de toda la web en móvil */
    --ritmo-s: 40px;   /* separación interna de bloque */
    --ritmo-m: 64px;   /* aire de sección: IGUAL arriba y abajo en todas */
    --ritmo-l: 96px;   /* cierre de página (contacto) */
  }

  /* --- 1) UN SOLO ANCHO DE CONTENIDO ------------------------------------ */
  .wrap { padding-left: var(--mg); padding-right: var(--mg); }
  /* El h1 traía margin auto que lo encogía 55px por lado dentro del wrap. */
  .hero h1.fp { margin-left: 0; margin-right: 0; max-width: none; }
  /* El párrafo de «Cómo trabajamos» tenía un max-width fijo de 264px: en
     móvil la medida de línea nunca se pasa, así que sobra el tope. */
  .intro .fp, .intro .lead { max-width: none; }
  /* Las tarjetas del proceso iban a sangre (sin gutter). */
  .act { padding-left: var(--mg); padding-right: var(--mg); }
  .act-card { max-width: none; padding: 24px 22px 26px; }

  /* --- 2) RITMO VERTICAL EN PX (los vh creaban vacíos enormes) ---------- */
  /* svh en vez de vh: la altura NO salta cuando el navegador oculta o
     muestra sus barras — es la diferencia entre «web» y «app». */
  .hero { min-height: 100svh; padding-top: 68px; }
  /* UN SOLO RITMO para todas las secciones: mismo aire arriba y abajo en
     todas, para que el paso de una a otra sea siempre igual de largo. Es
     lo que hace que se lea como una app y no como páginas pegadas. */
  .intro { padding: var(--ritmo-m) 0 var(--ritmo-m); }
  .act { padding-top: 26px; padding-bottom: 26px; }
  /* NO tocar el padding inferior de .journey: su fondo es un <canvas>
     (.gh-journey-bg) azul que asoma como una franja dura en cuanto la
     sección crece por debajo de su último hijo. */
  /* El vacío más grande de la web en móvil: 90vh de alto mínimo (≈760px)
     para un bloque de texto de 200px. Se libera y respira con padding. */
  .color-sec { min-height: 0; margin: 0; padding: var(--ritmo-m) 0; }
  .cgrade { padding: var(--ritmo-m) 0; }
  /* OJO: .about lleva TAMBIÉN la clase .wrap, así que aquí sólo se toca el
     eje vertical — con el atajo `padding: X 0` se perdía el margen lateral
     y la tarjeta se iba a sangre. */
  .about { padding-block: var(--ritmo-m); }
  .about-card { padding: 26px 22px 28px; }
  .contact { padding: var(--ritmo-m) 0 var(--ritmo-l) !important; }
  .gh-mist { padding: var(--ritmo-m) 0; }

  /* --- 3) TIPOGRAFÍA SIN VIUDAS ----------------------------------------- */
  /* text-wrap:balance reparte las líneas en vez de dejar una palabra sola
     («…COLORISTA —» / «GRANADA / MADRID»). Donde no hay soporte, no pasa
     nada: el texto se comporta como hasta ahora. */
  .eyebrow, .gh-st-eyebrow, .lead { text-wrap: balance; }
  h1.fp, .intro .fp, .contact h2, .act-card h3, .cg-cap { text-wrap: balance; }
  .hero .eyebrow { line-height: 1.75; }

  /* --- 4) EL VÍDEO DEL PARÉNTESIS (gesto de marca) ---------------------- */
  /* Medía 21×37px reales: en el móvil el gesto no se leía. Se agranda ~25%
     RESPETANDO su proporción vertical original (0,4em × 0,7em efectivos);
     va en em, así escala con el propio h1 y no descuadra la línea. */
  .reel-thumb { width: 0.5em; height: 0.87em; transform: translateY(-0.06em); }

  /* --- 5) CABECERA DEL PORTAFOLIO COMO EN UNA APP ----------------------- */
  /* «( TRABAJO )» centrado y el botón VISTA en absoluto se apretaban. Ahora
     es una barra de sección: etiqueta a la izquierda, control a la derecha. */
  /* [29-jul-2026] La cejilla vuelve al CENTRO (Ginder): la barra a dos lados
     descentraba «( TRABAJO )» respecto al resto de cejillas de la web, que
     van centradas. El control de vista vuelve a su sitio, en absoluto a la
     derecha — no colisiona: la cejilla ocupa el centro (≈140-250px) y el
     control arranca en ≈281px. */
  .gh-mist-head {
    position: relative;
    padding: 0 var(--mg);
    text-align: center;
    margin-bottom: var(--ritmo-s);
  }
  .gh-mist-head .gh-st-eyebrow { margin-bottom: 0; }
  .gh-mist-flow { padding: 0 var(--mg); }

  /* --- 6) OBJETIVOS TÁCTILES (WCAG/Apple: 44px) ------------------------- */
  .mo-top { width: 46px !important; height: 46px !important; }
  .mo-dock a { height: 44px; }
  .mo-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }

  /* --- 7) COMPORTAMIENTO DE APP ---------------------------------------- */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* El scroll de la página no arrastra al navegador (nada de rebote que
     descubre el fondo del sistema) ni «sangra» desde los carruseles. */
  body { overscroll-behavior-y: none; }
  .mo-filters, .gh-mist-flow { overscroll-behavior-x: contain; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026] MOTOR DE ANIMACIÓN EN MÓVIL
   --------------------------------------------------------------------------
   Regla de la casa en móvil: se anima SOLO transform y opacity. Cualquier
   `filter` animado obliga al navegador a re-desenfocar en cada fotograma —
   en un teléfono eso es tirón asegurado y batería. Las curvas se acortan y
   se hacen más «resueltas» (entrada rápida, frenada suave) porque en una
   pantalla pequeña el recorrido es corto: una animación lenta se percibe
   como lag, no como elegancia. Escritorio intacto.
   ========================================================================== */
@media (max-width: 760px) {
  /* --- Cascada de palabras: era el mayor coste de la página -------------- */
  /* Cada palabra llevaba su propio blur(7px) + will-change:filter → en el
     párrafo de la intro son ~20 capas desenfocándose a la vez. Se sustituye
     por desplazamiento + fundido (gratis en GPU) y se acorta el escalonado
     para que el bloque termine de entrar mientras aún está en pantalla. */
  /* !important obligatorio: core-opt.css define la misma regla con idéntica
     especificidad y carga DESPUÉS de este archivo (gotcha del proyecto). */
  .gh-split .gh-w {
    filter: none !important;
    transform: translateY(0.34em);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition-delay: calc(var(--i, 0) * 0.022s) !important;
    will-change: opacity, transform !important;
  }
  .gh-split.on .gh-w { transform: none; }

  /* --- Entradas de sección: más cortas y sin desenfoque ------------------ */
  .fp, .r {
    transition-duration: 0.5s !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* !important: core-opt.css le da 1.2s y carga después de este archivo. */
  .gh-mist-item { transition-duration: 0.42s !important; }

  /* --- Respuesta al dedo: todo lo pulsable «hunde» al tocarse ------------ */
  /* Sin esto la web se siente «muerta» al tocar: es el detalle que más
     separa la sensación de app de la de página. 60ms de bajada y vuelta
     con muelle corto — igual que el feedback nativo de iOS. */
  .gh-view-toggle,
  .gh-mist-item,
  .mo-dock a,
  .link,
  .chip {
    /* La presión entra instantánea (60ms) y VUELVE ágil (180ms): lento al
       decidir, rápido al responder. A 340ms la vuelta se siente pegajosa. */
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .gh-view-toggle:active { transform: scale(0.95); transition-duration: 0.06s; }
  .gh-mist.gh-sheet .gh-mist-item:active { transform: scale(0.965); transition-duration: 0.06s; }

  /* --- Nada de animaciones «de escritorio» corriendo en el teléfono ------ */
  /* El punto del cursor y su persecución no existen en táctil. */
  .gh-dot { display: none !important; }
}

/* Respeto absoluto a «reducir movimiento»: sin recorridos, sin escalonado. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .gh-split .gh-w {
    transform: none !important;
    transition-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .gh-view-toggle:active,
  .gh-mist.gh-sheet .gh-mist-item:active { transform: none; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026 · ronda 2] LENGUAJE DE HOJAS (iOS sheet stack)
   --------------------------------------------------------------------------
   Encargo de Ginder: «que cada sección suba sobre la anterior con esquinas
   redondeadas al hacer scroll». Cada sección de primer nivel se convierte en
   una HOJA que monta 26px sobre la anterior, con las esquinas superiores
   redondeadas y una sombra corta arriba que da el relieve. Eso resuelve dos
   cosas a la vez: elimina las costuras rectas entre fondos (ya no hay línea
   que casar) y da la sensación física de app. El apilado necesita z-index
   creciente en orden de documento — si no, la hoja de abajo queda POR DEBAJO
   y el radio no se ve. Escritorio intacto.
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --hoja-r: 26px;
    /* Curva canónica de hoja/drawer (Ionic, Vaul). Se usa SIEMPRE que algo
       se comporte como una hoja, para que todo el móvil hable el mismo
       idioma de movimiento — la cohesión es la mitad del acabado. */
    --ease-hoja: cubic-bezier(0.32, 0.72, 0, 1);
  }

  .intro,
  .journey,
  .cgrade,
  .gh-mist,
  .gh-photo-zone {
    position: relative;
    border-top-left-radius: var(--hoja-r);
    border-top-right-radius: var(--hoja-r);
    margin-top: calc(var(--hoja-r) * -1);
    /* La sombra va HACIA ARRIBA (sobre la hoja anterior): es lo que hace
       leer «una encima de otra» y no «pegadas». */
    box-shadow: 0 -14px 34px -16px rgba(24, 18, 12, 0.28);
  }
  /* overflow:hidden obligatorio: sin él, los fondos internos (el canvas
     azul del proceso, las fotos) se salen del radio y las esquinas no
     redondean. .gh-mist y .cgrade ya lo traen del proyecto. */
  .intro, .journey, .gh-photo-zone { overflow: hidden; }

  /* Apilado: cada hoja por encima de la anterior, en orden de documento. */
  /* !important en .gh-mist: core-opt.css le da z-index:2 (para tapar las
     capas decorativas fijas del tema) y carga DESPUÉS de este archivo. Sin
     esto, su hoja quedaba por debajo de la anterior y no se veía el radio. */
  .intro { z-index: 3; }
  .journey { z-index: 4; }
  .cgrade { z-index: 5; }
  .gh-mist { z-index: 6 !important; }
  .gh-photo-zone { z-index: 7; }

  /* El aire de cada sección compensa el solape para que el contenido no
     suba: 64 de ritmo + los 26 que monta la hoja. */
  .intro, .cgrade, .gh-mist { padding-top: calc(var(--ritmo-m) + var(--hoja-r)); }
  .gh-photo-zone > .about { padding-top: calc(var(--ritmo-m) + var(--hoja-r)); }

  /* ------------------------------------------------------------------
     ENTRADAS CON INERCIA en las tarjetas del proceso (01→05).
     Curva de muelle: sale rápido y asienta con un punto de rebote — es la
     diferencia entre «aparece» y «llega». El escalonado lo pone el tema
     con --d; aquí sólo se cambia el carácter del movimiento.
     ------------------------------------------------------------------ */
  .act-card {
    /* [APPLE-DESIGN] Amortiguado CRÍTICO, sin rebote: el criterio de Apple
       es reservar el overshoot para lo que el usuario ha lanzado con un
       gesto. Estas tarjetas entran por scroll, no por un lanzamiento — un
       rebote aquí se lee como adorno, no como física. */
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition-delay: var(--d, 0s) !important;
  }
  .act-card:not(.on) { transform: translateY(26px) scale(0.985); }
  .act-card.on { transform: none; }

  /* ------------------------------------------------------------------
     EL REPRODUCTOR COMO HOJA INFERIOR (bottom sheet de app).
     Entra deslizando desde abajo, pegado al borde, con las esquinas
     superiores redondeadas y su tirador. Sale hacia abajo.
     ------------------------------------------------------------------ */
  .vmodal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .vmodal-inner {
    width: 100% !important;
    max-width: none !important;
    max-height: 92svh !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    animation: ghHojaSube 0.42s var(--ease-hoja) both !important;
  }
  /* Vertical (9/16) a lo ancho de la pantalla; horizontal (16/9) igual. */
  .vmodal-inner.vm-tall { height: auto !important; aspect-ratio: 9 / 16; }
  .vmodal-inner.vm-wide { width: 100% !important; aspect-ratio: 16 / 9; }
  /* Tirador: la señal universal de «esto se arrastra / esto es una hoja». */
  .vmodal-inner::before {
    content: "";
    position: absolute;
    z-index: 6;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    pointer-events: none;
  }
  .vmodal:not(.open) .vmodal-inner {
    animation: ghHojaBaja 0.26s var(--ease-hoja) both !important;
  }
  .vm-frame, .vm-frame iframe { border-radius: 22px 22px 0 0 !important; }

  /* Zona de agarre de la hoja: franja superior POR ENCIMA del iframe (que
     se traga los eventos de puntero). touch-action:none cede el gesto
     vertical al arrastre en vez de al scroll de la página. */
  .gh-sheet-grab {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    touch-action: none;
    cursor: grab;
  }
  .gh-sheet-grab:active { cursor: grabbing; }
  /* El tirador se ilumina al agarrarlo: confirma que responde al dedo. */
  .vmodal-inner::before { transition: background-color 0.18s ease, width 0.18s ease; }
  .vmodal-inner:has(.gh-sheet-grab:active)::before {
    background: rgba(255, 255, 255, 0.75);
    width: 46px;
  }
}

@keyframes ghHojaSube {
  from { transform: translateY(100%); opacity: 1; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ghHojaBaja {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 1; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .act-card:not(.on) { transform: none; }
  .vmodal-inner { animation: none !important; }
}

/* --------------------------------------------------------------------------
   [MÓVIL-APP · 29-jul-2026] PORTAFOLIO CORTO (6 piezas) + «VER TODO»
   Se oculta SÓLO en modo niebla (`:not(.gh-sheet)`): la hoja de contactos
   siempre muestra las 16. Lo gobierna el módulo de premium.js.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .gh-mist.gh-corto:not(.gh-sheet) .gh-oculto { display: none !important; }

  .gh-vertodo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 34px auto 4px;
    padding: 0 22px;
    height: 46px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(92, 92, 102, 0.3);
    border-radius: 999px;
    background: none;
    color: #43434c;
    font: 500 12px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.2em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.26s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gh-vertodo i {
    font-style: normal;
    font-size: 11px;
    opacity: 0.55;
  }
  .gh-vertodo:active { transform: translateX(-50%) scale(0.95); transition-duration: 0.06s; }
  .gh-vertodo:focus-visible { outline: 2px solid var(--grade-warm); outline-offset: 5px; }
  /* Al desplegar, el propio botón se retira hacia abajo y se funde. */
  .gh-vertodo-fuera {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
  }
}


/* --------------------------------------------------------------------------
   [APPLE-DESIGN · 29-jul-2026] SEÑALES DE ACCESIBILIDAD QUE FALTABAN
   Reducir movimiento no es la única preferencia del sistema: hay gente que
   pide menos transparencia o más contraste. Se atienden las tres.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (prefers-reduced-transparency: reduce) {
  .gh-mist.gh-sheet .gh-mist-btn { background: rgba(20, 20, 24, 0.92) !important; }
  .mo-dock { background: #0b0c10; }
  .gh-vm-meta { color: #e6e6ec; }
}
@media (max-width: 760px) and (prefers-contrast: more) {
  .gh-mist.gh-sheet .gh-mist-btn { background: #14141a !important; color: #fff; }
  .gh-view-toggle { border-color: rgba(30, 30, 36, 0.75); }
  .gh-view-toggle .gh-vt-tx { color: #24242c; }
  .gh-vertodo { border-color: rgba(30, 30, 36, 0.75); color: #1d1d24; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026 · ronda 5] COMPOSICIÓN: UN SOLO EJE Y UNA ESCALA
   --------------------------------------------------------------------------
   Diagnóstico (medido, no a ojo): la página alternaba alineación CENTRO e
   IZQUIERDA sin criterio —hero centro, intro centro, proceso izquierda,
   color izquierda, comparador centro, contacto centro— y usaba TRES tamaños
   distintos (30/28/34px) para el mismo nivel de título. En 1000px de
   escritorio eso no canta; en 342px cada sección parece de otra web. Es el
   motivo real de que se leyera amateur, no las curvas ni los márgenes.

   Decisión: en móvil TODO cuelga de un único eje a la izquierda y de una
   sola escala tipográfica. Un eje fuerte es lo que da estructura cuando no
   hay ancho para componer, y es además el idioma de EMULSIÓN (metadata de
   claqueta, hoja de contactos: todo alineado y numerado). El centrado se
   reserva para NADA: un párrafo de cuatro líneas centrado siempre produce
   líneas irregulares y viudas.
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    /* Una escala, cuatro pasos. Nada fuera de aquí. */
    --t-display: 48px;   /* el titular del hero, única pieza de su tamaño */
    --t-titulo: 30px;    /* TODOS los títulos de sección */
    --t-lead: 20px;      /* párrafo destacado */
    --t-cuerpo: 16px;    /* texto corrido */
  }

  /* --- 1) UN SOLO EJE: izquierda ---------------------------------------- */
  /* [29-jul-2026] El EJE IZQUIERDO se retira. Fue una decisión mía y era
     equivocada: esta web está compuesta en simetría —hero, intro, comparador
     y contacto centrados— y forzar todo a la izquierda rompía esa lectura y
     dejaba titulares a un lado con sus botones al otro. Cada sección
     recupera su alineación original.
     Lo que SÍ se conserva es lo que resolvía un problema real: que ningún
     bloque tenga un ancho propio inventado (había cuatro distintos). Los
     márgenes vuelven a `auto` para que los bloques sigan centrados. */
  .hero h1.fp, .hero .sub, .intro .fp, .intro .lead,
  .cgrade h2, .cgrade .sub, .contact h2, .contact .sub {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
  }

  /* --- 2) UNA SOLA ESCALA ----------------------------------------------- */
  .hero h1.fp { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.022em; }
  .cgrade h2,
  .contact h2,
  .color-c h2 { font-size: var(--t-titulo); line-height: 1.08; letter-spacing: -0.015em; }
  .intro .fp { font-size: var(--t-lead); line-height: 1.35; letter-spacing: -0.008em; }
  .hero .sub, .cgrade .sub, .contact .sub, .color-c p {
    font-size: var(--t-cuerpo);
    line-height: 1.55;
  }
  /* La medida de lectura se controla en caracteres, no en píxeles sueltos:
     así ningún bloque vuelve a tener un ancho propio inventado. */
  .hero .sub, .cgrade .sub, .contact .sub { max-width: 34ch; margin-left: auto; margin-right: auto; }
}

/* La pista del comparador quedaba en gris clarísimo sobre fondo claro:
   sobre 342px es la única instrucción de uso que hay, tiene que leerse. */
@media (max-width: 760px) {
  .cg-cap { color: #55555f; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026 · ronda 6] LA NAVEGACIÓN SUBE Y SE ACLARA
   --------------------------------------------------------------------------
   Dos motivos, uno funcional y uno de sistema:
   · FUNCIONAL (fallo real medido): al subir aparecían a la vez el dock
     (z45) y el botón de WhatsApp (z40) en la misma franja; el dock lo
     TAPABA por completo. Con la navegación arriba, la franja inferior
     queda para UNA sola acción, que es su sitio natural.
   · DE SISTEMA: el dock negro era la única pieza de toda la web que no
     hablaba su idioma —ni papel cálido, ni claqueta, ni existe en
     escritorio—. Se convierte en la MISMA píldora de la nav de escritorio:
     clara sobre secciones claras, oscura sobre las oscuras (la clase
     .nav-invert la calcula ya el tema; premium.js sólo la refleja aquí).
   ========================================================================== */
@media (max-width: 760px) {
  .mo-dock {
    /* CABECERA DE CLAQUETA: el índice de sección ocupa el eje izquierdo y la
       navegación se ancla a la derecha. Centrada se solapaban (medido). */
    /* [29-jul-2026] CENTRADA otra vez: se había anclado a la derecha sólo
       para dejar sitio al índice de sección, que ya no existe. */
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 26px -12px rgba(40, 30, 60, 0.25);
  }
  .mo-dock a { color: #4a4a55; }
  .mo-dock a:active { background: rgba(13, 13, 16, 0.07); color: #0d0d10; }
  .mo-dock .mo-dock-lang { color: #0d0d10; background: rgba(13, 13, 16, 0.06); }
  /* Sobre secciones oscuras (foto del mar), la píldora se invierte igual
     que la nav del escritorio. */
  .mo-dock.mo-dock-inv {
    background: rgba(28, 28, 34, 0.62);
    border-color: rgba(255, 255, 255, 0.16);
  }
  .mo-dock.mo-dock-inv a { color: #d3d6d9; }
  .mo-dock.mo-dock-inv a:active { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .mo-dock.mo-dock-inv .mo-dock-lang { color: #fff; background: rgba(255, 255, 255, 0.14); }
  /* Al ocultarse ahora se va HACIA ARRIBA (por donde entró): una cosa
     entra y sale por el mismo sitio, o se lee como un fallo. */
  .mo-dock-hidden { transform: translateX(-50%) translateY(-190%) !important; }

  /* La franja inferior recupera su altura natural: ya no hay nada que
     esquivar, sólo el WhatsApp (centro) y el volver-arriba (izquierda). */
  .mo-top { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important; }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026 · ronda 7] EL PROCESO RECUPERA SU ESTRUCTURA
   --------------------------------------------------------------------------
   El problema no era el color: eran ~1.800px de azul liso con tarjetas de
   cristal flotando encima, sin nada que las relacionara. En escritorio esa
   sección SÍ tiene estructura —el spine luminoso que hilvana los actos— y
   en móvil estaba oculto (`.spine{display:none}` del tema). No se inventa
   nada: se recupera lo que la web ya tiene, traducido a una sola columna.
   La línea baja por el MISMO eje izquierdo que todo lo demás y cada acto
   se convierte en una estación sobre ella. El azul deja de ser una banda y
   pasa a ser un recorrido — que además es el idioma EMULSIÓN: una tira de
   película con sus marcas laterales.
   ========================================================================== */
@media (max-width: 760px) {
  .journey { position: relative; }

  .journey .spine {
    display: block !important;
    left: var(--mg);
    transform: none;
    width: 2px;
    background: rgba(255, 255, 255, 0.16);
  }
  /* El relleno luminoso lo anima el tema por scroll (#spineFill): aquí
     sólo se ajusta el halo, más contenido en pantalla pequeña. */
  .journey .spine-fill { box-shadow: 0 0 10px rgba(90, 165, 245, 0.6), 0 0 4px rgba(235, 245, 255, 0.5); }

  /* Los actos dejan sitio a la línea y arrancan a su derecha. */
  .act {
    position: relative;
    padding-left: calc(var(--mg) + 24px);
    padding-right: var(--mg);
  }
  /* Las tarjetas ya no necesitan simular profundidad con cristal fuerte:
     la estructura la da el recorrido, no el material. Menos ruido. */
  .act-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: none;
  }
  /* El número del acto es la etiqueta de la estación: en mono y al eje. */
  .act-card .num { letter-spacing: 0.16em; }
}

/* --------------------------------------------------------------------------
   [MÓVIL-APP · 29-jul-2026] ÍNDICE DE SECCIÓN (el riel de escritorio, en móvil)
   Vive en el eje izquierdo, a la altura de la píldora de navegación: juntos
   forman la cabecera de claqueta —índice a la izquierda, navegación al
   centro—. Mono, discreto, y se adapta al fondo igual que la píldora.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .gh-secnum {
    position: fixed;
    z-index: 44;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: var(--mg);
    height: 56px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #55555f;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gh-secnum b { font-weight: 700; }
  /* En 390px no caben número + nombre + navegación (medido: se solapaban).
     Se queda el NÚMERO, que es lo que orienta, en la forma de paréntesis que
     ya usa toda la web —«( TRABAJO )», «( FASHION )»—: así el índice no es un
     elemento nuevo, es la misma marca de claqueta. El nombre completo sigue
     en el riel de escritorio, donde sí hay margen. */
  .gh-secnum i { display: none; }
  .gh-secnum b::before { content: "( "; opacity: 0.5; }
  .gh-secnum b::after { content: " )"; opacity: 0.5; }
  .gh-secnum-inv { color: #e4e6ea; }
  .gh-secnum-inv i { opacity: 0.72; }
  /* El relevo entre secciones: se apaga, cambia y vuelve. */
  .gh-secnum-mudando { opacity: 0; }
  /* Se retira con la navegación, por el mismo sitio. */
  .gh-secnum-fuera { opacity: 0; transform: translateY(-190%); }
}

/* ==========================================================================
   [MÓVIL-APP · 29-jul-2026 · ronda 9] CUATRO FALLOS VISTOS EN iPHONE REAL
   Revisado con la lista de comprobación de UI/UX (áreas seguras, coexistencia
   con elementos fijos, una sola acción primaria, jerarquía de composición).
   ========================================================================== */
@media (max-width: 760px) {
  /* --- 1) EL BOTÓN «EN» SE SALÍA DE LA PÍLDORA --------------------------
     El ancho natural del dock (260px) era EXACTAMENTE el `max-width` que le
     puse: en iOS, con sus métricas de fuente, se pasa unos píxeles y, al no
     haber recorte, los hijos se dibujan FUERA del fondo blanco — el «EN»
     quedaba flotando medio fuera. Se quita el tope y se ajusta el interior
     para que quepa de sobra. */
  .mo-dock {
    max-width: none;
    gap: 0;
    padding: 5px 6px;
  }
  .mo-dock a { padding: 0 9px; font-size: 11.5px; }
  .mo-dock .mo-dock-lang { padding: 0 11px; }

  /* --- 2) ESTACIONES DEL SPINE DESALINEADAS -----------------------------
     Los actos alternan .left/.right y sus ::before resolvían posiciones
     distintas (3,9px vs 20px). Se fija el contenedor y el valor con la
     misma especificidad para AMBAS variantes: imposible que diverjan. */
  .journey .act.left,
  .journey .act.right { position: relative; }
  /* --- 3) EL CTA: NO SE TOCA -------------------------------------------
     [29-jul-2026] Aquí había un override mío que forzaba el botón a
     circular fuera del hero. Rompía DOS cosas: el tema tiene su propio
     estado `.circle` que además CAMBIA el icono a WhatsApp, y el mío sólo
     encogía la caja dejando la flechita; y el botón quedaba ovalado
     (56 de ancho contra 62 de alto). Se retira entero: el tema ya sabe
     abrirlo y cerrarlo solo. Lo único que se conserva es reservar sitio
     al final para que no se coma la última línea del contacto. */
  /* --- 4) EL HERO VUELVE AL CENTRO --------------------------------------
     Es la portada: una pieza de cartel, no una columna de lectura. Tiene su
     propia ley de composición y por eso se centra. El resto de la web
     mantiene el eje izquierdo, que es lo que le da estructura. */
  .hero .actions, .hero .chips { justify-content: center; }
}

/* En el hero NO se muestra el índice: acabas de llegar, no hay nada de lo
   que orientarse todavía, y en la primera pantalla compite con la píldora.
   Aparece a partir de «( 01 )», cuando la secuencia empieza de verdad.
   Reutiliza el estado `gh-en-hero` que ya pone el scrollspy. */
@media (max-width: 760px) {
  html.gh-en-hero .gh-secnum { opacity: 0; }
}

/* El índice es CHROME, no contenido: sin cuerpo propio se solapaba con las
   cejillas de las secciones al pasar por debajo (medido: 24px de solape con
   «( TRABAJO )»), y dos etiquetas mono entre paréntesis pisándose se leen
   como un error. Recibe la misma píldora que la navegación —mismo material,
   misma altura, misma adaptación al fondo— y así la cabecera se lee como una
   sola pieza: índice a la izquierda, navegación a la derecha. */
@media (max-width: 760px) {
  .gh-secnum {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 26px -14px rgba(40, 30, 60, 0.25);
    top: calc(env(safe-area-inset-top, 0px) + 23px);
  }
  .gh-secnum-inv {
    background: rgba(28, 28, 34, 0.62);
    border-color: rgba(255, 255, 255, 0.16);
  }
}

/* La cejilla del portafolio, CENTRADA de verdad: el control de vista se saca
   del flujo (si no, se coloca en línea detrás de «( TRABAJO )» y arrastra el
   conjunto a la derecha — que es lo que se veía descentrado). !important
   porque core-opt.css define este control y carga después. */
@media (max-width: 760px) {
  .gh-mist-head { position: relative !important; text-align: center !important; }
  .gh-mist-head .gh-st-eyebrow { display: block; margin: 0 auto !important; }
  .gh-view-toggle {
    position: absolute !important;
    right: var(--mg) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* En 390px el control con la palabra «VISTA» mide 117px y llega a TOCAR la
   cejilla centrada (medido: 0px de aire). Aunque «( TRABAJO )» esté centrada
   al píxel, el conjunto se lee volcado a la derecha. En móvil se queda con
   los dos glifos —que es el control— y la palabra sólo en escritorio, donde
   sí hay sitio. Contrapartida asumida: se descubre algo peor sin la palabra;
   a cambio la cabecera respira y se lee centrada. */
@media (max-width: 760px) {
  .gh-view-toggle .gh-vt-tx { display: none; }
}


/* El conmutador de idioma vuelve a ser un CÍRCULO, como en escritorio: con
   relleno lateral quedaba ovalado dentro de la píldora. Ancho = alto. */
@media (max-width: 760px) {
  .mo-dock .mo-dock-lang {
    /* 44x44 exactos: el dock da height:44 a sus enlaces, así que el ancho
       debe igualarlo o queda ovalado (era 40x44). Además es el mínimo
       táctil. */
    width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
}