/* ============================================================
   CONTACTO — estilos propios (.cto-*)
   Se apoya en main.css y en divisiones.css (hero, .div-kicker, .div-em).
   ============================================================ */

/* divisiones.css justifica el lead del hero; el de aquí es una línea corta. */
.page-cto .div-hero__lead {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ── Formulario (claro) ──
   UNA columna centrada: dos columnas de contenido desigual dejaban siempre un
   vacío bajo la más corta. Aquí el formulario manda y los datos van debajo. */
.cto-main {
  position: relative;
  background: #f5f3ef;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* 1600px: el ancho del sitio (el resto de secciones lo usa). */
.cto-main__inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* Encabezado con el patrón del sitio: título serif izq · párrafo de apoyo der. */
.cto-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.cto-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: #12172a;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cto-main .div-em { color: #c98a1e; }
/* Párrafo de apoyo con la comilla de cita: patrón unificado del sitio. */
.cto-text {
  position: relative;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  color: #4a5470;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  text-wrap: pretty;
  /* Justificado como el resto de párrafos de apoyo del sitio. */
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.cto-text::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: #c98a1e;
}

/* ── El formulario ──
   Sin card: sobre el hueso, separado por una línea. Los campos son la única
   pieza blanca, así que la vista va directa a ellos. */
.cto-form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.15rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* Honeypot: invisible para humanos, rellenable por bots. NO usar display:none
   (algunos bots lo detectan y lo saltan). */
.cto-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 2 col: los 4 campos cortos (izq, en pares) · el mensaje (der), misma altura */
.cto-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.cto-form__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.15rem);
  align-content: start;
}
.cto-field { display: flex; flex-direction: column; gap: 0.45rem; }
/* El mensaje se estira a la altura de los 4 campos de al lado. */
.cto-field--msg textarea { flex: 1; }
.cto-field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7488;
}
.cto-field label span { color: #c98a1e; }
.cto-field input,
.cto-field textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18,23,42,0.12);
  color: #12172a;
  font-family: inherit;
  font-size: clamp(0.95rem, 1.05vw, 1rem);
  transition: box-shadow 0.3s var(--ease-out);
}
.cto-field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.cto-field input:focus,
.cto-field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #c98a1e, 0 0 0 4px rgba(201,138,30,0.12);
}
/* Solo marca en rojo tras intentar enviar (:invalid a secas regaña de entrada) */
.cto-form.is-validated .cto-field input:invalid,
.cto-form.is-validated .cto-field textarea:invalid {
  box-shadow: inset 0 0 0 2px #c0392b;
}

/* Botón y la vía alterna, en la misma línea */
.cto-form__foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.cto-form__alt {
  margin: 0;
  color: #6b7488;
  font-size: 0.9rem;
}
.cto-form__alt a {
  color: #12172a;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,138,30,0.5);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cto-form__alt a:hover { color: #c98a1e; border-color: #c98a1e; }
}

.cto-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border: 0;
  border-radius: 12px;
  background: #12172a;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cto-submit__arrow { width: 1.05em; height: 1.05em; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .cto-submit:hover { transform: translateY(-2px); background: #c98a1e; }
}
.cto-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
/* Mientras envía, la flecha late */
.is-sending .cto-submit__arrow { animation: cto-pulse 0.9s ease-in-out infinite; }
@keyframes cto-pulse { 50% { opacity: 0.35; transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .is-sending .cto-submit__arrow { animation: none; opacity: 0.5; }
}

.cto-msg {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.cto-msg:empty { display: none; }
.cto-msg--ok {
  padding: 0.9em 1.1em;
  border-radius: 12px;
  background: rgba(46,125,50,0.08);
  box-shadow: inset 0 0 0 1px rgba(46,125,50,0.28);
  color: #2e7d32;
}
.cto-msg--error {
  padding: 0.9em 1.1em;
  border-radius: 12px;
  background: rgba(192,57,43,0.07);
  box-shadow: inset 0 0 0 1px rgba(192,57,43,0.26);
  color: #c0392b;
}

/* ── Datos: franja de texto bajo el formulario ──
   Sin cards ni iconos: son un pie de referencia, no piezas de acción. */
.cto-datos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* los 3 datos + las redes, en fila */
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: clamp(2rem, 3.5vw, 2.5rem);
  border-top: 1px solid rgba(18,23,42,0.12);
}
.cto-dato dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a93a8;
  margin-bottom: 0.5rem;
}
.cto-dato dd {
  margin: 0;
  color: #12172a;
  font-size: 0.95rem;
  line-height: 1.6;
}
.cto-dato dd a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cto-dato dd a:hover { color: #c98a1e; }
}

.cto-redes { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Los SVG son los logos oficiales, ya vienen con su color: sin pastilla. */
.cto-red {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(18,23,42,0.05);
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cto-red img { width: 17px; height: 17px; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .cto-red:hover { transform: translateY(-3px); background: rgba(18,23,42,0.10); }
}

@media (max-width: 900px) {
  .cto-head { grid-template-columns: 1fr; align-items: start; }
  .cto-form__grid { grid-template-columns: 1fr; }
  .cto-datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cto-form__campos { grid-template-columns: 1fr; }
  .cto-datos { grid-template-columns: 1fr; }
  .cto-submit { width: 100%; justify-content: center; }
  .cto-form__foot { gap: 1rem; }
  .cto-form__alt { width: 100%; }
}

/* ── Mapa (oscuro, con aurora ámbar) ── */
.cto-mapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cto-mapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 20% 14%, rgba(240,164,66,0.18) 0%, transparent 64%),
    radial-gradient(40% 30% at 84% 12%, rgba(251,201,90,0.12) 0%, transparent 62%);
  filter: blur(28px);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (max-width: 768px) {
  /* Animar blur sobre área grande lagea en GPU móvil */
  .cto-mapa::before { filter: none; will-change: auto; transform: none; }
}
.cto-mapa__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.cto-mapa__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.cto-mapa__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.3em;
}
.cto-mapa .div-em { color: var(--dorado); }
.cto-mapa__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.5em;
  border-radius: 12px;
  background: var(--dorado);
  color: #12172a;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out);
}
.cto-mapa__btn svg { width: 1.05em; height: 1.05em; }
@media (hover: hover) and (pointer: fine) {
  .cto-mapa__btn:hover { transform: translateY(-2px); }
}
/* 2 col: foto (izq) · mapa (der), a la misma altura. */
.cto-mapa__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* dos oficinas: web = lado a lado */
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.cto-mapa__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  min-width: 0;   /* que la columna pueda encoger sin desbordar el grid */
}
.cto-mapa__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cto-mapa__col-rotulo {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-100);
}
/* 🚨 iOS/Safari: NO servía `aspect-ratio` ni `height:100%` sobre un grid item →
   el contenedor colapsaba a 0 y en iPhone NO se veía el mapa. Patrón que sí
   funciona (igual que OLAE en desarrollos): `position:relative` + **min-height
   REAL en px** + iframe `position:absolute; inset:0`. */
.cto-mapa__frame {
  position: relative;
  /* 🚨 `width:100%` EXPLÍCITO: sin él, Safari toma el ancho intrínseco del iframe
     (~300px) en vez del de la celda → en iPhone el mapa salía pequeño y pegado a
     la izquierda. */
  width: 100%;
  min-height: clamp(340px, 42vw, 520px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.7);
  background: #11151f;
}
.cto-mapa__frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;   /* gana al width del atributo HTML del embed */
  height: 100%;
  max-width: none;
  border: 0;
  display: block;
}

/* ── Móvil / iPhone: los dos mapas se APILAN (sin descuadre) ── */
@media (max-width: 900px) {
  .cto-mapa__grid { grid-template-columns: 1fr; }
  /* Altura propia en px (no aspect-ratio, ver nota de iOS arriba) */
  .cto-mapa__frame { min-height: clamp(320px, 70vw, 440px); }
}
@media (max-width: 560px) {
  .cto-field-row { grid-template-columns: 1fr; }
  .cto-submit { align-self: stretch; justify-content: center; }
  .cto-mapa__btn { width: 100%; justify-content: center; }
}

/* ===== TRABAJA CON NOSOTROS (RRHH) =====
   Vive al final de la sección CLARA (#f5f3ef) → tinta propia oscura, NUNCA
   tokens --ink-* (son para fondo oscuro y aquí serían invisibles).
   Panel blanco separado del fondo hueso: sin borde, solo sombra difusa —
   el patrón de cards del sitio. */
/* Bloque CENTRADO y simétrico: encabezado apilado arriba, los dos buzones del
   MISMO ancho debajo. Antes era space-between con botones de distinto ancho a la
   derecha → se veía desalineado. */
.cto-rrhh {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(18, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2rem);
}
.cto-rrhh__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 52ch;
}
.cto-rrhh__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b47b1e;
  margin: 0 0 0.7rem;
}
.cto-rrhh__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #12172a;
  margin: 0 0 0.8rem;
}
.cto-rrhh__title .div-em { color: #c98a1e; }
.cto-rrhh__text {
  margin: 0;
  color: #4a5470;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.65;
}
/* Dos buzones EN FILA, del mismo ancho (grid de 2 col iguales); en móvil apilan. */
.cto-rrhh__ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 40rem;
}
.cto-rrhh__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  border-radius: 999px;
  background: #12172a;
  border: 1px solid #12172a;
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.8rem, 1.15vw, 0.9rem);
  font-weight: 600;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.cto-rrhh__cta svg { width: 18px; height: 18px; flex-shrink: 0; }
/* El correo largo (selecciondepersonal@) no debe romper el botón: se corta con … */
.cto-rrhh__cta-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* El 2º buzón es alternativa, no compite con el principal: contorno. */
.cto-rrhh__cta--alt {
  background: transparent;
  border-color: rgba(18, 23, 42, 0.22);
  color: #12172a;
  font-weight: 500;
}
@media (hover: hover) {
  .cto-rrhh__cta:hover { background: #c98a1e; border-color: #c98a1e; color: #fff; transform: translateY(-2px); }
  .cto-rrhh__cta:hover .cto-rrhh__cta-txt { color: #fff; }
}

@media (max-width: 720px) {
  .cto-rrhh__ctas { grid-template-columns: 1fr; max-width: none; }
  .cto-rrhh__cta { width: 100%; }
}

/* ============================================================
   BOLSA DE TRABAJO — bloque de CV (archivo PDF o enlace)
   Vive en contacto.css porque bolsa-trabajo.php reutiliza el molde .cto-*.
   ============================================================ */
.cto-form__cv {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Separador "o" entre archivo y enlace */
.cto-cv-o {
  align-self: center;
  padding-bottom: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a92a8;
}
/* Botón-etiqueta del input file (el input real va oculto) */
.cto-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px dashed #c7cad4;
  border-radius: 12px;
  background: #fff;
  color: #4a5470;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cto-file:hover { border-color: #c98a1e; color: #12172a; }
.cto-file svg { width: 20px; height: 20px; flex: 0 0 auto; color: #c98a1e; }
.cto-file__txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cto-form__cv { grid-template-columns: 1fr; }
  .cto-cv-o { padding: 0.15rem 0; }
}