/* CampoBot · landing */

.whatsapp-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; background: #0d7d43; color: #fff;
  box-shadow: 0 3px 14px rgba(36, 44, 39, .2);
}
.whatsapp-flotante:hover { background: #0d6f3a; transform: translateY(-2px); }
.whatsapp-flotante svg { width: 34px; height: 34px; }
@media (max-width: 700px) { .whatsapp-flotante { right: 16px; bottom: 16px; } }

/* ---------- 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; }
.hero__nota { margin: clamp(10px, 1.6vh, 14px) 0 0; font-size: .95rem; color: var(--texto-suave); }

/* La portada muestra el tipo de operaciones sin adelantar un producto específico. */
.ejemplo { margin: 0; padding: clamp(18px, 2.4vw, 30px); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); font-size: clamp(.92rem, min(1.1vw, 1.9vh), 1rem); }
.ejemplo__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ejemplo__titulo { font-weight: 600; color: var(--tierra); line-height: 1.35; }
.ejemplo__nota { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--hueso); color: var(--texto-suave); font-size: .76rem; }
.ejemplo__lista { margin: 0; }
.ejemplo__fila { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.ejemplo__fila dt { color: var(--arcilla); font-size: .82rem; font-weight: 600; }
.ejemplo__fila dd { margin: 0; color: var(--texto); font-weight: 500; line-height: 1.4; }
.ejemplo figcaption { margin-top: 16px; color: var(--texto-suave); font-size: .82rem; }

@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); }
  .ejemplo { max-width: 640px; width: 100%; justify-self: center; }
}
@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; }
.productos__intro { max-width: 62ch; margin: -24px 0 32px; color: var(--texto-suave); }
@media (max-width: 700px) {
  .seccion { padding: 52px 0; }
  .seccion__titulo { margin-bottom: 24px; }

  /* portada: texto, botón y visual de operaciones.
     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); }
  .hero__nota { display: none; }
  .ejemplo { padding: 16px; font-size: .9rem; }
  .ejemplo__cabecera { margin-bottom: 10px; }
  .ejemplo__fila { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 9px 0; }
  .ejemplo__fila dt { font-size: .76rem; }
  .ejemplo figcaption { margin-top: 10px; font-size: .76rem; }

  /* 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__intro { margin: -14px 0 26px; font-size: .95rem; }
  .productos__pista { display: block; margin: -14px 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: compacta el ejemplo sin ocultar información. */
@media (max-width: 700px) and (max-height: 720px) {
  .ejemplo__fila { padding-block: 7px; }
  .ejemplo figcaption { display: none; }
  .hero h1 { margin-bottom: 6px; }
  .hero__bajada { margin-bottom: 10px; }
}

/* Featured projects on the home page */
.hero { min-height: 0; display: block; padding: 52px 0 48px; }
.hero__grilla { display: block; margin: 0 0 36px; }
.hero__texto { max-width: 720px; }
.portada-proyectos__cabecera { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.portada-proyectos__sobrelinea { margin: 0 0 7px; color: var(--arcilla); font-size: .8rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.portada-proyectos h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); }
.productos-principales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.productos-principales .producto { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 8px 24px rgba(58, 34, 25, .055); transition: transform .2s ease, box-shadow .2s ease; }
.productos-principales .producto:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(58, 34, 25, .1); }
.producto__visual { position: relative; display: block; height: 190px; overflow: hidden; text-decoration: none; }
.producto__visual--captura { display: grid; place-items: center; background: #0d281b; }
.producto__visual--captura img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; transition: transform .45s ease; }
.producto--tropa:hover .producto__visual--captura img { transform: scale(1.035); }
.producto__visual--club { background: #e8f0e7; isolation: isolate; }
.producto__visual--rodar { background: #f4efe3; }
.producto__cuerpo { padding: 18px 20px 20px; }
.producto__encabezado { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.producto__logo { width: auto; height: auto; min-width: 0; margin: 0; }
.producto__logo img { max-height: 32px; width: auto; max-width: 150px; }
.producto__encabezado .estado { flex: none; font-size: .69rem; padding: 3px 8px; } /* 11 px: el mínimo legible */
.productos-principales .producto h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.3; }
.productos-principales .producto p { margin: 0; color: var(--texto-suave); font-size: .91rem; line-height: 1.5; }
.productos-desarrollo { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 18px; margin-top: 20px; padding: 16px 20px; border: 1px solid var(--linea); border-radius: 12px; background: rgba(255,255,255,.42); }
.productos-desarrollo__titulo { margin: 0; color: var(--texto-suave); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.producto-futuro { display: flex; align-items: center; gap: 14px; min-width: 0; }
.producto-futuro + .producto-futuro { border-left: 1px solid var(--linea); padding-left: 18px; }
.producto-futuro img { flex: none; width: auto; max-width: 120px; height: auto; max-height: 25px; }
.producto-futuro p { margin: 0; color: var(--texto-suave); font-size: .8rem; line-height: 1.4; }
.producto-futuro__marca { flex: none; color: var(--tierra); font-size: 1.08rem; font-weight: 750; letter-spacing: .11em; }
@media (max-width: 900px) {
  .hero { padding-top: 38px; }
  .productos-principales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .productos-principales .producto--rodar { grid-column: 1 / -1; }
  .productos-principales .producto--rodar .producto__visual { height: 160px; }
  .productos-desarrollo { grid-template-columns: 1fr 1fr; }
  .productos-desarrollo__titulo { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hero { padding: 30px 0 38px; }
  .hero__grilla { margin-bottom: 30px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .portada-proyectos__cabecera { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 16px; }
  .portada-proyectos h2 { font-size: 1.7rem; }
  .productos-principales { grid-template-columns: 1fr; gap: 14px; }
  .productos-principales .producto--rodar { grid-column: auto; }
  .producto__visual { height: 180px; }
  .productos-desarrollo { grid-template-columns: 1fr; gap: 12px; padding: 15px 16px; }
  .productos-desarrollo__titulo { grid-column: auto; }
  .producto-futuro + .producto-futuro { border-left: 0; border-top: 1px solid var(--linea); padding: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .productos-principales .producto, .producto__visual--captura img { transition: none; }
}

.producto__visual { width: 100%; }

\n
/* Wide hero: copy and the three active products share the first screen */
.hero .contenedor { width: min(100% - 64px, 1480px); }
.hero { padding: clamp(28px, 5vh, 54px) 0 34px; }
.hero__grilla { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(0, 1.7fr); align-items: center; gap: clamp(28px, 4vw, 64px); margin: 0; }
.hero__texto { max-width: 560px; }
.hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.15rem); }
.hero__bajada { max-width: 32rem; font-size: clamp(1rem, 1.25vw, 1.2rem); }
.portada-proyectos__cabecera { align-items: center; margin-bottom: 16px; }
.portada-proyectos h2 { max-width: 19ch; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.portada-proyectos__sobrelinea { font-size: .7rem; }
.productos-principales { gap: 12px; }
.producto__visual { height: clamp(132px, 17vh, 170px); }
.producto__cuerpo { padding: 14px 14px 16px; }
.producto__encabezado { margin-bottom: 11px; }
.producto__logo img { max-width: 125px; }
.productos-principales .producto h3 { font-size: .98rem; }
.productos-principales .producto p { font-size: .82rem; line-height: 1.42; }
.productos-desarrollo { grid-template-columns: auto 1fr 1fr; gap: 12px; margin-top: 12px; padding: 11px 14px; }
.productos-desarrollo__titulo { font-size: .69rem; }
.producto-futuro { gap: 9px; }
.producto-futuro + .producto-futuro { padding-left: 12px; }
.producto-futuro img { max-width: 92px; max-height: 21px; }
.producto-futuro p { font-size: .7rem; line-height: 1.35; }
.producto-futuro__marca { font-size: .95rem; }
@media (max-width: 1180px) {
  .hero .contenedor { width: min(100% - 40px, 960px); }
  .hero__grilla { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.3fr); gap: 26px; }
  .productos-principales { grid-template-columns: 1fr; gap: 8px; }
  .productos-principales .producto { display: grid; grid-template-columns: 32% minmax(0, 1fr); }
  .producto__visual { height: 100%; min-height: 115px; }
  .productos-principales .producto--rodar { grid-column: auto; }
  .productos-principales .producto--rodar .producto__visual { height: auto; }
  .producto__cuerpo { align-self: center; }
  .productos-desarrollo { grid-template-columns: 1fr 1fr; }
  .productos-desarrollo__titulo { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .hero .contenedor { width: min(100% - 32px, 640px); }
  .hero { padding: 30px 0 38px; }
  .hero__grilla { grid-template-columns: 1fr; gap: 30px; }
  .hero__texto { max-width: 620px; }
  .portada-proyectos__cabecera { align-items: flex-start; }
  .portada-proyectos h2 { max-width: none; font-size: clamp(1.55rem, 6vw, 2rem); }
  .productos-principales { grid-template-columns: 1fr; gap: 14px; }
  .productos-principales .producto { display: flex; }
  .producto__visual { height: 180px; }
  .productos-principales .producto--rodar .producto__visual { height: 180px; }
  .producto__cuerpo { align-self: auto; padding: 16px 18px 18px; }
  .producto__logo img { max-width: 150px; }
  .productos-principales .producto h3 { font-size: 1.08rem; }
  .productos-principales .producto p { font-size: .9rem; }
  .productos-desarrollo { grid-template-columns: 1fr; gap: 12px; padding: 15px 16px; }
  .productos-desarrollo__titulo { grid-column: auto; }
  .producto-futuro + .producto-futuro { border-left: 0; border-top: 1px solid var(--linea); padding: 12px 0 0; }
}

.hero .contenedor { width: min(calc(100% - 64px), 1480px); }
@media (min-width: 821px) { .hero h1 { font-size: clamp(2.35rem, 3.55vw, 3.45rem); } }


.hero__grilla { margin-inline: auto; }

\n
.producto-futuro p { font-size: .78rem; }


@media (max-width: 820px) { .hero .contenedor { width: min(calc(100% - 32px), 640px); } .hero__texto { min-width: 0; } .hero h1 .junto { white-space: normal; } }


@media (min-width: 821px) { .hero__grilla { grid-template-columns: minmax(310px, .95fr) minmax(0, 1.7fr); } }


/* ---------- ajustes de portada (octubre 2026) ---------- */
.solo-celular { display: none; }
.portada-proyectos h2 { max-width: none; white-space: nowrap; }   /* una sola línea, también en escritorio */
@media (max-width: 820px) {
  .solo-escritorio { display: none; }
  .solo-celular { display: inline; }
  .hero__acciones, .hero__nota { display: none; }                 /* en celular la portada va sin botón: el contacto está en el encabezado y en el botón flotante */
  /* el título de los productos va en una sola línea, achicando la letra si hace falta */
  .portada-proyectos h2 { font-size: clamp(1rem, 5.3vw, 1.9rem); }
}

/* ---------- imágenes reales de los productos + carrusel en celular (octubre 2026) ---------- */
/* Capturas del producto real: se muestran desde arriba, para que se lea el encabezado y los primeros datos */
.producto__visual--captura img { object-position: center top; }
.producto__visual--club { background: #16301f; }
.producto--club:hover .producto__visual--captura img { transform: scale(1.035); }

/* En celular las tarjetas de productos se deslizan con el dedo, con la siguiente asomando */
@media (max-width: 820px) {
  /* sin esto el contenedor se estira para abarcar las tres tarjetas y la página se desplaza de costado */
  .hero__grilla > *, .portada-proyectos { min-width: 0; max-width: 100%; }
  .productos-principales {
    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-principales::-webkit-scrollbar { display: none; }
  .productos-principales .producto { display: flex; flex-direction: column; flex: 0 0 84%; scroll-snap-align: start; }
  .productos-principales .producto .producto__visual,
  .productos-principales .producto--rodar .producto__visual { height: 190px; }
}

/* ---------- portada completa en una pantalla (octubre 2026) ----------
   Hasta el recuadro "En desarrollo" tiene que verse sin bajar, en escritorio y en celular. */

/* La captura llena el visual sin empujar el alto de la tarjeta (una imagen alta la estiraba). */
.producto__visual--captura img { position: absolute; inset: 0; }

/* Celular y tablet vertical: todo escala con el menor entre el ancho (vw) y el alto visible (svh). */
@media (max-width: 820px) {
  .hero { padding: clamp(8px, 1.6svh, 30px) 0 clamp(10px, 2svh, 38px); }
  .hero__grilla { gap: clamp(10px, 2.2svh, 30px); }
  .frase-marca { font-size: clamp(.85rem, 1.9svh, 1.1rem); margin-bottom: clamp(2px, .7svh, 12px); }
  .hero h1 { font-size: clamp(1.6rem, min(8.4vw, 4.7svh), 3.4rem); margin-bottom: clamp(6px, 1.2svh, 18px); }
  .hero h1 .junto { white-space: nowrap; }                 /* titular en dos líneas */
  .hero__bajada { font-size: clamp(.9rem, min(4.2vw, 2.05svh), 1.15rem); line-height: 1.45; margin-bottom: 0; }
  .portada-proyectos__cabecera { gap: 2px; margin-bottom: clamp(6px, 1.2svh, 16px); }
  .portada-proyectos__sobrelinea { margin-bottom: 3px; }
  .productos-principales { padding-bottom: clamp(4px, 1svh, 12px); }
  .productos-principales .producto .producto__visual,
  .productos-principales .producto--rodar .producto__visual { height: clamp(84px, 15.5svh, 190px); }
  .producto__cuerpo { padding: clamp(8px, 1.5svh, 16px) 16px clamp(10px, 1.7svh, 18px); }
  .producto__encabezado { min-height: 0; margin-bottom: clamp(5px, 1svh, 11px); }
  .producto__logo img { max-height: clamp(22px, 3.6svh, 32px); }
  .productos-principales .producto h3 { font-size: clamp(.95rem, 2.3svh, 1.08rem); margin-bottom: clamp(3px, .6svh, 8px); }
  .productos-principales .producto p { font-size: clamp(.8rem, 1.95svh, .9rem); line-height: 1.4; }
  .productos-desarrollo { margin-top: clamp(6px, 1.2svh, 12px); padding: clamp(8px, 1.4svh, 15px) 14px; gap: clamp(5px, 1svh, 12px); }
  .producto-futuro + .producto-futuro { padding-top: clamp(5px, 1svh, 12px); }
  .producto-futuro p { font-size: clamp(.72rem, 1.75svh, .78rem); line-height: 1.35; }
  .producto-futuro__marca { font-size: .9rem; }
}

/* La portada ocupa exactamente el alto visible: no se asoma la sección siguiente.
   El contenido va centrado y las imágenes de las tarjetas crecen con el alto, para no dejar hueco. */
.hero { min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; }
/* solo con las tres tarjetas en fila (más de 1180 px); en tablet apaisada van apiladas y el alto lo da el texto */
@media (min-width: 1181px) {
  .productos-principales .producto .producto__visual { height: clamp(120px, calc(34svh - 80px), 460px); }
}
@media (max-width: 700px) { .hero { min-height: calc(100svh - 60px); } }   /* encabezado más bajo en celular */

/* Teléfonos con poco alto visible: imagen más baja y descripción de la tarjeta en dos líneas. */
@media (max-width: 820px) and (max-height: 700px) {
  .hero__grilla { gap: clamp(6px, 1.4svh, 14px); }
  .productos-principales .producto .producto__visual,
  .productos-principales .producto--rodar .producto__visual { height: clamp(60px, 11svh, 120px); }
  .productos-principales .producto p { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .producto__cuerpo { padding-top: 8px; padding-bottom: 10px; }
  .productos-desarrollo { gap: 5px; padding-block: 8px; }
  .productos-desarrollo__titulo { display: none; }          /* los dos logos ya dicen qué es */
  .hero h1 { font-size: clamp(1.5rem, min(8.4vw, 4.2svh), 3.4rem); }
  .hero__bajada { font-size: clamp(.85rem, min(4vw, 2svh), 1.15rem); line-height: 1.35; }
  /* min-height: 0 anula el mínimo de 115 px de una regla anterior, que no dejaba achicar la imagen */
  .productos-principales .producto .producto__visual,
  .productos-principales .producto--rodar .producto__visual { height: clamp(72px, 13svh, 120px); min-height: 0; }
}

/* ---------- visual de RODAR: paradas ancladas a la ruta (octubre 2026) ---------- */
.visual-rodar__ruta { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-rodar__parada { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.visual-rodar__parada--uno    { --x: 8%;  --y: 62%; --dx: -28%; }   /* la primera y la última corren la etiqueta para no salirse */
.visual-rodar__parada--dos    { --x: 36%; --y: 34%; }
.visual-rodar__parada--tres   { --x: 66%; --y: 66%; }
.visual-rodar__parada--cuatro { --x: 92%; --y: 42%; --dx: -84%; }
.visual-rodar__parada i { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border: 3px solid #d6a82d; border-radius: 50%; background: #fbf8f3; transform: translate(-50%, -50%); }
.visual-rodar__parada b {
  position: absolute; left: 0; bottom: 12px; transform: translateX(var(--dx, -50%));
  padding: 4px 8px; border: 1px solid #e5dbc7; border-radius: 7px; background: #fffdf8; color: #3a2219;
  font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap;   /* plana, sin sombra: es una etiqueta, no una tarjeta */
}
.visual-rodar__parada--abajo b { bottom: auto; top: 12px; }
/* si la imagen queda muy baja no hay lugar para las etiquetas: queda la ruta con sus paradas */
@media (max-width: 820px) and (max-height: 700px) { .visual-rodar__parada b { display: none; } }
/* lo mismo si queda muy angosta (tablet apaisada, con la imagen al costado): se mide la tarjeta, no la pantalla */
.producto__visual--rodar { container-type: inline-size; }
@container (max-width: 230px) { .visual-rodar__parada b { display: none; } }