/* ============================================================
   ADOS Presupuesto — carruseles de móvil

   Problema que resuelve: en un teléfono el documento era una sola
   columna de 18.000 px. Los siete puntos de «El problema» ocupaban
   ellos solos unas seis pantallas de scroll vertical seguido, todas
   con la misma forma. Se lee como una lista interminable y el
   visitante abandona antes del final.

   Solución: en los bloques donde el contenido ya viene en piezas
   comparables (los 7 puntos, las 3 etapas, las 3 acciones de Revit,
   los 4 perfiles) esas piezas pasan a leerse en horizontal, de una en
   una, deslizando con el dedo. El scroll vertical se corta y cada
   pieza recibe la pantalla entera.

   Va junto a carrusel.js: el JS decide QUÉ grupos se convierten y
   construye los mandos, este archivo dice CÓMO se ven. Igual que
   motion.css/motion.js, ninguno de los dos toca el marcado.

   Para desactivarlo: quitar las dos líneas de <helmet>. El JS no llega
   a mover nada y el documento vuelve a ser la columna de antes.

   IMPORTANTE — sobre el escritorio: el JS solo construye por debajo de
   900 px. Por encima de esa anchura el marcado no se toca en absoluto,
   así que las rejillas de dos columnas, el zig-zag de .stage-row y todo
   lo demás siguen exactamente como estaban. Comprobado a 1440 px:
   cero envoltorios en el documento.
   ============================================================ */


/* ------------------------------------------------------------
   1. La pista

   El sangrado. La pista tiene que llegar hasta el borde de la
   pantalla — si no, la tarjeta siguiente asoma «dentro» de un marco y
   no se lee como algo que continúa fuera. Se saca con margen negativo
   y se devuelve como padding, así la primera tarjeta sigue alineada
   con el titular de la sección.

   Cuánto sacar no se puede escribir aquí: cada sección tiene un
   sangrado distinto (#etapas deja 20 px, #problema deja 52 porque
   lleva un div interior con su propio padding). Lo mide el JS y lo
   deja en --cr-borde. Los valores de abajo son solo el punto de
   partida por si el JS no llega a correr.
   ------------------------------------------------------------ */
.carrusel-wrap {
  --cr-borde: 20px;          /* lo sobrescribe carrusel.js, medido */
  --cr-vista: 100vw;         /* ídem, con el ancho real de la ventana */
  --cr-asomo: 44px;          /* lo que asoma la tarjeta siguiente */
  --cr-hueco: 14px;
  --cr-linea: var(--border-light);
  --cr-tinta: var(--ados-ink);
  --cr-suave: var(--ados-ink-soft);
}

/* Sobre fondo navy (#problema) los filetes y el texto se invierten. */
.carrusel-wrap[data-tono="oscuro"] {
  --cr-linea: var(--border);
  --cr-tinta: var(--ados-white);
  --cr-suave: var(--text-muted);
}

.carrusel {
  display: flex;
  gap: var(--cr-hueco);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Sin esto, deslizar más allá de la última tarjeta dispara el gesto
     de «atrás» del navegador y el visitante se sale del sitio. */
  overscroll-behavior-x: contain;
  margin-left: calc(var(--cr-borde) * -1);
  margin-right: calc(var(--cr-borde) * -1);
  padding: 2px var(--cr-borde);
  scroll-padding-left: var(--cr-borde);
  /* La barra se oculta: el indicador de abajo ya dice dónde se está. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel::-webkit-scrollbar { display: none; }

/* El ancho se mide desde la ventana, no en % de la pista: en % el
   asomo de la tarjeta siguiente cambiaba de tamaño en cada sección
   según su sangrado, y en las de 52 px la tarjeta salía escuálida. */
.carrusel > * {
  flex: 0 0 calc(var(--cr-vista) - var(--cr-borde) - var(--cr-asomo));
  width: calc(var(--cr-vista) - var(--cr-borde) - var(--cr-asomo));
  min-width: 0;
  scroll-snap-align: start;
  /* Una tarjeta por gesto. Sin esto un deslizamiento largo se salta
     tres puntos de golpe y se pierde el hilo del argumento. */
  scroll-snap-stop: always;
}

/* Envoltura para las tarjetas que no se dejan medir.

   Las tarjetas del sistema de diseño se escriben <x-import> y en
   tiempo de ejecución quedan sustituidas por un <div style="display:
   contents">. Un display:contents no genera caja: el ancho de la
   pista se le aplicaba y no hacía nada, y las tres acciones de Revit
   salían a 90 px cada una, con el texto partido letra a letra. El JS
   les mete esta celda por delante, que sí es una caja normal.

   Rejilla de una fila para que la tarjeta de dentro llegue abajo del
   todo y las tres acaben a la misma altura. */
.carrusel-celda {
  display: grid;
  grid-template-rows: 1fr;
}

/* La rejilla que se queda vacía al llevarse las tarjetas a la pista.

   Se oculta entera en vez de vaciarla de estilos: estas rejillas
   dibujan los filetes entre tarjetas pintándose el fondo y dejando
   1 px de hueco, así que vacía seguiría pintando una raya de color.
   El envoltorio va delante de ella y hereda sus márgenes verticales,
   de modo que la separación con lo de arriba y lo de abajo no cambia. */
.carrusel-hueco { display: none !important; }


/* ------------------------------------------------------------
   2. Los mandos

   Un carrusel sin indicador es una trampa: no se ve cuánto queda ni se
   sabe que hay algo más a la derecha. Van tres señales, y las tres
   hacen falta — el asomo de la tarjeta siguiente (arriba), las barras
   de posición, y la cuenta «01 / 07», que es la que dice cuánto falta.

   El hueco de la derecha no es decorativo: el botón flotante de
   WhatsApp vive fijo abajo a la derecha (56 px a 28 del borde) y tapaba
   la flecha «siguiente» — se veía el botón, no se podía pulsar. Los
   mandos se paran antes de llegar ahí.
   ------------------------------------------------------------ */
.carrusel-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-right: max(0px, calc(96px - var(--cr-borde)));
}

.carrusel-puntos {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: nowrap;
}

/* Barra, no círculo: el sistema de diseño no usa formas redondas fuera
   de los iconos, y la barra alargada del punto activo dice «aquí
   estoy» sin necesitar color de relleno. */
.carrusel-punto {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  /* El área tocable real es de 24 px de alto aunque se vean 3: por
     debajo de eso el dedo falla. La barra se dibuja con el ::after. */
  width: 13px;
  height: 24px;
  background: none;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}
.carrusel-punto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--cr-linea);
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.carrusel-punto[aria-current="true"] { width: 26px; }
.carrusel-punto[aria-current="true"]::after { background: var(--accent); }
.carrusel-punto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.carrusel-mandos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.carrusel-cuenta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cr-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carrusel-cuenta b { color: var(--cr-tinta); font-weight: 700; }

/* Las flechas son para la tableta y el ratón. En el teléfono no caben
   junto a siete barras y una cuenta sin dejarlo todo apretado, y ahí
   el camino natural es el dedo: se ocultan más abajo. Que no falte la
   vía de teclado lo garantizan las barras, que son botones de verdad. */
.carrusel-flecha {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--cr-linea);
  background: none;
  color: var(--cr-tinta);
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1),
              background 140ms cubic-bezier(0.2, 0, 0, 1);
}
.carrusel-flecha svg { display: block; }
.carrusel-flecha:hover:not(:disabled) { border-color: var(--accent); }
.carrusel-flecha:active:not(:disabled) { background: rgba(249, 178, 51, 0.14); }
.carrusel-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carrusel-flecha:disabled { opacity: 0.3; cursor: default; }


/* ------------------------------------------------------------
   3. El aviso de deslizar

   Solo hasta que el visitante desliza por primera vez. Es una ayuda,
   no un adorno permanente.
   ------------------------------------------------------------ */
.carrusel-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1);
}
.carrusel-wrap[data-tocado="true"] .carrusel-aviso {
  opacity: 0;
  pointer-events: none;
}
.carrusel-aviso svg {
  display: block;
  animation: carrusel-empuja 1.8s cubic-bezier(0.2, 0, 0, 1) infinite;
}
@keyframes carrusel-empuja {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(5px); }
}


/* ------------------------------------------------------------
   4. Las tarjetas, bloque por bloque

   Todo va colgado de `.carrusel > …` a propósito: las columnas de
   estos bloques están escritas en el atributo style del marcado y el
   documento ya las machaca con !important a una sola columna. Para
   ganarle a eso hacen falta las dos cosas — el !important y un
   selector con más peso, que es lo que aporta el `.carrusel >`.
   ------------------------------------------------------------ */

/* Dentro de una tarjeta el cuerpo baja de 17 a 15,5 px. No es por
   estética: a 17 px la tarjeta de un punto medía 1.300 px de alto —
   más que la pantalla — así que había que seguir haciendo scroll
   vertical dentro de cada tarjeta y los mandos quedaban fuera de
   vista. A 15,5 la tarjeta entera cabe de una vez, que es el objetivo
   de todo esto. */
.carrusel > .problema-row p,
.carrusel > .stage-row p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
.carrusel > .problema-row h3,
.carrusel > .stage-row h3 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

/* --- 4.1 Los siete puntos del problema --- */
.carrusel > .problema-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  background: var(--ados-navy-950);
  overflow: hidden;
}
/* La captura, pegada al borde superior de la tarjeta. */
.carrusel > .problema-row > div:first-child {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.carrusel > .problema-row > div:last-child { padding: 22px 20px 24px 20px; }
/* La frase rematada con filete ámbar: baja de 16 a 15 px por lo mismo. */
.carrusel > .problema-row > div:last-child > div:last-child {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* --- 4.2 Las tres etapas --- */
.carrusel > .stage-row {
  display: flex !important;
  flex-direction: column-reverse !important;   /* la captura, primero */
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px;
  background: var(--ados-white);
  overflow: hidden;
  /* El zig-zag del escritorio (.stage-row:nth-child(even)) cuenta
     hermanos, y dentro de la pista el orden cambia. En una tarjeta de
     una sola columna no pinta nada, así que se desactiva aquí y no hay
     sorpresas. */
  direction: ltr !important;
}
.carrusel > .stage-row > * { direction: ltr !important; }
/* El bloque de texto se estira para llenar la tarjeta.

   Sin esto, en column-reverse el sobrante de las tarjetas mas cortas
   se acumula al principio del eje — que aqui se ve ARRIBA — y la
   captura aparecia flotando en mitad de una franja blanca de 80 px.
   Estirando el texto, el sobrante se va debajo del ultimo renglon,
   que es donde no se nota. */
.carrusel > .stage-row > div:first-child {
  padding: 22px 20px 26px 20px;
  flex: 1 0 auto;
}
/* El marco de las capturas trae 40 px de hueco para la miniatura
   superpuesta; en una tarjeta estrecha ese hueco sobra por abajo. */
.carrusel > .stage-row > div:last-child {
  padding: 20px 20px 0 20px !important;
  border-bottom: 1px solid var(--border-light);
}
/* El «01» de 56 px de la etapa se come media tarjeta. */
.carrusel > .stage-row span[style*="font-size: 56px"] {
  font-size: 34px !important;
}
/* Las tres etapas traen además una lista de tres puntos (o la rejilla
   de cotizaciones/márgenes/insumos), y con eso la tarjeta se iba a 866
   px — por encima de la pantalla, justo lo que se quería evitar. Se
   aprieta el interlineado de la lista y los márgenes; el texto no se
   toca. */
.carrusel > .stage-row p { margin-bottom: 18px !important; }
.carrusel > .stage-row h3 { margin-bottom: 14px !important; }
.carrusel > .stage-row [style*="display: grid; gap: 14px"] { gap: 10px !important; }
.carrusel > .stage-row [style*="grid-template-columns: 8px 1fr"] span {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}
.carrusel > .stage-row .mini-grid div[style*="padding: 20px"] {
  padding: 14px !important;
}


/* --- 4.3 Los perfiles --- */
/* Los perfiles se separan en el escritorio con un filete a la
   izquierda. Suelta en una pista, esa raya no significa nada: la
   tarjeta necesita los cuatro lados. */
.carrusel > .perfil-card {
  border-left: 0 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px;
  padding: 24px 20px 26px 20px !important;
  background: var(--ados-white);
}


/* --- 4.4 Las rejillas de los siete documentos interiores ---

   .tri, .cuatro, .estados y .ruta no dibujan los filetes que separan
   sus tarjetas con bordes, sino con el truco del hueco: la rejilla se
   pinta de color y los hijos van blancos encima, dejando ver 1 px por
   las juntas. Sacadas a una pista con 14 px de aire entre ellas, ese
   truco no dibuja nada y las tarjetas se quedaban sin contorno.
   .cinco-dolor es el mismo caso con un filete a la izquierda.

   Aquí cada una recibe su propio borde. El relleno se iguala de paso:
   venian con 26 px unas, 22 y 0 las de .cinco-dolor, y en una pista
   esa diferencia se nota tarjeta a tarjeta. */
.carrusel > .carrusel-ficha {
  border: 1px solid var(--cr-linea) !important;
  border-radius: 6px;
  padding: 24px 20px 26px 20px !important;
}

/* Las de .ruta son enlaces a los seis documentos, con el «Conoce más»
   pegado abajo por margin-top:auto. Sigue funcionando: la ficha es un
   flex en columna y la pista solo le cambia el ancho. */
.carrusel > a.carrusel-ficha { text-decoration: none; }


/* ------------------------------------------------------------
   5. Fuera del móvil no existe nada de esto

   Por encima de 900 px el JS ni siquiera construye, así que estas
   reglas son solo la red por si un carrusel queda montado al girar la
   tableta a horizontal: `display: contents` borra los envoltorios de
   la maquetación y las tarjetas vuelven a colocarse como hijas
   directas de su rejilla de siempre.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .carrusel-wrap,
  .carrusel,
  .carrusel-celda { display: contents !important; }
  .carrusel-ui,
  .carrusel-aviso { display: none !important; }
  .carrusel-hueco { display: grid !important; }
}

/* Teléfono: sin flechas. No caben junto a siete barras y la cuenta, y
   el gesto es el camino natural. Las barras siguen siendo botones, así
   que no se pierde ni el teclado ni el lector de pantalla. */
@media (max-width: 560px) {
  .carrusel-mandos .carrusel-flecha { display: none; }
}

/* Tableta: caben dos tarjetas por pantalla, así que el asomo se
   calcula sobre media ventana. */
@media (min-width: 561px) and (max-width: 900px) {
  .carrusel > * {
    flex-basis: calc((var(--cr-vista) - var(--cr-borde) - var(--cr-asomo) - var(--cr-hueco)) / 2);
    width: calc((var(--cr-vista) - var(--cr-borde) - var(--cr-asomo) - var(--cr-hueco)) / 2);
  }
}

/* Teléfono estrecho: se recorta el asomo para no ahogar la tarjeta,
   pero nunca a cero — ese asomo es la única señal de que hay más. */
@media (max-width: 400px) {
  .carrusel-wrap { --cr-asomo: 34px; --cr-hueco: 12px; }
}

/* Con «menos movimiento» activado el carrusel se queda: es navegación,
   no decoración. Lo que se va es el desplazamiento animado y la flecha
   que late. */
@media (prefers-reduced-motion: reduce) {
  .carrusel { scroll-behavior: auto; }
  .carrusel-aviso svg { animation: none; }
  .carrusel-punto { transition: none; }
}