/* CampoBot · landing */

/* ---------- hero ----------
   Como en tropabot.com: la portada ocupa el alto de la pantalla y todo escala con ella.
   Las medidas usan el menor entre ancho (vw) y alto (vh), así en notebooks bajas entra entera. */
.hero {
  min-height: calc(100svh - 72px);
  display: flex; flex-direction: column;
  padding: clamp(20px, 4vh, 56px) 0 clamp(16px, 3vh, 32px);
}
.hero__grilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-block: auto; }
.frase-marca { font-family: var(--serif); font-size: clamp(1rem, min(1.3vw, 2.2vh), 1.25rem); font-weight: 600; color: var(--arcilla); margin-bottom: clamp(8px, 1.6vh, 16px); }
.hero h1 { font-size: clamp(2.4rem, min(4.6vw, 8vh), 4.1rem); margin-bottom: clamp(14px, 2.6vh, 26px); text-wrap: wrap; }
.hero h1 .junto { white-space: nowrap; } /* el titular va en dos líneas: "Tu empresa," / "simple de manejar." */
.hero__bajada { font-size: clamp(1.02rem, min(1.4vw, 2.4vh), 1.3rem); color: var(--texto-suave); max-width: 34rem; margin-bottom: clamp(18px, 3.4vh, 34px); }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.enlace-secundario { font-weight: 600; color: var(--tierra); }
.hero__nota { margin: clamp(10px, 1.6vh, 14px) 0 0; font-size: .95rem; color: var(--texto-suave); }

/* ejemplo: mensaje → ficha */
.ejemplo { margin: 0; display: grid; grid-template-columns: 1fr; position: relative; font-size: clamp(.92rem, min(1.1vw, 1.9vh), 1rem); }
.ejemplo__etiqueta { display: block; font-size: .86rem; font-weight: 600; color: var(--texto-suave); margin-bottom: clamp(6px, 1.2vh, 10px); }
.ejemplo__chat { background: #e8dfd2; border-radius: var(--radio); padding: clamp(14px, 2.2vh, 20px); }
.burbuja { background: var(--blanco); border-radius: 4px 14px 14px 14px; padding: 12px 14px 8px; max-width: 92%; box-shadow: 0 1px 0 rgba(58, 34, 25, .08); }
.burbuja__audio { display: inline-flex; align-items: center; gap: 3px; height: 22px; vertical-align: middle; }
.burbuja__audio i { width: 3px; border-radius: 2px; background: var(--arcilla); opacity: .75; }
.burbuja__audio i:nth-child(3n+1) { height: 8px; } .burbuja__audio i:nth-child(3n+2) { height: 18px; } .burbuja__audio i:nth-child(3n) { height: 12px; }
.burbuja__duracion { font-size: .8rem; color: var(--texto-suave); margin-left: 8px; }
.burbuja p { margin: 8px 0 4px; font-size: .98em; }
.burbuja__hora { display: block; text-align: right; font-size: .75rem; color: var(--texto-suave); }

/* el paso del medio: una línea punteada que une las dos tarjetas, con el sistema trabajando en el medio */
.ejemplo__paso { display: flex; align-items: center; gap: 12px; padding: clamp(10px, 1.8vh, 16px) 0 clamp(10px, 1.8vh, 16px) 22px; position: relative; }
.ejemplo__paso::before { content: ""; position: absolute; left: 39px; top: 0; bottom: 0; border-left: 2px dashed #cdb8a2; }
.ejemplo__icono { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--arcilla); color: var(--blanco); display: grid; place-items: center; box-shadow: 0 0 0 5px var(--hueso); }
.ejemplo__icono svg { width: 18px; height: 18px; }
.ejemplo__paso span:last-child { font-size: .88rem; font-weight: 600; color: var(--arcilla); }

.ficha { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(14px, 2.2vh, 20px) 22px; }
.ficha dl { margin: 0; display: grid; gap: 0; }
.ficha dl div { display: flex; justify-content: space-between; gap: 16px; padding: clamp(5px, 1vh, 9px) 0; border-bottom: 1px solid var(--linea); }
.ficha dl div:last-child { border-bottom: 0; }
.ficha dt { color: var(--texto-suave); font-size: .95em; }
.ficha dd { margin: 0; font-weight: 600; text-align: right; }
.ficha__estado { display: inline-block; margin-top: clamp(6px, 1.2vh, 12px); font-size: .82rem; font-weight: 600; color: var(--cielo); }
.ficha__estado::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cielo); margin-right: 8px; vertical-align: 1px; }
.ejemplo figcaption { font-size: .85rem; color: var(--texto-suave); margin-top: 10px; }

.confianza { margin-top: clamp(24px, 4vh, 56px); padding-top: clamp(16px, 2.6vh, 28px); border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px 40px; }
.confianza p { margin: 0; font-size: .95rem; color: var(--texto-suave); }
.confianza ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.confianza img { height: 28px; width: auto; } /* cada producto con sus colores: ARQUITECTURA-DE-MARCA.md */

/* pantallas bajas (notebooks de 720–820 px de alto): el ejemplo se compacta para que entre la fila de productos */
@media (min-width: 901px) and (max-height: 820px) {
  .ejemplo__paso { padding-block: 6px; }
  .ficha dl div { padding: 4px 0; }
  .ficha__estado { margin-top: 4px; }
  .burbuja p { margin: 4px 0 2px; }
  .confianza { margin-top: 14px; padding-top: 12px; }
}

@media (max-width: 900px) {
  /* en celular el ejemplo va debajo del texto y la portada fluye normal (sin foto de fondo, centrarla deja un hueco) */
  .hero { min-height: 0; padding: 36px 0 32px; }
  .hero__grilla { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
}
@media (max-width: 340px) {
  .hero h1 .junto { white-space: normal; }
  .hero__bajada { font-size: clamp(1.02rem, 4.4vw, 1.2rem); }
}

/* ---------- secciones ---------- */
.seccion { padding: 96px 0; }
.seccion--superficie { background: var(--superficie); border-block: 1px solid var(--linea); }
.seccion__titulo { margin-bottom: 44px; }
@media (max-width: 700px) { .seccion { padding: 64px 0; } .seccion__titulo { margin-bottom: 30px; } }

/* problema */
.problemas { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--linea); }
.problemas li { padding: 26px 28px 22px 0; border-bottom: 1px solid var(--linea); }
.problemas li:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--linea); }
.problemas li:nth-child(even) { padding-left: 40px; }
.problemas h3 { margin-bottom: 8px; }
.problemas p { color: var(--texto-suave); margin: 0; }
/* sin ancho máximo: usa todo el contenedor y corta solo si no entra */
.remate { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--tierra); margin: 0; }
@media (max-width: 700px) {
  .problemas { grid-template-columns: 1fr; }
  .problemas li, .problemas li:nth-child(odd), .problemas li:nth-child(even) { padding: 22px 0; border-right: 0; }
}

/* pasos */
/* Los tres pasos van unidos por una línea con flecha, y una vuelta debajo cierra el ciclo. */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pasos li { position: relative; }
.pasos__n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--arcilla); color: var(--blanco); font-weight: 600; margin-bottom: 18px; }
/* Flecha hacia el próximo paso: línea y punta en una sola pieza, a 10 px de cada círculo.
   Círculo de 40 px y separación entre pasos de 40 px: empieza en 40 + 10 y termina 10 px antes del círculo siguiente. */
.pasos li:not(:last-child)::after {
  content: ""; position: absolute; top: 14px; height: 12px; left: 50px; right: -30px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23c9ad92'/%3E%3C/svg%3E") right center / 10px 12px no-repeat,
    linear-gradient(#c9ad92, #c9ad92) left center / calc(100% - 9px) 2px no-repeat;
}
.pasos h3 { margin-bottom: 10px; }
.pasos p { color: var(--texto-suave); margin: 0; }
.pasos-vuelta { display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px; margin: 28px 0 56px; color: var(--arcilla); font-weight: 600; }
.pasos-vuelta svg { width: 26px; height: 26px; flex: none; }

/* recorrido: cuatro tarjetas con flechas entre medio */
.recorrido { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 28px; }
.recorrido__titulo { font-size: .95rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 16px; }
.recorrido ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: r; }
.recorrido li { counter-increment: r; position: relative; padding: 14px 16px; background: var(--hueso); border-radius: 10px; font-weight: 500; line-height: 1.4; }
.recorrido li::before { content: counter(r); display: block; font-family: var(--serif); font-weight: 700; color: var(--arcilla); margin-bottom: 4px; }
.recorrido li:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -26px; transform: translateY(-50%);
  font: 600 1.2rem/1 var(--sans); color: var(--arcilla);
}
@media (max-width: 860px) {
  /* número en su propia columna; la línea baja por esa columna y no cruza el texto */
  .pasos { grid-template-columns: 1fr; gap: 34px; }
  .pasos li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; }
  .pasos__n { grid-row: 1 / span 2; margin-bottom: 0; }
  .pasos h3, .pasos p { grid-column: 2; }
  .pasos h3 { margin-top: 8px; }
  /* vertical: del borde de abajo del círculo + 10 px, hasta 10 px antes del círculo siguiente (separación 34 px) */
  .pasos li:not(:last-child)::after {
    top: 50px; bottom: -24px; left: 14px; right: auto; width: 12px; height: auto;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 0l6 10 6-10z' fill='%23c9ad92'/%3E%3C/svg%3E") center bottom / 12px 10px no-repeat,
      linear-gradient(#c9ad92, #c9ad92) center top / 2px calc(100% - 9px) no-repeat;
  }
  .recorrido ol { grid-template-columns: 1fr; gap: 26px; }
  .recorrido li:not(:last-child)::after { content: "↓"; top: auto; bottom: -24px; right: auto; left: 18px; transform: none; }
}

/* productos */
.productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.producto { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.producto__logo { height: 64px; width: 100%; display: flex; align-items: center; margin-bottom: 18px; }
.producto__logo img { height: 34px; width: auto; max-width: 100%; }
.producto__logo--oscuro { background: #212223; border-radius: 10px; padding: 0 16px; }
.producto__logo--oscuro img { height: 30px; }
.producto__wordmark { font: 700 1.9rem/1 var(--sans); letter-spacing: .08em; color: var(--tierra); }
.producto h3 { margin: 12px 0 8px; }
.producto p { color: var(--texto-suave); flex: 1; }
.producto a:not(.boton) { font-weight: 600; }
.estado { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hueso); color: var(--texto-suave); border: 1px solid var(--linea); }
.estado--prod { color: var(--cielo); border-color: #c4d4e0; background: #eef3f7; }
.producto--cta { background: var(--hueso); border-style: dashed; justify-content: center; }
.producto--cta h3 { margin-top: 0; }
.producto--cta p { flex: 0; }
@media (max-width: 960px) { .productos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .productos { grid-template-columns: 1fr; } }

/* por qué */
.seccion--oscura { background: var(--tierra); color: #eadfd2; }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--hueso); }
/* Una fila por razón: título grande a la izquierda (entero, en una línea) y la explicación a la derecha.
   Distinta de la grilla de "Si tu empresa se maneja así". */
.razones { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(246, 240, 231, .16); }
.razones li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 56px; align-items: center; padding: 26px 0; border-top: 1px solid rgba(246, 240, 231, .16); }
.razones h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); text-align: right; }
.razones p { margin: 0; color: #d9c9b8; font-size: 1.05rem; }
@media (max-width: 760px) { .razones li { grid-template-columns: 1fr; padding: 22px 0; } .razones h3 { text-align: left; } }

/* cierre */
.cierre { background: var(--arcilla); padding: 88px 0; }
.cierre .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cierre h2 { color: var(--blanco); max-width: 24ch; }

/* ---------- celular: versión aliviada ----------
   Menos carga visual: más aire entre bloques y menos cajas, líneas y elementos por pantalla.
   Una sola acción en la portada, la ficha en dos columnas, listas sin recuadros
   y los productos en un carrusel que se desliza. */
.productos__pista { display: none; }
@media (max-width: 700px) {
  .seccion { padding: 52px 0; }
  .seccion__titulo { margin-bottom: 24px; }

  /* portada: como en tropabot.com, entra entera en una pantalla (texto, botón, ejemplo y sistemas).
     Sin margen extra bajo el encabezado, y cada medida toma el menor entre el ancho (vw) y el alto (svh)
     del teléfono, así se sostiene en pantallas de distinto tamaño. Si aun así no entra, crece y no corta. */
  .hero { min-height: calc(100svh - 60px); padding: clamp(6px, 1.6svh, 20px) 0 clamp(8px, 1.8svh, 22px); }
  .hero__grilla { gap: clamp(8px, 2.4svh, 30px); }
  .frase-marca { font-size: clamp(.88rem, 2svh, 1.1rem); margin-bottom: clamp(4px, .9svh, 12px); }
  .hero h1 { font-size: clamp(1.75rem, min(9vw, 5svh), 3.4rem); margin-bottom: clamp(8px, 1.5svh, 18px); }
  .hero__bajada { font-size: clamp(.92rem, min(4.3vw, 2svh), 1.15rem); line-height: 1.5; margin-bottom: clamp(12px, 2.2svh, 26px); }
  .hero .boton { min-height: clamp(44px, 5.8svh, 52px); }
  .enlace-secundario, .hero__nota { display: none; }
  .ejemplo { font-size: clamp(.82rem, 1.85svh, .98rem); }
  .ejemplo__chat { background: none; padding: 0; }      /* sin caja alrededor de la burbuja */
  .ejemplo__etiqueta { font-size: .8rem; margin-bottom: clamp(4px, .9svh, 10px); }
  .burbuja { padding: clamp(8px, 1.3svh, 12px) 14px clamp(5px, .8svh, 8px); }
  .burbuja p { margin: clamp(3px, .7svh, 8px) 0 2px; line-height: 1.45; }
  .ejemplo__paso { padding-block: clamp(4px, .9svh, 10px); }
  .ejemplo__icono { width: 30px; height: 30px; box-shadow: 0 0 0 4px var(--hueso); }
  .ejemplo__icono svg { width: 15px; height: 15px; }
  .ejemplo__paso::before { left: 36px; }
  .ficha { padding: clamp(10px, 1.7svh, 16px) 16px; }
  /* tres datos cortos arriba; ubicación y destino abajo: dos filas en lugar de tres */
  .ficha dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.1svh, 10px) 12px; }
  .ficha dl div { display: block; padding: 0; border-bottom: 0; }
  .ficha dl div:nth-child(4) { grid-column: span 2; }
  .ficha dt { font-size: .74rem; }
  .ficha dd { text-align: left; }
  .ficha__estado { margin-top: clamp(6px, 1.1svh, 12px); font-size: .78rem; }
  .confianza { justify-content: flex-start; margin-top: clamp(10px, 2svh, 28px); padding-top: 0; border-top: 0; gap: clamp(6px, 1.1svh, 12px) 0; }
  .confianza p { width: 100%; font-size: .82rem; }
  .confianza ul { flex-wrap: nowrap; gap: 0 22px; }
  .confianza img { height: clamp(16px, 2.3svh, 20px); }

  /* problema: sin líneas divisorias, separado con espacio */
  .problemas { border-top: 0; margin-bottom: 28px; display: grid; gap: 18px; }
  .problemas li, .problemas li:nth-child(odd), .problemas li:nth-child(even) { padding: 0; border: 0; }
  .problemas h3 { font-size: 1.15rem; margin-bottom: 4px; }
  .remate { font-size: 1.2rem; }

  /* cómo trabajamos: el ejemplo pasa de cuatro tarjetas en un recuadro a una lista limpia */
  .pasos { gap: 28px; }
  .pasos li:not(:last-child)::after { bottom: -18px; }
  .pasos-vuelta { justify-content: flex-start; text-align: left; margin: 22px 0 30px; font-size: .95rem; }
  .recorrido { background: none; border: 0; border-radius: 0; padding: 0; }
  .recorrido__titulo { margin-bottom: 14px; }
  .recorrido ol { gap: 10px; }
  .recorrido li { background: none; border-radius: 0; padding: 0 0 0 28px; }
  .recorrido li::before { position: absolute; left: 2px; top: 0; margin: 0; }
  .recorrido li:not(:last-child)::after { content: none; }

  /* productos: carrusel con la tarjeta siguiente asomando */
  .productos__pista { display: block; margin: -12px 0 16px; font-size: .9rem; color: var(--texto-suave); }
  .productos {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 2px 16px 12px; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .productos::-webkit-scrollbar { display: none; }
  .producto { flex: 0 0 82%; scroll-snap-align: start; padding: 20px; }
  .producto__logo { height: 44px; margin-bottom: 14px; }
  .producto__logo img { height: 28px; }
  .producto__logo--oscuro img { height: 24px; }

  /* por qué */
  .razones li { padding: 18px 0; gap: 6px; }
  .razones h3 { font-size: 1.25rem; }

  .cierre { padding: 56px 0; }
  .cierre .contenedor { flex-direction: column; justify-content: center; text-align: center; }
}

/* teléfonos con poco alto visible (la barra del navegador ocupa parte de la pantalla):
   se va lo accesorio del ejemplo para que la portada siga entrando entera */
@media (max-width: 700px) and (max-height: 720px) {
  .burbuja__hora, .ficha__estado { display: none; }
  .confianza { margin-top: 8px; }
  .hero h1 { margin-bottom: 6px; }
  .hero__bajada { margin-bottom: 10px; }
  .ejemplo__paso { padding-block: 2px; }
  .ficha { padding-block: 8px; }
  .ejemplo__etiqueta { margin-bottom: 3px; }
}