/* ==========================================================================
   GASCA MONTAJES — contacto.css
   Páginas /contacto y /rrhh. Depende de base.css, interior.css y
   formularios.css.
   ========================================================================== */

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto { position: relative; overflow: hidden; }
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 90% 20%, rgba(2, 116, 190, 0.1), transparent 68%);
  pointer-events: none;
}
.contacto > * { position: relative; }

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-8);
  align-items: start;
}
/* Los items de grid tienen min-width:auto, así que una columna no puede
   encoger por debajo del min-content de lo que lleva dentro. Sin esto, un
   texto sin puntos de corte (un email largo, un nombre de fichero con
   white-space:nowrap) ensancha la columna y desborda la página en móvil. */
.contacto__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--e-7); }
}

.contacto__intro p:not(.lead) { line-height: 1.75; }

/* --- Enlaces directos (tel / mailto) --- */
.contacto__directos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borde);
}

.directo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  transition: transform var(--t-media), border-color var(--t-media), background var(--t-media);
}
.directo:hover {
  transform: translateX(4px);
  border-color: var(--azul);
  background: var(--superficie-alta);
}

.directo__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  color: var(--azul);
  background: rgba(2, 116, 190, 0.1);
  border: 1px solid rgba(2, 116, 190, 0.24);
  border-radius: var(--r-md);
  transition: background var(--t-media), color var(--t-media), border-color var(--t-media);
}
.directo__icono svg { width: 22px; height: 22px; }
.directo:hover .directo__icono {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}

.directo__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.directo__etiqueta {
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.directo__valor {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--texto-fuerte);
  overflow-wrap: anywhere;
}

/* --- Instalaciones --- */
.instalaciones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
  margin-top: var(--e-7);
}
@media (max-width: 940px) { .instalaciones__grid { grid-template-columns: 1fr; } }

.sede {
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.sede:hover {
  transform: translateY(-6px);
  border-color: rgba(2, 116, 190, 0.4);
  box-shadow: var(--sombra-lg);
}

.sede__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.sede__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--azul);
  background: rgba(2, 116, 190, 0.1);
  border: 1px solid rgba(2, 116, 190, 0.24);
  border-radius: var(--r-md);
  transition: background var(--t-media), color var(--t-media), border-color var(--t-media);
}
.sede__icono svg { width: 28px; height: 28px; }
/* Mismo tamaño para los iconos por máscara. Sin esta línea el <span> no tiene
   dimensiones propias y no se ve nada. */
.sede__icono .icono-svg { width: 28px; height: 28px; }
.sede:hover .sede__icono {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}

/* «Consultar disponibilidad»: es un aviso, no un error, así que no lleva rojo.
   Mismo badge que los chips: --azul-suave con texto negro. */
.sede__aviso {
  padding: var(--e-1) var(--e-3);
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--azul-suave);
  border: 1px solid var(--azul-suave);
  border-radius: var(--r-full);
  text-align: center;
  line-height: 1.3;
}

.sede__titulo { font-size: var(--txt-lg); margin-bottom: var(--e-3); }
.sede__texto {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: 1.7;
  margin-bottom: var(--e-5);
}

.sede__datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  margin-bottom: var(--e-5);
  flex-grow: 1;
}
.sede__linea {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--txt-sm);
  color: var(--texto);
  line-height: 1.5;
}
.sede__linea a { transition: color var(--t-rapida); overflow-wrap: anywhere; }
.sede__linea a:hover { color: var(--azul); }
.sede__dato-icono {
  flex-shrink: 0;
  color: var(--texto-suave);
  margin-top: 1px;
}
.sede__dato-icono svg { width: 16px; height: 16px; }
.sede__linea--dir { color: var(--texto-fuerte); font-weight: 500; }

.sede__maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: auto;
  padding: var(--e-3) var(--e-4);
  min-height: 44px;
  font-size: var(--txt-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul);
  border: 1px solid rgba(2, 116, 190, 0.35);
  border-radius: var(--r-sm);
  transition: background var(--t-media), color var(--t-media), border-color var(--t-media);
}
.sede__maps svg { width: 16px; height: 16px; }
.sede__maps:hover {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}
.sede__maps-ext { font-size: 0.9em; }

.instalaciones__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  max-width: var(--ancho-texto);
  margin: var(--e-7) auto 0;
  padding: var(--e-4) var(--e-5);
  font-size: var(--txt-sm);
  color: var(--texto);
  line-height: 1.7;
  background: rgba(90, 154, 212, 0.06);
  border: 1px solid rgba(90, 154, 212, 0.25);
  border-radius: var(--r-md);
}
.instalaciones__nota span[aria-hidden] { color: var(--azul); flex-shrink: 0; }

/* ==========================================================================
   RRHH
   ========================================================================== */
.rrhh-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--e-8);
  align-items: start;
  margin-bottom: var(--e-9);
}
@media (max-width: 900px) {
  .rrhh-intro__grid { grid-template-columns: 1fr; gap: var(--e-5); margin-bottom: var(--e-7); }
}
.rrhh-intro__texto p + p { margin-top: var(--e-4); }
.rrhh-intro__texto p:not(.lead) { color: var(--texto-suave); line-height: 1.75; }

.ventajas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}
@media (max-width: 1000px) { .ventajas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ventajas__grid { grid-template-columns: 1fr; } }

.ventaja {
  position: relative;
  padding: var(--e-6) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-media), border-color var(--t-media), box-shadow var(--t-media);
}
.ventaja::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--deg-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-media);
}
.ventaja:hover {
  transform: translateY(-6px);
  border-color: rgba(2, 116, 190, 0.4);
  box-shadow: var(--sombra-lg);
}
.ventaja:hover::before { transform: scaleX(1); }

.ventaja__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--e-4);
  color: var(--azul);
  background: rgba(2, 116, 190, 0.1);
  border: 1px solid rgba(2, 116, 190, 0.24);
  border-radius: var(--r-md);
  transition: background var(--t-media), color var(--t-media), border-color var(--t-media);
}
.ventaja__icono svg { width: 28px; height: 28px; }
.ventaja:hover .ventaja__icono {
  background: var(--deg-azul);
  color: var(--blanco);
  border-color: transparent;
}

.ventaja__titulo { font-size: var(--txt-base); margin-bottom: var(--e-3); }
.ventaja__texto { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.7; }

/* --- Candidatura --- */
.candidatura__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--e-8);
  align-items: start;
}
/* Ver la nota de .contacto__grid: sin min-width:0 el nombre del CV
   (white-space:nowrap) ensancha la columna y desborda en móvil. */
.candidatura__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .candidatura__grid { grid-template-columns: 1fr; gap: var(--e-7); }
}

.candidatura__alternativa {
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.candidatura__alternativa a {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.candidatura__alternativa a:hover { color: var(--azul-claro); }