/*
 * nosotros.css — Estilos propios de la página Nosotros.
 *
 * Por qué un archivo y no `style=""` en cada etiqueta, como estaba: la página
 * pasó de una caja con tres viñetas a seis secciones con tabla, grilla y
 * retratos. Resuelto inline eran sesenta atributos repetidos y ni una sola
 * media query, que es justo lo que hacía falta (la tabla comparativa no entra
 * en un teléfono sin scroll horizontal propio).
 *
 * Todo sale de los tokens de brand.css. No hay un solo color nuevo: la página
 * sigue siendo la misma tienda oscura. El off-white aparece únicamente donde el
 * manual lo pide —fondo de foto—, acá el de los retratos del equipo, con el
 * mismo multiply que los marcos de producto.
 */

.nos{
  max-width: 1040px;
  margin: 0 auto;
  padding: 150px 20px 100px;
  color: var(--white);
}

/* La bajada del título: es lo primero que lee una persona y lo primero que
   extrae un modelo, así que se le da medida de lectura y no el ancho completo. */
.nos-lead{
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-light);
  max-width: 62ch;
  margin-top: 18px;
}
.nos-lead strong{ color: var(--white); font-weight: 700; }

.nos-section{ margin-top: 64px; }

/* Mismo paralelogramo que los títulos de sección del resto del sitio
   (brand.css lo aplica a .page-title y a los h2 de la ficha). */
.nos-section > h2{
  display: flex;
  align-items: baseline;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 14px;
}
.nos-section > h2::before{
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: .42em;
  height: .8em;
  margin-right: .5em;
  background: var(--orange);
  transform: skewX(var(--skew, -20deg));
}

/* El párrafo de respuesta. Corto, auto-contenido y con los datos adentro: es la
   unidad que extrae un buscador con IA, y la que lee alguien que no va a leer
   la página entera. */
.nos-answer{
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-light);
  max-width: 68ch;
}
.nos-answer + .nos-answer{ margin-top: 14px; }
.nos-answer strong{ color: var(--white); font-weight: 700; }
.nos-answer a{ color: var(--orange); font-weight: 600; text-decoration: none; }
.nos-answer a:hover{ color: var(--orange-dark); text-decoration: underline; }

/* Letra chica: la condición que hace verdadera la frase de arriba. */
.nos-note{
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
  max-width: 68ch;
}

.nos-card{
  background: var(--surface-2, #141414);
  border: 1px solid var(--line, #ffffff14);
  border-radius: var(--radius-md, 12px);
  padding: 28px;
  margin-top: 18px;
}

/* ── Reputación: la tarjeta pública de ML, rehecha ───────────────────────
   Mismo lenguaje que la tarjeta del vendedor en Mercado Libre —sello,
   termómetro de cinco tramos, tres fichas— para que quien la conoce la
   reconozca al instante. Los colores del termómetro son los de ML, no los de
   la marca: es una cita, no decoración. Sobre fondo oscuro, los tramos
   apagados van con la misma tinta a baja opacidad. */
.nos-ml{ display: grid; gap: 14px; padding: 22px 24px; }
.nos-ml-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* El isotipo es naranja: va sobre negro con un aro naranja, no sobre naranja
   (ahí desaparece). */
.nos-ml-logo{
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-black, #1a1a1a);
  box-shadow: 0 0 0 2px var(--orange);
}
.nos-ml-logo img{ width: 26px; height: 26px; display: block; }
.nos-ml-who{ display: grid; gap: 2px; min-width: 0; }
.nos-ml-who b{ font-size: 16px; font-weight: 800; color: var(--white); }
.nos-ml-who small{ font-size: 12.5px; color: var(--muted); }
.nos-ml-link{
  margin-left: auto;
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
  white-space: nowrap;
}
.nos-ml-link:hover{ color: var(--orange-dark); text-decoration: underline; }
/* El verde es el de Mercado Libre (#00a650): el sello se lee igual que allá. */
.nos-ml-level{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 800; color: #2bd576;
}
.nos-ml-level i{ font-size: 14px; }
.nos-ml-level span{ font-size: 12.5px; font-weight: 500; color: var(--muted-light); }
.nos-ml-thermo{ display: flex; gap: 4px; }
.nos-ml-thermo i{ flex: 1; height: 8px; border-radius: 999px; opacity: .28; }
.nos-ml-thermo i:nth-child(1){ background: #f23d4f; }
.nos-ml-thermo i:nth-child(2){ background: #f7791f; }
.nos-ml-thermo i:nth-child(3){ background: #ffd100; }
.nos-ml-thermo i:nth-child(4){ background: #a6e34b; }
.nos-ml-thermo i:nth-child(5){ background: #00a650; }
.nos-ml-thermo i.is-on{ opacity: 1; box-shadow: 0 0 0 2px rgba(0, 166, 80, .25); }
.nos-ml-tiles{
  list-style: none; margin: 4px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line, #ffffff14);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  text-align: center;
}
.nos-ml-tiles b{ display: block; font-size: 22px; font-weight: 900; line-height: 1.1; color: var(--white); }
.nos-ml-tiles b i{ font-size: 18px; color: #2bd576; }
.nos-ml-tiles span{ display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* ── Tabla comparativa ────────────────────────────────────────────────────── */
/* Envuelta en su propio scroll: una tabla de tres columnas no entra en 360px, y
   sin esto el que desborda es el body entero. */
.nos-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 18px;
  border: 1px solid var(--line, #ffffff14);
  border-radius: var(--radius-md, 12px);
}
table.nos-table{
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.nos-table th,
.nos-table td{
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line, #ffffff14);
  line-height: 1.5;
}
.nos-table tr:last-child th,
.nos-table tr:last-child td{ border-bottom: 0; }
.nos-table thead th{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}
.nos-table tbody th{
  font-weight: 600;
  color: var(--muted-light);
  white-space: nowrap;
}
.nos-table td{ color: var(--muted); }
/* La columna propia, marcada apenas: un tinte naranja al 5% y el texto en
   blanco. Alcanza para que se lea cuál es la nuestra sin pintar media tabla. */
.nos-table .is-us{
  color: var(--white);
  background: rgba(255, 92, 0, .05);
}
.nos-table thead .is-us{ color: var(--orange); }

/* ── Los tres mundos ──────────────────────────────────────────────────────── */
.nos-worlds{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nos-worlds a{
  display: block;
  height: 100%;
  padding: 22px;
  background: var(--surface-2, #141414);
  border: 1px solid var(--line, #ffffff14);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  transition: transform .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease);
}
.nos-worlds a:hover,
.nos-worlds a:focus-visible{
  transform: translateY(-2px);
  border-color: var(--orange);
}
.nos-worlds h3{
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--white);
  margin-bottom: 8px;
}
.nos-worlds p{ font-size: 14px; line-height: 1.6; color: var(--muted); }
.nos-worlds .nos-go{
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
}

/* ── Equipo ───────────────────────────────────────────────────────────────── */
.nos-team{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Mismo tratamiento que las fotos de producto: papel off-white y multiply. Un
   retrato recortado sobre negro se ve pegoteado; sobre el papel de la marca es
   el mismo objeto que las fichas. */
.nos-photo{
  aspect-ratio: 4 / 5;
  background: var(--paper, #f5f3ef);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
}
.nos-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
/* El marco vacío, a la espera de la foto. Se dibuja en oscuro y punteado para
   que se lea como "acá va una foto" y no como una foto que no cargó. */
.nos-photo.is-empty{
  background: var(--surface-2, #141414);
  border: 1px dashed rgba(255, 255, 255, .18);
}
.nos-photo.is-empty i{ font-size: 26px; color: rgba(255, 255, 255, .22); }
.nos-team h3{
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}
.nos-team p{ margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── Cierre ───────────────────────────────────────────────────────────────── */
.nos-cta{
  margin-top: 64px;
  padding: 32px;
  background: var(--surface-1, #0a0a0a);
  border: 1px solid var(--line, #ffffff14);
  border-radius: var(--radius-md, 12px);
  text-align: center;
}
.nos-cta h2{ font-size: 20px; font-weight: 800; color: var(--white); }
.nos-cta p{ margin-top: 10px; font-size: 15px; color: var(--muted); }
.nos-actions{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.nos-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill, 999px);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease);
}
.nos-btn-primary{ background: var(--orange); color: #1a1a1a; }
.nos-btn-primary:hover{ background: var(--orange-dark); color: #fff; }
.nos-btn-ghost{
  border: 1px solid var(--line, #ffffff14);
  color: var(--white);
}
.nos-btn-ghost:hover{ border-color: var(--orange); color: var(--orange); }

@media (max-width: 640px){
  .nos{ padding: 120px 16px 72px; }
  .nos-lead{ font-size: 16px; }
  .nos-section{ margin-top: 48px; }
  .nos-card{ padding: 22px; }
  .nos-stat dd{ font-size: 26px; }
}

@media (prefers-reduced-motion: reduce){
  .nos-worlds a{ transition: none; }
  .nos-worlds a:hover{ transform: none; }
}

/* Texto sólo para lectores de pantalla. El <caption> de la tabla y el
   encabezado vacío de su primera columna existen para que la tabla se entienda
   leída en voz alta; no tienen por qué verse. No estaba definido en ningún CSS
   del sitio, así que va acá. */
.nos .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}