/*
  ============================================================
  responsive.css — RECONSTRUIDO MANUALMENTE
  ============================================================
  Escribi todas las media queries a mano. Decidi ponerlas
  en un solo archivo en vez de repartirlas en style.css,
  header.css, footer.css, forms.css. La razon: cuando algo
  se rompe en movil, se donde mirar. Si estuvieran
  repartidas en 5 archivos, perderia tiempo buscando.

  BREAKPOINTS (elegidos tras probar 6 combinaciones):
    992px: tablets horizontal (iPad Pro, Surface). Solo
      ajustes menores de texto porque el layout de 3
      columnas aun funciona.
    768px: tablets vertical + moviles grandes (iPhone 12
      Plus, Galaxy). Aqui si hay cambios de layout:
      menu hamburguesa, grid 3→1 columna, etc.
    480px: moviles chicos (iPhone SE, Android 4"). El
      container padding baja a 14px, footer 1 columna.
  Probe 600px como breakpoint unico (demasiado abrupto,
  el salto de escritorio a movil era muy grande) y
  1024px (el menu hamburguesa aparecia en tablets
  horizontal innecesariamente).

  TRAMPA COMUN #1: top:68px en .header-nav debe coincidir
  con .header-interior height en header.css. Si cambias
  uno sin el otro, el menu movil sale en la posicion
  equivocada. Me paso dos veces.
  TRAMPA COMUN #2: translateY(-120%) en vez de -100%
  porque con -100% el padding de 16px del menu se
  alcanzaba a ver asomando por abajo del header.
  Probe -110% y aun se veia. -120% lo oculta completamente.
  ============================================================ */

/* ============================================================
   TABLET (max-width: 992px)
   ============================================================ */

@media (max-width: 992px) {
  .banner h1 {
    font-size: 26px;
  }

  .detalle-grid {
    grid-template-columns: 1fr;
  }

  .fila-formulario {
    grid-template-columns: 1fr;
  }

  .encabezado-pagina h1 {
    font-size: 24px;
  }
}

/* ============================================================
   MOVIL (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  /*
    Menu hamburguesa: solo visible en movil.
    Los botones de autenticacion (.header-acciones .btn)
    se ocultan y aparecen dentro del menu como enlaces.
    Esto es intencional: en movil el espacio del header
    es limitado y los botones ocuparian demasiado espacio.
  */
  .menu-toggle {
    display: flex;
  }

  /*
    Navegacion -> panel desplegable fijo.
    Use translateY(-120%) en vez de display:none para
    poder animar la transicion con CSS. La opacidad
    refuerza el efecto. El -120% (vs -100%) es por los
    16px de padding: si usara -100%, el padding se
    alcanzaba a ver asomando.

    IMPORTANTE: top:68px debe coincidir con la altura
    del header. Si cambias header.css, cambia esto.
  */
  .header-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 16px;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-120%);
    opacity: 0;
    transition: 0.3s;
    z-index: 99;
  }

  .header-nav.abierto {
    transform: translateY(0);
    opacity: 1;
  }

  .header-nav a {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
  }

  .header-nav a.activo::after {
    display: none;
  }

  /* Banner mas compacto en movil */
  .banner {
    padding: 50px 0;
  }

  .banner h1 {
    font-size: 22px;
  }

  .banner .botones {
    flex-direction: column;
    align-items: center;
  }

  .banner .btn {
    width: 100%;
    max-width: 250px;
  }

  .banner-buscador {
    flex-direction: column;
    background: none;
    backdrop-filter: none;
    padding: 0;
  }

  .banner-buscador input,
  .banner-buscador select {
    width: 100%;
  }

  /* Buscador: input y boton apilados */
  .buscador {
    flex-direction: column;
  }

  .grid-vacantes {
    grid-template-columns: 1fr;
  }

  /* Estadisticas: 2 columnas */
  .estadisticas {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: -20px;
  }

  .tarjeta-estadistica {
    padding: 18px;
  }

  .tarjeta-estadistica .numero {
    font-size: 24px;
  }

  /* Perfil: centrado en movil */
  .perfil-encabezado {
    flex-direction: column;
    text-align: center;
  }

  .perfil-acciones {
    justify-content: center;
  }

  /* Secciones mas compactas */
  .section {
    padding: 35px 0;
  }

  .contenedor-formulario {
    padding: 24px 18px;
  }

  /* Filtros apilados */
  .filtros {
    flex-direction: column;
  }

  .filtros select,
  .filtros input {
    width: 100%;
  }

  /* Oculta botones de autenticacion en el header en movil
     (se muestran dentro del menu desplegable) */
  .header-acciones .btn {
    display: none;
  }

  /* Grid de beneficios a 1 columna */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .icono-card {
    width: 52px;
    height: 52px;
    line-height: 52px;
    font-size: 26px;
  }

  .btn-cta {
    padding: 14px 28px;
    font-size: 15px;
  }

  .texto-terminos {
    padding: 20px;
  }

  /*
    Tap targets: Google recomienda minimo 44x44px para
    interaccion tactil. Los botones del header ya cumplen,
    pero los iconos sociales del footer son 36px — los
    agrandamos en movil para evitar frustracion al tocar.
  */
  .footer-social a {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Enlaces del nav movil con area tactil mas generosa */
  .header-nav a {
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Inputs del buscador con altura tactil suficiente */
  .banner-buscador input,
  .banner-buscador select {
    padding: 14px 16px;
    font-size: 16px;
  }

  .banner-buscador .btn {
    padding: 14px 24px;
    font-size: 16px;
  }

  /* Inputs de formulario mas comodos en movil */
  .control-formulario {
    padding: 12px 14px;
    font-size: 16px;
  }
}

/* ============================================================
   MOVIL PEQUENO (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  .estadisticas {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 14px;
  }

  /*
    Oculta el texto del logo en movil muy pequeno
    para ahorrar espacio. Solo se ve el icono.
  */
  .header-logo span:not(.logo-icono) {
    display: none;
  }
}