/* ==========================================================================
   v5.css — legibilidad y proporción en móvil (nov 2026)
   Se carga DESPUÉS de v4.css. No cambia diseño, paleta ni animaciones:
   solo tamaños de letra mínimos, escalas fluidas, contraste y áreas táctiles.
   Medido con tools/medir/medir.cjs (360–540 px y 824 px en horizontal).
   ========================================================================== */

/* El navegador no debe inflar ni encoger el texto por su cuenta (iOS/Android en horizontal). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* La plantilla bajaba html y body a 15 px por debajo de 992 px: todos los rem de v4 se encogían
   un 6 % en móvil. 100 % = el tamaño que el visitante eligió en su navegador (16 px por defecto). */
html { font-size: 100%; }

/* --------------------------------------------------------------------------
   1. Escala tipográfica: mínimos de 13 px (etiquetas), 15 px (secundario),
      16 px (texto base, crece hasta 18 px). Todo continuo con clamp().
   -------------------------------------------------------------------------- */
:root {
  --t-xs: clamp(.8125rem, .78rem + .15vw, .875rem);     /* 13 → 14 px  etiquetas */
  --t-sm: clamp(.9375rem, .9rem + .2vw, 1rem);          /* 15 → 16 px  secundario */
  --t-base: clamp(1rem, .9rem + .5vw, 1.125rem);        /* 16 → 18 px  texto base */
  --t-lg: clamp(1.125rem, 1.02rem + .5vw, 1.3125rem);   /* 18 → 21 px  entradillas */
  --t-et: clamp(.875rem, .85rem + .1vw, .9375rem);      /* 14 → 15 px  etiquetas de la plantilla */

  /* Espacios grandes que escalan con el ancho (antes fijos en móvil) */
  --s4: clamp(24px, 18px + 1.6vw, 32px);
  --s5: clamp(28px, 20px + 2.2vw, 40px);
  --s6: clamp(32px, 22px + 2.8vw, 48px);
  --s8: clamp(44px, 30px + 3.8vw, 64px);
  --s10: clamp(56px, 38px + 4.6vw, 80px);
  --s12: clamp(64px, 40px + 6vw, 96px);
  --s15: clamp(80px, 50px + 7vw, 120px);
  --s20: clamp(96px, 56px + 10vw, 160px);
}

body { font-size: var(--t-base); }

/* Títulos de la plantilla: crecen de forma continua entre 360 y 992 px
   (antes saltaban de 34 a 58 px en el h1 al cruzar 768 px). */
@media (max-width: 992px) {
  h1, .mil-h1 { font-size: clamp(2.125rem, 1rem + 5vw, 3.625rem); }
  h2, .mil-h2 { font-size: clamp(2rem, 1.15rem + 3.8vw, 2.75rem); }
  h3, .mil-h3 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.25rem); }
  h4, .mil-h4 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.5rem); }
  h5, .mil-h5 { font-size: clamp(1.125rem, 1.02rem + .5vw, 1.25rem); }
  h6, .mil-h6 { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
}

/* --------------------------------------------------------------------------
   2. Etiquetas (mayúsculas, mono, migas, botones): nunca por debajo de 13 px
   -------------------------------------------------------------------------- */
.mil-link, .mil-button, .mil-button span, .mil-upper, .mil-label,
.mil-breadcrumbs li a, .mil-breadcrumbs li a span, .mil-blog-toc p, .mil-blog-resumen p,
.cq-art-leer, .cq-fase-num, .cq-fase-fecha, .cq-tipo-tag, .mil-case-ficha dt,
.cq-details summary, .cq-details summary span, .mil-cajita-pista, .mil-cajita-serv .mil-cajita-cta,
.v4-kicker, .v4-ceja, .v4-etq, .v4-chips li, .v4-ficha dt, .v4-fig figcaption,
.v4-carr-cont, .v4-pista, .v4-int-pista, .v4-mate-ctrl > span, .v4-int-params > span, .v4-lorenz-x0,
.v4-caso-res span, .v4-modal-sub, .mil-cert-meta, .chip {
  font-size: var(--t-et);
}
.mil-lang-switch, .mil-lang-switch * { font-size: var(--t-et) !important; }
.cajitas-js .mil-cajita-pista, .cajitas-js .mil-project-list .mil-cajita-pista { font-size: var(--t-et); }
/* Notas con tamaño y opacidad en línea (style="font-size:0.8em; opacity:0.7") en portada y pie */
[style*="font-size:0.8"], [style*="font-size: 0.8"] { font-size: var(--t-sm) !important; }
[style*="opacity:0.7"], [style*="opacity: 0.7"] { opacity: 1 !important; color: var(--tx-3); }
[style*="opacity:0.7"] a, [style*="opacity: 0.7"] a { color: var(--tx-2); }
/* Fórmulas: los subíndices de MathML se reducen solos; la base no debe encogerse en móvil */
@media (max-width: 575px) {
  .v4-formula math, .v4-mate .v4-formula math { font-size: 1.15em; }
  .v4-formula { overflow-x: auto; overflow-y: hidden; }
}
/* En móvil, 2 px de tracking a 14 px parte las etiquetas en dos líneas: se ajusta a 0.1 em */
@media (max-width: 767px) { .mil-label, .mil-labels .mil-label, .mil-breadcrumbs li a { letter-spacing: .1em; } }
/* El subtítulo «Casos destacados» y similares ya usaban --t-sm: queda en 15 px */
.v4-subtit { font-size: var(--t-sm); }

/* Código del blog: 14 px (antes 12.3 px) */
pre, pre code, .mil-blog-cuerpo pre code { font-size: .875rem; }
code { font-size: max(.875rem, .9em); }

/* --------------------------------------------------------------------------
   3. Texto secundario: descripciones, listas y pies de 15 px o más
   -------------------------------------------------------------------------- */
.mil-cert-desc, .mil-service-list li, .mil-accordion-group .mil-accordion-menu .mil-accordion-head,
.cq-qa-cap, .cq-stat-lbl, .v4-cifras dd, .v4-prueba, .v4-srv-mas, .v4-nota, .mil-blog-meta,
.mil-blog-meta time, .mil-blog-media figcaption, figcaption, .v4-gal-item figcaption,
.v4-modal-in .v4-modal-precio, .mil-text-sm, .v4-credito {
  font-size: var(--t-sm);
}
.v4-nota { font-size: var(--t-sm) !important; }
/* Las listas y preguntas de la plantilla iban en 12 px, mayúsculas y con 2 px de tracking:
   en 15 px el tracking se reduce para que no se abran demasiado. */
.mil-service-list li, .mil-accordion-group .mil-accordion-menu .mil-accordion-head { letter-spacing: .06em; line-height: 1.45; }
.cq-retos .mil-accordion-head { font-size: 1.125rem; letter-spacing: 0; }
.cq-reto-num { font-size: var(--t-et); }
/* El pie de cada certificación y su descripción ya no heredan 0.85 em / 0.9 em */
.mil-cert-desc { line-height: 1.5; }

/* --------------------------------------------------------------------------
   4. Contraste: el gris secundario se hacía con opacity (≈3:1). Se usa el token
      --tx-3 (#8E8880, 5.5:1 sobre --bg) sin transparencia.
   -------------------------------------------------------------------------- */
.mil-cert-meta { opacity: 1; color: var(--tx-3); }
.mil-cert-desc { opacity: 1; color: var(--tx-2); }
.mil-lang-switch .mil-lang-sep, .mil-lang-switch .mil-lang-link { opacity: 1; color: var(--tx-3); }
.mil-lang-switch a.mil-lang-link:hover { color: var(--tx-1); }
.cq-res-antes { color: var(--tx-3); }
/* Texto de los botones rojos: #EDE9E3 sobre #DD0200 daba 4.3:1; en blanco, 5.1:1 (como .v4-btn) */
.mil-button, .mil-button span { color: #fff; }
.mil-escena-calidad { font-size: var(--t-et); }

/* --------------------------------------------------------------------------
   5. Espacios entre secciones de la plantilla: escalan en vez de quedarse en 90/60 px
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .mil-p-120-120 { padding-top: clamp(56px, 32px + 6.5vw, 90px); padding-bottom: clamp(56px, 32px + 6.5vw, 90px); }
  .mil-p-120-90 { padding-top: clamp(56px, 32px + 6.5vw, 90px); padding-bottom: clamp(40px, 22px + 4.5vw, 60px); }
  .mil-p-0-120, .mil-p-90-120 { padding-bottom: clamp(56px, 32px + 6.5vw, 90px); }
  .mil-p-120-0, .mil-p-120-60, .mil-p-120-30 { padding-top: clamp(56px, 32px + 6.5vw, 90px); }
  .mil-p-90-90 { padding-top: clamp(40px, 22px + 4.5vw, 60px); padding-bottom: clamp(40px, 22px + 4.5vw, 60px); }
  .mil-p-90-120 { padding-top: clamp(40px, 22px + 4.5vw, 60px); }
  .mil-p-0-90 { padding-bottom: clamp(40px, 22px + 4.5vw, 60px); }
  .mil-p-120-60 { padding-bottom: clamp(20px, 10px + 2.4vw, 30px); }
  .mil-mb-120 { margin-bottom: clamp(56px, 32px + 6.5vw, 90px); }
  .mil-mb-90 { margin-bottom: clamp(48px, 28px + 5.4vw, 90px); }
  .mil-mb-60 { margin-bottom: clamp(36px, 20px + 4.4vw, 60px); }
  .mil-mb-30 { margin-bottom: clamp(20px, 12px + 2.4vw, 30px); }
  .mil-blog-toc, .mil-blog-resumen { padding: clamp(16px, 10px + 1.6vw, 22px) clamp(16px, 10px + 2vw, 24px); }
}

/* --------------------------------------------------------------------------
   6. Áreas táctiles de 44 px como mínimo (sin cambiar cómo se ven)
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 992px) {
  .mil-link, .mil-breadcrumbs li a, .v4-link, .cq-art-leer, .mil-blog-toc a,
  .mil-menu-list li a, .mil-footer-menu ul li a, footer .mil-light-soft a, footer p a,
  .mil-vert-between a, .mil-cert-trigger, .v4-chips a {
    min-height: 44px;
  }
  .mil-link, .mil-breadcrumbs li a, .v4-link, footer p a, .mil-vert-between a { display: inline-flex; align-items: center; }
  .mil-menu-list li a, .mil-footer-menu ul li a, .mil-blog-toc a { display: flex; align-items: center; }
  .mil-cert-trigger { display: block; padding-block: 6px; }
  /* Botones y controles pequeños: crece el área, no el dibujo */
  .mil-lang-switch a, .v4-carr-punto, .v4-carr-pausa, .mil-menu-btn, .v4-int-ctrl button, .v4-mate-ctrl button,
  .v4-auto-ctrl button, .mil-back-to-top .mil-link {
    position: relative;
  }
  .mil-lang-switch a::after, .v4-carr-punto::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .mil-button { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   7. 3D en pantallas táctiles (fase 2): imagen fija hasta que el usuario toca
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .v5-toca { cursor: pointer; }
  .v4-int-visual.v5-toca { pointer-events: auto; touch-action: pan-y; }
  .v5-toca::after {
    content: "Toca para moverlo en 3D"; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    font-size: var(--t-et); line-height: 1; color: var(--tx-1); white-space: nowrap; pointer-events: none;
    background: rgba(14, 13, 12, .78); border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 16px;
  }
  :lang(en) .v5-toca::after { content: "Tap to play in 3D"; }
  /* La caja del objeto interior solo ocupa lugar si muestra su imagen fija o ya tiene la escena */
  html:not(.v4-int-viva):not(.v5-int-cargando) .v4-int-visual:not(:has(.v5-int-fija)) { display: none; }
  .v5-int-fija { display: block; width: 100%; height: 100%; object-fit: contain; }
  .v4-int-viva .v5-int-fija { display: none; }
}

/* --------------------------------------------------------------------------
   8. Render diferido (fase 2): el navegador no pinta ni mide lo que está lejos de
      la pantalla. Solo en secciones que van DESPUÉS de la última caja anclada al 3D
      de la portada (#lorenz), o que no contienen cajas ancladas (#about, Experiencia):
      el motor lee la posición de sus anclas en cada cuadro, así que sigue cuadrando.
   -------------------------------------------------------------------------- */
#about, #nudo + section, #lorenz ~ section, .mil-content footer, #sigue-leyendo {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* --------------------------------------------------------------------------
   9. Bloque de contenido de las páginas de servicio (fase 4)
   -------------------------------------------------------------------------- */
.v5-srv { padding: var(--s8) 0; }
.v5-srv + .v5-srv { padding-top: 0; }
.v5-srv .v4-prosa-c ul, .v5-srv .v4-prosa-c ol { margin: 0; padding-left: 1.2em; color: var(--tx-2); font-size: var(--t-base); line-height: 1.65; max-width: 64ch; }
.v5-srv .v4-prosa-c ul { list-style: disc; }
.v5-srv .v4-prosa-c ol { list-style: decimal; }
.v5-srv .v4-prosa-c li { margin: 0 0 var(--s2); padding-left: .2em; }
.v5-srv .v4-prosa-c li::marker { color: var(--rojo-tx); }
.v5-srv .v4-prosa-c strong { color: var(--tx-1); font-weight: 500; }
.v5-srv .mil-blog-faq { margin: 0; max-width: 64ch; }
.v5-srv .mil-blog-faq dt { color: var(--tx-1); font-size: var(--t-lg); font-weight: 500; margin: 0 0 var(--s1); }
.v5-srv .mil-blog-faq dd { color: var(--tx-2); font-size: var(--t-base); line-height: 1.65; margin: 0 0 var(--s4); }
.v5-srv-cta { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   10. Botón de WhatsApp (fijo, abajo a la derecha)
   -------------------------------------------------------------------------- */
.v5-wa {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 8;
  width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v5-wa:hover, .v5-wa:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); color: #fff; }
.v5-wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Fuera de vista mientras hay un modal abierto o el menú a pantalla completa */
html.v4-sin-scroll .v5-wa, html:has(.mil-menu-frame.mil-active) .v5-wa, html.is-animating .v5-wa { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .v5-wa { transition: none; } }
/* Píldora con saludo: «¡Hola! Envíame un mensaje» junto al ícono */
.v5-wa:has(.v5-wa-txt) { width: auto; padding: 0 20px 0 15px; gap: 10px; border-radius: 999px; }
.v5-wa-txt { font-size: var(--t-et); font-weight: 500; line-height: 1; white-space: nowrap; color: #fff; }
/* A la derecha (pedido de Samuel). En escritorio «volver arriba» ocupa la esquina (60 px del
   borde, 44 px de alto): WhatsApp queda encima. En móvil «volver arriba» no se muestra. */
.v5-wa { left: auto; right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 992px) { .v5-wa { right: 60px; bottom: 116px; } }