/* Dentelo — reglas responsive compartidas (tablet ≤1024px, móvil ≤640px).
   Los estilos base son inline, así que estas reglas usan !important para poder ganarles. */

/* Sin scroll horizontal en ningún ancho, sin romper el nav sticky */
html, body { max-width: 100%; overflow-x: hidden; }

/* Contención estricta de imágenes para evitar saltos o tamaños gigantes al cargar */
image-slot {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
image-slot:not(:defined) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}
.r-prod-img-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.r-cat-card-img {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
img {
  max-width: 100%;
  box-sizing: border-box;
}

/* El scroll vertical nunca se interrumpe en carruseles e imágenes */
.marquee-mask, .photo-mask, .clients-mask,
.page image-slot, .page img { touch-action: pan-y; }
image-slot::part(ring), .ring { display: none !important; border: none !important; }

/* Tipografía equilibrada */
.page h1, .page h2, .page h3 { text-wrap: balance; }
.page p { text-wrap: pretty; }

.nav-burger { display: none; }

/* ---------------- COMPLEMENTO DE PRODUCTO (Estilo azul claro) ---------------- */
.r-complement-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  background-color: #e5f7ff;
  border: 1px solid #b9e6ff;
  border-radius: 16px;
  padding: 20px 24px;
  transition: all .18s ease;
}
.r-complement-card:hover {
  border-color: #00b1ff !important;
  background-color: #daf1fd !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 177, 255, 0.15) !important;
}
.r-complement-main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.r-complement-thumb {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #b9e6ff;
}
.r-complement-info {
  flex: 1;
  min-width: 0;
}
.r-complement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #00b1ff;
  margin-bottom: 6px;
}
.r-complement-title {
  font-family: 'Comme', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #004a87;
  margin: 0 0 6px;
}
.r-complement-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: #4a5568;
  margin: 0;
}
.r-complement-desc-mobile {
  display: none;
}
.r-complement-action {
  flex-shrink: 0;
}
.r-complement-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #004a87;
  white-space: nowrap;
  transition: color .15s ease;
}
.r-complement-card:hover .r-complement-btn {
  color: #009ae0 !important;
}
.r-complement-card:hover .r-complement-arrow {
  transform: translateX(4px);
}

/* ---------------- TABLET (≤1024px) ---------------- */
@media (max-width: 1024px) {
  .page h1 { width: auto !important; height: auto !important; }
  .r-hero-title { font-size: 46px !important; max-width: 15ch !important; text-wrap: balance !important; white-space: normal !important; }
  .hero-br { display: none !important; }

  .r-split  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .r-cols-2 { grid-template-columns: 1fr !important; }
  .r-cols-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .r-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .r-foot   { grid-template-columns: repeat(2, 1fr) !important; }

  /* Nav → menú hamburguesa */
  .desktop-nav, .desktop-cta { display: none !important; }
  .nav-burger { display: flex !important; }

  /* Catalogo en Tablet */
  .r-cat, .r-cat-main {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 64px !important;
    gap: 24px !important;
  }
  .r-aside, .r-cat-sidebar {
    position: static !important;
    gap: 16px !important;
    background: #f8fafc;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid #e6ebf1;
  }
  .r-segment-btns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .r-segment-btns button, .r-segment-btns .r-filter-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 6px !important;
    font-size: 13px !important;
    gap: 6px !important;
    text-align: center !important;
  }
  .r-tipo-btns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: visible !important;
  }
  .r-tipo-btns button, .r-tipo-btns .r-filter-btn {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .r-tipo-btns button:first-child, .r-tipo-btns .r-filter-btn:first-child {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: 700 !important;
  }

  /* Proceso de acompañamiento en tablet: 1 columna */
  .r-process-grid {
    grid-template-columns: 1fr !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    gap: 20px !important;
  }
}

/* ---------------- ADAPTACIÓN PRODUCTO Y COMPLEMENTO (≤768px) ---------------- */
@media (max-width: 768px) {
  /* Prueba del producto: video y resultado se apilan */
  .r-prueba {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Calculadora de costo (Orotol): las dos columnas se apilan */
  .r-calc {
    grid-template-columns: 1fr !important;
  }
  .r-calc-inputs {
    border-right: none !important;
    border-bottom: 1px solid #e6ebf1 !important;
    padding: 22px !important;
  }
  .r-calc-results {
    padding: 22px !important;
  }
  /* La tabla comparativa hace scroll dentro de su caja, no arrastra la página */
  .r-calc-tablewrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Producto Hero */
  .r-prod-hero {
    padding: 18px 16px 36px !important;
  }
  .r-prod-breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .r-prod-gallery {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  .r-prod-img-frame {
    aspect-ratio: 1/1 !important;
    max-height: 300px !important;
    width: 100% !important;
    border-radius: 16px !important;
  }
  .r-prod-img-frame image-slot {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .r-prod-variants {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .r-prod-variants button {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .r-prod-shades {
    margin-top: 12px !important;
  }
  .r-prod-shades span {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  .r-prod-title {
    font-size: 28px !important;
    line-height: 1.18 !important;
    margin: 4px 0 8px !important;
  }
  .r-prod-tagline {
    font-size: 15.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 16px !important;
  }
  .r-prod-card {
    padding: 18px 16px !important;
    margin-top: 18px !important;
    border-radius: 14px !important;
  }
  .r-prod-trust {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    font-size: 12px !important;
  }
  .r-prod-desc-section {
    padding: 44px 16px !important;
  }

  /* Complemento en móvil */
  .r-complement-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }
  .r-complement-main {
    gap: 12px !important;
    align-items: center !important;
  }
  .r-complement-thumb {
    width: 68px !important;
    height: 68px !important;
    border-radius: 10px !important;
  }
  .r-complement-badge {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  .r-complement-title {
    font-size: 16.5px !important;
    margin: 0 !important;
  }
  .r-complement-desc-desktop {
    display: none !important;
  }
  .r-complement-desc-mobile {
    display: block !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #4a5568 !important;
    margin: 0 !important;
  }
  .r-complement-action {
    width: 100% !important;
    padding-top: 4px !important;
  }
  .r-complement-btn {
    width: 100% !important;
    justify-content: flex-end !important;
    font-size: 13.5px !important;
  }
}

/* ---------------- MÓVIL (≤768px) ---------------- */
@media (max-width: 768px) {
  .page section { padding-left: 16px !important; padding-right: 16px !important; }
  .page h1 { font-size: 30px !important; line-height: 1.15 !important; }
  .page h2 { font-size: 24px !important; line-height: 1.2 !important; }
  .r-hero-title { font-size: 28px !important; }

  .r-split, .r-cols-4, .r-foot { grid-template-columns: 1fr !important; }
  .r-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Catalogo en Móvil: 1 columna espaciosa y legible */
  .r-cat-header {
    padding: 28px 16px !important;
  }
  .r-cat-header h1 {
    font-size: 26px !important;
    margin: 6px 0 0 !important;
  }
  .r-cat-header p {
    font-size: 14.5px !important;
    margin: 8px 0 0 !important;
  }
  .r-cat, .r-cat-main {
    padding: 16px 16px 56px !important;
    gap: 16px !important;
  }
  .r-aside, .r-cat-sidebar {
    padding: 14px 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .r-segment-btns .r-filter-btn {
    padding: 8px 4px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .r-segment-btns .r-filter-btn i {
    width: 14px !important;
    height: 14px !important;
  }
  .r-tipo-btns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: visible !important;
  }
  .r-tipo-btns .r-filter-btn, .r-tipo-btns button {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    gap: 8px !important;
  }
  .r-tipo-btns .r-filter-btn:first-child, .r-tipo-btns button:first-child {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: 700 !important;
  }
  .r-cat-grid, .r-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .r-cat-card-img, .r-cols-3 > a > div:first-child {
    height: 190px !important;
  }
  .r-cat-card-body, .r-cols-3 > a > div:last-child {
    padding: 16px !important;
    gap: 6px !important;
  }
  .r-cat-card-body h3, .r-cols-3 h3 {
    font-size: 18px !important;
  }
  .r-cat-card-body p, .r-cols-3 p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* Formulario de contacto y specs de producto: apilar */
  .r-form2 { grid-template-columns: 1fr !important; }
  .r-specs { grid-template-columns: 1fr !important; gap: 2px !important; padding: 12px 16px !important; }

  .r-hero-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
  .r-navwrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* Proceso de acompañamiento en móvil: 1 columna */
  .r-process-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  .r-process-grid > div {
    padding: 24px 20px !important;
  }

  /* Testimonios y videos en Móvil: 1 sola columna */
  .r-testi-grid {
    grid-template-columns: 1fr !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    gap: 24px !important;
  }
  .r-case-videos {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    gap: 24px !important;
  }
  .r-case-video {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .r-case-features {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Nunca desbordar el ancho en móvil */
  .page img, .page iframe, .page video { max-width: 100% !important; }
}

/* Splash de carga con el logo de Dentelo */
@keyframes om-splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes om-pulse { 0%, 100% { transform: scale(0.86); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }
.om-splash { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; animation: om-splash-out .45s ease 1.6s forwards; }
.om-splash img { animation: om-pulse 1.15s ease-in-out infinite; }
.om-splash > div { position: relative; display: flex; align-items: center; justify-content: center; }
.om-splash > div::after { content: ''; position: absolute; width: 118px; height: 118px; border-radius: 50%; border: 3px solid #e5f3ff; border-top-color: #00b1ff; animation: om-spin .85s linear infinite; }
.om-splash .om-load { font-family: 'Fira Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #00b1ff; }
.om-splash .om-load::after { content: ''; animation: om-dots 1.4s steps(1) infinite; }

/* Zoom puntual de imagen en tarjeta de catálogo */
.card-zoom { transform: scale(2.3); }

/* ---------------- CARRUSEL DE CLIENTES EN MÓVIL ----------------
   Los logos miden 158px, así que en un teléfono solo caben dos a la vez.
   Xochicalco, Supreme y Oasis van siempre al frente de la lista; aquí se
   reducen las fichas para que los tres quepan juntos en pantalla.
   Solo afecta al carrusel de clientes: el de marcas conserva su tamaño. */
@media (max-width: 460px) {
  .clientes-track, .clients-track { gap: 10px !important; }

  .clientes-track > a, .clientes-track > div,
  .clients-track > a, .clients-track > div {
    width: 112px !important;
    height: 50px !important;
  }
}

/* Sección "Próximamente: tienda en línea" (inicio) */
@media (max-width: 768px) {
  .r-tienda { padding: 32px 22px !important; gap: 28px !important; border-radius: 20px !important; }
  .r-tienda h2 { font-size: 28px !important; }
}

/* Menú: con "Tienda" ya no caben todas las opciones + teléfono + botón por debajo de ~1110px,
   así que la hamburguesa aparece desde 1140px (antes solo desde 1024px). */
@media (max-width: 1140px) {
  .desktop-nav, .desktop-cta { display: none !important; }
  .nav-burger { display: flex !important; }
}