/* Página de B&B — bybdistribuciones.co
   El diseño NO se decidió aquí: se copió del WordPress que hizo Agencia PCM (Astra + Elementor),
   hasta 2026-10. Los valores de abajo son los suyos, leídos de su CSS; lo que cambió está anotado. */

@font-face { font-family: "Prompt"; font-weight: 400; font-display: swap; src: url("/fuentes/prompt-400.woff2") format("woff2"); }
@font-face { font-family: "Prompt"; font-weight: 600; font-display: swap; src: url("/fuentes/prompt-600.woff2") format("woff2"); }
@font-face { font-family: "Manjari"; font-weight: 400; font-display: swap; src: url("/fuentes/manjari-400.woff2") format("woff2"); }
@font-face { font-family: "Manjari"; font-weight: 700; font-display: swap; src: url("/fuentes/manjari-700.woff2") format("woff2"); }

:root {
  color-scheme: light; /* Abstención: el sitio original no tiene tema oscuro y no se inventa uno. */

  /* Paleta global de Astra en el sitio original (--e-global-color-astglobalcolor0..8) */
  --rojo: #b80000;          /* color 1: botones, menú, banda de títulos. Blanco encima: 7,0:1 */
  --rojo-titulo: #9d0208;   /* color 4: los h2. Sobre blanco: 8,9:1 */
  --tinta: #292929;         /* color 0: la tarjeta oscura del inicio y los textos fuertes */
  --texto: #424242;         /* color 7: párrafos. Sobre blanco: 10,1:1 */
  --suave: #f3f2f2;         /* color 6: fondos de franja */
  --rosa: #fdecee;          /* la tarjeta «Mercadeo»; el original la pintaba con color 3 (#f26a8d) al 15 % */
  --blanco: #ffffff;
  --verde-wa: #1f8f4e;      /* Salida: el verde de WhatsApp (#25d366) da 2,0:1 con texto blanco; este da 4,6:1 */
  --linea: #e4e1e1;

  --letra-titulo: "Prompt", system-ui, sans-serif;
  --letra-texto: "Manjari", system-ui, sans-serif;

  /* Tamaños medidos en el original: h1 46px, h2 29px, h3 22px, cuerpo 16px. */
  --t-h1: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 1.8125rem);
  --t-h3: 1.375rem;
  --t-texto: 1rem;
  --t-chico: .875rem;

  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem;
  --ancho: 1140px;          /* el contenedor «boxed» de Elementor del original */
  --radio: 14px;            /* las tarjetas y fotos del original */
  --radio-boton: 999px;     /* los botones del original son píldoras */
  --sombra: 0 6px 20px rgba(41, 41, 41, .10);
  --cabecera: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--texto); font: 400 var(--t-texto)/1.65 var(--letra-texto); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--letra-titulo); font-weight: 600; line-height: 1.2; margin: 0 0 var(--e2); text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); color: var(--rojo-titulo); }
h3 { font-size: var(--t-h3); color: var(--tinta); }
p { margin: 0 0 var(--e2); text-wrap: pretty; }
a { color: var(--rojo); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.sobre-rojo :focus-visible { outline-color: var(--blanco); }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--blanco); padding: var(--e1) var(--e2); z-index: 100; }
.saltar:focus { left: var(--e2); top: var(--e2); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .55em 1.4em;
  border-radius: var(--radio-boton); border: 2px solid var(--rojo); background: var(--rojo); color: var(--blanco);
  font: 600 var(--t-chico)/1.2 var(--letra-titulo); text-decoration: none; touch-action: manipulation;
  transition: background-color .15s, color .15s, transform .1s;
}
.boton:hover { background: var(--rojo-titulo); border-color: var(--rojo-titulo); }
.boton:active { transform: translateY(1px); }
.boton::after { content: "»"; font-size: 1.15em; line-height: 1; }
.boton--oscuro { background: var(--tinta); border-color: var(--tinta); }
.boton--oscuro:hover { background: #000; border-color: #000; }
.boton--borde { background: transparent; color: currentColor; border-color: currentColor; }
.boton--borde:hover { background: var(--blanco); color: var(--rojo); border-color: var(--blanco); }
.boton--wa { background: var(--verde-wa); border-color: var(--verde-wa); }
.boton--wa:hover { background: #16703c; border-color: #16703c; }
.boton--wa::after { content: none; }
.boton svg { width: 1.35em; height: 1.35em; flex: none; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--blanco); box-shadow: 0 1px 0 var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: var(--e3); min-height: var(--cabecera); }
.cabecera__logo img { width: 55px; height: 56px; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; list-style: none; margin: 0; padding: 0; flex: 1; }
.menu a { color: var(--rojo); font: 600 .9375rem/1.2 var(--letra-titulo); text-decoration: none; padding: .6rem 0; display: inline-block; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tinta); }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-boton { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--rojo); color: var(--blanco); cursor: pointer; touch-action: manipulation; }
.menu-boton svg { width: 24px; height: 24px; margin: auto; }

@media (max-width: 920px) {
  .menu-boton { display: grid; }
  .cabecera__cta { display: none; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--blanco); box-shadow: var(--sombra); padding: var(--e1) 1rem var(--e2); }
  .menu.abierto { display: flex; }
  .menu a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--linea); }
}

/* ---------- Carrusel del inicio ---------- */
.carrusel { position: relative; background: var(--suave); }
.carrusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__lamina { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.carrusel__lamina img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.carrusel__flecha {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 0; border-radius: 8px;
  background: var(--rojo); color: var(--blanco); cursor: pointer; display: grid; place-items: center; touch-action: manipulation;
}
.carrusel__flecha:hover { background: var(--rojo-titulo); }
.carrusel__flecha--ant { left: 1rem; } .carrusel__flecha--sig { right: 1rem; }
@media (max-width: 640px) {
  .carrusel__lamina img { aspect-ratio: 39 / 40; }
  .carrusel__flecha { width: 40px; height: 40px; }
}

/* ---------- Banda de título de las páginas internas ---------- */
.migas { font-size: var(--t-chico); text-align: center; padding: .7rem 0; color: var(--texto); }
.migas a { color: var(--texto); text-decoration: none; } .migas a:hover { color: var(--rojo); }
.portada { background: var(--rojo); color: var(--blanco); padding: var(--e5) 0; }
.portada h1 { color: var(--blanco); max-width: 14ch; }
.portada p { max-width: 60ch; }

/* ---------- Secciones ---------- */
.seccion { padding: var(--e5) 0; }
.seccion--suave { background: var(--suave); }
.encabezado { text-align: center; max-width: 65ch; margin: 0 auto var(--e4); }
.encabezado h1, .encabezado h2 { color: var(--tinta); }
.par { display: grid; gap: var(--e4); align-items: center; grid-template-columns: 1fr 1fr; }
.par > * { min-width: 0; }
.par--invertido > :first-child { order: 2; }
.par--siguiente { margin-top: var(--e4); }
.par__foto img, .foto { border-radius: var(--radio); width: 100%; }
@media (max-width: 860px) {
  .par { grid-template-columns: 1fr; }
  .par--invertido > :first-child { order: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: var(--e2) 0 var(--e3); }
.chips--centro { justify-content: center; }
.chips li { display: inline-flex; align-items: center; gap: .4em; border: 1px solid var(--linea); border-radius: 6px; padding: .25em .7em; font-size: .9375rem; color: var(--tinta); background: var(--blanco); }
.chips li::before { content: ""; width: 1em; height: 1em; flex: none; border-radius: 50%; background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/80% no-repeat; }

/* Tres tarjetas del inicio: oscura, roja, rosa — como el original */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); }
.tres > div { padding: var(--e4) var(--e3); }
.tres h3 { font-size: 1.5rem; }
.tres .t-oscura { background: var(--tinta); color: #e9e9e9; } .t-oscura h3 { color: var(--blanco); }
.tres .t-roja { background: var(--rojo); color: var(--blanco); } .t-roja h3 { color: var(--blanco); }
.tres .t-rosa { background: var(--rosa); } .t-rosa h3 { color: var(--rojo); }
.t-rosa .boton--borde { color: var(--rojo); } .t-rosa .boton--borde:hover { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
@media (max-width: 860px) { .tres { grid-template-columns: 1fr; } }

/* Tarjetas de servicio (distribuidora) */
.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: var(--e3); box-shadow: var(--sombra); }
.tarjeta h3 { color: var(--rojo-titulo); font-size: 1.2rem; }
.rejilla--angosta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.foto--tarjeta { margin-bottom: var(--e2); }
.tarjeta p:last-child { margin-bottom: 0; }

.marcas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; }
.marcas figure { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: var(--e2); box-shadow: var(--sombra); }
.marcas figcaption { font: 600 1rem/1.3 var(--letra-titulo); color: var(--tinta); margin-bottom: var(--e1); }
.logos { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; margin: var(--e3) 0; }
.logos img { width: 96px; height: 96px; object-fit: contain; border-radius: 50%; background: var(--blanco); box-shadow: var(--sombra); }

/* Galería de motos: tira deslizable, sin JavaScript */
.galeria { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin: 0; list-style: none; padding-left: 0; }
.galeria li { flex: 0 0 85%; scroll-snap-align: start; }
.galeria img { border-radius: var(--radio); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pista-texto { font-size: var(--t-chico); margin-top: .25rem; }

/* ---------- Contacto ---------- */
.canales { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-bottom: var(--e4); }
.canal { text-align: center; border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3); background: var(--blanco); box-shadow: var(--sombra); }
.canal svg { width: 44px; height: 44px; color: var(--tinta); margin: 0 auto var(--e1); }
.canal h3 { color: var(--rojo-titulo); font-size: 1.15rem; margin-bottom: .35rem; }
.canal p { margin: 0; }
.canal a { color: var(--tinta); font-weight: 700; }
.contacto { display: grid; gap: var(--e4); grid-template-columns: 1fr 1fr; align-items: start; }
.contacto h3 { color: var(--tinta); }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radio); background: var(--suave); }
.mapas { display: grid; gap: var(--e2); }
.escribenos { background: var(--suave); border-radius: var(--radio); padding: var(--e4) var(--e3); }
.escribenos h3 span { color: var(--rojo); }
.escribenos .boton { margin: .25rem .5rem .5rem 0; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }

/* ---------- Páginas legales ---------- */
.legal { max-width: 75ch; }
.legal h1 { color: var(--tinta); font-size: var(--t-h2); }
.legal h2, .legal h3, .legal h4 { font-size: 1.2rem; color: var(--rojo-titulo); margin-top: var(--e4); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: var(--e5) 0 var(--e4); font-size: .9375rem; }
.pie__rejilla { display: grid; gap: var(--e4); grid-template-columns: 1fr 1.6fr 1fr; }
.pie__marca { text-align: center; }
.pie__marca img { margin: 0 auto var(--e2); }
.pie h2 { font-size: 1.15rem; color: var(--rojo); text-align: center; }
.pie h3 { font-size: 1rem; color: var(--rojo-titulo); margin: var(--e3) 0 .5rem; }
.pie ul { margin: 0; padding-left: 1.1rem; }
.pie__enlaces ul { list-style: none; padding: 0; }
.pie__enlaces a { color: var(--texto); text-decoration: none; display: inline-block; padding: .3rem 0; }
.pie__enlaces a:hover { color: var(--rojo); text-decoration: underline; }
.pie__enlaces h2 { text-align: left; }
.redes { display: flex; gap: .5rem; margin: var(--e1) 0 var(--e3); }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--rojo); }
.redes svg { width: 24px; height: 24px; }
.pie a[href^="tel:"] { color: var(--texto); }
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr; } .pie h2, .pie__enlaces h2 { text-align: left; } .pie__marca { text-align: left; } .pie__marca img { margin: 0 0 var(--e2); } }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tinta); touch-action: manipulation;
}
.wa-flotante__texto { background: var(--blanco); box-shadow: var(--sombra); border-radius: 10px; padding: .4rem .7rem; font-size: .8125rem; line-height: 1.3; }
.wa-flotante__texto strong { display: block; }
.wa-flotante__icono { width: 56px; height: 56px; border-radius: 50%; background: var(--verde-wa); color: var(--blanco); display: grid; place-items: center; box-shadow: var(--sombra); }
.wa-flotante__icono svg { width: 30px; height: 30px; }
.wa-flotante:hover .wa-flotante__icono { background: #16703c; }
@media (max-width: 640px) { .wa-flotante__texto { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}