/* --- Landings --- */

@font-face{
  font-family: 'Buffalo';
  src:
   url("/static/fonts/buffalo/Buffalo_Regular.dac2b62e0eb7.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Gotham-Bold';
  src:
   url("/static/fonts/gotham/Gotham-Bold.c43129eb9489.woff") format('woff');
  font-weight: 400;              
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-navy:#0b4a75;
  --rule:#c6d6e6;
  --alt-bg:#F2F7FB;         /* fondo de la sección 2 y del separador */
}

/* Sección base */
.section{ padding: 72px 16px; }

/* HERO */
.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 16px 64px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  min-height: clamp(380px, 100vh, 1000px);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  
}
.hero > .container{ position:relative; max-width: 1200px; }

/* Título caligráfico + línea */
.hero-script{
  font-family: "Buffalo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw + .25rem, 4.5rem);
  line-height: 1.05;
  color: var(--brand-navy);
  margin: 0 auto 18px;
}

.hero-rule{
  display:block; width: clamp(220px, 55%, 760px); height:3px;
  background: var(--rule); border-radius: 2px;
  margin: 0 auto 28px;
}

.hero-lead{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw + .7rem, 1.5rem);
  line-height: 1.6; letter-spacing:.02em;
  color: var(--brand-navy);
  margin: 0 auto; max-width: 1200px;
}


.hero-media{
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  opacity: 0;                  /* estado inicial */
  transform: scale(1.02);      /* leve zoom inicial */
  will-change: transform, opacity;
}

/* Cuando entra, hace fade + arranca el Ken Burns */
.hero-media.is-inview{
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.2,.65,.2,1);
  animation: hero-kenburns 2s ease-out forwards; /* zoom lento */
}

/* Efecto Ken Burns */
@keyframes hero-kenburns{
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.04); }  /* ajusta a gusto (1.08–1.16) */
}


/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .hero-media{ opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Separador en onda */
.sep-wave{ line-height: 0; }
.sep-wave svg{ display:block; width:100%; height:80px; }
.sep-wave path{ fill: var(--alt-bg); }

/* Sección alternativa */
.section-alt{
  background: var(--alt-bg);
  padding: 80px 16px 96px;
}
.hero-rule--alt{ background: #d6e4f1; }

/* --- MISIÓN: layout con icono a la izquierda --- */
.mission{
  /* si la quieres con fondo alterno, descomenta: */
  /* background: var(--alt-bg); */
  padding-top: 72px; padding-bottom: 72px;
}

.mission-grid{
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
}

.mission-icon{
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* Si tu ícono no es circular y quieres redondearlo:
     border-radius: 50%; background: #fff; */
}

.mission-text{
  text-align: left;               /* alineado a la izquierda junto al ícono */
  margin: 0;                      /* ya hereda estilos de .hero-lead */
}

/* Responsive: apila icono y texto */
@media (max-width: 768px){
  .mission-grid{ grid-template-columns: 1fr; }
  .mission-icon{ justify-self: center; }
  .mission-text{ text-align: center; }
}


/* Responsive */
@media (max-width: 576px){
  .hero{ padding: 56px 14px 40px; }
  .section{ padding: 56px 14px; }
}

/* controla el tamaño del icono y, por ende, el ancho del hero-rule */
.section.mission { --icon-size: 160px; }            /* móvil */
@media (min-width: 992px) { .section.mission { --icon-size: 180px; } }  /* desktop */

.mission .heading-block{
  display: flex;
  flex-direction: column;
  align-items: center;       /* centra título, regla e imagen en el mismo eje */
}

.mission .mission-icon{
  width: var(--icon-size);
  max-width: 100%;
  height: auto;
}

.mission .hero-rule{
  width: 250px;   /* MISMO ancho que la imagen */
  margin: 0 auto .75rem;     /* centrada y pegada al título */
  display: block;
}


/* ===== VALORES ===== */
.values{
  padding-top: 72px;
  padding-bottom: 80px;
  /* Si quieres fondo alterno, descomenta: */
  /* background: var(--alt-bg); */
}

/* Grid responsivo 3→2→1 */
.values-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  list-style: none;
  margin: 36px auto 0;
  padding: 0;
  max-width: 1200px;
}

.value-card{
  text-align: center;
}

/* Círculo contenedor del ícono */
.value-icon{
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border: 8px solid var(--brand-navy);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.value-icon img{
  width: 68%;
  height: 68%;
  object-fit: contain;
}

/* Título y texto como en el mockup (itálica, azul) */
.value-title{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.8rem);
  color: var(--brand-navy);
  margin: 12px 0 8px;
}
.value-text{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.9;
  color: var(--brand-navy);
  max-width: 34ch;             /* ancho similar al mockup */
  margin: 0 auto;
}

/* Breakpoints */
@media (max-width: 992px){
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{      /* o 'contents' si lo prefieres */
    grid-template-columns: none !important;
  }
}
@media (max-width: 576px){
  .values-grid{ grid-template-columns: 1fr; }
}

:root{
  --card-bg: #F3F7F9;
  --text-muted: #7A8A98;
}

/* ===== NUESTRO EQUIPO ===== */
.team{ padding-top: 72px; padding-bottom: 80px; }

/* 2 columnas, con buen espacio y responsive */
.team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 48px);
  list-style: none;
  padding: 0;
  margin: 36px auto 0;
  max-width: 1200px;
}

/* Tarjeta */
.team-card{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
  padding: clamp(16px, 2.6vw, 28px);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 12px 30px rgba(13,61,97,0.04);
}

.team-grid > .team-card:last-child:nth-child(odd){
  grid-column: 1 / -1;      /* ocupa ambas columnas */
  justify-self: center;     /* se centra dentro del grid */
  max-width: 560px;         /* evita que se estire a todo el ancho */
  width: 100%;
}

/* Avatar (puede ser foto, SVG o PNG) */
.team-avatar{
  width: clamp(56px, 8vw, 88px);
  height: clamp(56px, 8vw, 88px);
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
}

/* Info */
.team-info{ min-width: 0; }

.team-name{
  font-family: "Gotham-Bold", "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--brand-navy);
  font-size: clamp(1.1rem, 1.3vw, 1.35rem);
  margin: 0 0 4px;
}

.team-role{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.4;
}

.team-email{
  font-family: "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-block;
  text-decoration: none;
  color: inherit;      /* hereda el color del texto */
  cursor: default;
}
.team-email:hover{ text-decoration: none; }

@media (min-width: 992px) and (max-width: 1399.98px){
  .hero-lead, .mission-text, .value-text{ 
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    max-width: 70ch; 
    margin-inline: auto;
  }

  .mission .mission-icon{
    max-width: clamp(150px, 6vw, 84px);
  }

  .value-icon{
    max-width: clamp(150px, 6vw, 84px);
    max-height: clamp(150px, 6vw, 84px);
  }

  .section{ padding-block: 3.25rem; }
}

/* ===== Reveal base ===== */
:root{
  --reveal-distance: 24px;
  --reveal-dur: .7s;
  --reveal-ease: cubic-bezier(.2,.65,.2,1);
}

.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease),
              filter var(--reveal-dur) var(--reveal-ease);
  filter: blur(0);
  will-change: opacity, transform, filter;
  transition-delay: var(--d, 0ms); /* la define el JS para el stagger */
}

/* Variantes direccionales */
.reveal.reveal-left  { transform: translateX(calc(-1 * var(--reveal-distance))); }
.reveal.reveal-right { transform: translateX(var(--reveal-distance)); }
.reveal.reveal-zoom  { transform: scale(.98); }

/* Estado visible */
.reveal.is-inview{ opacity: 1; transform: none; filter: none; }

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Bloquea selección y callout táctil SOLO en la sección */
#team-section, 
#team-section * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: evita “Guardar imagen”, etc. */
  caret-color: transparent;     /* oculta el cursor de texto */
}

/* Evita arrastre de imágenes */
#team-section img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Tamaño del icono junto al título (ajústalo a tu gusto) */
.heading-icon {
  width: 146px;   /* 72–96px suele verse bien */
  height: auto;
}

/* (Opcional) si el título es muy grande, alinea mejor verticalmente */
.heading-inline {
  line-height: 1; /* evita “saltos” con fuentes script grandes */
}