/* =========================================================
   OnlyCarNLD — Style (clean, mobile-first, production ready)
   Estándares: prefijos (c-, o-, u-), BEM suave + BRIDGE (alias)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Colors */
  --primary: #E9842C;
  --dark-bg: #1C2023;
  --card-bg: #111418;
  --text-main: #FFFFFF;
  --text-secondary: #C9CED6;
  --border-color: #3a4147;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii */
  --radius-m: 16px;
  --radius-l: 20px;

  /* Layout */
  --container-max: 1100px;
  --container-w: 90%;
  --header-offset: 72px;

  /* Spacing (fluid) */
  --section-y: 4rem;
  --hero-pt: clamp(1.25rem, 3.5vw, 2.25rem);
  --hero-pb: clamp(.50rem, 1.6vw, 1rem);
  --showcase-pt: clamp(.5rem, 1.8vw, 1.25rem);
}

/* ---------- Reset / Base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body{
  background:var(--dark-bg);
  color:var(--text-main);
  font-family:var(--font-family);
  line-height:1.6;
  padding-top:var(--header-offset);
}
[hidden]{ display:none !important; }

/* Safe areas (iOS) */
@supports (padding:max(0px)){
  .main-header{ padding-top:calc(1rem + env(safe-area-inset-top)); }
  body{ padding-top:calc(var(--header-offset) + env(safe-area-inset-top)); }
}

/* ---------- Accesibilidad ---------- */
:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:4px; }
.u-sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.u-skiplink{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.u-skiplink:focus{
  position:static; width:auto; height:auto; margin:1rem; padding:.5rem .75rem; background:#000; color:#fff; border-radius:10px;
}

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-weight:800; line-height:1.2; margin-bottom:.75rem; color:var(--text-main); }
h1{ font-size:clamp(2rem, 5vw, 2.5rem); }
h2{ font-size:clamp(1.75rem, 4vw, 2rem); text-align:center; margin-bottom:1.5rem; }
h3{ font-size:1.25rem; color:var(--primary); font-weight:600; }
p{ font-size:1rem; color:var(--text-secondary); margin-bottom:1rem; }
.subtitle{ font-size:1.125rem; color:var(--text-secondary); max-width:600px; margin:0 auto 1.5rem; text-align:center; }
a{ color:var(--primary); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--text-main); }

/* ---------- Objetos / Layout ---------- */
.container, .o-container{ width:var(--container-w); max-width:var(--container-max); margin:0 auto; }
section, .c-section, .o-section{ padding:var(--section-y) 0; }
.grid-container, .o-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .grid-container, .o-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-container, .o-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Header ---------- */
.main-header, .c-header{
  position:fixed; inset:0 0 auto 0; width:100%;
  z-index:1000; padding:1rem 0;
  background:rgba(28,32,35,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
}
.header-content, .c-header__content{ display:flex; justify-content:space-between; align-items:center; }
.logo, .c-header__brand{ display:flex; align-items:center; gap:.75rem; font-weight:800; font-size:1.25rem; color:var(--text-main); }
.logo span{ display:none; }
@media (min-width:768px){ .logo span{ display:inline; } }

/* ---------- Botones (bridge) ---------- */
.btn, .c-btn{
  display:inline-block; min-height:44px;
  padding:.75rem 1.5rem; border:0; border-radius:var(--radius-m);
  font-size:1rem; font-weight:600; text-align:center; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color:transparent; background:transparent;
}
.btn-primary, .c-btn--primary{ background:var(--primary); color:#000; box-shadow:0 4px 15px rgba(233,132,44,.2); }
.btn-primary:hover, .c-btn--primary:hover{ color:#000; transform:translateY(-2px); box-shadow:0 6px 20px rgba(233,132,44,.3); }
.btn-large, .c-btn--lg{ padding:1rem 2.5rem; font-size:1.125rem; }

/* ---------- Hero ---------- */
.hero-section, .c-hero{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding-top:var(--hero-pt); padding-bottom:var(--hero-pb);
}

/* ---------- Chips ---------- */
.chips-container, .c-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:.6rem; list-style:none; padding:0; }
.chip, .c-chips__item{
  min-height:32px; font-size:.875rem; padding:.5rem 1rem;
  border:1px solid var(--primary); color:var(--primary);
  border-radius:12px; background:rgba(233,132,44,.05);
}

/* ---------- Filtros ---------- */
.filters, .c-filters{ display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2.5rem; }
.toggle-buttons, .c-filters__toggles{ display:flex; gap:1rem; background:var(--card-bg); border-radius:var(--radius-m); padding:.5rem; align-self:center; }
.btn-toggle{ background:transparent; color:var(--text-secondary); padding:.75rem 1.5rem; border-radius:12px; }
.btn-toggle.active{ background:var(--primary); color:#000; box-shadow:0 4px 10px rgba(233,132,44,.2); }
#search-input, .c-filters__search{
  width:100%; padding:1rem; font-size:1rem; color:var(--text-main);
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px;
}
#search-input:focus{ border-color:var(--primary); outline:none; }
@media (min-width:768px){
  .filters, .c-filters{ flex-direction:row; justify-content:space-between; align-items:center; }
  #search-input, .c-filters__search{ width:40%; max-width:350px; }
  .toggle-buttons, .c-filters__toggles{ align-self:auto; }
}

/* ---------- Cards (bridge) ---------- */
#paquetes-content, #servicios-content{ text-align:center; }
#paquetes-content p, #servicios-content p{ max-width:600px; margin:0 auto 2.5rem; }

.card, .c-card{
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-l);
  padding:1.5rem; text-align:left; display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover, .c-card:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.2); }
.card.hidden, .c-card.hidden{ display:none; }
.card.has-gallery, .c-card.has-gallery{ cursor:zoom-in; }

.card-badge, .c-card__badge{
  position:absolute; top:1.5rem; right:1.5rem; background:var(--primary); color:#000;
  font-size:.75rem; font-weight:600; padding:.25rem .75rem; border-radius:8px;
}
.card-header, .c-card__header{ border-bottom:1px solid var(--border-color); padding-bottom:1rem; margin-bottom:1rem; }
.card-title, .c-card__title{ font-size:1.5rem; font-weight:800; color:var(--text-main); margin-bottom:.5rem; }
.card-meta, .c-card__meta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--text-secondary); font-size:.9rem; }
.card-price, .c-card__price{ font-size:1.75rem; font-weight:800; color:var(--primary); }
.card-duration, .c-card__duration{ background:rgba(255,255,255,.05); padding:.25rem .5rem; border-radius:6px; }
.card-description, .c-card__desc{ font-size:.95rem; color:var(--text-secondary); margin:.5rem 0 1.5rem 0; }
.card-includes, .c-card__includes{ font-size:.9rem; color:var(--text-secondary); margin:1rem 0 1.5rem 0; }
.card-includes strong{ color:var(--text-main); display:block; margin-bottom:.5rem; }
.card-includes ul{ list-style:none; padding-left:0; }
.card-includes li{ position:relative; padding-left:1.5rem; margin-bottom:.5rem; }
.card-includes li::before{ content:'✓'; color:var(--primary); position:absolute; left:0; top:0; font-weight:600; }
.card .btn, .c-card .c-btn{ width:100%; }

/* ---------- Loader / Fallback ---------- */
.loader, .c-loader{ text-align:center; padding:2rem; color:var(--text-secondary); font-weight:600; grid-column:1/-1; }
.fallback-notice, .c-fallback{ background:#ffc; color:#333; font-weight:600; text-align:center; padding:1rem; }

/* ---------- Promociones ---------- */
.promo-section, .c-promo{ background:var(--card-bg); }
.promos-list, .c-promo__list{
  list-style:none; max-width:500px; margin:0 auto 1.5rem; padding:1.5rem;
  background:var(--dark-bg); border-radius:var(--radius-m);
}
.promos-list li{ font-size:1.125rem; padding:.75rem 0; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; }
.promos-list li:last-child{ border-bottom:none; }
.promos-list .promo-value{ font-weight:800; color:var(--primary); }
.disclaimer{ font-size:.875rem; text-align:center; max-width:500px; margin:0 auto; }

/* ---------- Cómo funciona ---------- */
.steps-container, .c-steps__list{ display:grid; grid-template-columns:1fr; gap:2rem; text-align:center; }
@media (min-width:768px){ .steps-container, .c-steps__list{ grid-template-columns:repeat(4,1fr); } }
.step .step-number, .c-steps__number{
  display:inline-block; width:50px; height:50px; line-height:50px; border-radius:50%;
  background:var(--primary); color:#000; font-weight:800; font-size:1.5rem; margin-bottom:1rem;
}
.step h3{ color:var(--text-main); font-size:1.25rem; }

/* ---------- CTA final ---------- */
.final-cta-section, .c-cta{ background:var(--card-bg); text-align:center; }

/* ---------- Footer ---------- */
.main-footer, .c-footer{ padding:2.5rem 0; text-align:center; border-top:1px solid var(--border-color); }
.footer-links, .c-footer__links{ display:flex; justify-content:center; gap:1.5rem; margin-bottom:1.5rem; }
.footer-links a{ font-weight:600; color:var(--text-secondary); }
.footer-links a:hover{ color:var(--primary); }
.main-footer p{ font-size:.875rem; color:var(--text-secondary); margin:0; }

/* ---------- Showcase / Carrusel Antes-Después (bridge) ---------- */
.showcase-section{ padding-top:var(--showcase-pt); }
.ba-carousel, .c-ba{ position:relative; margin-top:1rem; }
.ba-viewport, .c-ba__viewport{ overflow:hidden; border-radius:var(--radius-l); border:1px solid var(--border-color); background:var(--card-bg); position:relative; z-index:1; }
.ba-track, .c-ba__track{ display:flex; transition:transform .5s ease; will-change:transform; position:relative; z-index:1; }
.ba-slide, .c-ba__slide{ min-width:100%; padding:1rem; }

.ba-pair, .c-ba__pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:768px){ .ba-pair, .c-ba__pair{ grid-template-columns:1fr; } }

.ba-fig, .c-ba__figure{ position:relative; margin:0; }
.ba-fig img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; border-radius:12px;
  background:#0e1114; border:1px solid var(--border-color);
}
.ba-fig figcaption{ font-size:.9rem; color:var(--text-secondary); margin-top:.5rem; }

.ba-badge, .c-ba__badge{
  position:absolute; top:.75rem; left:.75rem;
  background:rgba(0,0,0,.6); border:1px solid var(--border-color);
  color:#fff; padding:.25rem .55rem; border-radius:.5rem; font-weight:700; font-size:.85rem;
  backdrop-filter:blur(6px);
}
.ba-badge.ba-after{ background:var(--primary); color:#000; border-color:transparent; }

.ba-nav, .c-ba__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--border-color);
  background:rgba(17,20,24,.7); color:#fff; cursor:pointer; z-index:10;
  transition:transform .15s ease, background .15s ease;
}
.ba-nav:hover, .c-ba__nav:hover{ transform:translateY(-50%) scale(1.06); background:rgba(17,20,24,.9); }
.ba-prev{ left:.5rem; } .ba-next{ right:.5rem; }

.ba-dots, .c-ba__dots{ display:flex; gap:.5rem; justify-content:center; margin-top:.9rem; }
.ba-dot, .c-ba__dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--border-color); background:transparent; cursor:pointer; }
.ba-dot.active, .c-ba__dot.active{ background:var(--primary); border-color:var(--primary); }

@media (max-width:360px){
  .subtitle{ font-size:.98rem; max-width:88vw; }
  .container, .o-container{ width:92%; }
  .ba-fig figcaption{ font-size:.85rem; }
}
@media (min-width:1024px){
  :root{ --hero-pt: 5rem; --showcase-pt: 1.25rem; }
  .ba-nav, .c-ba__nav{ width:40px; height:40px; }
}

/* ---------- Lightbox (bridge) ---------- */
.oc-lightbox, .c-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 2000;
}
.oc-lightbox.open, .c-lightbox.open { display: grid; place-items: center; }

.oc-stage, .c-lightbox__stage {
  width: min(96vw, 980px);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1rem;
  position: relative;
}

.oc-fig, .c-lightbox__figure { margin: 0; position: relative; }
.oc-fig img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--border-color);
  background: #0e1114;
  aspect-ratio: 16/9; object-fit: cover;
}
.oc-fig figcaption { color: var(--text-secondary); margin-top: .5rem; font-size: .95rem; }
.oc-badge, .c-badge {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(0,0,0,.6); border:1px solid var(--border-color);
  color: #fff; padding: .25rem .55rem; border-radius: .5rem; font-weight: 700; font-size: .85rem;
}

.oc-close, .c-lightbox__close {
  position: absolute; top: 10px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(17,20,24,.9); color: #fff; cursor: pointer;
}
.oc-arrow, .c-lightbox__prev, .c-lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(17,20,24,.9); color: #fff; cursor: pointer;
}
.oc-prev{ left: 8px; }
.oc-next{ right: 8px; }

.oc-dots, .c-lightbox__dots { display:flex; gap:.5rem; justify-content:center; margin-top:.75rem; }
.oc-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border:1px solid var(--border-color); background: transparent; cursor:pointer;
}
.oc-dots button.active { background: var(--primary); border-color: var(--primary); }
.oc-pair-toggle, .c-lightbox__toggle { display:flex; gap:.5rem; justify-content:center; margin:.75rem 0 0; }
.oc-pair-toggle button {
  padding:.35rem .8rem; border-radius:10px; border:1px solid var(--border-color);
  background: transparent; color: var(--text-secondary); cursor:pointer;
}
.oc-pair-toggle button.active { background: var(--primary); color:#000; border-color: var(--primary); }

/* Z-index en Lightbox */
.oc-stage { position: relative; z-index: 0; }
.oc-fig   { position: relative; z-index: 1; }
.oc-badge { position: absolute; z-index: 6; }
.oc-arrow { z-index: 8; }
/* === CTA SIEMPRE A LA MISMA DISTANCIA DEL BORDE INFERIOR === */
/* Las tarjetas ya son flex-column; empujamos el botón hacia abajo */
.card .btn,
.card .c-btn,
.c-card .btn,
.c-card .c-btn{
  margin-top: auto;     /* ocupa el espacio libre por encima */
  margin-bottom: 0;      /* sin margen extra abajo */
  align-self: stretch;   /* se mantiene al 100% de ancho */
}



/* Skeleton de imagen mientras carga */
.img-skel{
  position:relative;
  background: #0e1114;
  border:1px solid var(--border-color);
}
.img-skel::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.03) 63%);
  animation: skel 1.2s infinite;
  border-radius:12px;
}
@keyframes skel{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
.img-ready::before{ display:none; }