/* Estilos compartidos por todas las páginas de El Vaquero */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: "Barlow", sans-serif; background: #E8EDF1; color: #0F151B; }
h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.03em; }

.hazard-line { position: relative; }
.hazard-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: repeating-linear-gradient(90deg, #FFD900 0 18px, #1C2229 18px 36px);
}

.hero-slide { opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide:not(.active) > .z-10 { visibility: hidden; }
.hero-slide img { transform: scale(1.06); transition: transform 7s ease; }
.hero-slide.active img { transform: scale(1); }
.hero-dot { background: rgba(255, 255, 255, .25); }
.hero-dot.active { background: #FFD900; box-shadow: 0 0 16px rgba(255, 217, 0, .35); }

.section-fade { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.section-fade.visible { opacity: 1; transform: none; }

.band-clean { background: linear-gradient(180deg, #E8EDF1 0%, #D7DFE6 100%); }
.band-light { background: linear-gradient(180deg, #B8C2CB 0%, #A3AFBA 100%); }
.band-carbon { background: linear-gradient(180deg, #181E25 0%, #0F1419 100%); color: white; }
.band-yellow {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .35), transparent 30%),
    linear-gradient(135deg, #FFD900 0%, #F2C700 100%);
}

.panel-white {
  background: linear-gradient(180deg, #FAFCFD 0%, #E3EAF0 100%);
  border: 1px solid rgba(84, 97, 111, .30);
  box-shadow: 0 18px 44px rgba(10, 14, 20, .14), inset 0 1px 0 rgba(255, 255, 255, .76);
}
.panel-dark {
  background: linear-gradient(180deg, #212830 0%, #14191F 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.lift { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(8, 12, 18, .22); border-color: rgba(255, 217, 0, .5); }

.chip { transition: background .2s, border-color .2s; }
.chip.is-active { background: #FFD900; border-color: #FFD900; }

/* ===== Header ===== */
#siteHeader { transition: transform .35s ease; }
#siteHeader.oculto { transform: translateY(-100%); }
#siteHeader .topbar { max-height: 40px; transition: max-height .35s ease, opacity .25s ease; }
#siteHeader.scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; }
#siteHeader .barra {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
#siteHeader.scrolled .barra {
  background: rgba(16, 23, 31, .84);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
#scrollProgress { transform: scaleX(0); transform-origin: left; transition: transform .1s linear; }

/* Menú cápsula con píldora deslizante */
#navPill { transition: left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.nav-link.is-current { color: #10171F; }

/* Menú lateral (celular) */
#mobilePanel { visibility: hidden; pointer-events: none; }
#mobilePanel .velo { opacity: 0; transition: opacity .3s ease; }
#mobilePanel .hoja { transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
#mobilePanel.abierto { visibility: visible; pointer-events: auto; }
#mobilePanel.abierto .velo { opacity: 1; }
#mobilePanel.abierto .hoja { transform: none; }
body.menu-abierto { overflow: hidden; }

input[type="range"] { accent-color: #FFD900; }

@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select:not([multiple]),
  textarea:not([hidden]) { font-size: 16px; }
}

.campo {
  width: 100%; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: #fff; padding: .8rem 1rem; font: inherit;
}
.campo::placeholder { color: rgba(255, 255, 255, .4); }
.campo:focus { outline: none; border-color: #FFD900; }
select.campo option { color: #0F151B; }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

/* El logo se encoge al hacer scroll */
#siteHeader.scrolled .logo-badge { top: 0; height: 52px; }

/* Evita que carruseles o textos largos ensanchen las columnas */
.grid > * { min-width: 0; }

/* Carruseles en celular */
.no-scrollbar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Barra inferior (celular) */
.tab-link.is-current { color: #FFD900; }
.tab-link.is-current .tab-ico { background: rgba(255, 217, 0, .14); }
.safe-bottom { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }

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

#waMenu { transform-origin: bottom right; transition: opacity .2s ease, transform .2s ease; }
#waMenu.cerrado { opacity: 0; transform: scale(.9) translateY(8px); pointer-events: none; }

/* ===== Páginas internas ===== */
.page-hero { position: relative; isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px; z-index: -1;
  background: linear-gradient(to top, rgba(8, 11, 15, .9), transparent);
}

/* Ficha de vehículo (ventana) */
dialog.ficha { padding: 0; border: 0; background: transparent; max-width: min(960px, calc(100vw - 24px)); width: 100%; }
dialog.ficha::backdrop { background: rgba(5, 8, 12, .72); backdrop-filter: blur(4px); }
dialog.ficha[open] .ficha-caja { animation: ficha-entra .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
body.ficha-abierta { overflow: hidden; }

/* Selector segmentado (tamaño de vehículo, auto/moto) */
.segmento { transition: background .2s, color .2s, box-shadow .2s; }
.segmento.is-active { background: #FFD900; color: #10171F; box-shadow: 0 6px 16px rgba(255, 217, 0, .3); }

/* Lista de requisitos */
.check-item::before {
  content: ""; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: .15rem; border-radius: 9999px;
  background: #FFD900 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310171F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* =====================================================================
   SUBMARCA: Autolavado y Detailing Premium (dorado y negro del logo)
   Se activa con <body data-pagina="autolavado">
   ===================================================================== */
body[data-pagina="autolavado"] .hazard-line::before {
  height: 3px;
  background: linear-gradient(90deg, rgba(168, 122, 38, 0) 0%, #A87A26 15%, #F3D27A 50%, #A87A26 85%, rgba(168, 122, 38, 0) 100%);
}
body[data-pagina="autolavado"] h1 .text-primary,
body[data-pagina="autolavado"] h2 .text-primary,
.texto-oro {
  background: linear-gradient(180deg, #FFF1B8 0%, #F3D27A 35%, #D4A942 60%, #A87A26 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-pagina="autolavado"] .segmento.is-active { background: linear-gradient(180deg, #F3D27A, #D4A942); color: #10171F; box-shadow: 0 6px 16px rgba(212, 169, 66, .35); }
body[data-pagina="autolavado"] .check-item::before { background-color: #D4A942; }
body[data-pagina="autolavado"] .tab-link.is-current { color: #E0B350; }
body[data-pagina="autolavado"] .tab-link.is-current .tab-ico { background: rgba(224, 179, 80, .16); }
body[data-pagina="autolavado"] input[type="range"] { accent-color: #D4A942; }
body[data-pagina="autolavado"] .campo:focus { border-color: #D4A942; }
body[data-pagina="autolavado"] #navPill { background: linear-gradient(180deg, #F3D27A, #D4A942); box-shadow: 0 6px 18px rgba(212, 169, 66, .4); }
body[data-pagina="autolavado"] .shadow-glow { box-shadow: 0 0 0 1px rgba(212, 169, 66, .35), 0 30px 70px rgba(0, 0, 0, .34); }
.brillo-oro { filter: drop-shadow(0 18px 40px rgba(212, 169, 66, .28)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }