/* ==================================================================
   LideraT - Contacto (laboratorio) /contactus-lab

   La pagina no es un formulario para todos: es un reparto. Tres puertas
   de foto, cada una al sitio donde se resuelve (vacantes, constructor de
   propuestas de Empresas), y un mensaje corto para lo que no encaja.
   Mismo mundo que Empresas: sus tokens, sus fotos tenidas de marino, sus
   18px de esquina. Todo bajo .lc.
   ================================================================== */

.lc {
  --navy: #003049;
  --red: #C1121F;
  --garnet: #780000;
  --blue: #669BBC;
  --cream: #fbf0d8;
  --paper: #fffaf0;
  --navy-2: color-mix(in srgb, var(--navy) 76%, var(--cream));
  --cream-2: color-mix(in srgb, var(--cream) 82%, var(--navy));
  --line: color-mix(in srgb, var(--navy) 14%, transparent);
  --line-cream: color-mix(in srgb, var(--cream) 24%, transparent);
  --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --seccion: clamp(var(--s-7), 7vw, 6rem);
  --gutter: clamp(1.375rem, 5vw, 4.5rem);
  --caja: 72rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --f-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-text: 'Quicksand', 'Trebuchet MS', sans-serif;
  background: var(--cream);
}
.lc > section { color: var(--navy); font-family: var(--f-text); font-size: 1rem; line-height: 1.6; }
.lc > section.lc-hero { color: var(--cream); }
.lc ::selection { background: var(--red); color: var(--cream); }
.lc :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.lc-hero :focus-visible { outline-color: var(--cream); }
.lc-caja { width: min(var(--caja), 100% - 2 * var(--gutter)); margin-inline: auto; }
.lc p { margin: 0; text-wrap: pretty; }
.lc :is(h1, h2, h3) { margin: 0; font-family: var(--f-disp); text-wrap: balance; }
.lc :is(h1, h2, h3) span { font-family: inherit; font-weight: inherit; }
#wrap.lc a:not([class]) { color: inherit; }

/* ---------- Portada: las tres puertas ---------- */
.lc-hero { background: var(--navy); padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.lc-hero__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s-4) clamp(var(--s-6), 5vw, var(--s-8));
  align-items: end;
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-7));
}
.lc .lc-hero__titulo {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--cream);
}
.lc-hero__entrada { max-width: 40ch; color: var(--cream-2); font-size: 1.0625rem; padding-bottom: .35rem; }

.lc-puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
#wrap.lc a.lc-puerta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(24rem, 36vw, 30rem);
  overflow: hidden;
  border-radius: 18px;
  background: var(--navy);
  color: var(--cream);
  text-decoration: none;
  isolation: isolate;
}
.lc-puerta__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85);
  transition: scale .8s var(--ease), filter .6s var(--ease);
}
#wrap.lc a.lc-puerta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 8%, transparent) 12%, color-mix(in srgb, var(--navy) 72%, transparent) 46%, color-mix(in srgb, var(--navy) 96%, transparent) 72%);
  transition: opacity .5s var(--ease);
}
.lc-puerta__cuerpo { display: grid; gap: var(--s-3); padding: clamp(var(--s-5), 2.4vw, var(--s-6)); }
.lc-puerta__quien {
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.125rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 900;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
  text-wrap: balance;
}
.lc-puerta__texto { color: var(--cream-2); font-size: .9688rem; line-height: 1.5; max-width: 34ch; }
.lc-puerta__accion {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: var(--s-2);
  padding: .7rem 1.15rem .7rem 1.3rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--cream);
  font-weight: 700;
  font-size: .9375rem;
  transition: background-color .25s var(--ease);
}
.lc-puerta__accion svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
#wrap.lc a.lc-puerta:hover .lc-puerta__foto, #wrap.lc a.lc-puerta:focus-visible .lc-puerta__foto { scale: 1.05; filter: saturate(1); }
#wrap.lc a.lc-puerta:hover .lc-puerta__accion, #wrap.lc a.lc-puerta:focus-visible .lc-puerta__accion { background: var(--garnet); }
#wrap.lc a.lc-puerta:hover .lc-puerta__accion svg { transform: translateX(3px); }
#wrap.lc a.lc-puerta:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.lc-hero__aviso { margin-top: var(--s-6); color: var(--cream-2); font-size: .9688rem; }
#wrap.lc a.lc-hero__enlace { color: var(--cream); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cream) 45%, transparent); text-underline-offset: .22em; }
#wrap.lc a.lc-hero__enlace:hover { text-decoration-color: var(--cream); }

/* Cada foto, encuadrada en la gente y no en la pantalla de detras. */
.lc-puerta:nth-child(1) .lc-puerta__foto { object-position: center 60%; }
.lc-puerta:nth-child(2) .lc-puerta__foto { object-position: center 78%; }
.lc-puerta:nth-child(3) .lc-puerta__foto { object-position: center 40%; }

/* ---------- ¿Es otra cosa? ---------- */
.lc-otra { padding-block: var(--seccion); }
.lc-otra__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-6) clamp(var(--s-6), 6vw, 5.5rem); align-items: start; }
.lc-otra__texto { display: grid; gap: var(--s-4); }
.lc .lc-otra__titulo {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 900;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
}
.lc-otra__entrada { color: var(--navy-2); max-width: 40ch; }

.lc-vias { margin: var(--s-3) 0 0; display: grid; border-top: 1px solid var(--line); }
.lc-via { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .15rem var(--s-4); padding: .85rem 0; border-bottom: 1px solid var(--line); }
.lc-via dt { font-weight: 700; color: var(--navy); font-size: .9375rem; }
.lc-via dd { margin: 0; color: var(--navy-2); font-size: .9375rem; line-height: 1.5; }
#wrap.lc a.lc-via__enlace { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

.lc-formulario {
  display: grid;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 3.5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 48, 73, .06), 0 24px 50px -34px rgba(0, 48, 73, .45);
}
.lc-pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.lc-campo { display: grid; gap: .45rem; margin: 0; }
.lc .lc-campo__etiqueta { font-weight: 700; font-size: .9375rem; color: var(--navy); width: auto !important; padding: 0; }
.lc .s_website_form_mark { color: var(--red); }
.lc .lc-formulario :is(.form-control) {
  min-height: 3rem;
  padding: .7rem .95rem;
  border: 1.5px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 12px;
  background-color: #fff;
  color: var(--navy);
  caret-color: var(--red);
  font-family: var(--f-text);
  font-size: 1rem;
  box-shadow: none;
  transition: border-color .2s ease;
}
.lc .lc-formulario textarea.form-control { min-height: 8.5rem; resize: vertical; }
.lc .lc-formulario .form-control::placeholder { color: color-mix(in srgb, var(--navy) 50%, transparent); }
.lc .lc-formulario .form-control:focus { border-color: var(--navy); outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 0; }
.lc .lc-formulario .is-invalid { border-color: var(--red) !important; }

.lc-enviar { display: grid; gap: var(--s-3); justify-items: start; }
#wrap.lc a.lc-enviar__boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
#wrap.lc a.lc-enviar__boton:hover { background: var(--garnet); }
.lc-enviar__boton svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
#wrap.lc a.lc-enviar__boton:hover svg { transform: translateX(3px); }
.lc-enviar__nota { font-size: .8438rem; color: var(--navy-2); }
#wrap.lc a.lc-enviar__enlace { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.lc #s_website_form_result:empty { display: none; }

/* ---------- Tableta y movil ---------- */
@media (max-width: 61.99rem) {
  .lc-hero__cabeza, .lc-otra__rejilla { grid-template-columns: minmax(0, 1fr); }
  .lc-puertas { grid-template-columns: minmax(0, 1fr); }
  #wrap.lc a.lc-puerta { min-height: 19rem; }
}
@media (max-width: 47.99rem) {
  #wrap.lc a.lc-puerta { min-height: 17.5rem; border-radius: 16px; }
  .lc-pareja { grid-template-columns: minmax(0, 1fr); }
  .lc-via { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .lc-enviar { justify-items: stretch; }
  #wrap.lc a.lc-enviar__boton { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lc *, .lc *::before, .lc *::after { transition: none !important; }
}