/* Kompo · Landing · Estilos
   Tokens y componentes según DesignSystem/kompo-design-system.md (1.2).
   Sin sombras: la jerarquía se apila con superficies. */

/* ---------- 1 · Tokens ---------- */
:root {
  --kompo-lima:        #C8F135;
  --kompo-lima-hover:  #B4DE26;
  --kompo-verde:       #5B8C0A;
  --kompo-verde-texto: #467000;
  --kompo-tinta:       #141A16;
  --kompo-tinta-lima:  #3C4A20;

  --bg:          #141A16;
  --surface:     #1E2A24;
  --surface-alt: #232E28;
  --divider:     #2C3A33;
  --border:      #66786E;

  --text:   #FFFFFF;
  --text-2: #9AA69C;
  --text-3: #5E6A62;

  --light-bg:             #FFFFFF;
  --light-surface:        #F5F7F2;
  --light-surface-alt:    #E9EDE6;
  --light-border:         #E3E8DE;
  --light-border-control: #7E8E84;
  --light-text:           #141A16;
  --light-text-2:         #4A5750;
  --foco-claro:           var(--kompo-tinta);

  --estado-exito-texto:       var(--kompo-lima);
  --estado-exito-relleno:     var(--kompo-tinta-lima);
  --estado-pendiente-texto:   #E0A32E;
  --estado-pendiente-relleno: #E0A32E;
  --estado-problema-texto:    #E8766C;
  --estado-problema-relleno:  #C4453B;
  --estado-info-texto:        #6FA8E6;
  --estado-info-relleno:      #2F6FB0;

  --foco: var(--kompo-lima);

  /* Acentos: lima sobre oscuro; la sección clara los remapea a verde */
  --acento-texto: var(--kompo-lima);
  --acento-dato:  var(--kompo-lima);
  --acento-linea: var(--kompo-lima);

  --font: 'Archivo', -apple-system, system-ui, sans-serif;
  --font-maestro: 'Fraunces', Georgia, 'Times New Roman', serif;

  --dur-rapida: 120ms;
  --dur-base:   200ms;
  --dur-lenta:  320ms;
  --ease-entrada: cubic-bezier(0.2, 0, 0, 1);
  --ease-salida:  cubic-bezier(0.4, 0, 1, 1);

  --alto-barra: 64px;
  --margen: 20px;
}

@media (min-width: 768px)  { :root { --margen: 32px; } }
@media (min-width: 1024px) { :root { --margen: 48px; } }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-barra);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* hidden siempre oculta, aunque el elemento tenga display propio (grid, flex) */
[hidden] { display: none !important; }

h1, h2, h3, p, ol, ul, fieldset, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

a {
  color: var(--kompo-lima);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Foco visible: anillo 2px lima, separado 2px, solo con teclado */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

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

.saltar {
  position: absolute;
  left: 8px; top: -64px;
  z-index: 30;
  padding: 12px 16px;
  background: var(--kompo-lima);
  color: var(--kompo-tinta);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.saltar:focus { top: 8px; }

/* La palabra "maestro": Fraunces itálica 600 (la única excepción a Archivo) y
   color de acento (lima; verde en la sección clara). Dentro de botones, chips
   y enlaces hereda el color: el fondo o el enlace ya son lima. El 1.04em compensa la
   altura de x menor de la serif; no es énfasis por tamaño. */
.maestro {
  font-family: var(--font-maestro);
  font-style: italic;
  font-weight: 600;
  font-size: 1.04em;
  font-variation-settings: 'opsz' 18;
  color: var(--acento-texto);
}
.boton .maestro, .chip .maestro, .badge .maestro, a .maestro { color: inherit; }

/* ---------- 3 · Tipografía ---------- */
.display-xl {
  font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .display-xl { font-size: 56px; line-height: 1.05; }
}
@media (min-width: 1280px) {
  .display-xl { font-size: 72px; line-height: 1; letter-spacing: -0.03em; }
}
.display { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.h3      { font-size: 19px; line-height: 1.3; font-weight: 600; }
.caption {
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dato {
  font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--acento-dato);
}
.dato--chico { font-size: 24px; }

/* ---------- 4 · Layout ---------- */
.contenedor {
  width: 100%;
  max-width: calc(1200px + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: 64px; }
@media (min-width: 1024px) { .seccion { padding-block: 96px; } }

.seccion__cabecera { max-width: 640px; }
.antetitulo {
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: 12px;
}

/* Sección clara: la única de la página. Remapea los tokens semánticos a los
   claros; los componentes se adaptan solos. Lima sobre claro no se ve, así que
   los acentos pasan a verde y el botón primario se invierte. */
.seccion--clara {
  --bg: var(--light-surface);
  --surface: var(--light-bg);
  --surface-alt: var(--light-surface-alt);
  --divider: var(--light-border);
  --border: var(--light-border-control);
  --text: var(--light-text);
  --text-2: var(--light-text-2);
  --foco: var(--foco-claro);
  --acento-texto: var(--kompo-verde-texto);
  --acento-dato: var(--kompo-verde);
  --acento-linea: var(--kompo-verde);
  background: var(--bg);
  color: var(--text);
}
.seccion--clara .boton--primario {
  background: var(--kompo-tinta);
  border-color: var(--kompo-tinta);
  color: var(--kompo-lima);
}
.seccion--clara .boton--primario:hover { color: var(--kompo-lima-hover); }
.seccion__titulo { margin-bottom: 16px; }
.seccion__bajada { color: var(--text-2); }

/* Sección vitrina: cabecera centrada y contenido compacto al centro */
.seccion--centrada .seccion__cabecera {
  margin-inline: auto;
  text-align: center;
}
.seccion--centrada .seccion__titulo { text-wrap: balance; }
.seccion__nota { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ---------- 5 · Botones ---------- */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-rapida) var(--ease-entrada),
    color            var(--dur-base)   var(--ease-entrada),
    border-color     var(--dur-base)   var(--ease-entrada),
    transform        var(--dur-rapida) var(--ease-entrada);
}
.boton:active { transform: scale(0.98); }

.boton--primario {
  background: var(--kompo-lima);
  border-color: var(--kompo-lima);
  color: var(--kompo-tinta);
}
.boton--primario:hover { background: var(--kompo-lima-hover); border-color: var(--kompo-lima-hover); }

.boton--secundario {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.boton--secundario:hover { background: var(--surface); }

.boton--grande { height: 56px; padding-inline: 32px; }

.boton-texto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--kompo-lima);
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
.boton-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.boton--barra  { height: 40px; padding-inline: 20px; }
.boton--completo { width: 100%; }
.boton--movil-completo { width: 100%; }
@media (min-width: 768px) { .boton--movil-completo { width: auto; } }

.boton:disabled, .boton[aria-disabled="true"] {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--text-3);
  cursor: default;
  transform: none;
}

/* Cargando: el botón conserva el tamaño y cambia el texto por un spinner */
.boton__spinner {
  display: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: girar 800ms linear infinite;
}
.boton--cargando .boton__texto { visibility: hidden; }
.boton--cargando .boton__spinner { display: block; position: absolute; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- 6 · Barra ---------- */
.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--alto-barra);
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  z-index: 10;
}
.barra__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--alto-barra);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 19px;
  min-height: 44px;
}
.logo__bloque {
  width: 28px; height: 28px;
  border-radius: 22%;
  background: var(--kompo-lima);
  color: var(--kompo-tinta);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.barra__nav { display: none; gap: 24px; }
@media (min-width: 768px) { .barra__nav { display: flex; } }
.barra__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-rapida);
}
.barra__nav a:hover { color: var(--text); }

.barra__acciones { display: flex; align-items: center; gap: 8px; }
.barra__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
}
@media (min-width: 768px) { .barra__menu { display: none; } }

main { padding-top: var(--alto-barra); }

/* ---------- 7 · Hoja inferior (menú móvil) ---------- */
.hoja { position: fixed; inset: 0; z-index: 20; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(20, 26, 22, 0.7); }
.hoja__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  animation: subir var(--dur-lenta) var(--ease-entrada);
}
.hoja__agarradera {
  width: 32px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto 24px;
}
.hoja__cerrar {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.hoja__nav { display: grid; }
.hoja__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
}
.hoja__nav a:last-child { border-bottom: 0; }
@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- 8 · Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 48px 64px;
}
@media (min-width: 768px)  { .hero { padding-block: 64px; } }
@media (min-width: 1024px) { .hero { padding-block: 96px 104px; } }

/* Trama de plano de construcción: líneas --divider cada 48px, desvanecidas hacia los bordes */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--divider) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 65% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 65% 45%, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero > .contenedor { position: relative; }

.hero__resalte { color: var(--kompo-lima); }

.hero__interior { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .hero__interior {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: center;
  }
}

.hero__titulo {
  margin: 16px 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__bajada {
  max-width: 480px;
  margin-bottom: 32px;
  color: var(--text-2);
}
.hero__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.hero__garantias li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__garantias svg { color: var(--kompo-lima); }

/* Entrada al cargar: el texto sube escalonado, el pedido llega después */
.js .hero__texto > * {
  animation: entrar 480ms var(--ease-entrada) both;
}
.js .hero__texto > :nth-child(2) { animation-delay: 60ms; }
.js .hero__texto > :nth-child(3) { animation-delay: 120ms; }
.js .hero__texto > :nth-child(4) { animation-delay: 180ms; }
.js .hero__texto > :nth-child(5) { animation-delay: 240ms; }
.js .pedido { animation: entrar 480ms var(--ease-entrada) 320ms both; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Pedido de ejemplo: la conversación que reemplaza a la foto mientras no haya una real */
.pedido {
  width: 100%;
  max-width: 360px;
  padding: 12px;
  border-radius: 24px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.45;
}
@media (min-width: 1024px) { .pedido { justify-self: end; } }

.pedido__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.pedido__marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}
.pedido__logo { width: 24px; height: 24px; font-size: 12px; }
.pedido__titulo { color: var(--text-2); text-align: right; }
.pedido__mensajes { display: grid; gap: 8px; }

.mensaje {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 84%;
}
.mensaje--vecino { justify-self: end; }
.mensaje--kompo  { justify-self: start; }

.mensaje__burbuja {
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--surface-alt);
}
.mensaje--kompo  .mensaje__burbuja { border-bottom-left-radius: 4px; }
.mensaje--vecino .mensaje__burbuja {
  background: var(--bg);
  border-bottom-right-radius: 4px;
}
.mensaje__burbuja p { margin: 0; }

.mensaje__hora {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  text-align: right;
}

.mensaje__dato {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px !important;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
  font-variant-numeric: tabular-nums;
}
.mensaje__dato-etiqueta { color: var(--text-2); }

.mensaje--estado {
  max-width: 100%;
  justify-self: stretch;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.mensaje__estado-texto {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

/* Conversación en tiempo real: los mensajes entran uno por segundo.
   El marco reserva su altura final desde el inicio, así la página no salta. */
.js .pedido[data-animar] .mensaje {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--dur-lenta) var(--ease-entrada),
    transform var(--dur-lenta) var(--ease-entrada);
}
.js .pedido[data-animar] .mensaje.mostrado { opacity: 1; transform: none; }

.mensaje__escribiendo {
  position: absolute;
  left: 0; bottom: 0;
  display: none;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--surface-alt);
}
.mensaje__escribiendo i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  animation: escribiendo 1.2s var(--ease-entrada) infinite;
}
.mensaje__escribiendo i:nth-child(2) { animation-delay: 0.2s; }
.mensaje__escribiendo i:nth-child(3) { animation-delay: 0.4s; }
@keyframes escribiendo {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}
.js .pedido[data-animar] .mensaje.escribiendo { opacity: 1; transform: none; }
.mensaje.escribiendo .mensaje__escribiendo { display: inline-flex; }
.mensaje.escribiendo .mensaje__burbuja { visibility: hidden; }

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.etiqueta-estado--exito {
  background: var(--estado-exito-relleno);
  color: var(--estado-exito-texto);
}

/* ---------- 9 · El problema ----------
   Banda --surface a sangre. Titular a la izquierda, las tres escenas a la derecha
   en H2 separadas por líneas, y el cierre con una regla lima de 3px. */
.problema { background: var(--surface); }
.problema__interior { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .problema__interior { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
}
.problema .seccion__cabecera { max-width: 480px; }
.problema .seccion__titulo { margin-bottom: 0; text-wrap: balance; }

.problema__escenas { display: grid; }

/* Cada escena: la frase grande y, al lado, la evidencia del teléfono del vecino */
.escena {
  display: grid;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--divider);
}
.escena:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) {
  .escena { grid-template-columns: 1fr 272px; gap: 32px; align-items: center; }
}
.escena__texto {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.escena__objeto {
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 320px;
}

.contacto {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.contacto + .contacto { border-top: 1px solid var(--divider); }
.contacto__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.contacto__datos { display: grid; min-width: 0; }
.contacto__nombre { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contacto__mensaje { color: var(--text-2); }
.contacto__estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
}
.contacto__estado--sin { color: var(--estado-problema-texto); }

.objeto-precio { display: grid; gap: 4px; }
.objeto-precio__etiqueta {
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
.objeto-precio__monto {
  font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--estado-pendiente-texto);
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}
.objeto-precio__cita { color: var(--text-2); }

.objeto-perdido {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
}
.objeto-perdido__numero {
  color: var(--text-2);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.objeto-perdido__estado {
  margin-top: 4px;
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--estado-problema-texto);
}

.problema__cierre {
  margin-top: 8px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--kompo-lima);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
}

/* ---------- 10 · Cómo funciona ----------
   Tres tarjetas --surface: número en Dato lima, icono del paso en un bloque
   --surface-alt, H3 y texto. Sin conectores ni flechas. */
.pasos { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.paso {
  display: grid;
  gap: 16px;
  align-content: start;
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
}
.paso__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.paso__icono {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--text);
  display: grid;
  place-items: center;
}
.paso__titulo { text-wrap: balance; }
.paso__texto { color: var(--text-2); }

/* ---------- 11 · Así es un maestro ---------- */
.vitrina-maestro {
  display: grid;
  gap: 32px;
  margin-top: 48px;
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .vitrina-maestro { grid-template-columns: 400px 1fr; gap: 64px; align-items: center; }
}
.vitrina-maestro .tarjeta { margin-inline: auto; width: 100%; }

.tarjeta {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
}
.tarjeta__ejemplo {
  position: absolute;
  top: 24px; right: 24px;
  color: var(--text-2);
}
.tarjeta__cabecera { display: flex; gap: 16px; align-items: center; padding-right: 72px; }
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
}
.avatar--64 { width: 64px; height: 64px; font-size: 24px; }
.tarjeta__nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta__datos { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.tarjeta__verificacion {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
  line-height: 1.45;
}
.tarjeta__verificacion li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tarjeta__verificacion svg { color: var(--kompo-lima); }

.tarjeta__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}
.tarjeta__cifras > div { display: grid; gap: 8px; align-content: start; }
.tarjeta__cifras dd { margin: 0; font-variant-numeric: tabular-nums; }
.tarjeta__etiqueta { color: var(--text-2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding-inline: 10px;
  border-radius: 999px;
  background: var(--kompo-lima);
  color: var(--kompo-tinta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.confianza { display: grid; gap: 24px; }
.bloque {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}
.bloque__icono {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--text);
  display: grid;
  place-items: center;
}
.bloque__titulo { margin-bottom: 4px; }
.bloque__texto { color: var(--text-2); }
.confianza__cierre {
  margin-top: 8px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--kompo-lima);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: balance;
}

/* ---------- 12 · Precio claro ----------
   Sección clara. Texto y botón a la izquierda; a la derecha, la línea de tiempo
   de estados mostrando que el precio llega antes que el trabajo. */
.precio__interior { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .precio__interior { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
}
.precio .seccion__cabecera { max-width: 560px; }
.precio__texto { color: var(--text-2); margin-bottom: 24px; }
.precio__sin-titulo { color: var(--text-2); margin-bottom: 8px; }
.precio__sin {
  display: grid;
  gap: 8px;
  margin-bottom: 32px;
  font-weight: 600;
}
.precio__sin li { display: flex; align-items: center; gap: 8px; }
.precio__sin svg { color: var(--estado-problema-relleno); }

.linea-tiempo {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: 24px;
  padding: 24px;
}
@media (min-width: 1024px) { .linea-tiempo { justify-self: end; } }
.linea-tiempo__titulo { display: block; color: var(--text-2); margin-bottom: 16px; }
.linea-tiempo__hitos { display: grid; }

.hito {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding-bottom: 24px;
}
.hito:last-child { padding-bottom: 0; }
.hito::before {
  content: "";
  position: absolute;
  left: 8.5px;
  top: 14px;
  bottom: -6px;
  width: 3px;
  border-radius: 2px;
  background: var(--border);
}
.hito:last-child::before { display: none; }
.hito--hecho::before { background: var(--acento-linea); }
.hito__punto {
  position: relative;
  z-index: 1;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  margin: 6px 0 0 6px;
}
.hito--hecho .hito__punto { background: var(--acento-linea); }
.hito--ahora .hito__punto {
  width: 12px; height: 12px;
  margin: 4px 0 0 4px;
  background: var(--estado-pendiente-relleno);
}
.hito > div { display: grid; gap: 4px; justify-items: start; }
.hito__texto { font-weight: 600; color: var(--text); }
.hito:not(.hito--hecho):not(.hito--ahora) .hito__texto { font-weight: 400; color: var(--text-2); }
.hito__hora { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.hito__dato { margin-top: 4px; font-variant-numeric: tabular-nums; }

.etiqueta-estado--pendiente {
  background: var(--estado-pendiente-relleno);
  color: var(--kompo-tinta);
}

/* ---------- 13 · Oficios y chips ---------- */
.oficios { text-align: center; }
.oficios__titulo { max-width: none; }
.oficios__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 24px;
}
.oficios__cierre { color: var(--text-2); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-rapida),
    border-color     var(--dur-rapida),
    color            var(--dur-rapida),
    transform        var(--dur-rapida);
}
.chip:hover  { background: var(--surface); }
.chip:active { transform: scale(0.98); }
.chip--landing { height: 44px; padding-inline: 20px; font-size: 16px; }

/* Chip seleccionable (radio): borde y texto lima con check, nunca relleno lima */
.chip--seleccionable input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.chip__check { display: none; }
.chip--seleccionado,
.chip--seleccionable:has(input:checked) {
  border-color: var(--kompo-lima);
  color: var(--kompo-lima);
}
.chip--seleccionado .chip__check,
.chip--seleccionable:has(input:checked) .chip__check { display: block; }
.chip--seleccionable:has(input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* ---------- 14 · Preguntas ----------
   Cabecera a la izquierda, fija mientras se recorre la lista; preguntas a la
   derecha como tarjetas --surface que pasan a --surface-alt al abrirse. */
.preguntas__interior { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .preguntas__interior { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .preguntas__cabecera { position: sticky; top: calc(var(--alto-barra) + 24px); }
}
.preguntas__cabecera { max-width: 480px; }
.preguntas .seccion__titulo { margin-bottom: 0; text-wrap: balance; }
.preguntas__otra { margin-top: 24px; color: var(--text-2); }

.preguntas__lista { display: grid; gap: 8px; }
.pregunta {
  background: var(--surface);
  border-radius: 16px;
  padding: 0 24px;
  transition: background-color var(--dur-rapida);
}
.pregunta[open] { background: var(--surface-alt); }
.pregunta summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:focus-visible { outline-offset: 4px; border-radius: 4px; }
.pregunta__icono { color: var(--text-2); transition: transform var(--dur-base) var(--ease-entrada); }
.pregunta[open] .pregunta__icono { transform: rotate(180deg); color: var(--text); }
.pregunta__respuesta {
  padding-bottom: 24px;
  color: var(--text-2);
  animation: entrar var(--dur-base) var(--ease-entrada);
}

/* ---------- 15 · Formulario ----------
   Cabecera fija a la izquierda; formulario a la derecha dentro de un panel
   --surface. Los campos van sobre --surface-alt para apilar. */
.formulario-seccion { border-top: 1px solid var(--divider); }
.formulario__interior { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .formulario__interior { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .formulario__cabecera { position: sticky; top: calc(var(--alto-barra) + 24px); }
}
.formulario__cabecera { max-width: 480px; }
.formulario__panel {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px;
}
@media (min-width: 768px) { .formulario__panel { padding: 32px; } }
.formulario__panel .entrada { background: var(--surface-alt); }
.formulario__panel .chip:hover { background: var(--surface-alt); }

.formulario {
  display: grid;
  gap: 24px;
}
.campo--anidado {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface-alt);
}
.campo--anidado .entrada { background: var(--surface); }
.campo--anidado .campo__etiqueta { margin-bottom: 8px; }
.campo { border: 0; padding: 0; min-width: 0; }
.campo__etiqueta {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
}
.campo__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.entrada {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  transition: border-color var(--dur-rapida);
}
.entrada::placeholder { color: var(--text-2); }
.entrada:focus, .entrada:focus-visible {
  outline: none;
  border: 1.5px solid var(--kompo-lima);
  padding-inline: 15.5px;
}
.entrada[aria-invalid="true"] {
  border: 1.5px solid var(--estado-problema-relleno);
  padding-inline: 15.5px;
}
/* Prefijo fijo dentro del campo (+502) */
.entrada-prefijo { position: relative; }
.entrada-prefijo__texto {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  pointer-events: none;
}
.entrada-prefijo .entrada { padding-left: 64px; }
.entrada-prefijo .entrada:focus,
.entrada-prefijo .entrada[aria-invalid="true"] { padding-left: 63.5px; }

.campo__error {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--estado-problema-texto);
}
.formulario__letra-chica {
  margin-top: -12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.formulario__error-envio { margin-top: -12px; }
.formulario__alternativa {
  margin-top: 24px;
  color: var(--text-2);
}

.exito {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 24px;
  background: var(--surface-alt);
  border-radius: 16px;
}
.exito svg { color: var(--kompo-lima); }
.exito:focus-visible { outline-offset: 4px; }

/* ---------- 16 · Pie ----------
   Arriba: marca a la izquierda y bloque para maestros a la derecha.
   Abajo, tras una línea: legales y WhatsApp a la izquierda, año a la derecha. */
.pie {
  border-top: 1px solid var(--divider);
  padding-block: 48px 32px;
}
.pie__superior { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .pie__superior { grid-template-columns: 1fr auto; align-items: center; }
}
.pie__marca { display: flex; align-items: center; gap: 12px; }
.pie__nombre { display: block; font-size: 19px; line-height: 1.3; font-weight: 700; }
.pie__ciudad { display: block; font-size: 14px; line-height: 1.45; color: var(--text-2); }

.pie__maestros { display: flex; align-items: center; gap: 16px; }
.pie__icono {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pie__pregunta { display: block; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pie__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.pie__enlace:hover { text-decoration: underline; }

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.pie__legales a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pie__copia { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 17 · Revelado al hacer scroll ---------- */
/* Solo con JS y sin reduced-motion: el JS agrega .revelar y .visible */
.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--dur-lenta) var(--ease-entrada) var(--retraso, 0ms),
    transform var(--dur-lenta) var(--ease-entrada) var(--retraso, 0ms);
}
.js .revelar.visible { opacity: 1; transform: none; }

/* ---------- 18 · Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .boton:active, .chip:active { transform: none; }
  .hoja__panel { animation: none; }
  .pregunta__icono { transition: none; }
  .pregunta__respuesta { animation: none; }
  .boton__spinner { animation-duration: 1.6s; }
  .js .hero__texto > *, .js .pedido { animation: none; }
  .js .pedido[data-animar] .mensaje { opacity: 1; transform: none; transition: none; }
  .mensaje__escribiendo { display: none !important; }
  .mensaje.escribiendo .mensaje__burbuja { visibility: visible; }
}