/* ===========================================================
   styles.css  |  Sitio DGO (sin frameworks)
   -----------------------------------------------------------
   OBJETIVO:
   - Replicar la UI de referencia con CSS/JS locales.
   - Comentado por módulos para ubicar rápido cada parte.
   - Compatible con CSP estricta (sin inline ni eval).

   SECCIONES:
   01) Variables y resets
   02) Utilidades (helpers)
   03) Header / Navbar (logo + menú IZQ, título CENTRO, toggle DER)
   04) Hero / Portada (overlay + tipografía)
   05) Separadores SVG
   06) Secciones base
   07) Cards de servicios
   08) Requisitos
   09) Mapa (Ubicación)
   10) Footer
   11) Responsivo (breakpoints)
=========================================================== */


/* ===========================================================
   01) VARIABLES Y RESETS
   - Paleta, tipografía y tokens reutilizables.
=========================================================== */
:root{
  --bg: #ffffff;                 /* Fondo general */
  --text: #1f2937;               /* Gris oscuro para textos */
  --muted: #6b7280;              /* Gris medio para textos secundarios */

  /* Azul principal (igualado a la referencia) */
  --primary: #3b82f6;            /* rgb(59,130,246) */

  /* Azul profundo para sección "Ubicación" */
  --blue-800: #1e40af;

  /* Colores utilitarios para iconos en cards */
  --red: #ef4444;
  --green: #10b981;
    
  --menu-hover: #ffda3a; /* amarillo alto contraste */    

  --container: 1000px;           /* Ancho máx. del contenido */

  /* Familia tipográfica pedida (sin librerías externas) */
  --font-sans: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
               'Apple Color Emoji','Segoe UI Emoji';
}

/* Reset mínimo + suavizado de fuentes */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Imágenes fluidas */
img{ max-width:100%; height:auto; display:block; }


/* ===========================================================
   02) UTILIDADES (helpers)
=========================================================== */
.container{ max-width:var(--container); margin:auto; padding:0 1rem; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.rounded{ border-radius:12px; }
.shadow{ box-shadow:0 10px 20px rgba(0,0,0,.15); }
.justificado{ color: #353535; text-align: justify; font-size: 20px; margin: 10px 30px 10px 30px; line-height: 35px }


/* ===========================================================
   03) HEADER / NAVBAR
   - Desktop: Grid en 3 columnas (IZQ | CENTRO | DER)
   - Mobile:  Flex para alinear el botón hamburguesa a la derecha
   - Reglas para mantener el menú SIEMPRE en UNA sola línea
=========================================================== */

/* Header SIEMPRE visible (fijo) y transiciones suaves */
.site-header{
  position: fixed;        /* antes: absolute */
  top: 0; left: 0; right: 0;
  z-index: 200;           /* sobre todo */
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

/* Estado con scroll: fondo azul al 80% + ligera sombra */
.site-header.scrolled{
  background: rgba(59,130,246, .90); /* 80% transparencia del azul de marca */
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* Aire extra para el logo a la izquierda */
.site-header .container{ padding-left:2rem; }
@media (min-width:1200px){
  .site-header .container{ padding-left:3rem; }
}

/* GRID (desktop): 
   - auto 1fr auto → IZQ se ajusta a su contenido (logo+menú),
     centro ocupa el espacio para mantener el título centrado,
     DER se ajusta al botón. */
.nav{
  display:grid;
  grid-template-columns: auto 1fr auto; /* IZQ | CENTRO | DER */
  align-items:center;
  padding:.75rem 0;
  position:relative; /* base del dropdown móvil (absolute) */
}

/* Zonas principales */
.nav-left, .nav-center, .nav-right{
  display:flex; align-items:center;
}

/* IZQ: logo + menú (no permitir wraps) */
.nav-left{
  gap:1.25rem;
  justify-self:start;
  flex-wrap:nowrap;                 /* <- evita que el menú “salte” debajo del logo */
}

/* Logo: reservar ancho para que el menú no lo tape */
.brand{ display:inline-flex; align-items:center; min-width:120px; }
.brand img{ display:block; width:120px; height:auto; }

/* CENTRO: nombre de la empresa (centrado y sin cortes) */
.nav-center{ justify-self:center; }

.brand-title{
  color:#fff; text-decoration:none;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:14px; white-space:nowrap;  /* <- no partir líneas */
}

/* DER: botón hamburguesa */
.nav-right{ justify-self:end; }

/* Menú principal (desktop) */
.menu{
  display:flex;                     /* <- horizontal por defecto */
  flex-direction:row;
  flex-wrap:nowrap;                 /* <- una sola línea */
  gap:1.25rem;
  align-items:center;
  list-style:none;
  margin:0; padding:0;
}

/* Enlaces del menú */
.link{
  display:inline-flex; align-items:center;
  padding:.25rem .25rem;
  border-radius:8px;
  color:#fff; text-decoration:none;
  font-weight:700; letter-spacing:.02em;
  transition: color .15s ease, background .15s ease, text-decoration-color .15s ease, opacity .15s ease;
  white-space:nowrap;               /* <- no cortar palabras */
}

/* 3) HOVER/FOCUS en DESKTOP (menú sobre fondo azul) */
.link:hover,
.link:focus-visible{
  color: var(--menu-hover);           /* cambio de color muy visible */
  background: rgba(255,255,255,.14);  /* pastilla clara para remarcar */
  text-decoration: none;              /* quitamos subrayado para claridad */
  outline: none;
}


/* Botón hamburguesa (visible en móvil) + hover */
.nav-toggle{
  display:none;                     /* se muestra en móvil */
  background:none; border:0; padding:.25rem; color:#fff;
  border-radius:999px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible{
  background:rgba(99,99,99,.12);
  outline:none; transform:scale(1.05);
}
.nav .icon{ width:28px; height:28px; } /* tamaño del SVG */


/* ===========================================================
   04) HERO / PORTADA
   - Imagen de fondo con overlay azul
   - Títulos grandes con sombra para legibilidad
=========================================================== */
.hero{
  position:relative;
  min-height:66vh;
  display:grid; place-items:center;
  text-align:center; color:#fff;
  background:url("../img/house.jpg") center/cover no-repeat fixed;
}

.hero--bg-oficina{
  background: url("../img/team2.jpg") center / cover no-repeat fixed;
}
.hero--bg-bolsa{
  background: url("../img/bolsa.jpg") center / cover no-repeat fixed;
}

.hero--bg-aviso{
  background: url("../img/aviso.jpg") center / cover no-repeat fixed;
}


/* Overlay azul (tono de referencia) */
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(59,130,246,.86) 0%,
    rgba(59,130,246,.84) 45%,
    rgba(59,130,246,.78) 100%
  );
  z-index:0;
}

/* Contenido por encima del overlay */
.hero-content{ position:relative; padding-top:3.5rem; z-index:1; }

/* Tipografías del hero */
.hero h1{
    font-weight: 500;
    letter-spacing: -0.015em;                /* compresión sutil */
    font-size: clamp(26px, 6vw, 66px);       /* responsivo */
    line-height: 1.1;
    margin: .5rem 0;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);  /* mejora de contraste */
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
}
.hero p{
  font-weight:600;
  font-size:clamp(16px,2.2vw,20px);
  opacity:.95;
}


/* ===========================================================
   05) SEPARADORES SVG (triángulos)
=========================================================== */
/* Hero: el separador debe “pegarse” al borde inferior */
.hero .divider-bottom{
  position:absolute; left:0; right:0; bottom:-1px; line-height:0;
}
.divider-bottom svg, .divider-top svg{
  display:block; width:100%; height:90px;
}
.divider-bottom polygon{ fill:#fff; }  /* triángulo blanco inferior */
.divider-top   polygon{ fill:#fff; }  /* triángulo blanco superior */


/* ===========================================================
   06) SECCIONES BASE
=========================================================== */
.section{ padding:4rem 0; }
.section.alt{ background:#fff; }
.section.inverse{ background:var(--blue-800); color:#fff; }
.section.inverse p{ color:#e5e7eb; }

/* Título de sección similar a la referencia */
.section h2{
  font-weight:700;
  font-size:clamp(28px, 3vw, 36px);
}


/* ===========================================================
   07) CARDS DE SERVICIOS
=========================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr)); /* móvil: 1 col */
  gap:2rem;
  margin-top:2.25rem;
}

.card{
  background:#fff; border-radius:18px;
  padding:1.35rem 1.35rem 1.5rem;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  text-align:center; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.16); }
.card-title{ margin:.5rem 0 0; font-size:20px; }
.card-icon{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; margin:0 auto 1rem; color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.card .icon{ width:28px; height:28px; }
.bg-red{   background:var(--red); }
.bg-blue{  background:var(--primary); }
.bg-green{ background:var(--green); }

/* ===== Vacantes: cards centradas y más anchas ===== */
#modulo.container{
  max-width: 1000px;     /* antes 1000px por el .container global */
}

/* Vacantes centradas y más anchas */
.cards--vacantes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 560px)); /* más anchas */
  gap: 2.5rem;                      /* separación entre tarjetas */
  justify-content: center;          /* centra el conjunto */
  justify-items: center;            /* centra cada tarjeta en su pista */
  margin-inline: auto;              /* por si el contenedor crece más */
}

.cards--vacantes .card{
  width: 90%;
  max-width: 560px;                 /* coincide con el max del minmax */
  padding: 1.5rem;
}

.cards--vacantes .card-title{
  text-align: center;
  font-size: 1.5rem;                  /* título más notorio */
}

.cards--vacantes .muted{
  text-align:  left;                /* párrafo como en el ejemplo */
}

/* Contenedor del botón (reemplaza el inline style) */
.card-actions{ margin-top: 1.75rem; }

/* ===========================================================
   08) REQUISITOS (grid + bullets personalizados)
=========================================================== */
.grid-2{ display:grid; gap:2rem; align-items:center; }

.checklist{ padding-left:1.25rem; margin:0; }
.checklist li{ margin:.6rem 0; }

/* Puntos azules */
.checklist.dots{ list-style:none; padding-left:0; }
.checklist.dots li{ position:relative; padding-left:1.25rem; }
.checklist.dots li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:.55rem; height:.55rem; border-radius:999px;
  background:var(--primary);
  box-shadow:0 2px 6px rgba(37,99,235,.45);
}

.section.inverse{ position: relative; }
.section.inverse .divider-top{
  position: absolute;
  top: -1px; left: 0; right: 0;
  line-height: 0;
}

/* ===========================================================
   09) MAPA (Ubicación)
=========================================================== */
.map-card{
  margin-top:1rem; background:#fff; 
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}
.map-wrap{ border-radius:12px; overflow:hidden; }
.map-wrap iframe{ display:block; width:100%; height:450px; border:0; }


/* ===========================================================
   10) FOOTER
=========================================================== */
.footer{ background:#e5e7eb; padding:2rem 0; }
.footer small{ display:block; color:#4b5563; margin-top:.5rem; }



/* === Botón genérico para acciones === */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1rem;
  border-radius:8px; border:0; cursor:pointer;
  background: var(--primary); color:#fff;
  font-weight:700; letter-spacing:.02em;
  transition: background .15s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(.92); }
.btn--ghost{
  background: transparent; color: var(--text);
  border:1px solid rgba(0,0,0,.12);
}
.btn--ghost:hover{ background: rgba(0,0,0,.04); }

/* === HERO específico para Vacantes (ajusta imagen a tu gusto) === */
.hero--bg-vacantes{
  background: url("../img/team2.jpg") center / cover no-repeat fixed;
}

/* === Modales (accesibles y sin estilos inline) === */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:300; }
.modal.open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal__panel{
  position:relative; z-index:1; background:#fff; color:var(--text);
  width:min(90vw, 700px); max-height:85vh; overflow:auto;
  border-radius:16px; padding:1rem 1.25rem;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.modal__panel h3{ font-size:1.25rem; margin:.25rem 0 1rem; }
.modal__panel h4{ font-size:1rem; margin:1rem 0 .5rem; }
.modal__panel .checklist{ margin-left:1rem; }
.modal__panel .checklist li{ margin:.35rem 0; }
.modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.modal__close{
  position:absolute; top:.35rem; right:.5rem;
  background:transparent; border:0; font-size:1.5rem; line-height:1;
  cursor:pointer; color:#666;
}
.modal__close:hover{ color:#000; }

/* Evitar scroll del body cuando un modal está abierto */
body.modal-open{ overflow:hidden; }

/* Banner <noscript> sin inline style (para CSP) */
.noscript-banner{
  background:#111; color:#fff; padding:.75rem 1rem; text-align:center;
  font:14px/1.4 var(--font-sans);
}


/* ===========================================================
   11) RESPONSIVO (breakpoints)
   - ≤1024px: se oculta el título centrado y el nav pasa a Flex
              (hamburguesa pegada a la derecha).
   - ≤900px: menú se vuelve dropdown (absolute), enlaces oscuros.
   - ≥700px / ≥1024px: columnas para cards y grid-2.
=========================================================== */

/* Tablet/mediano: ocultar título y alinear hamburguesa a la derecha */
@media (max-width:1024px){
  .brand-title{ display:none; }
  .nav{ display:flex; align-items:center; justify-content:space-between; }
  .nav-right{ margin-left:auto; }
}

/* Móvil: menú desplegable */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }          /* mostrar hamburguesa */
  .menu{
    position:absolute; top:64px; right:1rem; left:1rem;
    flex-direction:column; background:#fff; border-radius:12px; padding:.5rem;
    box-shadow:0 10px 20px rgba(0,0,0,.12); display:none;
  }
  .menu.open{ display:flex; }                  /* lo controla JS */
  .link{ color:#111827; padding:.5rem .75rem; }/* enlaces sobre fondo blanco */
}

/* Reaseguro: en desktop mantener el menú a UNA sola línea y resetear props móviles */
@media (min-width:901px){
  .menu{
    position:static !important;
    display:flex !important;
    flex-direction:row; flex-wrap:nowrap;
    background:transparent; box-shadow:none; padding:0;
    left:auto; right:auto; top:auto;
  }
  .menu .link{ white-space:nowrap; color:#fff; padding:.25rem .25rem; }
  .brand-title{ white-space:nowrap; }
}

@media (max-width: 900px){
  .menu .link:hover,
  .menu .link:focus-visible{
    color: var(--primary);                 /* azul de marca */
    background: rgba(59,130,246,.12);      /* pastilla azul clara */
    border-radius: 8px;
  }
}
/* 2 columnas para grid y cards en tablet */
@media (min-width:700px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-2{ grid-template-columns:1fr 1fr; }
}

/* 4 columnas para cards en desktop */
@media (min-width:1024px){
  .cards{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* === Bloquear selección de texto en todo el sitio
      (excepto inputs/textarea/contenteditable) === */
html, body, body *:not(input):not(textarea):not([contenteditable]) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: sin menú contextual al mantener pulsado */
}