/* ==========================================================
   Agustina Cardozo — Traductora
   Base: frames de Figma de 1920px de ancho.
   Breakpoints: mobile hasta 599px · tablet 600–899px · desktop desde 900px
   ========================================================== */


/* ---------- Tipografía: Onest (Google Fonts), alojada en assets/fonts ---------- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* Black 900: solo para el signo × de la lista de servicios (Figma usa Onest Black ahí).
   El navegador descarga este archivo únicamente si aparece un × en ese peso. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-900-normal.woff2') format('woff2');
  unicode-range: U+00D7;
}


/* ---------- Tokens ---------- */
:root {
  /* Colores */
  --negro: #191716;
  --blanco: #FCF8F8;
  --gris: #D4D6D9;
  --amarillo: #FFDE5B;   /* color oculto: solo aparece al seleccionar texto */

  /* Pesos */
  --light: 300;
  --semibold: 600;

  /* Escala: --u = 1px de Figma (frame de 1920). Crece con la ventana hasta 1920px y ahí se frena.
     Para pasar una medida de Figma: calc(N * var(--u)) */
  --ancho: min(100vw, 1920px);
  --u: calc(var(--ancho) / 1920);

  /* Tamaños de texto en desktop: 80 · 40 · 24 · 16
     clamp(mínimo, escala Figma, máximo) — el mínimo evita que se achiquen de más en pantallas chicas */
  --fs-80: clamp(48px, calc(80 * var(--u)), 80px);
  --fs-40: clamp(28px, calc(40 * var(--u)), 40px);
  --fs-24: clamp(18px, calc(24 * var(--u)), 24px);
  --fs-16: 16px;   /* el texto chico no escala, para que siempre se lea */

  /* Márgenes */
  --margen: calc(40 * var(--u));                     /* margen del sitio: laterales, arriba y abajo (en Figma era 60) */
  --sobra: calc((100vw - var(--ancho)) / 2);         /* aire a cada lado en pantallas de más de 1920 */
  --lateral: calc(var(--sobra) + var(--margen));     /* padding lateral real de cada bloque */

  --alto-header: calc(var(--margen) + 128 * var(--u));   /* margen + fila del header (73) + aire debajo (55) */

  /* Subrayado (link activo, idioma, hora local, mail). En em: escala con cada tamaño de texto.
     A 24px: 2px de grosor y 3px de separación · a 40px: 3px y 5px */
  --subrayado-grosor: 0.07em;
  --subrayado-separacion: 0.125em;
}


/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p { margin: 0; font-weight: inherit; }

strong { font-weight: var(--semibold); }

a { color: inherit; text-decoration: none; }

/* Texto seleccionado: fondo amarillo y letra siempre negra */
::selection {
  background: var(--amarillo);
  color: var(--negro);
}

/* Texto solo para lectores de pantalla */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Subrayado del sistema (link activo, hora local, mail) */
.subrayado,
.header__nav a[aria-current="page"],
.header__idioma a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: var(--subrayado-grosor);
  text-underline-offset: var(--subrayado-separacion);
  text-decoration-skip-ink: none;
}


/* ==========================================================
   HEADER (compartido) — fijo arriba
   Figma: 1920 × 190 (con margen 60), fondo blanco
   ========================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--alto-header);
  padding: var(--margen) var(--lateral) 0;
  background: var(--blanco);
}

.header__fila {
  display: flex;
  align-items: center;
  height: calc(73 * var(--u));          /* alto del iso: todo se centra contra él */
}

/* Marca: iso + logotipo en dos líneas */
.header__marca {
  display: flex;
  align-items: flex-start;
  gap: calc(28 * var(--u));             /* iso → logotipo */
  flex-shrink: 0;
}
.header__iso      { width: calc(71 * var(--u)); }
.header__logotipo { width: calc(165 * var(--u)); }

/* Navegación */
.header__nav {
  display: flex;
  gap: calc(40 * var(--u));             /* entre links */
  margin-left: calc(82 * var(--u));     /* logotipo → Home */
}

.header__nav a,
.header__idioma a {
  font-size: var(--fs-24);
  line-height: 0.95;
}

/* Selector de idioma */
.header__idioma {
  display: flex;
  gap: calc(30 * var(--u));             /* EN → ES */
  margin-left: auto;
  margin-right: calc(53 * var(--u));    /* ES → botón */
}
.header__idioma a:not([aria-current]) { color: var(--gris); }


/* ---------- Botón (Get in touch, Send) ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  border-radius: 100px;
  background: var(--negro);
  color: var(--blanco);
  font-size: var(--fs-24);
  font-weight: var(--semibold);
  line-height: 0.95;
  white-space: nowrap;
}


/* ==========================================================
   FOOTER (compartido) — ocupa toda la pantalla y tapa al header
   Figma: 1920 × 1080, fondo negro
   ========================================================== */
.footer {
  position: relative;
  z-index: 20;                          /* por encima del header */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--margen) var(--lateral);
  background: var(--negro);
  color: var(--blanco);
}

.footer__logo { width: 100%; }           /* ocupa de margen a margen */

.footer__medio {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: calc(62 * var(--u));      /* logo → Let’s talk */
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin-top: calc(17 * var(--u));      /* Home queda 17 más abajo que Let’s talk */
  font-size: var(--fs-24);
  line-height: 1.3;
}

.footer__charla {
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1.3;
  white-space: nowrap;
}

/* Fila inferior: LinkedIn · crédito · copyright, apoyada en el margen inferior */
.footer__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: auto;
  font-size: var(--fs-16);
  line-height: 1.3;
}
.footer__linkedin { justify-self: start; }
.footer__linkedin img { width: calc(32 * var(--u)); min-width: 24px; }
.footer__credito { text-align: center; }
.footer__copy { justify-self: end; }


/* ==========================================================
   EN/HOME
   El hero ocupa la primera pantalla (Figma: 1920 × 1080, header incluido)
   ========================================================== */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* alto de la pantalla menos el header; nunca menos que la foto */
  min-height: max(calc(100svh - var(--alto-header)), calc(700 * var(--u)));
  padding: 0 var(--lateral) var(--margen);   /* el título queda a un margen del borde inferior */
}

.home-hero__titulo {
  position: relative;
  z-index: 1;
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1;
}

/* Foto: pegada al borde derecho, apoyada sobre la línea del borde inferior de la pantalla */
.home-hero__foto {
  position: absolute;
  right: var(--sobra);
  bottom: 1px;
  width: calc(710 * var(--u));          /* parte visible de Foto-2 (x 1210 → 1920) */
}

/* Línea bajo la foto: 639 de largo, alineada a la derecha */
.home-hero__linea {
  position: absolute;
  right: var(--sobra);
  bottom: 0;
  width: calc(639 * var(--u));
  height: 1px;
  background: var(--negro);
}


/* ==========================================================
   EN/SERVICES
   ========================================================== */
.servicios {
  position: relative;
  padding: calc(40 * var(--u)) var(--lateral) calc(370 * var(--u));
}

/* Título alineado a la derecha */
.servicios__titulo {
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1;
  text-align: right;
}

/* Lista de servicios en gris, separados por × */
.servicios__lista {
  margin-top: calc(390 * var(--u));
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1;
  color: var(--gris);
  white-space: nowrap;
}

/* No se puede seleccionar: al pasar el cursor, cada servicio se pinta de negro letra por letra */
.servicios__lista {
  -webkit-user-select: none;
  user-select: none;
}
.servicio__letra {
  transition: color 0.25s ease;         /* cuánto tarda cada letra en pintarse */
}
.servicio__letra.pintada { color: var(--negro); }

/* El × ocupa el ancho de 3 espacios y queda centrado (medidas en em: escalan con la lista) */
.servicios__x {
  position: relative;
  display: inline-block;
  width: 1.668em;                       /* = 3 espacios de la lista */
  margin-top: 0.475em;                  /* 19px debajo del tope de la línea */
  font-size: 0.5em;                     /* 40px */
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  vertical-align: top;
}

/* Áreas: Medical & Pharma · Legal & Sworn · The Humanities */
.servicios__areas {
  position: relative;
  margin-top: calc(187 * var(--u));
  padding-left: calc(305 * var(--u));   /* la flecha arranca en x=365 */
}

.area + .area { margin-top: calc(370 * var(--u)); }

.area__titulo {
  display: flex;
  align-items: flex-start;
  gap: calc(30 * var(--u));             /* flecha → título */
  font-size: var(--fs-40);
  font-weight: var(--semibold);
  line-height: 1;
}
.area__flecha {
  width: calc(22 * var(--u));
  margin-top: calc(11 * var(--u));
  flex-shrink: 0;
}

.area__desc {
  max-width: calc(580 * var(--u));
  margin-top: calc(20 * var(--u));
  font-size: var(--fs-24);
  line-height: 1.3;
}

.area__items {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin: calc(20 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-24);
  line-height: 1.3;
}

/* --w: ancho de la caja de texto en Figma (define dónde corta cada línea) */
.area__items li {
  position: relative;
  max-width: calc((52 + var(--w, 580)) * var(--u));
  padding-left: calc(52 * var(--u));
}
.area__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14 * var(--u));
  width: calc(20 * var(--u));
  height: calc(6 * var(--u));
  background: url('../assets/img/bullet.svg') no-repeat center / contain;
}

/* Horario: arranca a la altura de Medical & Pharma y, al scrollear, queda fijo
   abajo a la derecha (a un margen del borde) hasta que el footer lo tapa */
.servicios__carril {
  position: absolute;
  top: calc(-1 * var(--u));
  right: 0;
  bottom: calc(-370 * var(--u) - 100vh);   /* se extiende hasta el final del footer */
  width: calc(275 * var(--u));
  pointer-events: none;
}

.horario {
  position: sticky;
  /* 100vh − margen inferior − alto del bloque (4 líneas de 24 × 1.3 + 30 de separación) */
  top: calc(100vh - var(--margen) - 5.2 * var(--fs-24) - 30 * var(--u));
  font-size: var(--fs-24);
  line-height: 1.3;
  text-align: right;
  pointer-events: auto;
}
.horario__local { margin-top: calc(30 * var(--u)); }


/* ==========================================================
   EN/ABOUT
   ========================================================== */
.about {
  padding: calc(40 * var(--u)) var(--lateral) calc(340 * var(--u));
}

.about__titulo {
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1;
}

.about__subtitulo {
  margin-top: calc(20 * var(--u));
  font-size: var(--fs-40);
  font-weight: var(--semibold);
  line-height: 1;
}

/* Texto (x=213) y foto (x=1262): mismo margen a cada lado (~213 del borde) */
.about__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: calc(40 * var(--u));
  padding: 0 calc(152 * var(--u)) 0 calc(153 * var(--u));
}
.about__texto {
  max-width: calc(548 * var(--u));
  font-size: var(--fs-24);
  line-height: 1.3;
}
.about__foto {
  flex-shrink: 0;
  width: calc(446 * var(--u));
  margin-top: calc(164 * var(--u));     /* la foto arranca 164 más abajo que el texto */
}

/* Member of */
.about__miembro {
  margin-top: calc(64 * var(--u));
  padding-left: calc(153 * var(--u));
}
.about__miembro h2 {
  font-size: var(--fs-40);
  font-weight: var(--semibold);
  line-height: 1;
}
.about__logos {
  display: flex;
  align-items: center;
  gap: calc(182 * var(--u));            /* ATA → Colegio */
  margin-top: calc(40 * var(--u));
  padding-left: calc(305 * var(--u));   /* el logo de ATA arranca en x=518 */
}
.about__logos a  { display: block; }
.about__ata     { width: calc(123 * var(--u)); }
.about__colegio { width: calc(275 * var(--u)); }

/* Testimonios */
.about__testimonios-titulo {
  margin-top: calc(339 * var(--u));
  font-size: var(--fs-40);
  font-weight: var(--semibold);
  line-height: 1;
}

/* Visor: ocupa todo el ancho de la pantalla para detectar el cursor también sobre los márgenes */
.testimonios-visor {
  margin: calc(85 * var(--u)) calc(-1 * var(--lateral)) 0;
  padding: 0 var(--lateral);
}

/* Fila de tarjetas. La mueve js/main.js según el cursor.
   Sin JS queda como en Figma: arranca cortada a la izquierda (x=-244) */
.testimonios {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: calc(30 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(calc(-304 * var(--u)));
  will-change: transform;
}

/* Pantallas táctiles: sin cursor, la fila se desliza con el dedo */
@media (hover: none) {
  .testimonios-visor { overflow-x: auto; }
  .testimonios { transform: none; }
}

.testimonios > li {
  display: flex;
  flex: 0 0 calc(427 * var(--u));       /* ancho de cada tarjeta */
}

.testimonio {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(300 * var(--u));     /* si el texto no entra, la tarjeta crece */
  margin: 0;
  padding: calc(30 * var(--u));
  border-radius: 4px;
  background: var(--blanco);
  box-shadow:
    0 254px 71px 0 rgba(0, 0, 0, 0),
    0 162px 65px 0 rgba(0, 0, 0, 0.01),
    0 91px 55px 0 rgba(0, 0, 0, 0.02),
    0 41px 41px 0 rgba(0, 0, 0, 0.04),
    0 10px 22px 0 rgba(0, 0, 0, 0.05);
  font-size: var(--fs-16);
  line-height: 1.3;
  transition: box-shadow 0.5s ease;     /* duración del efecto de sombra */
}

/* Al pasar el cursor: la sombra se acentúa y la tarjeta parece despegarse */
.testimonio:hover {
  box-shadow:
    0 254px 71px 0 rgba(0, 0, 0, 0.01),
    0 162px 65px 0 rgba(0, 0, 0, 0.04),
    0 91px 55px 0 rgba(0, 0, 0, 0.08),
    0 41px 41px 0 rgba(0, 0, 0, 0.12),
    0 10px 22px 0 rgba(0, 0, 0, 0.14);
}
.testimonio blockquote {
  min-height: calc(8 * 1.3em);          /* los textos cortos reservan 8 líneas: los nombres quedan alineados */
  margin: 0;
}
.testimonio figcaption {
  margin-top: calc(10 * var(--u));
  font-weight: var(--semibold);
  text-align: right;
}


/* ==========================================================
   EN/CONTACT
   Todo el contenido entra en la primera pantalla (Figma: 1920 × 1080)
   ========================================================== */
.contacto {
  min-height: calc(100svh - var(--alto-header));   /* el footer aparece recién al scrollear */
  padding: calc(40 * var(--u)) var(--lateral) var(--margen);
  text-align: center;
}

.contacto__titulo {
  font-size: var(--fs-80);
  font-weight: var(--semibold);
  line-height: 1;
}

.contacto__bajada {
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-40);
  font-weight: var(--semibold);
  line-height: 1.3;
}

/* Formulario: 1189 de ancho, centrado (x 366 → 1555), dos columnas con 30 de separación */
.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(30 * var(--u));
  row-gap: calc(20 * var(--u));
  width: calc(1189 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  text-align: left;
}

.campo { display: flex; flex-direction: column; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  padding-left: calc(20 * var(--u));
  font-size: var(--fs-16);
  line-height: 1.3;
}

.campo input,
.campo textarea {
  width: 100%;
  margin-top: calc(10 * var(--u));      /* etiqueta → campo */
  padding: 0 calc(20 * var(--u));
  border: 1px solid var(--negro);
  border-radius: 4px;
  background: transparent;
  color: var(--negro);
  font: inherit;
  font-weight: var(--semibold);
  line-height: 1.3;
}

.campo input {
  height: calc(60 * var(--u));
  min-height: 44px;
  font-size: var(--fs-24);
}

.campo textarea {
  display: block;
  height: calc(212 * var(--u));
  min-height: 140px;
  padding-top: calc(22 * var(--u));
  padding-bottom: calc(22 * var(--u));
  font-size: var(--fs-16);
  resize: none;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--gris);
  opacity: 1;
}

/* Campo activo: el borde pasa a 2px (no está en Figma, ajustar a gusto) */
.campo input:focus,
.campo textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--negro);
}

/* Foco visible para quien navega con teclado */
.adjunto input:focus-visible + .adjunto__circulo,
.boton:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 2px;
}

/* Adjunto: círculo con clip + texto, alineado con el campo Subject */
.adjunto {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  align-self: end;                      /* misma altura que el campo de la izquierda */
  cursor: pointer;
  font-size: var(--fs-16);
  line-height: 1.3;
}
.adjunto input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.adjunto__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--negro);
  border-radius: 50%;
}
.adjunto__circulo img { width: calc(17 * var(--u)); min-width: 12px; }

/* Botón Send centrado, 40 debajo del mensaje */
.formulario__enviar {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: calc(20 * var(--u));      /* 20 del row-gap + 20 = 40 */
  border: 0;
  cursor: pointer;
  font-family: inherit;
}