/* Caporsa — estilos del sitio de lanzamiento.
   Fuente de diseño: Sitio_web/DESIGN.md (v1.1, dirección B1 · Módulo).
   Los tokens de abajo son copia literal de Sitio_web/tokens.css: no cambiar valores aquí;
   si el sistema cambia, se actualiza tokens.css y se vuelve a copiar. */

/* ===== Tokens (copia de tokens.css) ===== */
:root {
  /* Paleta del cliente */
  --teal: #0B5962;
  --soft-white: #F7F8F5;
  --sage: #7D9881;
  --charcoal: #263437;
  --sand: #C9A878;

  /* Derivados del sage (DESIGN.md 3.2) */
  --sage-700: #52665C;
  --sage-300: #C6D2C7;
  --sage-100: #DCE3DA;

  /* Neutros */
  --text: #263437;
  --text-2: #3E4D50;
  --text-3: #5A6B6E;
  --rule: #D3DAD2;
  --rule-strong: #263437;
  --white: #FFFFFF;

  /* Tipografía */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --fs-h1: clamp(56px, 8.4vw, 124px);
  --fs-h1-interior: clamp(44px, 6vw, 88px);
  --fs-h2: clamp(34px, 3.4vw, 48px);
  --fs-h2-panel: clamp(32px, 4.8vw, 68px);
  --fs-h3: 22px;
  --fs-list: 26px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-small: 16px;
  --fs-label: 15px;
  --fs-meta: 14px;
  --track-display: -0.03em;

  /* Espaciado */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: 96px;
  --container: 1280px;
  --gutter: 40px;

  /* Radio: 8.9 % del lado corto */
  --r-btn-sm: 4px;
  --r-btn: 5px;
  --r-module: 8.9%;
  --r-panel: clamp(20px, 3.2vw, 44px);

  /* Divisor */
  --divider-h: clamp(32px, 3.9vw, 56px);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 960px) {
  :root { --section-y: 64px; --gutter: 24px; }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--soft-white);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Las anclas no quedan pegadas al borde superior al saltar */
[id] { scroll-margin-top: var(--s-5); }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -200px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--teal);
  color: var(--soft-white);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-btn-sm);
}
.skip-link:focus { top: var(--s-3); }

.wrap {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ===== Tipografía ===== */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  color: var(--text);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  color: var(--text);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 44ch;
}

.intro { color: var(--text-2); max-width: 34ch; }

.small {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
}

.meta {
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--sage-700);
}

/* ===== Botones y enlaces (DESIGN.md 5.4) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 20px 26px;
  background: var(--teal);
  color: var(--soft-white);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-btn);
  transition: background-color 0.2s ease;
}
.btn:hover { background: var(--charcoal); }

.btn--sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--fs-label);
  border-radius: var(--r-btn-sm);
}

.btn--light { background: var(--soft-white); color: var(--teal); }
.btn--light:hover { background: var(--white); }
.btn--light:focus-visible { outline-color: var(--soft-white); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--teal);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.2s ease;
}
.text-link:hover { color: var(--charcoal); }

/* ===== Encabezado (DESIGN.md 5.3) ===== */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.brand svg { width: 110px; height: 26px; fill: var(--teal); }

.header-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) 36px;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
}

.nav-list a,
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-list a:hover,
.lang a:hover { color: var(--teal); }

/* Selector de idioma: EN · ES */
.lang {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
  color: var(--text-3);
}
.lang a { min-width: 24px; justify-content: center; color: var(--text-3); }
.lang a[aria-current="true"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.lang__sep { color: var(--text-3); }

/* Botón de menú: solo en móvil. Sin JS es un enlace al menú del pie;
   con JS (assets/js/menu.js) se cambia por un <button> con aria-expanded. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  background: transparent;
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn-sm);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.menu-toggle:hover { color: var(--teal); border-color: var(--teal); }

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }

  .header-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header.is-open .header-menu { display: flex; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    font-size: var(--fs-body);
  }
  .nav-list li { border-top: 1px solid var(--rule); }
  .nav-list a { width: 100%; min-height: 48px; }

  .header-menu .lang {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-body);
    padding: var(--s-1) 0;
  }
  .header-menu .btn--sm { align-self: flex-start; margin-top: var(--s-5); }
}

/* ===== Hero (DESIGN.md 5.5) ===== */
.hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-9);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: end;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 6px;
}

.hero__art {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  aspect-ratio: 1 / 1;
  animation: symbol-in 0.9s var(--ease) both;
}
.hero__art svg { width: 100%; height: 100%; fill: var(--teal); }

@keyframes symbol-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) 28px;
}

/* ===== Divisor de sección (DESIGN.md 5.6 a) ===== */
.divider svg {
  width: 100%;
  height: var(--divider-h);
  fill: var(--teal);
  overflow: hidden;
}
.divider--flip svg { transform: scaleX(-1); }

/* Divisor secundario: cinta en contorno sage, proporción real (5.6 b) */
.wave-outline {
  width: 100%;
  max-width: 400px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.5;
}

/* ===== Secciones ===== */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.split {
  display: grid;
  gap: var(--s-7);
}
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split--end { align-items: end; }
.split--start { align-items: start; }

.stack { display: flex; flex-direction: column; gap: 20px; }

/* Nosotros / About */
.about .h2 { max-width: 13ch; }
.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-2);
}
.about__body p { max-width: 44ch; color: var(--text-2); }
.about__body .about__place { color: var(--text); font-weight: 500; }

/* Qué hacemos / What we do (5.7) */
.what .h2 { max-width: 12ch; }

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-6);
}
.column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.column .small { max-width: 30ch; }

/* De 961 a 1123 px el auto-fit caía a 2 + 1 columnas: siempre 3 en escritorio */
@media (min-width: 961px) {
  .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Sectores (DESIGN.md 5.13) ===== */
.sectors .h2 { max-width: 20ch; }

.sector-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: 72px;
}

.sector {
  /* Debajo de 1200 px el lado corto es el alto. Los cuatro recuadros son iguales: alto mínimo
     escalonado según el contenido más alto medido (EN y ES, fuentes cargadas, cada 5 px),
     con 8 px o más de margen, y radio = 8.9 % de ese alto. Es min-height: nunca corta texto. */
  --sector-h: 270px;
  display: flex;
  flex-direction: column;
  background: var(--sage-100);
  padding: var(--s-6);
  min-height: var(--sector-h);
  border-radius: calc(var(--sector-h) * 0.089);
}
.sector .meta { margin-bottom: var(--s-6); }
.sector .small { margin-top: var(--s-3); }
.sector .h3 { overflow-wrap: break-word; }

/* 1 columna. Contenido máx. (EN y ES, copy del 17 oct 2026): 261.2 (320–409) · 234.8 (410–444) · 209.2 (445–599) */
@media (min-width: 410px) { .sector { --sector-h: 244px; } }
@media (min-width: 445px) { .sector { --sector-h: 218px; } }

/* 2 columnas. Contenido máx.: 286.8 (600–609) · 261.2 (610–789) · 234.8 (790–864) · 209.2 (865–960) */
@media (min-width: 600px) {
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* De 600 a ~615 px el recuadro (264 px) es más angosto que su alto: el radio sale del lado corto */
  .sector {
    --sector-h: 296px;
    border-radius: min(calc(var(--sector-h) * 0.089), calc((100cqi - 24px) / 2 * 0.089));
  }
}
@media (min-width: 610px) { .sector { --sector-h: 270px; } }
@media (min-width: 790px) { .sector { --sector-h: 244px; } }
@media (min-width: 865px) { .sector { --sector-h: 218px; } }

/* 2 columnas, padding 32. Contenido máx.: 225.2 (961–1199) */
@media (min-width: 961px) { .sector { --sector-h: 234px; } }

@media (min-width: 1200px) {
  .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 4 columnas: módulos al menos cuadrados. min-height: auto deja que el recuadro crezca si el
     texto no cabe (1200–1259 px); el lado corto sigue siendo el ancho de columna y el radio es
     el 8.9 % de ese ancho (unidad cqi del contenedor). */
  .sector {
    min-height: auto;
    aspect-ratio: 1 / 1;
    /* Con aspect-ratio, el grid solo estira la fila si se pide stretch explícito: así los cuatro
       quedan iguales cuando uno crece (1200–1259 px) */
    align-self: stretch;
    width: 100%;
    border-radius: 25px;
    border-radius: calc((100cqi - 3 * 24px) / 4 * 0.089);
  }
}

@media (max-width: 960px) {
  .sector { padding: var(--s-5); }
  .sector-grid { margin-top: var(--s-7); }
}

/* Franja de capacidades */
.caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.caps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.caps__item { display: flex; flex-direction: column; gap: var(--s-3); }
.caps__item .small { max-width: 36ch; }
.caps__close { color: var(--text-2); font-size: var(--fs-small); max-width: 44ch; text-wrap: pretty; }

@media (min-width: 600px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .caps__label { grid-column: 1 / -1; }
  .caps__list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps__close { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  /* Alineada con los cuatro recuadros: etiqueta en la columna 1, capacidades en la 2 y la 3 */
  .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .caps__label { grid-column: 1; }
  .caps__list { grid-column: 2 / 4; }
  .caps__close { grid-column: 2 / -1; }
}

/* ===== Enfoque / Our approach (DESIGN.md 5.8) ===== */
.approach .h2 { max-width: 14ch; }

.approach__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
.approach__body p { color: var(--text-2); max-width: 36ch; }

.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s-7) var(--s-6);
  margin-top: 72px;
}

.principle {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border-top: 1px solid var(--rule-strong);
  padding-top: 28px;
}
.principle__text { display: flex; flex-direction: column; gap: var(--s-3); }
.principle .small { max-width: 28ch; }
.principle:last-child .small { max-width: 44ch; }

/* Módulo de 4 cuartos, 96 × 96 */
.module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  width: 96px;
  height: 96px;
}
.module span { border-radius: var(--r-module); background: var(--sage-100); }
.module .on { background: var(--teal); }
/* 4/4: los cuartos se funden en un cuadrado; radio solo en las esquinas exteriores (8.9 % de 96 px) */
.module--full { gap: 0; }
.module--full span { background: var(--teal); border-radius: 0; }
.module--full span:nth-child(1) { border-top-left-radius: calc(96px * 0.089); }
.module--full span:nth-child(2) { border-top-right-radius: calc(96px * 0.089); }
.module--full span:nth-child(3) { border-bottom-left-radius: calc(96px * 0.089); }
.module--full span:nth-child(4) { border-bottom-right-radius: calc(96px * 0.089); }

/* ===== Talento / Talent: bloque compacto antes del contacto, con la onda en contorno (5.6 b) ===== */
.talent { padding-top: 0; padding-bottom: var(--section-y); }
.talent__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.talent .h2 { max-width: 22ch; text-wrap: balance; }
.talent__body p:not(.meta) { color: var(--text-2); max-width: 44ch; margin-top: var(--s-2); }

/* ===== Panel de contacto (DESIGN.md 5.10) ===== */
.contact { padding-top: var(--s-5); padding-bottom: var(--s-8); }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-7);
  align-items: end;
  background: var(--teal);
  color: var(--soft-white);
  border-radius: var(--r-panel);
  padding: clamp(40px, 6vw, 88px);
}
.panel .h2-panel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2-panel);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--soft-white);
  max-width: 17ch;
}
.panel__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: var(--s-1);
}
.panel__side p { color: var(--sage-300); max-width: 34ch; }

/* ===== Pie (DESIGN.md 5.11) ===== */
.site-footer { padding-bottom: 56px; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) 40px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--text-3);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand svg { width: 84px; height: 20px; fill: var(--teal); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-5);
}

.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-inner a:hover { color: var(--teal); }
.footer-nav a { min-width: 44px; }
.footer-inner .lang { font-size: var(--fs-meta); }
.footer-inner .lang a[aria-current="true"] { color: var(--text-3); }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-5);
}

/* ===== 404 ===== */
.notfound { padding-top: var(--s-8); padding-bottom: var(--s-9); }
.notfound .h1-interior {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1-interior);
  line-height: 0.96;
  letter-spacing: var(--track-display);
  max-width: 14ch;
}
.notfound__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: 40px;
}
.notfound__body p { max-width: 44ch; color: var(--text-2); }

/* ===== Responsivo ===== */
@media (max-width: 960px) {
  .hero { padding-top: 40px; padding-bottom: var(--s-8); }
  .hero__grid,
  .split--4-8,
  .split--8-4,
  .panel { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 380px; justify-self: start; }

  .approach__body { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-7); }

  .panel { padding: 40px var(--s-5); gap: var(--s-6); }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .footer-brand { margin-bottom: var(--s-2); }
}

@media (max-width: 599px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
}

/* "Businesses" mide 279 px a 56 px (medido) y a 320 px solo hay 272 px útiles.
   Tope: el H1 nunca supera 0.195 × el ancho útil; solo actúa por debajo de ~335 px. */
.h1 { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) * 0.195)); }

/* ===== Movimiento reducido: todo estático ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__art { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* El menú del pie recibe el foco al llegar desde "Menu" sin JS; no es un control, sin contorno */
#site-footer-nav:focus { outline: none; }

.notfound__links { display: flex; flex-wrap: wrap; gap: 0 28px; }

@media (max-width: 960px) {
  /* Apilado, 48 px entre título y texto se ve suelto: 24 px */
  .split { gap: var(--s-5); }
  .talent .split { row-gap: var(--s-6); }
  .wave-outline { max-width: 280px; }
}

@media (max-width: 960px) {
  /* Objetivo táctil de 44 px también a lo ancho en el selector de idioma */
  .lang a { min-width: 44px; }
  .lang { gap: 0; }
}
@media (max-width: 960px) {
  /* "EN" centrado en 44 px queda 12.5 px adentro (medido): se compensa para alinear con el margen */
  .lang a:first-child { margin-left: calc(-1 * var(--s-3)); }
}