/* =========================================================
   TOBBO Studio — Landing V1
   base.css — reset + estilos tipográficos reutilizables +
   navegación base + utilidades de spacing global
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-negro-tinta);
  background: var(--color-papel);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

/* ---------------------------------------------------------
   Estilos tipográficos reutilizables
   --------------------------------------------------------- */

.t-headline {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Big Shoulders Display 900 — nuevo nivel reutilizable (arquitectura V1
   aprobada): antes exclusivo de la BB/C.8.3, ahora es el registro de los
   momentos gráficos de punch — Pieza 2 ("La idea antes que el contenido")
   y, en el Bloque 3, los nombres de servicio de Pieza 4 ("What We Do"). */
.t-headline-display {
  font-family: var(--font-bb-glyph);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

.t-utility {
  font-family: var(--font-utility);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---------------------------------------------------------
   Foco visible — accesibilidad (Paso 4 + C.8.8, cerrado)
   El color del outline se adapta al fondo de cada pieza.
   --------------------------------------------------------- */

.focus-on-dark:focus-visible {
  outline: 2px solid var(--color-papel);
  outline-offset: 4px;
}

.focus-on-light:focus-visible {
  outline: 2px solid var(--color-negro-tinta);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Aparición al hacer scroll (Paso 4, cerrado)
   fade + 12px→0, ~450ms, ease-out — igual en todo el sistema
   --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(var(--appear-offset));
  transition: opacity var(--duration-appear) var(--ease-out),
              transform var(--duration-appear) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   Navegación base — solo wordmark (Principio 6, cerrado)
   --------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 20px var(--margin-lateral);
  background: transparent;
  pointer-events: none; /* solo el wordmark es interactivo */
}

.nav__wordmark {
  pointer-events: auto;
  font-family: var(--font-utility);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-negro-tinta);
}

/* ---------------------------------------------------------
   Estructura de sección — margen lateral y ancho de lectura
   --------------------------------------------------------- */

.seccion {
  padding-left: var(--margin-lateral);
  padding-right: var(--margin-lateral);
}

.col-lectura {
  max-width: 640px; /* ancho de columna acotado, no crece con el viewport — C.8.2 */
}

/* ---------------------------------------------------------
   C.8.1 — Apertura (cerrado)
   Afirmación absoluta, sin apoyo: headline centrado, solo,
   sosteniendo el primer viewport completo de la página.
   Sin animación de entrada, sin RECORTE, sin BB.
   --------------------------------------------------------- */

.c-apertura {
  min-height: 100vh;
  min-height: 100svh; /* mejor precisión en mobile que 100vh */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-kraft);
  padding: 40px var(--margin-lateral);
}

.c-apertura__headline {
  font-size: clamp(64px, 9vw, 156px);
  color: var(--color-negro-tinta);
}

/* ---------------------------------------------------------
   Pieza 3 — Qué es TOBBO (copy sin cambios; composición nueva,
   arquitectura V1 aprobada). Cambio de voz: de la afirmación de
   carácter de la Pieza 2 a la explicación de categoría. En
   mobile se mantiene simple — alineada a la izquierda, margen
   estándar, la misma limpieza que ya tenía. En desktop la
   columna se ancla de forma asimétrica hacia el centro-derecha
   del viewport (grid de dos columnas, el texto vive en la
   segunda), dejando la mitad izquierda como aire real — nunca
   ocupa el ancho completo. Escala tipográfica subida respecto al
   sistema anterior (30px → 34–38px en desktop) para sostener el
   papel sin acentos de color: es el único momento de toda la
   landing sin coral, musgo ni negro tinta de fondo. Sin RECORTE,
   sin BB. Aparición discreta al hacer scroll.
   --------------------------------------------------------- */

.c-que-es-tobbo {
  background: var(--color-papel);
  padding-top: 80px; /* transición Idea→Qué es TOBBO: más aire que una transición neutra porque viene de un campo coral pleno, intervenido */
  padding-bottom: 64px; /* aire de salida hacia What We Do, mobile */
}

.c-que-es-tobbo__texto {
  font-size: clamp(24px, 5.5vw, 38px); /* escala continua: ~24px en mobile angosto, tope de 38px ya en el rango desktop cerrado (34–38px) */
  line-height: 1.35; /* más ajustado que el 1.6 general de .t-body — a esta escala, el interlineado de cuerpo de lectura se siente suelto */
}

@media (min-width: 640px) {
  .c-que-es-tobbo {
    padding-top: 128px; /* transición Idea→Qué es TOBBO, desktop */
    padding-bottom: 96px; /* aire de salida hacia What We Do, desktop */
    display: grid;
    grid-template-columns: 1fr 1fr; /* mitad izquierda vacía a propósito — es el aire real que pide la composición */
  }

  .c-que-es-tobbo .col-lectura {
    grid-column: 2 / 3;
    max-width: 620px; /* columna de lectura, no el ancho completo de la mitad derecha */
  }
}

/* ---------------------------------------------------------
   Pieza 2 — "La idea antes que el contenido" (Bloque 1, nueva)
   El diferenciador de TOBBO en su forma más corta — reemplaza
   por completo el argumento extendido que antes vivía en
   "Cómo pensamos" (costura + BB, retirados). Campo coral pleno,
   primera vez que coral funciona como fondo de sección en toda
   la landing. Texto anclado abajo a la izquierda — nunca
   centrado, para no clonar la Apertura. El tercio superior del
   viewport queda en coral puro, sin texto: es aire real, parte
   del mensaje antes de leer una sola palabra. Sin RECORTE, sin
   BB — ver arquitectura-final-landing-tobbo.md, sección 1, para
   la decisión de no forzarlos aquí. Sin subtítulo ni línea
   explicativa: la frase se sostiene sola.
   --------------------------------------------------------- */

.c-idea-antes {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end; /* ancla el texto abajo — el campo, no el texto, ocupa el viewport completo */
  background: var(--color-coral);
  padding: 40px var(--margin-lateral) 64px; /* mismo padding de entrada que la Apertura (40px); el bottom mayor da aire real bajo el texto antes del borde del campo */
}

.c-idea-antes__headline {
  color: var(--color-negro-tinta);
}

.c-idea-antes__frase {
  display: none; /* alternado por breakpoint abajo */
}

.c-idea-antes__linea {
  display: block;
  white-space: nowrap; /* cada renglón es una decisión de composición, no un wrap orgánico — nunca debe partirse en dos */
}

.c-idea-antes__frase--mobile {
  display: block;
  font-size: clamp(36px, 10vw, 64px); /* 3 líneas — mobile: "LA IDEA" / "ANTES QUE" / "EL CONTENIDO." */
}

@media (min-width: 640px) {
  .c-idea-antes__frase--mobile {
    display: none;
  }

  .c-idea-antes__frase--desktop {
    display: block;
    font-size: clamp(56px, 7.2vw, 140px); /* 2 líneas — desktop: "LA IDEA ANTES" / "QUE EL CONTENIDO." Escala cercana a la Apertura, no idéntica. */
  }
}

/* ---------------------------------------------------------
   Pieza 4 — What We Do (arquitectura V1 aprobada, reemplaza a
   "Cómo se trabaja con TOBBO"). Responde qué hace TOBBO de forma
   escaneable, dejando sentir la secuencia (encontrar → convertir
   → construir → llevar a la realidad) sin decirla. Composición
   editorial, no un grid de tarjetas: sin cards, sin bordes, sin
   estructura corporativa. En mobile los cuatro beats se apilan
   verticalmente con aire generoso entre cada uno. En desktop se
   arma una cascada diagonal — cada beat entra con más margen
   izquierdo que el anterior, sin posicionamiento absoluto, para
   que el orden de lectura y el orden del DOM sigan siendo el
   mismo. Fondo kraft (segundo uso, tercero contando la
   Apertura). Numerales 01–04 en musgo — primera y única
   aparición de este color en toda la landing, a escala grande,
   funcionando casi como tipografía-imagen más que como índice:
   por eso no lleva el mismo estándar de contraste que un texto
   de lectura — el nombre del servicio, en negro tinta pleno,
   ya carga la información con contraste total. Nombres de
   servicio en Big Shoulders Display 900, mismo rol que la
   Pieza 2. Línea descriptiva en Archivo 400, más pequeña y con
   menor contraste — segunda capa de lectura, mismo criterio de
   opacidad ya usado en el footer (68–72% sobre kraft, dentro de
   WCAG AA). Coral no participa en esta composición.
   --------------------------------------------------------- */

.c-what-we-do {
  background: var(--color-kraft);
  padding-top: 72px; /* transición Qué es TOBBO→What We Do, mobile: de papel silencioso a kraft con contenido — aire moderado, no es un cambio tan intervenido como entrar o salir del negro tinta */
  padding-bottom: 72px; /* transición What We Do→CTA, mobile: aire de salida propio, antes del padding-top del CTA sobre negro */
}

.c-what-we-do__titulo {
  color: var(--color-negro-tinta);
  font-size: clamp(28px, 6vw, 40px);
  margin-bottom: 56px; /* separación entre el título de entrada y el primer beat */
}

.c-what-we-do__lista {
  display: flex;
  flex-direction: column;
  gap: 56px; /* aire generoso entre beats, mobile — es lo que reemplaza a la diagonal cuando se apila */
}

.c-what-we-do__cabecera {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 4px;
}

.c-what-we-do__numeral {
  color: var(--color-musgo);
  font-size: clamp(64px, 18vw, 96px); /* escala mobile — el rango 120–160px cerrado es exclusivamente desktop */
}

.c-what-we-do__nombre {
  color: var(--color-negro-tinta);
  font-size: clamp(32px, 9vw, 48px);
}

.c-what-we-do__desc {
  margin-top: 12px;
  max-width: 480px;
  font-size: 16px;
  color: rgba(20, 20, 20, 0.72); /* segunda capa de lectura, mismo criterio de contraste ya usado en el footer */
}

@media (min-width: 640px) {
  .c-what-we-do {
    padding-top: 112px; /* transición Qué es TOBBO→What We Do, desktop */
    padding-bottom: 112px; /* transición What We Do→CTA, desktop */
  }

  .c-what-we-do__titulo {
    margin-bottom: 96px;
  }

  .c-what-we-do__lista {
    gap: 88px;
  }

  .c-what-we-do__numeral {
    font-size: clamp(120px, 10vw, 160px); /* rango cerrado — primera aparición de musgo a escala de tipografía-imagen */
  }

  .c-what-we-do__nombre {
    font-size: clamp(60px, 6vw, 72px); /* rango cerrado */
  }

  .c-what-we-do__desc {
    font-size: 18px;
    max-width: 420px;
  }

  /* Cascada diagonal: cada beat entra más a la derecha que el
     anterior — 01 arriba-izquierda, 04 abajo-derecha. Sin
     posicionamiento absoluto: es simplemente margin-left
     creciente sobre el flujo normal, así el orden de lectura
     nunca se separa del orden del DOM. */
  .c-what-we-do__item--01 { margin-left: 0; }
  .c-what-we-do__item--02 { margin-left: 8%; }
  .c-what-we-do__item--03 { margin-left: 16%; }
  .c-what-we-do__item--04 { margin-left: 24%; }
}

/* ---------------------------------------------------------
   Pieza 5 — CTA final (headline y campo negro tinta sin
   cambios respecto al sistema anterior). Nivel INTERVENIDA:
   cambio real de fondo. Headline en Big Shoulders, mayúsculas,
   reversado en papel. Los dos accesos de contacto — Instagram y
   correo — anclados juntos, mismo peso visual, en Space Mono,
   coral, subrayados: segundo uso de coral en la landing. Sin
   RECORTE, BB, costura, registro, corte ni fotografía.
   --------------------------------------------------------- */

.c-cta-final {
  background: var(--color-negro-tinta);
  padding-top: 120px; /* transición What We Do→CTA, mobile: calibrada contra la nueva Pieza 4 */
  padding-bottom: var(--air-7-footer-m); /* aire de salida hacia el footer, mobile — es la transición CTA final → Footer, la única que sobrevive igual en la arquitectura nueva */
}

.c-cta-final__headline {
  color: var(--color-papel);
  text-align: left;
  font-size: clamp(48px, 6.4vw, 116px); /* escala de partida cerrada (Paso 4), sujeta a validación perceptiva junto a C.8.1 */
}

.c-cta-final__break {
  display: block; /* mobile: fuerza el quiebre exacto en la coma — valor cerrado (Paso 4): "AQUÍ, LO INCOMPLETO" / "CAMBIA DE FORMA." */
}

.c-cta-final__contacto {
  display: flex;
  flex-direction: column;
  gap: 10px; /* los dos accesos anclados juntos, como un solo bloque de dos líneas */
  margin-top: 40px; /* aire entre headline y contacto, mobile */
}

.c-cta-final__link {
  display: inline-block;
  width: fit-content;
  font-size: 20px;
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--duration-hover) ease;
}

.c-cta-final__link:hover {
  opacity: 0.75;
}

@media (min-width: 640px) {
  .c-cta-final {
    padding-top: 180px; /* transición What We Do→CTA, desktop */
    padding-bottom: var(--air-7-footer);
  }

  .c-cta-final__break {
    display: inline; /* desktop: el headline ya quiebra de forma natural en su propia coma, sin forzar */
  }

  .c-cta-final__contacto {
    gap: 14px;
    margin-top: 56px;
  }

  .c-cta-final__link {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------
   Pieza 6 — Footer (simplificado, arquitectura V1 aprobada).
   El registro más bajo y silencioso de toda la página. Fondo
   kraft: cierra el arco de color completo volviendo al terreno
   de la Apertura. Contenido reducido a una sola línea de
   copyright — Instagram y correo ya no viven aquí, quedaron
   concentrados en la Pieza 5 (CTA final) con mismo peso visual
   y mayor intención de conversión. Sin wordmark, BB, Sello,
   íconos ni RECORTE. El aire de la transición CTA final →
   footer (84px mobile / 140px desktop, --air-7-footer) ya está
   implementado como padding-bottom del CTA y no se duplica aquí.
   --------------------------------------------------------- */

.c-footer {
  background: var(--color-kraft);
  padding: 28px var(--margin-lateral); /* padding vertical propio del footer, mobile — cerrado (Paso 3) */
}

.c-footer__copyright {
  font-size: 10.5px; /* cerrado (Paso 3) */
  color: rgba(20, 20, 20, 0.68); /* negro tinta al 68% de opacidad — ~4.8:1 sobre kraft (WCAG AA) */
}

@media (min-width: 640px) {
  .c-footer {
    padding: 40px var(--margin-lateral); /* padding vertical propio del footer, desktop — cerrado (Paso 3) */
  }
}