/*
 * PanFix Web: hoja de estilos principal.
 * Mobile-first. Sin frameworks, sin resets externos, sin fuentes ni peticiones de terceros.
 * Orden: tokens (sin capa) → reset → base → layout → components.
 * Breakpoints (las media queries no admiten variables): 48em = 768 px · 64em = 1024 px.
 */

/* ==========================================================================
   TOKENS PROVISIONALES
   Es el único bloque que se sustituirá cuando exista el branding definitivo.

   Los colores de marca se derivan de Panfix_Logo.png (mediana de píxeles):
     azul  = letras "Pan" · verde = letras "Fix" · navy = trazos oscuros del panda.

   Contraste WCAG 2.2 (sobre #FFFFFF / sobre --color-surface-alt):
     --color-ink              #181D37  16.54 / 15.29  texto
     --color-ink-muted        #4A5169   7.86 /  7.26  texto secundario
     --color-brand-blue       #1B60AF   6.29 /  5.81  enlaces, acciones, foco
     --color-brand-blue-dark  #074092   9.73 /  9.00  hover
     --color-brand-green-dark #34700D   6.05 /  5.59  texto en verde
     --color-brand-green      #6EA222   3.06 /  2.83  SOLO acento decorativo sobre
                                                      #FFFFFF; nunca texto
     blanco sobre --color-brand-blue: 6.29 · sobre --color-brand-blue-dark: 9.73

   Combinaciones de F2:
     estado Disponible     #34700D sobre #EEF6E4   5.46
     estado En desarrollo  #074092 sobre #EAF1FA   8.56
     estado Planificado    #4A5169 sobre #FFFFFF   7.86
     bloque Core HR        #FFFFFF sobre #181D37  16.54 · #C9CEDD sobre #181D37 10.52
   ========================================================================== */

:root {
  /* Marca (provisional, derivada de los assets existentes) */
  --color-brand-blue: #1b60af;
  --color-brand-blue-dark: #074092;
  --color-brand-green: #6ea222;
  --color-brand-green-dark: #34700d;

  /* Interfaz */
  --color-ink: #181d37;
  --color-ink-muted: #4a5169;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6fa;
  --color-surface-inverse: #181d37;
  --color-on-inverse: #ffffff;
  --color-on-inverse-muted: #c9cedd;
  --color-border: #d7dce5;
  --color-on-brand: #ffffff;
  --color-focus: var(--color-brand-blue);

  /* Estados de módulos */
  --color-status-available-bg: #eef6e4;
  --color-status-development-bg: #eaf1fa;

  /* Tipografía: fuentes del sistema */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-small: 0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-brand: 1.25rem;
  --text-h1: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-h3: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --leading-body: 1.6;
  --leading-tight: 1.2;
  --measure: 65ch;

  /* Espaciado (escala de 8 px) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --section-padding: clamp(3rem, 2rem + 4vw, 6rem);

  /* Layout */
  --container-max: 72rem;
  --gutter: var(--space-2);
  --radius: 0.375rem;
  --radius-lg: 0.75rem;
  --header-height: 4rem;
  --target-min: 2.75rem;
  --button-height: 3rem;
  --brand-icon-size: 2.5rem;
  --hero-logo-width: 15rem;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;
}

/* El atributo sizes del logo en index.html refleja estos anchos: 240 / 256 / 360 px. */
@media (min-width: 48em) {
  :root {
    --gutter: var(--space-3);
    --hero-logo-width: 16rem;
  }
}

@media (min-width: 64em) {
  :root {
    --hero-logo-width: 22.5rem;
  }
}

/* ========================================================================== */

@layer reset, base, layout, components;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dd,
  figure {
    margin: 0;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

@layer base {
  html {
    color-scheme: light;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background-color: var(--color-surface);
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 700;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-h1);
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: var(--text-h2);
  }

  /* h4: títulos de tarjeta bajo un grupo h3 (Soluciones); mismo aspecto que h3. */
  h3,
  h4 {
    font-size: var(--text-h3);
  }

  p {
    max-width: var(--measure);
  }

  a {
    color: var(--color-brand-blue);
    text-underline-offset: 0.2em;
  }

  a:hover {
    color: var(--color-brand-blue-dark);
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  /* Destino del skip link: recibe el foco pero no es interactivo. */
  main:focus {
    outline: none;
  }

  /* Con cabecera fija, anclas y foco se desplazan por debajo de ella (WCAG 2.4.11). */
  @media (min-width: 48em) {
    html {
      scroll-padding-top: calc(var(--header-height) + var(--space-2));
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--section-padding);
  }

  .section--alt {
    background-color: var(--color-surface-alt);
  }

  .flow > * + * {
    margin-block-start: var(--space-2);
  }

  /* Dos columnas (texto + ficha) a partir de 1024 px. */
  .split {
    display: grid;
    gap: var(--space-4);
  }

  .card-grid {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
  }

  @media (min-width: 48em) {
    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64em) {
    .split {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: start;
      gap: var(--space-6);
    }

    .card-grid--problems {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .card-grid--modules {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@layer components {
  /* Skip link: oculto fuera de pantalla hasta recibir el foco. */
  .skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 100;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    background-color: var(--color-brand-blue);
    color: var(--color-on-brand);
    font-weight: 600;
    transform: translateY(-200%);
  }

  .skip-link:hover {
    color: var(--color-on-brand);
  }

  .skip-link:focus {
    transform: none;
  }

  /* Cabecera: en móvil no es fija y el menú puede ocupar dos líneas; desde 768 px, una fila fija. */
  .site-header {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-3);
    padding-block: var(--space-1);
  }

  /* Marca: icono existente + "PanFix" como texto HTML, sin imitar el wordmark del logo. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--target-min);
    color: var(--color-ink);
    font-size: var(--text-brand);
    font-weight: 700;
    text-decoration: none;
  }

  .brand:hover {
    color: var(--color-ink);
  }

  .brand__icon {
    width: var(--brand-icon-size);
    height: var(--brand-icon-size);
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    padding: 0;
    list-style: none;
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav__link:hover {
    color: var(--color-brand-blue);
    text-decoration: underline;
  }

  @media (min-width: 48em) {
    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .site-header__inner {
      flex-wrap: nowrap;
      min-height: var(--header-height);
      padding-block: 0;
    }

    .site-nav__list {
      gap: 0 var(--space-3);
    }
  }

  /* Botones (enlaces con aspecto de botón; navegan, no ejecutan acciones). */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    padding: var(--space-1) var(--space-3);
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  .button--primary {
    background-color: var(--color-brand-blue);
    color: var(--color-on-brand);
  }

  .button--primary:hover {
    background-color: var(--color-brand-blue-dark);
    color: var(--color-on-brand);
  }

  .button--secondary {
    border-color: var(--color-brand-blue);
    background-color: var(--color-surface);
    color: var(--color-brand-blue);
  }

  .button--secondary:hover {
    border-color: var(--color-brand-blue-dark);
    background-color: var(--color-surface-alt);
    color: var(--color-brand-blue-dark);
  }

  /* Portada: una columna en móvil (logo después del texto); dos columnas desde 768 px. */
  .hero__grid {
    display: grid;
    gap: var(--space-4);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  .hero__actions > .button {
    flex: 1 1 auto;
  }

  .hero__media {
    justify-self: center;
  }

  /* Logo completo sin recortar ni alterar; su lienzo blanco se funde con la portada blanca. */
  .hero__logo {
    width: var(--hero-logo-width);
  }

  .lead {
    color: var(--color-ink-muted);
    font-size: var(--text-lead);
  }

  @media (min-width: 48em) {
    .hero__grid {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: center;
      gap: var(--space-6);
    }

    .hero__actions > .button {
      flex: 0 0 auto;
    }
  }

  /* Cabecera de sección: titular + entrada. */
  .section__header {
    max-width: 48rem;
    margin-block-end: var(--space-4);
  }

  .section__note {
    margin-block-start: var(--space-4);
    color: var(--color-ink-muted);
  }

  /* Tarjetas */
  .card {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .card > * + * {
    margin-block-start: var(--space-1);
  }

  /* Filete verde decorativo: solo sobre tarjetas blancas. */
  .card--accent {
    border-top: 4px solid var(--color-brand-green);
  }

  /* Diagrama conceptual: base arriba, conector, módulos debajo (mismo orden visual y de lectura). */
  .diagram {
    display: grid;
    justify-items: center;
  }

  .diagram__core {
    width: 100%;
    max-width: 40rem;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-inverse);
    color: var(--color-on-inverse);
    text-align: center;
  }

  .diagram__core-title {
    margin-inline: auto;
    font-size: var(--text-h3);
    font-weight: 700;
  }

  .diagram__core-text {
    margin-inline: auto;
    margin-block-start: var(--space-1);
    color: var(--color-on-inverse-muted);
  }

  .diagram__modules {
    position: relative;
    width: 100%;
    margin-block-start: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  /* Conector decorativo (borde, visible también en modo de alto contraste). */
  .diagram__modules::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: var(--space-4);
    border-left: 2px solid var(--color-ink-muted);
  }

  .diagram__label {
    margin-inline: auto;
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: 600;
    text-align: center;
  }

  .diagram__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    padding: 0;
    list-style: none;
  }

  .diagram__module {
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-brand-green);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    font-weight: 600;
    text-align: center;
  }

  /* En dos columnas, el último módulo impar ocupa la fila completa. */
  .diagram__module:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .diagram__caption {
    max-width: 40rem;
    margin-block-start: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    text-align: center;
  }

  @media (min-width: 48em) {
    .diagram__list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .diagram__module:last-child:nth-child(odd) {
      grid-column: auto;
    }
  }

  /* Estados de módulos: el texto comunica el estado; color y borde solo lo refuerzan. */
  .status {
    display: inline-block;
    padding: 0.125rem var(--space-1);
    border: 1px solid;
    border-radius: 999px;
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.4;
  }

  .status--available {
    border-color: var(--color-brand-green-dark);
    background-color: var(--color-status-available-bg);
    color: var(--color-brand-green-dark);
  }

  .status--development {
    border-color: var(--color-brand-blue-dark);
    background-color: var(--color-status-development-bg);
    color: var(--color-brand-blue-dark);
  }

  .status--planned {
    border-style: dashed;
    border-color: var(--color-ink-muted);
    background-color: var(--color-surface);
    color: var(--color-ink-muted);
  }

  .status-legend {
    margin-block-end: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .status-legend__title {
    font-weight: 600;
  }

  .status-legend__list {
    display: grid;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .status-legend__item dd {
    margin-block-start: 0.25rem;
    color: var(--color-ink-muted);
    font-size: var(--text-small);
  }

  .status-legend__note {
    margin-block-start: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-small);
  }

  @media (min-width: 48em) {
    .status-legend__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-3);
    }
  }

  .module-card__status {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
  }

  /* Ficha de datos (Nosotros, Contacto) */
  .facts {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .facts__item + .facts__item {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .facts dt {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: 600;
  }

  .facts dd {
    font-weight: 600;
  }

  /* Pie */
  .site-footer {
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    font-size: var(--text-small);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-1);
  }

  @media (min-width: 48em) {
    .site-footer__inner {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
    }
  }
}