/* Arcolor · estilos propios de index.html (lo común está en comun.css).
   Cortes de ancho: 640, 768, 1024 y 1280 px. */

/* ---------- cinta de anuncios ----------
   js/inicio.js repite los anuncios hasta tener 6 copias iguales; al correr la mitad (3 copias)
   queda igual que al empezar y el giro no se nota. Se frena con el mouse encima o con el foco
   del teclado. Velocidad: más segundos, más lenta. */
@keyframes tira { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.anuncios { background: var(--tinta); }
.anuncios-barra { display: flex; align-items: center; gap: 6px; min-height: 38px; padding-right: 12px; }
.anuncios-tira { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.anuncios-pista { display: flex; width: max-content; animation: tira 60s linear infinite; }
.anuncios-tira:hover .anuncios-pista, .anuncios-tira:focus-within .anuncios-pista { animation-play-state: paused; }
.anuncios-grupo { display: flex; align-items: center; flex-shrink: 0; }
.anuncio { display: inline-flex; align-items: center; gap: 9px; padding: 0 28px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: #F0F0F2; white-space: nowrap; }
a.anuncio:hover { color: #FFFFFF; }
.anuncio-icono { display: inline-flex; color: #9A9AA6; }
.anuncio-icono svg { flex-shrink: 0; }
.anuncio-punto { width: 4px; height: 4px; border-radius: 999px; background: #5A5A66; flex-shrink: 0; }
.anuncios-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: 0; border-radius: 6px; color: #C2C2CC; cursor: pointer; flex-shrink: 0; transition: color 140ms ease, background 140ms ease; }
.anuncios-cerrar:hover { color: #FFFFFF; background: rgba(255,255,255,0.10); }
.anuncios-cerrar svg { flex-shrink: 0; }

/* ---------- barra de progreso de lectura: el ancho llega de js/inicio.js en --progreso.
   El degradé mide siempre el ancho de la pantalla, así cada color queda en su lugar. ---------- */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.progreso-barra { height: 100%; width: var(--progreso, 0%); background-image: linear-gradient(90deg, #F5C518 0.000%, #F5C518 6.667%, #E0A82E 6.667%, #E0A82E 13.333%, #E8820C 13.333%, #E8820C 20.000%, #E35B2B 20.000%, #E35B2B 26.667%, #C81E1E 26.667%, #C81E1E 33.333%, #D42F33 33.333%, #D42F33 40.000%, #D4537E 40.000%, #D4537E 46.667%, #1E4F9C 46.667%, #1E4F9C 53.333%, #2AA9C4 53.333%, #2AA9C4 60.000%, #6B3FA0 60.000%, #6B3FA0 66.667%, #2E9E4F 66.667%, #2E9E4F 73.333%, #1B6B4A 73.333%, #1B6B4A 80.000%, #9E9E9E 80.000%, #9E9E9E 86.667%, #D8C4A0 86.667%, #D8C4A0 93.333%, #6B4A2B 93.333%, #6B4A2B 100.000%); background-size: 100vw 100%; background-repeat: no-repeat; }

/* ---------- secciones ---------- */
.seccion-contenido { max-width: var(--ancho-maximo); margin: 0 auto; padding: 96px 24px; }
.seccion-titulo { margin: 0 0 12px; text-align: center; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.seccion-bajada { max-width: 620px; margin: 0 auto 56px; text-align: center; font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--texto-suave); }
@media (max-width: 767px) {
  .seccion-contenido { padding-top: 64px; padding-bottom: 64px; }
  .seccion-titulo { font-size: 24px; }
}

/* ---------- portada ---------- */
.portada { background: var(--fondo); }
.portada-contenido { max-width: var(--ancho-maximo); margin: 0 auto; padding: 48px 24px; min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; }
.portada-texto { text-align: center; }
.portada-texto-ancho { max-width: 800px; margin: 0 auto; }
.portada-titulo { margin: 0 0 24px; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); text-wrap: balance; }
.portada-bajada { max-width: 560px; margin: 0 auto 32px; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--texto-suave); }
.portada-acciones { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.boton-secundario { display: inline-flex; align-items: center; padding: 11px 19px; background: transparent; color: var(--tinta); font-size: 14px; line-height: 20px; font-weight: 500; border: 1px solid #D9D9D9; border-radius: 8px; }
.boton-secundario:hover { background: #F5F5F5; }
@media (min-width: 640px) {
  .portada-titulo { font-size: 48px; line-height: 52px; }
}
@media (min-width: 1024px) {
  .portada-titulo { font-size: 64px; line-height: 68px; }
}

/* tabletas de color: foto con una zona clickeable por tableta (--x y --ancho, en % de la foto).
   Debajo de 860px de ancho la tira se desliza de costado. */
.tabletas { margin-top: 64px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tabletas-tira { position: relative; width: 100%; min-width: 860px; max-width: 1232px; margin: 0 auto; }
.tabletas-foto { display: block; width: 100%; height: auto; filter: drop-shadow(4px 8px 14px rgba(0,0,0,0.14)); }
.tableta { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--ancho); border-radius: 4px; background: transparent; transition: background 180ms ease; }
.tableta:hover { background: rgba(255,255,255,0.18); }
.tabletas-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-top: 1px solid var(--borde); margin-top: 20px; padding: 12px 4px 0; }
.tabletas-nota { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: #6F6F7A; }
.tabletas-enlace { color: var(--tinta); }
.tabletas-enlace:hover { text-decoration: underline; }

/* ---------- credenciales: banda oscura sobre la foto de la planta ---------- */
.credenciales { position: relative; background: var(--oscuro); overflow: hidden; }
.credenciales-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.credenciales-velo { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19,19,22,0.5) 0%, rgba(19,19,22,0.72) 100%); }
.credenciales .seccion-contenido { position: relative; text-align: center; }
.credenciales .seccion-titulo { color: #FFFFFF; }
.credenciales .seccion-bajada { max-width: 600px; margin-bottom: 64px; color: rgba(255,255,255,0.75); }
.credenciales-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
/* cada credencial es un contenedor: el número achica la letra solo si no entra en un renglón
   (el más ancho, "10.000 m²", mide 5 veces su tamaño de letra; 20cqi = un quinto del ancho) */
.credencial { display: flex; flex-direction: column; align-items: center; text-align: center; container-type: inline-size; }
.credencial-raya { width: 32px; height: 4px; background: var(--acento); margin-bottom: 20px; }
.credencial-numero { font-size: min(32px, 20cqi); line-height: 36px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.credencial-numero-texto { font-variant-numeric: normal; }
.credencial-texto { margin-top: 12px; max-width: 160px; font-size: 13px; line-height: 1.4; font-weight: 600; color: rgba(255,255,255,0.72); }
/* con JS arrancan ocultas y aparecen (clase "visible") al entrar en pantalla, una tras otra */
.js .credencial { opacity: 0; transform: translateY(12px); transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .credencial:nth-child(2) { transition-delay: 130ms; }
.js .credencial:nth-child(3) { transition-delay: 260ms; }
.js .credencial:nth-child(4) { transition-delay: 390ms; }
.js .credencial.visible { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .credencial-numero { font-size: min(40px, 20cqi); line-height: 44px; }
}
@media (min-width: 768px) {
  .credenciales-grilla { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .credencial-numero { font-size: min(48px, 20cqi); line-height: 52px; }
}

/* ---------- tarjetas (productos y servicios) ----------
   Suben un poco con el mouse encima (como las tabletas de color de la landing anterior).
   Solo con mouse: en celular las de productos van en carrusel y el carrusel recortaría la subida. */
.tarjeta { display: flex; flex-direction: column; flex-shrink: 0; border-radius: 8px; overflow: hidden; transition: transform 220ms ease, box-shadow 220ms ease, border-color 160ms ease; }
.tarjeta-clara { background: var(--fondo); border: 1px solid var(--borde); }
.tarjeta-clara:hover { border-color: #C9C9D1; }
@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(19,19,22,0.10); }
}
.tarjeta-franja { height: 4px; background: var(--acento, var(--tinta)); flex-shrink: 0; }
.tarjeta-foto { display: block; width: 100%; height: 136px; object-fit: cover; flex-shrink: 0; transition: transform 400ms ease; }
.tarjeta-foto:hover { transform: scale(1.04); }
.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.tarjeta-pie { margin-top: auto; border-top: 1px solid #F0F0F0; padding-top: 14px; }
.tarjeta-enlace { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tinta); }
.tarjeta-enlace:hover { text-decoration: underline; }

/* ---------- productos ---------- */
.productos { background: var(--fondo-suave); color: var(--oscuro); }
.productos .seccion-titulo { margin-bottom: 8px; }
.productos > .seccion-contenido > .seccion-bajada { max-width: 640px; line-height: 1.5; }
/* productos y servicios: en celular, carrusel que se desliza de costado; 2 columnas desde 640 y
   4 desde 1024. Son las mismas tarjetas, así que se comportan igual. */
/* sin scroll-padding: cada tarjeta frena alineada al borde del contenido, igual que la primera, y
   la siguiente siempre asoma a la derecha */
.productos-grilla, .servicios-grilla { display: flex; gap: 24px; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; }
.productos-grilla > .tarjeta, .servicios-grilla > .tarjeta { scroll-snap-align: start; min-width: 240px; width: min(280px, calc(100vw - 72px)); }
@media (min-width: 640px) {
  .productos-grilla, .servicios-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; scroll-snap-type: none; }
  .productos-grilla > .tarjeta, .servicios-grilla > .tarjeta { min-width: 0; width: auto; }
}
@media (min-width: 1024px) {
  .productos-grilla, .servicios-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.producto-titulo { min-height: 40px; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--tinta); }
.cualidades { display: flex; flex-direction: column; gap: 7px; min-height: 71px; margin-top: 2px; }
.cualidad { display: flex; align-items: center; gap: 9px; }
.cualidad-icono { display: inline-flex; flex-shrink: 0; color: var(--acento); }
.cualidad-texto { font-size: 12.5px; line-height: 17px; color: var(--texto-suave); }
.lineas-titulo { border-top: 1px solid #F0F0F0; margin-top: 16px; padding-top: 12px; padding-bottom: 5px; font-size: 12px; line-height: 16px; font-weight: 500; color: #6F6F7A; }
.lineas { min-height: 44px; padding-bottom: 6px; font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--tinta); }
.lineas-punto { color: #A0A0AB; }
.lineas-mas { color: #6F6F7A; }

/* ---------- carta de colores: filtros, colores y ficha del color elegido ---------- */
.carta { border-top: 1px solid #E0E0E5; margin-top: 80px; padding-top: 72px; scroll-margin-top: 88px; }
.carta-titulo { margin: 0 0 12px; text-align: center; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.carta .seccion-bajada { margin-bottom: 40px; }
.carta-grilla { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 768px) {
  .carta-grilla { grid-template-columns: 1.5fr 1fr; }
}
.carta-panel { display: flex; flex-direction: column; min-width: 0; background: var(--fondo); border-radius: 12px; overflow: hidden; }
.carta-filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; background: #FFFFFF; color: #4D4D4D; border: 1px solid #E0E0E0; }
.chip[aria-pressed="true"] { background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A; }
.carta-division { height: 1px; margin: 0 16px; background: #ECECF1; }
.carta-colores { flex: 1; height: 432px; overflow-y: auto; padding: 20px; }
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 20px; }
/* cada color es un botón sin aspecto de botón */
.muestra { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.muestra:focus-visible { outline: 2px solid var(--oscuro); outline-offset: 4px; border-radius: 8px; }
.muestra-foto { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background-color: #FFFFFF; background-size: contain; background-position: center; background-repeat: no-repeat; }
.muestra.elegida .muestra-foto { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #131316; }
.muestra-nombre { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: #131316; }
.muestra-codigo { display: block; font-size: 12px; font-weight: 400; color: #6F6F7A; font-variant-numeric: tabular-nums; }
/* ficha: el color llega de js/inicio.js en --ficha-color */
.ficha { display: flex; flex-direction: column; background: var(--fondo); border-radius: 12px; padding: 24px; }
.ficha-color { width: 100%; height: 160px; border-radius: 8px; background: var(--ficha-color, #F5C518); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); margin-bottom: 16px; transition: background-color 250ms ease; }
.ficha-encabezado { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.ficha-nombre { font-size: 18px; font-weight: 600; color: #131316; }
.ficha-codigo { font-size: 14px; font-weight: 400; color: #6F6F7A; font-variant-numeric: tabular-nums; }
.ficha-dato { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid #ECECF1; font-size: 14px; line-height: 20px; }
.ficha-dato-ultimo { border-bottom: 1px solid #ECECF1; }
.ficha-dato-nombre { color: #63636D; }
.ficha-dato-valor { font-weight: 500; text-align: right; }
.ficha-usos { margin-top: 16px; }
.ficha-usos-titulo { font-size: 12px; font-weight: 500; color: #6F6F7A; margin-bottom: 8px; }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-etiqueta { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 8px; background: #ECECF1; font-size: 12px; font-weight: 400; color: #4A4A54; white-space: nowrap; }
.ficha-accion { margin-top: auto; padding-top: 20px; }
.boton-ancho { width: 100%; justify-content: center; }
.aviso { display: flex; align-items: flex-start; gap: 11px; margin-top: 24px; padding: 14px 16px; background: #FDF6E9; border: 1px solid #E8D5A8; border-radius: 8px; }
.aviso-icono { color: #8A5A0B; flex-shrink: 0; margin-top: 1px; }
.aviso-titulo { font-size: 13.5px; line-height: 20px; font-weight: 600; color: #8A5A0B; }
.aviso-texto { font-size: 13.5px; line-height: 1.55; color: var(--texto); }
.carta-descarga { margin-top: 16px; }
.carta-descarga a { font-size: 13px; font-weight: 500; color: var(--tinta); text-decoration: underline; }

/* barra con el color elegido: solo en celular y con JavaScript (ver la regla de abajo) */
.carta-elegido { display: none; }
.carta-elegido-color { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; background: var(--ficha-color, #F5C518); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.carta-elegido-texto { min-width: 0; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-elegido-nombre { font-weight: 600; color: #131316; }
.carta-elegido-codigo { color: #6F6F7A; font-variant-numeric: tabular-nums; }
.carta-elegido-boton { margin-left: auto; flex-shrink: 0; padding: 10px 14px; font-size: 13px; }

/* celular: la carta entra casi en una pantalla y el color elegido queda siempre a la vista */
@media (max-width: 767px) {
  /* filtros en una sola fila que se desliza de costado */
  .carta-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .carta-filtros::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; min-height: 40px; }
  /* colores chicos: 4 por fila en un celular común (en 320 px entran justo 4 de 52 px) y más
     columnas si hay lugar, sin que crezcan */
  .carta-colores { height: auto; padding: 16px; }
  .muestras { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 14px 10px; }
  .muestra-nombre { margin-top: 6px; font-size: 12px; line-height: 16px; }
  .muestra-codigo { line-height: 16px; }
  /* el panel no recorta, para que la barra pueda quedar fija (con overflow: hidden no se pega) */
  .carta-panel { overflow: visible; }
  .ficha-color { height: 112px; }
  /* la barra se pega abajo de la pantalla mientras se ven los colores y se queda al final de la
     grilla cuando aparece la ficha completa */
  .js .carta-elegido { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 4px 12px 12px; padding: 8px 8px 8px 10px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(19,19,22,0.14); }
}

/* ---------- servicios ---------- */
.servicios { background: var(--fondo); }
.servicios .seccion-titulo { margin-bottom: 8px; }
.servicios .seccion-bajada { max-width: 660px; }
.servicio-titulo { margin: 0 0 10px; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--tinta); }
.servicio-rotulo { padding-bottom: 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: #6F6F7A; }
/* pasos de "cómo funciona": ícono, línea que los une y texto */
.pasos { padding-bottom: 22px; }
.paso { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.paso-eje { display: flex; flex-direction: column; align-items: center; }
.paso-icono { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #E0E0E0; background: #FFFFFF; color: var(--tinta); flex-shrink: 0; }
.paso-linea { flex: 1; width: 1px; background: #E0E0E0; margin: 4px 0; }
.paso-texto { padding-bottom: 16px; }
.paso:last-child .paso-texto { padding-bottom: 0; }
.paso-titulo { font-size: 13.5px; line-height: 19px; font-weight: 600; color: var(--tinta); }
.paso-detalle { font-size: 12.5px; line-height: 17px; color: var(--texto-suave); }

/* soporte técnico: tarjeta dorada, exclusiva para clientes */
.tarjeta-dorada { background: radial-gradient(130% 95% at 16% 4%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0) 56%), linear-gradient(158deg, #F7E3A6 0%, #ECC963 34%, #DCAF44 70%, #C89B2C 100%); border: 1px solid #A9812A; box-shadow: 0 10px 30px rgba(170,130,40,0.30); }
.tarjeta-dorada:hover { box-shadow: 0 14px 40px rgba(170,130,40,0.44); }
.dorada-cabecera { height: 136px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid rgba(42,29,5,0.18); }
.dorada-marca { display: flex; }
.dorada-logo { display: block; width: auto; height: 64px; flex-shrink: 0; }
.dorada-sello { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: #2A1D05; border: 1px solid #C79A2B; box-shadow: 0 2px 8px rgba(42,29,5,0.22); }
.dorada-sello-icono { display: inline-flex; color: #F0D28C; }
.dorada-sello-texto { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; color: #F0D28C; white-space: nowrap; }
.tarjeta-dorada .servicio-titulo { color: #2A1D05; }
.tarjeta-dorada .servicio-rotulo { font-weight: 700; color: #4A3408; }
.beneficios { display: flex; flex-direction: column; gap: 16px; padding-bottom: 22px; }
.beneficio { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; }
.beneficio-icono { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #C79A2B; background: #2A1D05; color: #F0D28C; flex-shrink: 0; }
.beneficio-texto { font-size: 13.5px; line-height: 19px; font-weight: 600; color: #2A1D05; }
.tarjeta-dorada .tarjeta-pie { border-top-color: rgba(42,29,5,0.22); }
.tarjeta-dorada .tarjeta-enlace { font-weight: 700; color: #2A1D05; }

/* ---------- nuestra historia: foto | punto en la línea | texto; los hito-invertido van al revés ---------- */
.historia { background-color: var(--fondo-suave); }
.historia .seccion-contenido { max-width: 1080px; }
.historia .seccion-bajada { max-width: 560px; margin-bottom: 80px; }
.historia-hitos { position: relative; }
.historia-linea { position: absolute; left: calc(50% - 0.5px); top: 24px; bottom: 24px; width: 1px; background: #D6D6D6; z-index: 0; }
.hito { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 56px 1fr; align-items: start; margin-bottom: 80px; }
.hito:last-child { margin-bottom: 0; }
/* con JS arrancan ocultos y aparecen (clase "visible") cuando se llega con el scroll */
.js .hito { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.js .hito.visible { opacity: 1; transform: none; }
.hito-foto { grid-row: 1; grid-column: 1; min-width: 0; padding: 0 40px; }
.hito-invertido .hito-foto { grid-column: 3; }
.hito-foto > div { display: block; width: 100%; height: 320px; border: 1px solid #E0E0E0; border-radius: 8px; background-color: #EFEFF2; background-size: cover; background-position: center; }
.hito-eje { grid-row: 1; grid-column: 2; align-self: start; display: flex; align-items: flex-start; justify-content: center; }
.hito-punto { margin-top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; border: 1px solid #C4C4C4; box-shadow: 0 0 0 5px #F5F5F7; transition: width 400ms ease, height 400ms ease, background-color 400ms ease, border-color 400ms ease; }
.hito.visible .hito-punto, html:not(.js) .hito-punto { width: 16px; height: 16px; background: var(--acento); border-color: var(--acento); }
.hito-texto { grid-row: 1; grid-column: 3; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0 40px; }
.hito-invertido .hito-texto { grid-column: 1; align-items: flex-end; text-align: right; }
.hito-anio { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #1A1A1A; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.hito-texto h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.35; font-weight: 600; color: #1A1A1A; }
.hito-texto p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.6; font-weight: 400; color: #666666; }
.hito-texto strong { font-weight: 600; color: #1A1A1A; }
.hito-boton { gap: 8px; margin-top: 20px; }
@media (max-width: 767px) {
  .historia-linea { display: none; }
  .hito { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 56px; }
  .hito-foto, .hito-invertido .hito-foto { width: 100%; padding: 0; }
  .hito-foto > div { height: 240px; }
  .hito-eje { display: none; }
  .hito-texto, .hito-invertido .hito-texto { width: 100%; align-items: flex-start; text-align: left; padding: 0; }
}

/* ---------- contacto: formulario | contacto directo y ubicaciones ---------- */
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
.contacto { background: var(--fondo); color: var(--oscuro); }
.contacto-grilla { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 768px) {
  .contacto-grilla { grid-template-columns: 1.3fr 1fr; }
}
.contacto-principal { display: flex; flex-direction: column; }
.formulario { display: flex; flex-direction: column; height: 100%; background: var(--fondo-suave); border-radius: 12px; padding: 24px; }
.formulario-fila { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 640px) {
  .formulario-fila { grid-template-columns: 1fr 1fr; }
}
.campo-etiqueta { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #4A4A54; margin-bottom: 8px; }
.campo { width: 100%; padding: 12px; border: 1px solid #E3E3E8; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; background: #FFFFFF; }
.campo:focus { border-color: var(--oscuro); outline: none; }
/* en celular, letra de 16 px en los campos: con menos, el iPhone agranda la página al tocarlos */
@media (max-width: 767px) {
  .campo { font-size: 16px; }
}
.formulario-mensaje { margin-bottom: 16px; flex: 1; display: flex; flex-direction: column; }
.campo-mensaje { flex: 1; min-height: 96px; resize: vertical; }
.formulario-enviar { align-self: flex-start; border: none; font-family: 'Inter', sans-serif; cursor: pointer; }
.enviado { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; background: var(--fondo-suave); border-radius: 12px; padding: 48px 24px; }
.enviado-circulo { stroke-dasharray: 63; stroke-dashoffset: 63; animation: draw-stroke 500ms ease-out 100ms forwards; }
.enviado-tilde { stroke-dasharray: 10; stroke-dashoffset: 10; animation: draw-stroke 350ms ease-out 550ms forwards; }
.enviado-titulo { margin: 20px 0 8px; font-size: 24px; line-height: 32px; font-weight: 600; }
.enviado-texto { margin: 0; max-width: 380px; font-size: 14px; line-height: 20px; color: #63636D; }
.contacto-lateral { display: flex; flex-direction: column; gap: 16px; }
.contacto-caja { background: var(--fondo-suave); border-radius: 12px; padding: 20px; }
.contacto-caja-estirada { flex: 1; }
.contacto-caja-titulo { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 16px; }
.whatsapp { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: #FFFFFF; border: 1px solid #E3E3E8; border-radius: 10px; }
.whatsapp:hover { border-color: #C9C9D1; }
.whatsapp-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--tinta); color: #FFFFFF; flex-shrink: 0; }
.whatsapp-icono svg { flex-shrink: 0; }
.whatsapp-texto { min-width: 0; }
.whatsapp-titulo { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta); }
.whatsapp-detalle { display: block; font-size: 12.5px; line-height: 17px; color: #6F6F7A; }
.contacto-datos { display: flex; flex-direction: column; gap: 12px; }
.contacto-dato { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.contacto-enlace { font-weight: 500; }
.contacto-enlace:hover { text-decoration: underline; }
.contacto-telefono { font-variant-numeric: tabular-nums; }
.contacto-horario { color: #63636D; }
.sedes { display: flex; flex-direction: column; gap: 16px; }
.sede-nombre { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 4px; }
.sede-direccion { font-size: 14px; line-height: 20px; color: #63636D; }
.sedes-division { height: 1px; background: #E3E3E8; }
.mapa { margin-top: 16px; height: 200px; border-radius: 12px; background-color: var(--fondo-suave); background-image: repeating-linear-gradient(45deg, #E3E3E8 0, #E3E3E8 1px, transparent 1px, transparent 12px); display: flex; align-items: center; justify-content: center; }
.mapa-texto { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; color: #6F6F7A; }

@media (prefers-reduced-motion: reduce) {
  .anuncios-pista { animation: none; }
  .tarjeta:hover { transform: none; }
}