/* =========================================================
   TWITTER BIKES · ESTILOS DEL SITIO
   Idea central: el corte en diagonal del logo (la cursiva que
   "va hacia adelante") se repite en el borde del hero, los botones,
   los separadores y la esquina de las tarjetas.

   ÍNDICE
    1. Base, variables y componentes comunes (títulos, links, botones)
    2. Hero (inicio, páginas internas, cabecera corta, con foto)
    3. Inicio: tipos de bicicletas, "Diseñadas para superar límites", marcas
    4. Responsive general y ajuste de ancho del editor
    5. Tarjetas de modelos, ficha técnica, etiqueta "Nuevo"
    6. Página Bicicletas y bloque de cierre (se usa en varias páginas)
    7. Páginas de categoría (MTB, Gravel, Ruta)
    8. Páginas de modelo (Tracker, Endu150, Gravel X…)
    9. Página Talles
   10. Página Distribuidores
   11. Página Nosotros
   12. Página Contacto
   13. Header (menú de escritorio, "Comprar online")
   14. Menú desplegable del celular
   15. Footer
   16. Fondo negro general (evita franjas blancas)
   17. Animaciones

   Nota: algunas páginas (Talles, Distribuidores, Nosotros, Contacto y
   las de modelo) cargan además su CSS base desde el script de la página.
   ========================================================= */

/* =========================================================
   1. BASE, VARIABLES Y COMPONENTES COMUNES
   ========================================================= */
/* Anti-parpadeo: el código del <head> oculta la página hasta que
   llega este CSS; esta regla la vuelve a mostrar. */
html body { opacity: 1 !important; transition: opacity .15s ease-out; }
.tw-home {
  --tw-rojo: #e10600;
  --tw-negro: #000;
  --tw-blanco: #fff;
  --tw-gris: rgba(255, 255, 255, .66);
  --tw-linea: rgba(255, 255, 255, .12);
  --tw-display: 'Oswald', 'Arial Narrow', sans-serif;
  --tw-cuerpo: 'Montserrat', system-ui, sans-serif;
  --tw-gutter: clamp(20px, 4vw, 56px);
  --tw-corte: clamp(28px, 6vw, 96px);

  display: block;
  width: 100%;
  background: var(--tw-negro);
  color: var(--tw-blanco);
  font-family: var(--tw-cuerpo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.tw-home *,
.tw-home *::before,
.tw-home *::after { box-sizing: border-box; }
.tw-home img { display: block; max-width: 100%; height: auto; }
.tw-home a { color: inherit; text-decoration: none; }
.tw-home a:focus-visible { outline: 2px solid var(--tw-blanco); outline-offset: 4px; }
.tw-home p { margin: 0; }
.tw-home ul { list-style: none; margin: 0; padding: 0; }
.tw-home h1,
.tw-home h2,
.tw-home h3 {
  margin: 0;
  font-family: var(--tw-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  color: var(--tw-blanco);
  line-height: .92;
  text-wrap: balance;
}

.tw-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--tw-gutter);
}

/* ---------- Títulos de sección ---------- */
.tw-titulo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.tw-titulo h2 { font-size: clamp(2rem, 5.5vw, 4.5rem); }
.tw-sep { display: flex; gap: 6px; }
.tw-sep span {
  width: clamp(32px, 4vw, 56px);
  height: 6px;
  transform: skewX(-24deg);
}
.tw-sep span:nth-child(1) { background: #3a3a3a; }
.tw-sep span:nth-child(2) { background: var(--tw-rojo); }
.tw-sep span:nth-child(3) { background: var(--tw-blanco); }

/* Título + link a la derecha */
.tw-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.tw-cab .tw-titulo { margin-bottom: 0; }

/* Link de texto con subrayado rojo */
.tw-home .tw-link {
  font-weight: 700;
  font-size: .9rem;
  color: var(--tw-blanco);
  text-decoration: underline;
  text-decoration-color: var(--tw-rojo);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  white-space: nowrap;
  transition: color .2s;
}
.tw-home .tw-link:hover { color: var(--tw-gris); }

/* ---------- Botones en paralelogramo ---------- */
.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2.4em;
  background: var(--tw-rojo);
  color: var(--tw-blanco) !important;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background-color .2s, color .2s;
}
.tw-btn:hover,
.tw-btn:focus-visible { background: var(--tw-blanco); color: var(--tw-negro) !important; }

/* Botón secundario: vidrio oscuro (un borde no se vería con el corte diagonal) */
.tw-btn--borde {
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Botón chico (tarjetas de modelos) */
.tw-btn--chico {
  min-height: 44px;
  padding: 0 1.7em;
  font-size: .8rem;
}

/* =========================================================
   2. HERO
   ========================================================= */
.tw-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 940px);
  padding: clamp(96px, 11vw, 150px) 0 calc(var(--tw-corte) + clamp(56px, 7vw, 96px));
  background: var(--tw-rojo); /* asoma como franja roja en el corte */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tw-corte)), 0 100%);
  isolation: isolate;
  --tw-corte-video: polygon(0 0, 100% 0, 100% calc(100% - var(--tw-corte) - 7px), 0 calc(100% - 7px));
}
/* Base negra (por si el video tarda en cargar) */
.tw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--tw-negro);
  clip-path: var(--tw-corte-video);
}
.tw-hero video {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: 75% center;
  clip-path: var(--tw-corte-video);
}
/* Velo oscuro: el texto se lee y la mitad derecha queda limpia */
.tw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--tw-corte-video);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.84) 30%,
      rgba(0,0,0,.5) 55%,
      rgba(0,0,0,0) 80%),
    linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
}
/* Foto de fondo (páginas internas): mismo lugar que el video */
.tw-hero .tw-hero__fondo {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: 70% center;
  clip-path: var(--tw-corte-video);
}
.tw-hero .tw-wrap {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}

/* Bajada chica arriba del titular */
.tw-hero .tw-hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: none;
  margin-bottom: clamp(18px, 2vw, 28px);
  font-size: clamp(.75rem, .9vw, .85rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.tw-hero .tw-hero__kicker::before {
  content: "";
  flex: none;
  width: 32px;
  height: 4px;
  background: var(--tw-rojo);
  transform: skewX(-24deg);
}

.tw-hero h1 {
  font-size: clamp(2.6rem, 7vw, 7rem);
  line-height: .86;
  letter-spacing: -.01em;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.tw-hero h1 span { display: block; }
.tw-hero p {
  max-width: 32em;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--tw-gris);
  margin-bottom: 32px;
}

/* Grupo de botones */
.tw-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

/* Entrada escalonada del hero al cargar (el resto de las animaciones, en la sección 17) */
@media (prefers-reduced-motion: no-preference) {
  .tw-hero .tw-hero__kicker,
  .tw-hero h1 span,
  .tw-hero p,
  .tw-hero .tw-btn {
    opacity: 0;
    transform: translateX(-24px);
    animation: tw-entra .7s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .tw-hero .tw-hero__kicker { animation-delay: 0s; }
  .tw-hero h1 span:nth-child(1) { animation-delay: .1s; }
  .tw-hero h1 span:nth-child(2) { animation-delay: .2s; }
  .tw-hero h1 span:nth-child(3) { animation-delay: .3s; }
  .tw-hero p:not(.tw-hero__kicker) { animation-delay: .45s; }
  .tw-hero .tw-btn { animation-delay: .55s; }
  .tw-hero .tw-btn + .tw-btn { animation-delay: .62s; }
}
@keyframes tw-entra { to { opacity: 1; transform: none; } }

/* =========================================================
   3. INICIO
   ========================================================= */

/* ---------- Tipos de bicicletas ---------- */
.tw-tipos {
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px);
  /* Para usar tu foto de humo rojo:
     background: url('URL') center / cover no-repeat, #000; */
  background:
    radial-gradient(ellipse 55% 45% at 85% 35%, rgba(225, 6, 0, .2), transparent 70%),
    var(--tw-negro);
}
.tw-bicis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.tw-bicis > li { display: flex; }
.tw-bici {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-bottom: clamp(26px, 2.5vw, 34px);
  background: linear-gradient(180deg, #121212 0%, #0a0a0a 60%, #070707 100%);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
  overflow: hidden;
}
.tw-bici img {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin: clamp(16px, 2vw, 28px) 0 0 !important;
  mix-blend-mode: lighten; /* funde el fondo oscuro de la foto con la tarjeta */
  /* Esfuma los bordes de arriba y abajo de la foto: sin "caja" gris */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 92%, transparent 100%);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tw-bici h3,
.tw-bici p {
  position: relative;
  padding: 0 clamp(20px, 2vw, 28px) !important;
}
.tw-bici h3 {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem) !important;
  margin: 4px 0 12px !important;
}
.tw-bici p {
  margin: 0 !important;
  max-width: 42ch;
  font-size: .95rem !important;
  line-height: 1.5;
  color: var(--tw-gris) !important;
}
/* "Ver modelos": lo genera el CSS (el editor alteraba el párrafo dentro del link).
   "order: 99" lo manda al final de la tarjeta. */
.tw-bici::before {
  order: 99;
  content: "Ver modelos";
  align-self: flex-start;
  margin-top: auto;
  padding: 18px clamp(20px, 2vw, 28px) 0;
  font-family: var(--tw-cuerpo);
  font-weight: 700;
  font-size: .9rem;
  color: var(--tw-blanco);
  text-decoration: underline;
  text-decoration-color: var(--tw-rojo);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  /* el sitio le pone un fondo a los ::before de los links: se lo saco */
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.tw-bicis > li:nth-child(1) .tw-bici::before { content: "Ver modelos MTB"; }
.tw-bicis > li:nth-child(2) .tw-bici::before { content: "Ver modelos gravel"; }
.tw-bicis > li:nth-child(3) .tw-bici::before { content: "Ver modelos de ruta"; }
.tw-bici::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--tw-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.tw-bici:hover::after,
.tw-bici:focus-visible::after { transform: scaleX(1); }
.tw-bici:hover img,
.tw-bici:focus-visible img { transform: translateX(10px); }

/* ---------- Diseñadas para superar límites ---------- */
.tw-limites {
  padding: clamp(64px, 9vw, 120px) 0;
  background: linear-gradient(180deg, #0b0b0b, var(--tw-negro));
}
.tw-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.tw-feature a {
  position: relative;
  display: block;
  overflow: hidden;
}
.tw-feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Degradado parejo en las tres fotos */
.tw-feature a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.tw-feature h3 {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 22px);
  z-index: 1;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1;
}
/* Flecha roja: deja claro que la tarjeta es un link */
.tw-feature h3::after {
  content: "→";
  display: inline-block;
  margin-left: .3em;
  font-family: var(--tw-cuerpo);
  font-style: normal;
  color: var(--tw-rojo);
  transition: transform .3s ease;
}
.tw-feature a:hover h3::after,
.tw-feature a:focus-visible h3::after { transform: translateX(6px); }
.tw-feature a:hover img,
.tw-feature a:focus-visible img { transform: scale(1.05); }

/* ---------- Marcas ---------- */
.tw-home .tw-marcas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--tw-linea);
}
.tw-marcas li { display: flex; justify-content: center; }
.tw-marcas img {
  width: auto !important;
  height: clamp(20px, 2.4vw, 32px) !important;
  object-fit: contain;
  filter: brightness(0) invert(1); /* borrar para dejarlos rojos */
  opacity: .85;
}

/* =========================================================
   4. RESPONSIVE GENERAL
   ========================================================= */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .tw-bici p { font-size: .85rem !important; }
}

/* Celular (≤ 767px) */
@media (max-width: 767px) {
  .tw-hero {
    align-items: flex-end;
    min-height: 84svh;
    /* aire abajo para que el botón de WhatsApp no tape los botones */
    padding: 96px 0 calc(var(--tw-corte) + 88px);
  }
  .tw-hero video { object-position: 72% center; }
  .tw-hero .tw-hero__fondo { object-position: 60% center; }
  .tw-hero::before {
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.95) 100%);
  }
  .tw-hero p { margin-bottom: 24px; }
  .tw-hero__ctas { flex-direction: column; }
  .tw-hero .tw-btn { width: 100%; }

  .tw-bicis { grid-template-columns: 1fr; gap: 16px; }
  .tw-bici img { aspect-ratio: 16 / 10; }

  .tw-cab { align-items: flex-start; }

  .tw-features { grid-template-columns: 1fr; }
  .tw-feature img { aspect-ratio: 16 / 10; }

  .tw-home .tw-marcas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .tw-marcas img { height: 24px !important; }

  /* Aire para el botón flotante de WhatsApp */
  .tw-limites { padding-bottom: 112px; }
}

/* El editor mete el bloque en un contenedor corrido a la izquierda.
   Esto lo fuerza a ocupar exactamente el ancho de la pantalla. */
@media (max-width: 991px) {
  .tw-home {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .tw-home .tw-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-home * { animation: none !important; transition: none !important; }
}

/* ---------- Variantes del hero ----------
   Van después del responsive general a propósito: así sus alturas
   y márgenes le ganan a los del hero del inicio. */

/* Página interna con foto (Bicicletas y páginas de modelo) */
.tw-hero--pagina { min-height: min(72vh, 720px); }
.tw-hero--pagina h1 {
  max-width: 11ch;
  font-size: clamp(2.6rem, 6.5vw, 6.5rem);
}
@media (max-width: 767px) {
  .tw-hero--pagina { min-height: 72svh; }
}

/* Cabecera sin foto: negro con brillo rojo y el mismo corte diagonal */
.tw-hero--corto {
  min-height: 0;
  padding-top: clamp(80px, 9vw, 128px);
  padding-bottom: calc(var(--tw-corte) + clamp(48px, 6vw, 80px));
}
.tw-hero--corto::after {
  background:
    radial-gradient(ellipse 50% 70% at 90% 20%, rgba(225, 6, 0, .25), transparent 70%),
    var(--tw-negro);
}
.tw-hero--corto h1 { font-size: clamp(2.6rem, 7vw, 6.5rem); }
.tw-hero--corto p { max-width: 58ch; margin-bottom: 0; }
.tw-hero--corto .tw-hero__ctas { margin-top: 28px; }

/* Cabecera corta con foto (categorías): sumar tw-hero--con-foto
   y un <img class="tw-hero__fondo"> adentro */
.tw-hero--corto.tw-hero--con-foto {
  min-height: min(62vh, 620px);
  align-items: flex-end;
}
@media (max-width: 767px) {
  .tw-hero--corto.tw-hero--con-foto { min-height: 64svh; }
}

/* =========================================================
   5. TARJETAS DE MODELOS Y FICHA TÉCNICA
   ========================================================= */
.tw-modelos-sec {
  padding: clamp(64px, 9vw, 120px) 0;
  /* Para usar tu textura de carbono:
     background: url('URL') center / cover no-repeat, #000; */
  background: linear-gradient(180deg, #0b0b0b, #000);
}
.tw-modelos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.tw-modelo {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  background: linear-gradient(180deg, #131313 0%, #090909 55%, #060606 100%);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}
.tw-modelo > img {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  margin: 0 0 20px !important;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tw-modelo:hover > img { transform: translateX(8px); }
.tw-modelo h3 {
  font-size: clamp(1.9rem, 2.4vw, 2.4rem) !important;
  margin: 0 0 16px !important;
}

/* Ficha técnica: etiqueta gris a la izquierda, dato a la derecha */
.tw-home .tw-specs {
  flex: 1;
  margin: 0 0 24px !important;
}
.tw-specs li {
  display: grid;
  grid-template-columns: minmax(6.5em, 38%) 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--tw-linea);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--tw-blanco);
}
.tw-specs li:last-child { border-bottom: 1px solid var(--tw-linea); }
.tw-specs strong {
  font-weight: 500 !important;
  color: var(--tw-gris) !important;
}
.tw-modelo .tw-btn { align-self: flex-start; }

@media (max-width: 991px) {
  .tw-modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tw-modelos { grid-template-columns: 1fr; gap: 16px; }
  .tw-modelos-sec { padding-bottom: 112px; }
}

/* Modelos destacados del inicio: pegada a "Tipos de bicicletas" */
.tw-home .tw-modelos-sec--home {
  padding: clamp(8px, 2vw, 24px) 0 clamp(64px, 9vw, 120px);
  background: var(--tw-negro);
}
/* Tablet: los 3 destacados en fila, con la ficha apilada para que entre */
@media (min-width: 768px) and (max-width: 991px) {
  .tw-modelos-sec--home .tw-modelos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tw-modelos-sec--home .tw-specs li { grid-template-columns: 1fr; gap: 2px; }
}

/* Etiqueta "Nuevo": sumar la clase tw-modelo--nuevo al <li>
   (y sacarla cuando deje de ser novedad) */
.tw-home .tw-modelo--nuevo { position: relative; }
.tw-modelo--nuevo::before {
  content: "Nuevo";
  position: absolute;
  top: clamp(16px, 1.6vw, 22px);
  left: clamp(16px, 1.6vw, 22px);
  z-index: 1;
  padding: 5px 14px;
  background: var(--tw-rojo);
  color: var(--tw-blanco);
  font-family: var(--tw-cuerpo);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* =========================================================
   6. PÁGINA BICICLETAS Y BLOQUE DE CIERRE
   ========================================================= */

/* Que el ancla #modelos no quede tapada por el header fijo */
.tw-home #modelos { scroll-margin-top: 80px; }

/* Lista de modelos (no es la última sección: sin el aire para WhatsApp) */
.tw-home .tw-modelos-sec--lista {
  padding: clamp(8px, 2vw, 24px) 0 clamp(64px, 9vw, 120px);
  background: var(--tw-negro);
}

/* Etiqueta chica: "MTB · Rígida", "Ruta · Carbono"… */
.tw-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-bottom: 10px;
  font-family: var(--tw-cuerpo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.tw-tag::before {
  content: "";
  flex: none;
  width: 18px;
  height: 3px;
  background: var(--tw-rojo);
  transform: skewX(-24deg);
}

/* Con ficha desplegable, la lista principal no se estira:
   los botones se alinean abajo con margin-top: auto */
.tw-modelo:has(.tw-modelo__acciones) > .tw-specs {
  flex: none;
  margin-bottom: 0 !important;
}

/* "Ficha completa" desplegable */
.tw-mas { margin: 0 0 24px; }
.tw-mas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tw-linea);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tw-blanco);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.tw-mas summary::-webkit-details-marker { display: none; }
.tw-mas summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tw-rojo);
  transition: transform .25s ease;
}
.tw-mas[open] summary::after { transform: rotate(45deg); }
.tw-mas summary:hover { color: var(--tw-gris); }
.tw-mas summary:focus-visible { outline: 2px solid var(--tw-blanco); outline-offset: 4px; }
.tw-home .tw-mas .tw-specs { margin: 0 !important; flex: none; }
.tw-mas .tw-specs li:first-child { border-top: 0; }

/* Botón + link de compra, siempre al pie de la tarjeta */
.tw-modelo__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: auto;
}

/* ---------- Bloque de cierre: dos tarjetas grandes ----------
   Se usa al final de Bicicletas, Talles, Distribuidores, Nosotros
   y las páginas de modelo. */
.tw-cierre {
  padding: 0 0 clamp(64px, 9vw, 120px);
  background: var(--tw-negro);
}
.tw-cierre__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.tw-cierre__grid > li { display: flex; }
.tw-cierre__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: clamp(240px, 26vw, 320px);
  padding: clamp(28px, 3.5vw, 48px);
  background: linear-gradient(135deg, #161616 0%, #0a0a0a 100%);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
  overflow: hidden;
  transition: background-color .3s;
}
.tw-cierre__item--rojo {
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
    var(--tw-rojo);
}
.tw-cierre__item--rojo .tw-tag { color: rgba(255, 255, 255, .9); }
.tw-cierre__item--rojo .tw-tag::before { background: var(--tw-blanco); }
.tw-home .tw-cierre__item h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  margin: 6px 0 14px;
}
.tw-cierre__item p {
  max-width: 34ch;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}
.tw-cierre__cta {
  margin-top: auto;
  padding-top: 24px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--tw-blanco);
  text-decoration: underline;
  text-decoration-color: var(--tw-rojo);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.tw-cierre__item--rojo .tw-cierre__cta { text-decoration-color: var(--tw-blanco); }
.tw-cierre__cta::after {
  content: " →";
  display: inline-block;
  transition: transform .3s ease;
}
.tw-cierre__item:hover .tw-cierre__cta::after,
.tw-cierre__item:focus-visible .tw-cierre__cta::after { transform: translateX(6px); }
/* Barra roja que crece al pasar el mouse (la blanca en la tarjeta roja) */
.tw-cierre__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--tw-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.tw-cierre__item--rojo::after { background: var(--tw-blanco); }
.tw-cierre__item:hover::after,
.tw-cierre__item:focus-visible::after { transform: scaleX(1); }

@media (max-width: 767px) {
  .tw-cierre__grid { grid-template-columns: 1fr; gap: 16px; }
  .tw-cierre__item { min-height: 0; }
  /* Última sección: aire para el botón flotante de WhatsApp */
  .tw-cierre { padding-bottom: 112px; }
}

/* =========================================================
   7. PÁGINAS DE CATEGORÍA (MTB, GRAVEL, RUTA)
   ========================================================= */
/* Modelos: arranca más arriba, pegado al corte */
.tw-modelos-sec--pegada { padding-top: clamp(24px, 3vw, 40px); }

/* 8 modelos: 4 columnas en pantallas anchas */
@media (min-width: 1200px) {
  .tw-modelos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tw-modelos--4 .tw-modelo h3 { font-size: clamp(1.7rem, 2vw, 2.1rem) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .tw-modelos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   8. PÁGINAS DE MODELO
   ========================================================= */
/* Galería: lugar reservado mientras la foto no está subida */
.tw-galeria li.tw-vacia a {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(255, 255, 255, .22);
  cursor: default;
}
.tw-galeria li.tw-vacia img { visibility: hidden; }
.tw-galeria li.tw-vacia a::after {
  content: "Foto pendiente";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
/* ---------- Video vertical "En acción" ----------
   Video 9:16 a un lado y texto al otro. En celular, el video arriba. */
.tw-video-sec { padding: 0 0 clamp(56px, 7vw, 96px); }
.tw-video-sec .tw-wrap {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
}
.tw-video {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 80svh;
  overflow: hidden;
  background: #0d0d0d;
  border-top: 4px solid var(--tw-rojo);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.tw-home .tw-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tw-video__sonido {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  border: 0;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-family: var(--tw-cuerpo);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background-color .2s;
}
.tw-video__sonido:hover,
.tw-video__sonido:focus-visible { background: var(--tw-rojo); }
.tw-video-txt h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important; margin-bottom: 16px !important; }
.tw-home .tw-video-txt p {
  max-width: 46ch;
  margin-bottom: 28px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tw-gris);
}
@media (max-width: 767px) {
  .tw-video-sec .tw-wrap { grid-template-columns: 1fr; }
  .tw-video { width: min(100%, 340px); margin: 0 auto; }
}

/* "En números": que los datos entren aunque sean más largos que un talle */
.tw-home .tw-caja .tw-talles-lista li { white-space: nowrap; }

/* =========================================================
   9. PÁGINA TALLES
   El CSS base de la calculadora lo carga el script de la página.
   ========================================================= */

/* Link "Ver la tabla completa" en la cabecera */
.tw-home .tw-hero__link { display: inline-block; margin-top: 22px; }
.tw-home #tw-tabla-talles { scroll-margin-top: 80px; }

/* El resultado arranca oculto: el script lo muestra al terminar el paso 3 */
.tw-home #tw-fit-lleno { display: none; }

/* Botones − y + al lado de cada barra */
.tw-rango-fila {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tw-home .tw-rango-fila .tw-rango { flex: 1; width: auto; min-width: 0; }
.tw-ajuste {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--tw-blanco);
  font: 400 1.3rem/1 var(--tw-cuerpo);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.tw-ajuste:hover { border-color: var(--tw-rojo); background: rgba(225, 6, 0, .1); }
.tw-ajuste:focus-visible { outline: 2px solid var(--tw-blanco); outline-offset: 2px; }

/* Filtro de disciplina dentro del resultado: más chico */
.tw-home #tw-fit-lleno .tw-fit-tabs { margin: 0 0 8px; gap: 6px; }
.tw-home #tw-fit-lleno .tw-seg label { padding: 7px 14px; font-size: .8rem; }

/* Etiqueta del ajuste ("Ajuste ideal", "Entre dos talles"…) */
.tw-home .tw-fit-score {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tw-blanco);
}

/* Acciones al pie del resultado */
.tw-fit-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--tw-linea);
}

/* ---------- Resultado: modelos que vienen en tu talle ---------- */
.tw-home .tw-fit-porque {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--tw-rojo);
  background: rgba(255, 255, 255, .04);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--tw-gris);
}
.tw-fit-porque strong { color: var(--tw-blanco); }
.tw-home .tw-fit-porque a {
  color: var(--tw-blanco);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tw-rojo);
  text-underline-offset: 3px;
}
.tw-home .tw-fit-cuantos {
  margin: 16px 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.tw-fit-mods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.tw-fit-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--tw-linea);
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.tw-home .tw-fit-mod img {
  flex: none;
  width: 76px;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.tw-fit-mod__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-fit-mod__txt strong {
  font-family: var(--tw-display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--tw-blanco);
}
.tw-fit-mod__estado { font-size: .75rem; font-weight: 700; }
.tw-fit-mod__nota { font-size: .7rem; color: rgba(255, 255, 255, .5); }
/* Viene en tu talle */
.tw-fit-mod--si { border-color: rgba(225, 6, 0, .55); background: rgba(225, 6, 0, .07); }
.tw-fit-mod--si .tw-fit-mod__estado { color: var(--tw-blanco); }
.tw-fit-mod--si .tw-fit-mod__estado::before { content: "✓ "; color: var(--tw-rojo); }
/* Talle sin confirmar: lleva a WhatsApp */
.tw-fit-mod--consultar .tw-fit-mod__estado { color: var(--tw-gris); }
.tw-fit-mod--consultar .tw-fit-mod__estado::after { content: " ↗"; }
/* No viene en tu talle: queda visible pero apagado */
.tw-fit-mod--no { opacity: .45; }
.tw-fit-mod--no .tw-fit-mod__estado { color: var(--tw-gris); font-weight: 500; }
.tw-fit-mod:hover,
.tw-fit-mod:focus-visible { border-color: var(--tw-rojo); background: rgba(225, 6, 0, .1); opacity: 1; }

/* ---------- Tabla de talles ---------- */
.tw-tablas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: 24px;
}
.tw-home .tw-tabla h3 {
  position: relative;
  padding-top: 18px;
  margin-bottom: 12px;
  font-size: 1.3rem;
}
.tw-tabla h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 36px;
  height: 4px;
  background: var(--tw-rojo);
  transform: skewX(-24deg);
}
.tw-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.tw-tabla th {
  padding: 0 0 8px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid var(--tw-linea);
}
.tw-tabla td {
  padding: 9px 0;
  border-bottom: 1px solid var(--tw-linea);
  color: var(--tw-gris);
}
.tw-tabla td strong { color: var(--tw-blanco); font-weight: 700; }
.tw-tabla td span {
  margin-left: 4px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tw-rojo);
}
.tw-home .tw-tema .tw-tabla p { margin-top: 10px; font-size: .78rem; line-height: 1.5; }

/* ---------- Preguntas frecuentes en acordeón ---------- */
.tw-faq__item { border-bottom: 1px solid var(--tw-linea); }
.tw-faq__item:first-child { border-top: 1px solid var(--tw-linea); }
.tw-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tw-blanco);
  cursor: pointer;
  list-style: none;
}
.tw-faq__item summary::-webkit-details-marker { display: none; }
.tw-faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tw-rojo);
  transition: transform .25s ease;
}
.tw-faq__item[open] summary::after { transform: rotate(45deg); }
.tw-faq__item summary:hover { color: var(--tw-gris); }
.tw-faq__item summary:focus-visible { outline: 2px solid var(--tw-blanco); outline-offset: 4px; }
.tw-home .tw-faq__item p { padding: 0 0 20px; }

/* La guía no es la última sección (abajo va el cierre) */
.tw-home .tw-guia { padding-bottom: clamp(48px, 6vw, 80px); }

/* =========================================================
   10. PÁGINA DISTRIBUIDORES
   El CSS base del listado lo carga el script de la página.
   ========================================================= */

/* Anclas: que no queden tapadas por el header */
.tw-home #buscar,
.tw-home #sumate { scroll-margin-top: 80px; }

/* Mapa desplegable */
.tw-dl-mapa {
  margin: 18px 0 4px;
  border: 1px solid var(--tw-linea);
  background: #0d0d0d;
}
.tw-dl-mapa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tw-blanco);
  cursor: pointer;
  list-style: none;
}
.tw-dl-mapa summary::-webkit-details-marker { display: none; }
.tw-dl-mapa summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tw-rojo);
  transition: transform .25s ease;
}
.tw-dl-mapa[open] summary::after { transform: rotate(45deg); }
.tw-dl-mapa summary:focus-visible { outline: 2px solid var(--tw-blanco); outline-offset: 2px; }
.tw-dl-mapa__marco { border-top: 1px solid var(--tw-linea); }
.tw-dl-mapa iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 50vw, 480px);
  border: 0;
}

/* Link de WhatsApp dentro del mensaje "sin resultados" */
.tw-home #tw-dl-vacio .tw-link { white-space: normal; }

/* El listado no es la última sección (abajo va el cierre) */
.tw-home .tw-listado { padding-bottom: clamp(48px, 6vw, 80px); }

/* =========================================================
   11. PÁGINA NOSOTROS
   El CSS base lo carga el script de la página.
   ========================================================= */

/* Número grande y tenue en cada pilar (01–04) */
.tw-home .tw-pilar { position: relative; }
.tw-pilar__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--tw-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--tw-rojo);
}

/* Link a Instagram debajo del manifiesto */
.tw-home .tw-manifiesto__link { display: inline-block; margin-top: 28px; white-space: normal; }

/* =========================================================
   12. PÁGINA CONTACTO
   El CSS base lo carga el script de la página.
   ========================================================= */

/* Estado abierto / cerrado debajo del horario */
.tw-home .tw-canal .tw-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
}
.tw-home .tw-canal .tw-estado:empty { display: none; }
.tw-estado::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.tw-home .tw-canal .tw-estado--on { color: var(--tw-blanco); }
.tw-estado--on::before {
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, .2);
}

/* Canal Redes: dos links en fila */
.tw-canal__links { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* Formulario: ancla y link de WhatsApp para bicicleterías */
.tw-home #consulta { scroll-margin-top: 80px; }
.tw-home .tw-form-cab__wa { display: inline-block; margin-top: 14px; white-space: normal; }

/* =========================================================
   13. HEADER
   Usa los id que genera la plataforma (#ss-header, #ss-row-1, #ss-column-…).
   ========================================================= */

#ss-header {
  --bs-header-bg: #000;
  --tw-rojo: #e10600;
  /* Margen lateral igual al del contenido: el logo queda alineado
     con el titular y la lupa con el borde derecho */
  --tw-borde: max(clamp(20px, 4vw, 56px), calc((100% - 1320px) / 2 + clamp(20px, 4vw, 56px)));
  background: #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Barra: negra y un poco más baja */
#ss-header #ss-row-1,
#ss-header .ss-mobile {
  background-color: rgba(0, 0, 0, .94) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Padding lateral = mismo borde que el contenido */
#ss-header #ss-row-1 {
  padding: 14px var(--tw-borde) !important;
}
/* Si la plataforma mete un contenedor interno con su propio
   ancho o padding, se neutraliza para que no se sume */
#ss-header #ss-row-1 > .container,
#ss-header #ss-row-1 > .container-fluid,
#ss-header #ss-row-1 > .row,
#ss-header #ss-row-1 > [class*="row-content"] {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#ss-header .logo-header {
  height: 28px !important;
  width: auto !important;
}

/* ---------- Links: estilo COMPARTIDO con el footer ---------- */
#ss-column-2 a:not(.dropdown-item),
#ss-footer #ss-menu-footer a {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding: 6px 2px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  letter-spacing: .02em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .7) !important;
  text-decoration: none !important;
  transition: color .2s;
}
/* Si el editor mete el texto en un elemento interno con su propio color,
   que herede el del link */
#ss-column-2 a:not(.dropdown-item) *,
#ss-footer #ss-menu-footer a * {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}
/* Subrayado rojo inclinado al pasar el mouse o en la página activa */
#ss-column-2 a:not(.dropdown-item)::before,
#ss-footer #ss-menu-footer a::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 3px;
  background: #e10600;
  transform: skewX(-24deg) scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#ss-column-2 a:not(.dropdown-item):hover,
#ss-column-2 a:not(.dropdown-item):focus-visible,
#ss-column-2 a.active,
#ss-column-2 a[aria-current="page"],
#ss-footer #ss-menu-footer a:hover,
#ss-footer #ss-menu-footer a:focus-visible,
#ss-footer #ss-menu-footer a.active,
#ss-footer #ss-menu-footer a[aria-current="page"] {
  color: #fff !important;
}
#ss-column-2 a:not(.dropdown-item):hover::before,
#ss-column-2 a:not(.dropdown-item):focus-visible::before,
#ss-column-2 a.active::before,
#ss-column-2 a[aria-current="page"]::before,
#ss-footer #ss-menu-footer a:hover::before,
#ss-footer #ss-menu-footer a:focus-visible::before,
#ss-footer #ss-menu-footer a.active::before,
#ss-footer #ss-menu-footer a[aria-current="page"]::before {
  transform: skewX(-24deg) scaleX(1);
}

/* Espaciado del menú: más compacto y parejo */
#ss-column-2 ul:not(.dropdown-menu),
#ss-column-2 .navbar-nav {
  gap: clamp(14px, 2vw, 30px) !important;
}
#ss-column-2 li:not(.dropdown-menu li) {
  margin: 0 !important;
  padding: 0 !important;
}
#ss-column-2 .dropdown-toggle::after { margin-left: 6px; vertical-align: .15em; }

/* El menú siempre en una sola línea: si se suman páginas, se achica
   el espacio entre links en lugar de pasar a una segunda fila */
@media (min-width: 992px) {
  #ss-column-2 ul:not(.dropdown-menu),
  #ss-column-2 .navbar-nav {
    flex-wrap: nowrap !important;
    gap: clamp(14px, 2vw, 34px) !important;
  }
  #ss-column-2 a:not(.dropdown-item) { white-space: nowrap; }

  /* Sin buscador en escritorio (en celular no se toca: ahí vive el ☰) */
  #ss-column-3 { display: none !important; }

  /* Logo a la izquierda y menú alineado a la derecha, con aire entre los dos */
  #ss-row-1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #ss-column-1 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  #ss-column-2 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: clamp(32px, 5vw, 96px) !important;
  }
  #ss-column-2 ul:not(.dropdown-menu),
  #ss-column-2 .navbar-nav,
  #ss-column-2 .navbar-collapse {
    justify-content: flex-end !important;
  }
  /* "Comprar online" un poco separado del resto */
  #ss-header li:has(> a[href*="bicicross.com.ar"]) { margin-left: clamp(4px, 1vw, 16px) !important; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  #ss-column-2 a:not(.dropdown-item) { font-size: .82rem !important; }
  #ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item) { padding: 7px 14px !important; }
}

/* ---------- Submenú "Bicicletas" ---------- */
#ss-header .dropdown-menu {
  margin-top: 14px !important;
  padding: 8px 0 !important;
  min-width: 200px;
  background: #0a0a0a !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-top: 3px solid var(--tw-rojo) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
}
#ss-header .dropdown-item {
  padding: 10px 20px !important;
  color: rgba(255, 255, 255, .75) !important;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: .9rem;
  background: transparent !important;
  border-left: 3px solid transparent;
  transition: color .2s, border-color .2s, background-color .2s;
}
#ss-header .dropdown-item:hover,
#ss-header .dropdown-item:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .05) !important;
  border-left-color: var(--tw-rojo);
}

/* ---------- Buscador ---------- */
#ss-column-3 a,
#ss-column-3 button {
  color: #fff !important;
  opacity: .8;
  transition: opacity .2s;
}
#ss-column-3 a:hover,
#ss-column-3 button:hover { opacity: 1; }

/* Foco visible para teclado */
#ss-header a:focus-visible,
#ss-header button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Barra del celular */
#ss-header .ss-mobile {
  padding: 12px 20px !important;
}

/* ---------- "Comprar online": botón rojo ----------
   Se reconoce por el link (va a bicicross.com.ar), así no depende
   de la posición en el menú. */
#ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 18px !important;
  background: #e10600 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background-color .2s, color .2s;
}
/* Sin el subrayado rojo de los demás links (sobre rojo no se vería) */
#ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item)::before {
  display: none !important;
}
/* Flechita: avisa que abre la tienda en otro sitio */
#ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item)::after {
  content: "↗";
  font-size: .85em;
  line-height: 1;
}
#ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item):hover,
#ss-header a[href*="bicicross.com.ar"]:not(.dropdown-item):focus-visible {
  background: #fff !important;
  color: #000 !important;
}

/* =========================================================
   14. MENÚ DESPLEGABLE DEL CELULAR
   La plataforma lo trae con bg-white; el id le gana a esa clase.
   ========================================================= */
#navbarSupportedContent,
#navbarSupportedContent #ss-menu {
  background: #000 !important;
}
#navbarSupportedContent {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 3px solid #e10600;
}
#ss-menu-list .nav-item > a,
#ss-menu-list .nav-item > a *,
#ss-menu-list .dropdown-toggle {
  color: #fff !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 500 !important;
}
#ss-menu-list .nav-item > a:hover,
#ss-menu-list .nav-item > a:focus-visible {
  color: rgba(255, 255, 255, .7) !important;
}
/* Flechita de "Bicicletas" en blanco */
#ss-menu-list .dropdown-toggle::after { border-top-color: #fff !important; }
/* "Bicicletas" en blanco como el resto (en escritorio le ganaba el gris
   de los links del header porque no es hijo directo del ítem) */
#ss-header #ss-menu-list .dropdown-toggle,
#ss-header #ss-menu-list .dropdown-toggle *,
#ss-header #ss-menu-list .nav-item a:not(.dropdown-item):not([href*="bicicross.com.ar"]),
#ss-header #ss-menu-list .nav-item a:not(.dropdown-item):not([href*="bicicross.com.ar"]) *,
#ss-header #ss-column-2 .nav-item a:not(.dropdown-item):not([href*="bicicross.com.ar"]),
#ss-header #ss-column-2 .nav-item a:not(.dropdown-item):not([href*="bicicross.com.ar"]) *,
#ss-header #ss-column-2 .dropdown > a,
#ss-header #ss-column-2 .dropdown > a * {
  color: #fff !important;
  opacity: 1 !important;
}
/* Submenú de "Bicicletas" */
#navbarSupportedContent .dropdown-menu {
  background: #0d0d0d !important;
  border: 0 !important;
  border-left: 3px solid #e10600 !important;
}
#navbarSupportedContent .dropdown-item {
  color: rgba(255, 255, 255, .8) !important;
  background: transparent !important;
}
#navbarSupportedContent .dropdown-item:hover,
#navbarSupportedContent .dropdown-item:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
}
/* Todo el texto del menú en blanco y con la misma letra
   (algunos ítems traen un elemento interno gris y transparente) */
#ss-menu-list .nav-item,
#ss-menu-list .nav-item * {
  color: #fff !important;
  opacity: 1 !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}
#ss-menu-list .nav-item .dropdown-item { color: rgba(255, 255, 255, .8) !important; }
/* Botón ☰ sin recuadro */
#ss-header .navbar-toggler {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}
#ss-header .navbar-toggler:focus-visible {
  outline: 2px solid #e10600;
  outline-offset: 2px;
}

/* =========================================================
   15. FOOTER
   Usa los id que genera la plataforma (#ss-footer, #ss-footer-row-…).
   ========================================================= */
#ss-footer {
  --tw-rojo: #e10600;
  --tw-gris: rgba(255, 255, 255, .62);
  --tw-corte-f: clamp(24px, 4vw, 56px);
  position: relative;
  background: #000 !important;
  padding-top: calc(var(--tw-corte-f) + clamp(40px, 5vw, 64px));
  /* espacio para la barra de gestos del celular, con fondo negro */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Franja roja en diagonal: el mismo gesto que el corte del hero */
#ss-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--tw-corte-f) + 7px);
  background: var(--tw-rojo);
  clip-path: polygon(0 calc(100% - 7px), 100% 0, 100% 7px, 0 100%);
  pointer-events: none;
}

/* Filas en negro (la plataforma pinta alguna de blanco) y con el mismo ancho que el inicio */
#ss-footer .ss-footer-content,
#ss-footer [id^="ss-footer-row"] {
  background-color: #000 !important;
}
#ss-footer .footer-row {
  background: #000 !important;
  padding: 0 !important;
}
#ss-footer .footer-row-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) !important;
}
#ss-footer .footer-column {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* ---------- Fila 1: logo ---------- */
#ss-footer-row-1 { margin-bottom: clamp(32px, 4vw, 48px); }
#ss-footer-row-1 img {
  height: 30px !important;
  width: auto !important;
  max-height: none !important;
}

/* ---------- Fila 2: menú, contacto y redes ---------- */
#ss-footer-row-2 .footer-row-content {
  grid-template-columns: 1.6fr 1fr auto !important;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

/* Títulos de columna */
#ss-footer-row-2 #ss-menu-footer::before,
#ss-footer-row-2 #ss-socialmedia-footer::before,
#ss-footer-row-2 #ss-contact-footer::before {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #fff;
}
#ss-footer-row-2 #ss-menu-footer::before { content: "Navegación"; }
#ss-footer-row-2 #ss-socialmedia-footer::before { content: "Seguinos"; }
/* "Contacto" solo aparece si el bloque tiene datos cargados */
#ss-footer-row-2 #ss-contact-footer::before { content: none; }
#ss-footer-row-2 #ss-contact-footer:has(a, p, li)::before { content: "Contacto"; }
#ss-menu-footer,
#ss-socialmedia-footer { flex-wrap: wrap; }

/* Menú en dos columnas */
#ss-menu-footer ul:not(.dropdown-menu),
#ss-menu-footer .nav,
#ss-menu-footer .navbar-nav {
  display: grid !important;
  grid-template-columns: repeat(2, max-content);
  column-gap: 48px !important;
  row-gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
/* Sin el desplegable "Bicicletas" en el footer: se oculta el ítem
   que trae subitems (los links simples tienen un solo hijo, el <a>) */
#ss-menu-footer .dropdown-menu,
#ss-menu-footer li:has(.dropdown-menu),
#ss-menu-footer li:has(ul),
#ss-menu-footer .dropdown,
#ss-menu-footer #menu-footer > li.nav-item:has(> :nth-child(2)) { display: none !important; }

/* Contacto */
#ss-contact-footer,
#ss-contact-footer a,
#ss-contact-footer p {
  color: var(--tw-gris) !important;
  font-size: .92rem;
  line-height: 1.7;
  text-decoration: none !important;
}
#ss-contact-footer { flex-wrap: wrap; }
#ss-contact-footer a:hover { color: #fff !important; }

/* Lista de contacto (WhatsApp, dirección, horario) */
#ss-footer .tw-contacto {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#ss-footer .tw-contacto li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .92rem;
  line-height: 1.5;
  color: #fff;
}
#ss-footer .tw-contacto span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
#ss-footer .tw-contacto a {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tw-rojo) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}
#ss-footer .tw-contacto a:hover { color: rgba(255, 255, 255, .7) !important; }

/* Redes: íconos blancos que se ponen rojos al pasar el mouse */
#ss-socialmedia-footer { gap: 20px !important; align-items: center; }
#ss-socialmedia-footer a {
  display: inline-flex !important;
  align-items: center;
  color: #fff !important;
  transition: color .2s, transform .2s;
}
#ss-socialmedia-footer a * { color: inherit !important; fill: currentColor; }
#ss-socialmedia-footer a:hover,
#ss-socialmedia-footer a:focus-visible {
  color: var(--tw-rojo) !important;
  transform: translateY(-2px);
}

/* ---------- Franja final ---------- */
#ss-footer .ss-footer-content::after {
  content: "© 2026 Twitter Bikes Argentina. Distribución oficial en Argentina.";
  display: block;
  margin: 0 max(clamp(20px, 4vw, 56px), calc((100% - 1320px) / 2 + 56px));
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .8rem;
  color: rgba(255, 255, 255, .62);
}

#ss-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  #ss-footer-row-2 .footer-row-content {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }
  #ss-menu-footer ul:not(.dropdown-menu),
  #ss-menu-footer .nav,
  #ss-menu-footer .navbar-nav { column-gap: 32px !important; }
  /* que el botón de WhatsApp no tape el copyright */
  #ss-footer .ss-footer-content::after {
    margin: 0 20px;
    padding: 20px 76px 28px 0;
  }
}

/* =========================================================
   16. FONDO NEGRO GENERAL
   La plataforma deja la página en blanco por defecto y asoma como
   franja debajo del footer en el celular.
   ========================================================= */
html,
body,
*:has(#ss-footer) {
  background-color: #000 !important;
}
html,
body {
  background: #000 !important;
}

/* =========================================================
   17. ANIMACIONES
   Todo en CSS: no hace falta tocar el HTML ni agregar scripts.
   - Los bloques entran al hacer scroll, en diagonal (el mismo gesto
     "hacia adelante" del logo y los cortes).
   - Los separadores rojos se "dibujan" y la franja del footer se traza.
   - Los botones tienen un brillo que cruza al pasar el mouse.
   Navegadores sin soporte (por ejemplo Firefox) muestran todo quieto,
   sin romper nada. Quien tiene las animaciones desactivadas en su
   sistema tampoco las ve (es lo correcto por accesibilidad).
   ========================================================= */

@keyframes tw-sube {
  from { opacity: 0; transform: translate(-28px, 36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tw-raya {
  from { transform: skewX(-24deg) scaleX(0); }
  to   { transform: skewX(-24deg) scaleX(1); }
}
@keyframes tw-traza {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes tw-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tw-sombra {
  from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  to   { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Hero: más elementos en la entrada escalonada ---------- */
  .tw-hero .tw-cat,
  .tw-hero h1:not(:has(span)),
  .tw-hero .tw-chips li,
  .tw-hero .tw-hero__ctas,
  .tw-hero .tw-acciones,
  .tw-hero .tw-hero__link {
    opacity: 0;
    transform: translateX(-24px);
    animation: tw-entra .7s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .tw-hero .tw-cat { animation-delay: 0s; }
  .tw-hero h1:not(:has(span)) { animation-delay: .1s; }
  .tw-hero .tw-chips li:nth-child(1) { animation-delay: .5s; }
  .tw-hero .tw-chips li:nth-child(2) { animation-delay: .57s; }
  .tw-hero .tw-chips li:nth-child(3) { animation-delay: .64s; }
  .tw-hero .tw-chips li:nth-child(4) { animation-delay: .71s; }
  .tw-hero .tw-acciones,
  .tw-hero .tw-hero__link { animation-delay: .8s; }
  /* los botones dentro de un grupo ya animado no se animan dos veces */
  .tw-hero .tw-acciones .tw-btn,
  .tw-hero .tw-hero__ctas .tw-btn { opacity: 1; transform: none; animation: none; }

  /* Fondo del hero (foto o video): aparece desde el negro */
  .tw-hero video,
  .tw-hero .tw-hero__fondo {
    animation: tw-aparece 1.2s ease-out both;
  }

  /* ---------- 2. Brillo de los botones al pasar el mouse ---------- */
  .tw-btn { position: relative; overflow: hidden; isolation: isolate; }
  .tw-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-24deg);
    transition: left .55s ease;
    pointer-events: none;
  }
  .tw-btn:hover::after,
  .tw-btn:focus-visible::after { left: 130%; }

  /* ---------- 3. Al hacer scroll (navegadores con soporte) ---------- */
  @supports (animation-timeline: view()) {

    /* Bloques que entran en diagonal */
    .tw-home .tw-titulo,
    .tw-home .tw-cab > .tw-link,
    .tw-bicis > li,
    .tw-modelos > li,
    .tw-features > li,
    .tw-cierre__grid > li,
    .tw-galeria > li,
    .tw-carac > div,
    .tw-pares > div,
    .tw-tema,
    .tw-opciones2 > .tw-caja,
    .tw-ficha-wrap,
    .tw-check li,
    .tw-calc,
    .tw-tablas > .tw-tabla,
    .tw-dist-grid > li,
    .tw-dl,
    .tw-hitos > li,
    .tw-pilar,
    .tw-canal,
    .tw-mapa,
    .tw-atajos > li,
    .tw-manifiesto h2,
    .tw-manifiesto p,
    .tw-paraquien h2 {
      --tw-d: 0%;
      animation: tw-sube linear both;
      animation-timeline: view();
      animation-range: entry calc(5% + var(--tw-d)) cover calc(20% + var(--tw-d));
    }
    /* Escalonado: en una fila de tarjetas, cada una entra un poco después */
    .tw-bicis > li:nth-child(3n+2),
    .tw-modelos > li:nth-child(3n+2),
    .tw-features > li:nth-child(3n+2),
    .tw-cierre__grid > li:nth-child(2n),
    .tw-galeria > li:nth-child(4n+2),
    .tw-carac > div:nth-child(3n+2),
    .tw-pares > div:nth-child(3n+2),
    .tw-opciones2 > .tw-caja:nth-child(2n),
    .tw-tablas > .tw-tabla:nth-child(3n+2),
    .tw-dist-grid > li:nth-child(4n+2),
    .tw-dl:nth-child(3n+2),
    .tw-hitos > li:nth-child(4n+2),
    .tw-pilar:nth-child(2n),
    .tw-atajos > li:nth-child(3n+2) { --tw-d: 6%; }
    .tw-bicis > li:nth-child(3n),
    .tw-modelos > li:nth-child(3n),
    .tw-features > li:nth-child(3n),
    .tw-galeria > li:nth-child(4n+3),
    .tw-carac > div:nth-child(3n),
    .tw-pares > div:nth-child(3n),
    .tw-tablas > .tw-tabla:nth-child(3n),
    .tw-dist-grid > li:nth-child(4n+3),
    .tw-dl:nth-child(3n),
    .tw-hitos > li:nth-child(4n+3),
    .tw-atajos > li:nth-child(3n) { --tw-d: 12%; }
    .tw-galeria > li:nth-child(4n),
    .tw-dist-grid > li:nth-child(4n),
    .tw-hitos > li:nth-child(4n),
    .tw-modelos--4 > li:nth-child(4n) { --tw-d: 18%; }

    /* En el celular las tarjetas van una debajo de otra: sin escalonado */
    @media (max-width: 767px) {
      .tw-home * { --tw-d: 0% !important; }
    }

    /* Separador de tres barras: se dibuja de izquierda a derecha */
    .tw-home .tw-sep span {
      transform-origin: left;
      animation: tw-raya linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }
    .tw-home .tw-sep span:nth-child(2) { animation-range: entry 35% cover 35%; }
    .tw-home .tw-sep span:nth-child(3) { animation-range: entry 50% cover 40%; }

    /* Logos de marcas: uno detrás del otro */
    .tw-home .tw-marcas li {
      animation: tw-aparece linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    .tw-home .tw-marcas li:nth-child(2) { animation-range: entry 20% cover 35%; }
    .tw-home .tw-marcas li:nth-child(3) { animation-range: entry 30% cover 40%; }
    .tw-home .tw-marcas li:nth-child(4) { animation-range: entry 40% cover 45%; }

    /* Franja roja del footer: se traza al llegar */
    #ss-footer::before {
      transform-origin: left;
      animation: tw-traza linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    /* Header: aparece una sombra apenas empezás a bajar */
    #ss-header {
      animation: tw-sombra linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
  }
}