/* css/utilities.css — helpers minimalistas (solo lo que usamos en la home). */

/* Display */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Flex */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-start  { justify-content: flex-start; }
.justify-end    { justify-content: flex-end; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Text color */
.text-white      { color: #FFFFFF; }
.text-fg         { color: var(--fg-primary); }
.text-fg-muted   { color: var(--fg-muted); }
.text-fg-subtle  { color: var(--fg-subtle); }
.text-blue    { color: var(--brand-blue); }
.text-navy   { color: var(--brand-navy); }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Sizing */
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.min-h-screen  { min-height: 100vh; min-height: 100dvh; }

/* Margin top */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10{ margin-top: var(--space-10); }

/* Margin bottom */
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Padding helpers para secciones */
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* A11y */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visibility por breakpoint */
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}

/* ==================================================================
   ZONAS TÁCTILES DE ENLACES SUELTOS
   ------------------------------------------------------------------
   WCAG 2.5.8 pide 24x24 CSS px como mínimo. Un enlace de texto mide lo
   que mide su línea —entre 17 y 20px—, así que cualquier enlace que NO
   vaya dentro de un párrafo se queda corto.

   La excepción de la norma es justo esa: los enlaces embebidos en una
   frase están exceptuados, y darles 44px partiría el interlineado del
   texto. Por eso aquí se excluye todo lo que viva dentro de un <p>.

   Lo que sí entra, y estaba fallando (medido a 320px):
     · el índice y las listas de las páginas legales …… 19-20px de alto
     · los enlaces de la tabla comparativa de niveles … 17px
     · las migas de pan ………………………………………………………………… 17px
     · el teléfono de la página de contacto ……………………… 18px

   Se aplica solo en `hover: none`, es decir con el dedo. Con un ratón,
   17px se aciertan sin problema y estirar los enlaces descuadraría
   listas y tablas en escritorio sin ganar nada.
   ================================================================== */
@media (hover: none) {
  li > a:only-child,
  td > a:only-child,
  dd > a:only-child,
  nav > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Dentro de una celda, `inline-flex` con 44px de alto engorda la fila
     entera; con la altura mínima en la propia celda y el enlace ocupando
     todo el alto, la tabla no crece más de lo necesario. */
  td > a:only-child { width: 100%; }
}


/* ============================================================
   SUELO DE 12px PARA LOS ROTULOS PEQUENOS, SOLO EN MOVIL
   ============================================================

   El diseno usa 11px para los rotulos en versalita y monoespaciado
   (eyebrows, etiquetas de cifra, migas, codigos). En un monitor a medio
   metro se leen; en un movil a treinta centimetros, con el brillo del sol
   encima, son 65 sitios distintos donde el texto va justo por debajo del
   suelo que se considera legible sin ampliar.

   Se sube a 12px SOLO en <=480px, no en todas partes: subirlo en escritorio
   cambiaria el registro tipografico de la web entera, y ahi el problema no
   existe. Es un ajuste de legibilidad en movil, no un cambio de diseno.

   La lista sale de buscar `font-size: 11px` en las hojas del sitio (no en
   admin.css, que es panel interno). Si se anade un rotulo nuevo a 11px,
   anadirlo aqui tambien.

   Va en utilities.css porque carga la ultima y no hay que pelearse con la
   especificidad de cada hoja. */
@media (max-width: 480px) {
  .calidad-stat-label,
  .cmo-cta-eyebrow,
  .cmo-formats-text-eyebrow,
  .cmo-hero-eyebrow,
  .cmo-quality-card-tag,
  .cmo-quality-eyebrow,
  .cmo-section-eyebrow,
  .cmo-spec-label,
  .cmo-stat-label,
  .cmo-step-label,
  .contacto-channel-label,
  .contacto-form-aside-eyebrow,
  .contacto-hero-eyebrow,
  .contacto-label,
  .contacto-mapa-card-row strong,
  .contacto-mapa-eyebrow,
  .contacto-section-eyebrow,
  .contacto-stat-label,
  .cual-elegir-ayuda-foot,
  .cual-elegir-breadcrumb,
  .cual-elegir-glosario-eyebrow,
  .drawer-submenu-code,
  .empresa-coverage-text-eyebrow,
  .empresa-cta-eyebrow,
  .empresa-hero-eyebrow,
  .empresa-hero-photo-tag,
  .empresa-pillar-tag,
  .empresa-pillars-eyebrow,
  .empresa-stat-label,
  .empresa-story-aside-eyebrow,
  .empresa-value-num,
  .empresa-values-eyebrow,
  .escenario-fits-label,
  .escenario-reco-label,
  .escenario-tag,
  .ficha-aplicaciones-pdf-eyebrow,
  .ficha-comp-card-current-badge,
  .ficha-comp-card-stat-label,
  .ficha-comparativa-aviso,
  .ficha-comparativa-tabla thead th,
  .ficha-hero-breadcrumb,
  .ficha-info-block-title,
  .ficha-info-eyebrow,
  .ficha-info-image-caption,
  .ficha-showcase-card-client,
  .ficha-showcase-eyebrow,
  .ficha-spec-label,
  .glosario-tag,
  .hm-cierre-dato-t,
  .hm-hero-scroll,
  .legales-tabla thead th,
  .modelo-pick-card .code,
  .otros-card-eyebrow,
  .portafolio-card-modelo,
  .portafolio-filter-group-label,
  .portafolio-lightbox-modelo,
  .presupuesto-counter,
  .presupuesto-dim-range,
  .presupuesto-dim-sublabel,
  .presupuesto-dropzone-formats,
  .presupuesto-file-preview-size,
  .proyecto-card-meta,
  .py-card-fotos-n,
  .sidebar-contact-label,
  .sidebar-contact-langs {
    font-size: 12px;
  }
}

/* ==================================================================
   DATO PENDIENTE DE CONFIRMAR
   ------------------------------------------------------------------
   Sustituye al token crudo `[[CONFIRMAR]]` que antes se pintaba a
   tamaño de titular en las cifras de stats y specs (contacto y
   como-trabajamos), donde se leía como un fallo. El marcador sigue
   en el locale —lo cuenta la auditoría y evita publicar datos
   inventados—; esto solo cambia cómo se ve. Lo pinta js/i18n.js.

   Atenuado y en tamaño propio (no hereda el display de la cifra) para
   que se lea "falta este dato", no "este es el dato". Va en
   utilities.css, que carga la última, para ganar a las reglas de
   color de cada hoja de sección. */
.pendiente-confirmar {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 0.42em, 17px);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  border-bottom: 1px dotted currentColor;
  vertical-align: middle;
}
/* Sobre los planos oscuros (pie, cierre) el gris medio no llega a AA.
   Ahí se aclara. */
.footer .pendiente-confirmar,
.hm-cierre .pendiente-confirmar,
.bg-dark .pendiente-confirmar { color: rgba(255, 255, 255, 0.7); }