:root {
    --color-azul: #003366;
    --color-turquesa: #00a79d;
    --color-dorado: #f0e68c;
    --color-gris: #f4f4f4;
    --color-blanco: #ffffff;
    --color-negro: #333;
    --color-teal: #00a79d;
    --color-teal-light: #e0f2f1;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    --transition: all 0.3s ease;
    --border-radius: 0.5rem;

  /* Fallbacks para variables no definidas en tu base */
  --radius-md: var(--border-radius, 0.5rem);
  --radius-lg: calc(var(--border-radius, 0.5rem) + 0.25rem);
  --color-texto: var(--color-negro, #333);
  --color-gris-medio: #e6e6e6;
  --color-turquesa-light: rgba(0, 167, 157, 0.18);
    }
    
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    html {
    scroll-behavior: smooth;
    font-size: 16px;
    }
    
    body {
        font-family:'Times New Roman';
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        color: var(--color-azul);
        background-color: var(--color-blanco);
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }
    
    .body--narrow { 
        max-width: 46ch; 
        margin-inline: auto; 
    }
    
/* Typography */
h1, h2, h3, h4 {
    font-weight: 800;
    color: var(--color-blue);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.015em;
}

.eyebrow {
    color: var(--color-teal);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    display: block;
}
    
/* Layout */
.container {
    width: 100%;
    max-width: min(1280px, 90%);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Careers (mejora de layout y responsividad) ===== */
.careers {
  /*background: linear-gradient(180deg, var(--color-teal-light), var(--color-blanco));*/
  padding: clamp(1.5rem, 2vw, 1.5rem) 0;
}

.careers .parent {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* texto más ancho que la imagen */
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  background: var(--color-blanco);
  border-radius: var(--border-radius);
  /*box-shadow: var(--shadow-lg);*/
  padding: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}

/* acento decorativo */
/*.careers .parent::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -20%;
  width: clamp(220px, 35vw, 520px);
  height: clamp(220px, 35vw, 520px);
  background: radial-gradient(closest-side, var(--color-turquesa) 0%, rgba(0,167,157,0.15) 55%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}*/

/* columnas originales, respetando las clases existentes */
.careers .div1 {
  grid-column: 1 / 2;
}

.careers .div2 {
  grid-column: 2 / 3;
  display: grid;
  place-items: center;
  position: relative;
}

/* tipografía y color solo dentro de la sección (no tocamos globales) */
.careers .div1 h1 {
  color: var(--color-azul);
  letter-spacing: -0.015em;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
  font-size: clamp(2rem, 5vw, 3rem);
}

.careers .div1 p {
  color: var(--color-negro);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.75;
  max-width: 65ch;
}

/* si hay enlaces dentro del párrafo, que se vean como CTA sin cambiar el texto */
.careers .div1 p a {
  color: var(--color-turquesa);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}
.careers .div1 p a:hover,
.careers .div1 p a:focus-visible {
  color: var(--color-azul);
  outline: none;
}

/* contenedor de imagen con proporción y suave animación */
.careers .div2 img {
  width: min(70%, 420px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
  transition: transform .4s ease;
  will-change: transform;
}
.careers .div2:hover img {
  transform: translateY(-4px) scale(1.02);
}

/* bordes sutiles y separación interior */
.careers .parent {
  border: 1px solid rgba(0,0,0,0.06);
}

/* ===== Responsividad ===== */
@media (max-width: 992px) {
  .careers .parent {
    grid-template-columns: 1fr;
    padding: clamp(1rem, 3vw, 1.5rem);
  }
  .careers .div1,
  .careers .div2 {
    grid-column: auto;
  }
  /* opción: mostrar la imagen abajo en tablet */
  .careers .div2 { order: 2; }
  .careers .div1 { order: 1; }
}

@media (max-width: 600px) {
  .careers {
    padding: 2rem 0;
  }
  .careers .parent {
    border-radius: calc(var(--border-radius) + 0.25rem);
    box-shadow: var(--shadow-md);
  }
  .careers .div2 img {
    width: min(78%, 360px);
  }
}

/* ===== Preferencias de usuario ===== */
@media (prefers-reduced-motion: reduce) {
  .careers .div2 img {
    transition: none;
  }
}

/* Contenedor principal con contraste suave y sombra */
.contact-section{
  background:
    radial-gradient(1200px 600px at 120% -10%, rgba(0,167,157,0.08), transparent 60%),
    linear-gradient(180deg, var(--color-gris) 0%, var(--color-blanco) 100%);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Grid flexible: 1col en móvil, 2col en desktop, 60/40 */
.contact-section .parent{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 992px){
  .contact-section .parent{
    grid-template-columns: 60% 40%;
  }
}

/* Panel del formulario */
.form-container{
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--color-blanco);
}

/* Cabecera del formulario */
.form-header{ margin-bottom: 1.25rem; }
.form-header h2{
  color: var(--color-azul);
  margin-bottom: .35rem;
  letter-spacing: -0.01em;
}
.form-header p{ color: var(--color-texto); }

/* Campos */
.form-group{ margin-bottom: 1rem; position: relative; }
.form-label{
  display: block;
  margin-bottom: .5rem;
  font-weight: 700;
  color: var(--color-azul);
  font-size: .95rem;
}

.form-input{
  width: 100%;
  padding: .9rem 1rem;
  border: 2px solid var(--color-gris-medio);
  border-radius: var(--radius-md);
  background: var(--color-blanco);
  font: inherit;
  font-size: 1rem;
  color: var(--color-texto);
  transition: var(--transition);
}

.form-input::placeholder{ opacity: .6; }

.form-input:focus{
  outline: none;
  border-color: var(--color-turquesa);
  box-shadow: 0 0 0 4px var(--color-turquesa-light);
}

textarea.form-input{ min-height: 132px; resize: vertical; }

/* Estados de error */
.form-input.error{ border-color: #e53e3e; }
.error-message{
  color: #e53e3e;
  font-size: .85rem;
  margin-top: .35rem;
  display: none;
}
.form-input.error + .error-message{ display: block; }

/* Botón (usa tu paleta) */
.btn.contact-btn{
  appearance: none;
  border: none;
  border-radius: calc(var(--radius-md) + .125rem);
  padding: .9rem 1.25rem;
  background: linear-gradient(180deg, var(--color-turquesa), #07988f);
  color: var(--color-blanco);
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.btn.contact-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn.contact-btn:active{ transform: translateY(0); }

/* Aviso de privacidad */
.privacy-text{
  font-size: .95rem;
  color: var(--color-texto);
  margin-top: 1rem;
  line-height: 1.6;
}
.privacy-text a{
  color: var(--color-turquesa);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}
.privacy-text a:hover{ color: var(--color-azul); }

/* Estado éxito */
.form-success{
  display: none;
  text-align: center;
  padding: 1.25rem;
  background: var(--color-teal-light);
  border-radius: var(--radius-md);
  margin-top: 1rem;
}
.form-success.visible{ display: block; }
.success-icon{
  font-size: 2.25rem;
  color: var(--color-turquesa);
  margin-bottom: .5rem;
}

/* Panel lateral de información */
.info-container{
  background:
    radial-gradient(700px 320px at -20% 0%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, var(--color-azul) 0%, #00264d 100%);
  color: var(--color-blanco);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.info-container::after{
  /* acento decorativo sutil */
  content:"";
  position:absolute;
  inset:auto -10% -15% auto;
  width:min(55%, 380px);
  height:220px;
  background: radial-gradient(closest-side, rgba(240,230,140,.25), transparent 70%);
  filter: blur(18px);
  z-index:-1;
}

.info-title{ color: var(--color-blanco); margin-bottom: 1rem; }
.contact-info{ margin-bottom: 1.25rem; }

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom: 1rem;
}
.contact-icon{
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--color-dorado);
  flex-shrink:0;
  font-size: 14px;
}

.contact-details{ line-height: 1.55; }

/* Redes sociales */
.social-links{ display:flex; gap:.75rem; margin-top:.75rem; }
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.12);
  color: var(--color-blanco);
  font-size: 18px;
  transition: var(--transition);
  outline-offset: 2px;
}
.social-link:hover{ background: var(--color-turquesa); transform: translateY(-3px); }
.social-link:focus-visible{ outline: 2px solid var(--color-dorado); }

/* Responsividad fina */
@media (max-width: 992px){
  .contact-section{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
  .info-container{ order: 2; border-top: 1px solid rgba(255,255,255,.08); }
  .form-container{ order: 1; }
}

@media (max-width: 480px){
  .btn.contact-btn{ width: 100%; }
}

/* Accesibilidad / preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .btn.contact-btn, .social-link{ transition: none; }
}

/* Sección en construcción */
section.construction {
  /* opcional: espacio y fondo */
  padding: clamp(2rem, 6vw, 4rem) 0;
  background: var(--color-blanco);
}

/* Contenedor principal */
section.construction > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Figura/banner */
section.construction figure.banner-figure {
  margin: 0 auto;
  max-width: 1200px;
  border-radius: var(--border-radius-lg, calc(var(--border-radius, 0.5rem) + 0.25rem));
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  /* Mantener relación y evitar “salto” de layout */
  aspect-ratio: 1200 / 800;
}

/* Imagen del banner */
section.construction figure.banner-figure img.banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenido de texto */
section.construction .content {
  max-width: 60ch;
  margin: 0 auto;
  text-align: left; /* o center si lo prefieres */
}

/* Título */
section.construction .content h1.title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--color-azul);
  margin-bottom: 1rem;
  line-height: 1.1;
}

/* Subtítulo */
section.construction .content p.subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.9;
}