/* ==========================================================================
   Ruedasur — estilos propios sobre el Theme Base
   Los colores y la tipografía base ya se configuran en config/defaults.txt
   (primary_color, accent_color, text_color, background_color, font_headings,
   font_rest). Este archivo solo ajusta detalles de layout y las secciones
   nuevas (reseñas, quiénes somos, visitanos) que no tienen equivalente nativo.
   ========================================================================== */

/* ---- Footer ---- */

footer.js-footer{
  background: var(--rs-surface-dark);
  color: var(--rs-on-dark-soft);
  padding-top: 2.5rem;
}
footer.js-footer a{ color: var(--rs-on-dark-soft); }
footer.js-footer a:hover{ color: var(--rs-on-dark); }
footer.js-footer .copyright{ color: var(--rs-on-dark-soft); font-size: 0.82rem; }
footer.js-footer .element-footer{ border-top: 1px solid var(--rs-surface-dark-2); padding-top: 1.2rem; margin-top: 1.2rem; }
footer.js-footer input.form-control{ background: var(--rs-surface-dark-2); border-color: var(--rs-surface-dark-2); color: var(--rs-on-dark); }
footer.js-footer .btn-primary{ background-color: var(--rs-accent); border-color: var(--rs-accent); color: #241A00; }

:root{
  --rs-accent: #F6A800;
  --rs-accent-text: #8A5A00;
  --rs-ink: #1C1B1A;
  --rs-ink-soft: #5C5850;
  --rs-paper: #FBFAF7;
  --rs-paper-sunken: #F1EEE6;
  --rs-line: #E3DDD0;
  --rs-surface-dark: #121212;
  --rs-surface-dark-2: #1E1E1E;
  --rs-on-dark: #F3F2EE;
  --rs-on-dark-soft: #ACA9A2;
}

/* ---- Banner principal (el tema lo trae a 100vh, muy alto para banners tipo tira horizontal) ---- */

.section-slider{ height: auto; }
.nube-slider-home{ height: auto; }
.slider-slide{ height: auto; aspect-ratio: 3 / 1; }
@media (max-width: 767px){
  .slider-slide{ aspect-ratio: 1.6 / 1; }
}

/* ---- Franja de beneficios superior ---- */

.rs-announce{ background: var(--rs-accent); color: #241A00; position: relative; z-index: 60; }
.rs-announce-list{
  display: flex; justify-content: center; gap: 1.6rem; list-style: none; margin: 0; padding-block: 0.5rem;
  font-size: 0.82rem; font-weight: 700; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.rs-announce-list::-webkit-scrollbar{ display: none; }
.rs-announce-list li{ flex-shrink: 0; }
@media (max-width: 520px){
  .rs-announce-list{ justify-content: flex-start; gap: 1.1rem; padding-inline: 1rem; font-size: 0.76rem; }
}

/* ---- El header nunca va transparente/flotando sobre el banner: fondo blanco sólido siempre ---- */

.head-main{
  position: sticky !important;
  top: 0 !important;
  background: #fff !important;
  transform: none !important;
}
.head-main.head-transparent,
.head-main.head-transparent-absolute,
.head-main.head-transparent-fixed{
  position: sticky !important;
  background: #fff !important;
}

/* ---- Nav horizontal de escritorio ---- */

.rs-nav-desktop-row{ display: none; border-top: 1px solid var(--rs-line); padding-block: 0.6rem; }
@media (min-width: 768px){ .rs-nav-desktop-row{ display: block; } }
.rs-nav-desktop{ display: flex; justify-content: center; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.rs-nav-item{ position: relative; }
.rs-nav-link{ font-weight: 600; font-size: 0.92rem; color: var(--rs-ink); text-decoration: none; padding: 0.3rem 0; display: block; }
.rs-nav-link:hover{ color: var(--rs-accent-text); }
.rs-nav-submenu{
  position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--rs-line);
  border-radius: 4px; min-width: 180px; padding: 0.4rem; list-style: none; margin: 0;
  box-shadow: 0 4px 8px rgba(28,27,26,0.08), 0 24px 48px -16px rgba(28,27,26,0.28);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; z-index: 50;
}
.rs-nav-item:hover .rs-nav-submenu{ opacity: 1; visibility: visible; transform: translateY(0); }
.rs-nav-submenu li a{ display: block; padding: 0.5rem 0.7rem; border-radius: 3px; font-size: 0.88rem; color: var(--rs-ink); text-decoration: none; }
.rs-nav-submenu li a:hover{ background: var(--rs-paper-sunken); color: var(--rs-accent-text); }

/* En desktop mostramos nuestro nav horizontal; el menú hamburguesa nativo queda solo para mobile */
@media (min-width: 768px){
  a[data-component="menu-button"]{ display: none; }
}

/* ---- Encabezado del hero + buscador por medida ---- */

.rs-hero{ padding: 2.4rem 0 3rem; }
.rs-hero-title{ font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; margin: 0.5rem 0 1.4rem; max-width: 20ch; }
.rs-hero-title em{ font-style: normal; color: var(--rs-accent-text); }
.rs-finder{
  max-width: 620px; background: #fff; border: 1px solid var(--rs-line); border-radius: 8px;
  padding: 1.2rem; box-shadow: 0 1px 2px rgba(28,27,26,0.06), 0 10px 24px -10px rgba(28,27,26,0.22);
}
.rs-finder-label{ display: block; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rs-ink-soft); margin-bottom: 0.7rem; }
.rs-finder-row{ display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.rs-finder-field{ display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 90px; }
.rs-finder-field label{ font-size: 0.72rem; font-weight: 600; color: var(--rs-ink-soft); }
.rs-finder-field select{
  font: inherit; font-weight: 600; font-size: 0.92rem; padding: 0.55rem 0.5rem;
  border-radius: 4px; border: 1px solid var(--rs-line); background: var(--rs-paper); color: var(--rs-ink); width: 100%;
}
.rs-finder-sep{ color: var(--rs-ink-soft); font-weight: 700; padding-bottom: 0.6rem; }
.rs-finder-submit{ width: 100%; margin-top: 0.9rem; background-color: var(--rs-accent); border-color: var(--rs-accent); color: #241A00; }
.rs-finder-sub{ margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--rs-ink-soft); }

/* ---- Franja de beneficios (banner-services) ---- */

.section-informative-banners{
  background: var(--rs-paper-sunken);
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.section-informative-banners .service-icon{
  color: var(--rs-accent);
}
.section-informative-banners .service-title{
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.section-informative-banners .service-item p{
  color: var(--rs-ink-soft);
  margin: 0;
}

/* ---- Servicios (home modules: alineación y balanceo / whatsapp) ---- */

.section-home-modules{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.section-home-modules .textbanner-title{
  font-weight: 700;
}
.section-home-modules .textbanner-paragraph{
  color: var(--rs-ink-soft);
}
.section-home-modules .btn-primary{
  background-color: var(--rs-accent);
  border-color: var(--rs-accent);
  color: #241A00;
}

/* ---- Tarjeta de producto (grid/item.tpl) ---- */

.item-product .item-name{
  font-weight: 600;
}
.item-product .price-compare{
  color: var(--rs-ink-soft);
  text-decoration: line-through;
}
.item-product .item-price{
  font-weight: 700;
  font-size: 1.2rem;
}
.item-product .item-installments{
  color: var(--rs-accent-text);
  font-weight: 600;
}
.item-product .label-secondary{
  background: #E4EFE2;
  color: #3E7D4F;
}

/* ==========================================================================
   Secciones propias (sin equivalente nativo en el tema)
   ========================================================================== */

.rs-eyebrow{
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--rs-accent-text);
  margin-bottom: 0.4rem;
}
.rs-eyebrow-invert{
  color: var(--rs-accent);
}
.rs-section-head{
  text-align: center;
  margin-bottom: 2rem;
}
.rs-reviews-source{
  color: var(--rs-ink-soft);
  font-size: 0.92rem;
  margin-top: 0.3rem;
}

/* Reseñas */

.rs-reviews{
  padding: 3.5rem 0;
  background: var(--rs-paper);
}
.rs-reviews-slider{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.rs-reviews-track{
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rs-reviews-track::-webkit-scrollbar{ display: none; }
.rs-review-card{
  scroll-snap-align: start;
  flex: 0 0 320px;
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(28,27,26,0.06), 0 10px 24px -10px rgba(28,27,26,0.22);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.rs-review-card p{
  font-size: 0.92rem;
  color: var(--rs-ink);
  margin: 0;
  line-height: 1.5;
}
.rs-stars{ color: var(--rs-accent); letter-spacing: 2px; }
.rs-review-author{ font-weight: 700; margin-top: auto; }
.rs-reviews-nav{ display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; }
.rs-nav-btn{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rs-line); background: #fff; color: var(--rs-ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.rs-nav-btn:hover{ border-color: var(--rs-ink-soft); }

/* Quiénes somos */

.rs-authority{
  background: var(--rs-surface-dark);
  color: var(--rs-on-dark);
  padding: 3.5rem 0;
}
.rs-authority-title{
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--rs-on-dark);
  margin: 0.3rem 0 1rem;
}
.rs-authority-text{
  color: var(--rs-on-dark-soft);
  max-width: 56ch;
}
.rs-stat-list{ display: flex; flex-direction: column; gap: 1rem; }
.rs-stat{
  display: flex; align-items: baseline; gap: 0.9rem;
  border-top: 1px solid var(--rs-surface-dark-2); padding-top: 1rem;
}
.rs-stat:first-child{ border-top: none; padding-top: 0; }
.rs-stat b{ font-size: 1.6rem; color: var(--rs-accent); min-width: 110px; }
.rs-stat span{ color: var(--rs-on-dark-soft); font-size: 0.88rem; }

/* Visitanos */

.rs-visit{ padding: 3.5rem 0; background: var(--rs-paper); }
.rs-visit-title{ font-size: 1.7rem; font-weight: 700; margin: 0.3rem 0 1.2rem; }
.rs-visit-card{
  background: #fff; border: 1px solid var(--rs-line); border-radius: 8px;
  padding: 1.6rem; box-shadow: 0 1px 2px rgba(28,27,26,0.06), 0 10px 24px -10px rgba(28,27,26,0.22);
}
.rs-visit-row{ padding: 0.8rem 0; border-top: 1px solid var(--rs-line); }
.rs-visit-row:first-child{ border-top: none; padding-top: 0; }
.rs-visit-row strong{ display: block; margin-bottom: 0.15rem; }
.rs-visit-row span{ color: var(--rs-ink-soft); font-size: 0.92rem; }
.rs-visit-actions{ display: flex; gap: 0.6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.rs-visit-photo{ border-radius: 8px; overflow: hidden; height: 100%; min-height: 280px; }
.rs-visit-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px){
  .rs-visit-photo{ margin-top: 1.5rem; min-height: 220px; }
  .rs-stat-list{ margin-top: 1.5rem; }
}