/**
 * Carly LP System — design tokens & components (v3)
 *
 * Reemplaza el sistema v2 (basado en designs/landing.html) por el sistema
 * de diseño final entregado en designs/Designs.zip
 * (design_handoff_carly_obd_landings/, 3 variantes: OBD for BMW.dc.html
 * [marca], OBD Scanner - All Brands.dc.html [generica], OBD Scanner -
 * Campaign.dc.html [campaña] + README.md con los design tokens). Ese
 * README es la fuente de verdad de esta hoja de estilos -- ver ahi
 * colores exactos, escala tipografica, spacing/radius/shadows.
 *
 * Fuentes: Barlow Condensed (headings/UI, 600/700/800) + Barlow (body,
 * 400-700), self-hosteadas desde public/assets/fonts/ (paquetes
 * @fontsource, SIL OFL) en vez de Google Fonts -- el proxy de red de
 * este entorno devuelve 403 en fonts.googleapis.com (igual que con
 * cdn.mycarly.com), asi que un <link> a Google Fonts se veia roto en
 * cualquier preview generado desde aca.
 *
 * Veneer Three (display, SOLO Hero H1) es una fuente licenciada que vino
 * en el bundle de diseño (assets/Veneer-Three.ttf) -- convertida a woff2
 * aca. El README pide chequear la licencia antes de publicar: el archivo
 * lo puso el equipo de diseño de Carly en el handoff, pero vale la pena
 * que alguien confirme los terminos de uso antes de que esto sea
 * definitivo en produccion.
 */

@font-face{ font-family:'Veneer Three'; font-style:normal; font-weight:400 900; font-display:swap; src:url('../fonts/Veneer-Three.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }

:root{
  --ink:#111111;
  --black:#0B0B0B;
  --black-alt:#171717;
  --surface-dark:#1A1A1A;
  --accent:#fb9b0a;
  --accent-hover:#ffb02e;
  --accent-ink:#B8730A;
  --bg-light:#F4F5F6;
  --bg-white:#FFFFFF;
  --border-light:#E9EAEC;
  --border-light-alt:#E7E8EA;
  --border-light-alt2:#DEE0E3;
  --text-muted:#4A4E54;
  --text-muted-2:#5B6067;
  --text-label:#8A8F96;
  --text-muted-dark:#C6C9CD;
  --text-muted-dark-2:#B9BDC2;
  --text-label-dark:#8F949A;
  --success:#2DA44E;
  --success-dark:#4ED47C;
  --max-width:1240px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Barlow', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--accent); text-decoration:none; }
a:hover{ color: var(--accent-hover); }

h1, h2, h3, h4{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color: var(--ink);
  line-height:1.05;
  margin:0 0 14px;
}
h1{ font-size:clamp(44px,7.2vw,82px); line-height:.92; letter-spacing:-.01em; text-wrap:balance; }
h2{ font-size:clamp(30px,4.4vw,50px); line-height:1.02; }
h3{ font-size:clamp(21px,2.2vw,26px); line-height:1.08; }

p{ margin:0 0 12px; }

.carly-page{ overflow-x:hidden; font-family:'Barlow', system-ui, sans-serif; color: var(--ink); }
.carly-container{ max-width: var(--max-width); margin:0 auto; padding:0 20px; }
.carly-section{ padding: clamp(52px,7vw,96px) 0; }
.carly-section--alt{ background: var(--bg-light); }
.carly-section--dark{ background: var(--black); color:#fff; }
.carly-section--dark h1, .carly-section--dark h2, .carly-section--dark h3{ color:#fff; }
.carly-section--dark p{ color: var(--text-muted-dark); }

.carly-section-head{ max-width:720px; margin:0 auto clamp(32px,4vw,52px); text-align:center; }
.carly-section-head h2{ margin:0 0 14px; }
.carly-section-head p{ font-size:clamp(15px,1.6vw,18px); line-height:1.55; color: var(--text-muted); margin:0; }
.carly-section--dark .carly-section-head p{ color: var(--text-muted-dark-2); }

.carly-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--accent-ink);
}
.carly-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--accent); flex:none; }
.carly-eyebrow--dark{ color: var(--accent); }
.carly-eyebrow--plain::before{ display:none; }

/* ---------- header (sticky) ---------- */
.carly-header{ position:sticky; top:0; z-index:50; background: var(--black); border-bottom:1px solid rgba(255,255,255,.08); }
.carly-header__inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
}
.carly-header__logo img{ height:22px; width:auto; }
.carly-header__nav{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.carly-header__nav a{ font-size:14px; font-weight:600; color:#D9D9D9; letter-spacing:.02em; }
.carly-header__nav a:hover{ color:#fff; }

/* ---------- announcement bar (campaign only, inside sticky header) ---------- */
.carly-announcement{ background: var(--accent); color: var(--black); }
.carly-announcement__inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding:9px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 16px;
}
.carly-announcement__name{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:15px; letter-spacing:.14em; text-transform:uppercase; }
.carly-announcement__offer{ font-size:14px; font-weight:600; }
.carly-announcement__pill{ background: var(--black); color:#fff; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; padding:4px 11px; border-radius:999px; }

/* ---------- buttons ---------- */
.carly-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--accent);
  color: var(--black) !important;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(251,155,10,.35);
  text-decoration:none !important;
  transition: background .15s ease, border-color .15s ease;
  white-space:nowrap;
  border:1px solid transparent;
}
.carly-btn:hover{ background: var(--accent-hover); }
.carly-btn--outline{
  background:#fff;
  color: var(--ink) !important;
  border:1px solid #D4D6D9;
  box-shadow:none;
}
.carly-btn--outline:hover{ background:#fff; border-color: var(--ink); }
.carly-btn--outline-dark{
  background:transparent;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
}
.carly-btn--outline-dark:hover{ background:transparent; border-color:#fff; }
.carly-btn--sm{ padding:11px 22px; font-size:14px; box-shadow:none; }
.carly-btn--black{ background: var(--black); color:#fff !important; box-shadow:none; }
.carly-btn--black:hover{ background:#262626; }

/* ---------- hero ---------- */
.carly-hero{ background: linear-gradient(180deg,#F4F5F6 0%,#E9EAEC 100%); color: var(--ink); position:relative; }
.carly-hero--campaign{ background: radial-gradient(120% 90% at 78% 30%, #3A2418 0%, #131313 55%, #0B0B0B 100%); color:#fff; }
.carly-hero--campaign h1{ color:#fff; }
.carly-hero__inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding: clamp(40px,6vw,84px) 20px clamp(36px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap: clamp(28px,4vw,56px);
  align-items:center;
}
.carly-hero--campaign .carly-hero__inner{ padding: clamp(34px,5vw,70px) 20px clamp(34px,5vw,64px); }
.carly-hero h1{ margin:0 0 18px; }
.carly-hero--campaign h1{ margin-bottom:16px; }
.carly-hero__subtitle{ font-size:clamp(16px,1.7vw,19px); line-height:1.5; color:#43474C; margin:0 0 26px; max-width:30em; }
.carly-hero--campaign .carly-hero__subtitle{ color: var(--text-muted-dark); }
.carly-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px; }
.carly-hero__media{ min-width:0; position:relative; display:flex; justify-content:center; }
.carly-hero__media img{ width:100%; max-width:540px; height:auto; }
.carly-hero--campaign .carly-hero__media img{ max-width:620px; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.45); }

.carly-check-list{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; list-style:none; }
.carly-check-list li{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:#3C4046; }
.carly-hero--campaign .carly-check-list li{ color:#D3D6DA; }
.carly-check-list svg{ width:13px; height:13px; flex:none; stroke: var(--success); stroke-width:3; }
.carly-hero--campaign .carly-check-list svg{ stroke: var(--success-dark); }

/* ---------- campaign badge (pill above H1) ---------- */
.carly-campaign-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(251,155,10,.14);
  border:1px solid rgba(251,155,10,.45);
  border-radius:999px;
  padding:7px 15px;
  margin-bottom:20px;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2em;
  color: var(--accent);
  text-transform:uppercase;
}
.carly-campaign-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--accent); flex:none; }

/* ---------- countdown tiles (campaign hero) ---------- */
.carly-countdown-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:24px; }
.carly-countdown-tile{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px 14px; min-width:74px; text-align:center; }
.carly-countdown-tile__v{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; color:#fff; }
.carly-countdown-tile__l{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9AA0A6; margin-top:5px; }
.carly-countdown-note{ font-size:13px; font-weight:600; color:#9AA0A6; max-width:15em; line-height:1.4; }

/* ---------- trust band ---------- */
.carly-trustband{ background:#fff; border-top:1px solid var(--border-light-alt); border-bottom:1px solid var(--border-light-alt); }
.carly-trustband__inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding:18px 20px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:14px clamp(20px,4vw,48px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carly-trustband__inner::-webkit-scrollbar{ display:none; }
.carly-trustband__item{ display:flex; align-items:baseline; gap:9px; flex:none; white-space:nowrap; }
.carly-trustband__stat{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:26px; }
.carly-trustband__label{ font-size:13px; color: var(--text-muted-2); font-weight:500; white-space:nowrap; }
.carly-trustband__divider{ width:1px; height:26px; background:#E3E4E6; flex:none; }
.carly-trustband__logos{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; flex:none; white-space:nowrap; }
.carly-trustband__logos-label{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--text-label); white-space:nowrap; }
.carly-trustband__logos img{ height:30px; width:auto; flex:none; }
@media (max-width:600px){
  .carly-trustband__inner{ gap:12px; justify-content:flex-start; }
  .carly-trustband__stat{ font-size:20px; }
  .carly-trustband__label{ font-size:11.5px; }
  .carly-trustband__logos-label{ font-size:10.5px; }
  .carly-trustband__logos img{ height:24px; }
}

/* ---------- why carly / compare card ---------- */
.carly-compare-card{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 20px rgba(17,17,17,.06); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.carly-compare-card__table{ padding: clamp(24px,3vw,38px); min-width:0; }
.carly-compare-card__label{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; margin:0; }
.carly-compare-card__media{ min-width:0; min-height:320px; position:relative; display:flex; align-items:center; justify-content:center; padding: clamp(18px,2.4vw,32px); background: var(--bg-light); }
.carly-compare-card__media img{ width:100%; max-width:420px; height:auto; }

.carly-compare-row--head{ display:grid; grid-template-columns:1fr 72px 72px; align-items:center; padding-bottom:12px; border-bottom:1px solid #ECEDEF; }
.carly-compare-row--head span{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-label); text-align:center; }
.carly-compare-row--head span.is-carly{ color: var(--accent-ink); }
.carly-compare-row{ display:grid; grid-template-columns:1fr 72px 72px; align-items:center; padding:15px 0; border-bottom:1px solid #F2F3F4; gap:8px; }
.carly-compare-row:last-child{ border-bottom:none; }
.carly-compare-cell{ font-size:15px; font-weight:500; color:#23262A; min-width:0; }
.carly-compare-icon{ display:flex; justify-content:center; }
.carly-compare-icon svg{ width:15px; height:15px; stroke: #C3C6CA; stroke-width:2.6; }
.carly-compare-icon--yes svg{ width:17px; height:17px; stroke: var(--success); stroke-width:3; }

.carly-compare-card__footer{
  background: var(--black);
  color:#fff;
  border-radius:20px;
  margin-top:18px;
  padding: clamp(26px,3.4vw,40px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px 40px;
  align-items:center;
}
.carly-compare-card__footer h3{ margin:0; color:#fff; }
.carly-compare-card__footer p{ font-size:15px; line-height:1.6; color: var(--text-muted-dark); margin:0; }

/* ---------- features ---------- */
.carly-features-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: clamp(20px,2.4vw,30px); }
.carly-features-head h2{ margin:0; }
.carly-features-head p{ font-size:15px; line-height:1.55; color: var(--text-muted); margin:0; max-width:34em; }

.carly-brand-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom: clamp(24px,3vw,40px); padding-bottom: clamp(24px,3vw,36px); border-bottom:1px solid var(--border-light); }
.carly-brand-chips span{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#3C4046; border:1px solid var(--border-light-alt2); border-radius:999px; padding:7px 15px; }
.carly-brand-chips a.is-more{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; border:none; padding:7px 4px; color: var(--accent-ink); text-decoration:none; }
.carly-brand-chips a.is-more:hover{ text-decoration:underline; }

/* Carrusel infinito: scroll real (track.scrollLeft) animado por JS
   (ver footer.php), no CSS @keyframes -- evita las inconsistencias de
   transform/porcentaje entre navegadores que hacian que el loop en base
   a CSS puro no se viera correr en algunos casos. El set de tarjetas se
   duplica en el markup (2da copia aria-hidden) para que el reset del
   scroll (cuando llega al final del primer set) sea invisible. Hover
   (o touch) pausa el auto-scroll; el usuario tambien puede arrastrar/
   swipe manualmente en cualquier momento. Si el navegador pide
   prefers-reduced-motion, el JS no arranca el auto-scroll pero el
   carrusel sigue siendo scrolleable a mano. */
.carly-features-carousel{ overflow:hidden; }
.carly-features-track{
  display:flex;
  overflow-x:auto;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.carly-features-track::-webkit-scrollbar{ display:none; height:0; }
.carly-features-track:active{ cursor:grabbing; }
.carly-features-set{ display:flex; flex-shrink:0; gap:16px; padding-right:16px; }

.carly-feature-card{ background: var(--bg-light); border:1px solid var(--border-light); border-radius:18px; padding: clamp(22px,2.4vw,28px); min-height:300px; display:flex; flex-direction:column; flex:0 0 270px; width:270px; min-width:0; transition:border-color .15s ease, background .15s ease; }
.carly-feature-card:hover{ border-color: var(--accent); background:#fff; }
.carly-feature-card__tag{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:11px; letter-spacing:.2em; color: var(--accent-ink); margin-bottom:14px; }
.carly-feature-card h3{ margin:0 0 10px; }
.carly-feature-card p{ font-size:14.5px; line-height:1.6; color: var(--text-muted); margin:0 0 18px; }
.carly-feature-card__proof{ margin-top:auto; padding-top:16px; border-top:1px solid #E3E5E7; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#23262A; }

.carly-feature-card--lead{ background: var(--black); color:#fff; border:none; justify-content:space-between; flex-basis:300px; width:300px; }
.carly-feature-card--lead .carly-feature-card__tag{ color: var(--accent); }
.carly-feature-card--lead h3{ color:#fff; }
.carly-feature-card--lead p{ color: var(--text-muted-dark); }
.carly-feature-card--lead .carly-feature-card__stats{ display:flex; gap:26px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.carly-feature-card--lead .carly-feature-card__stat-v{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:26px; line-height:1; color:#fff; }
.carly-feature-card--lead .carly-feature-card__stat-l{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--text-label-dark); margin-top:4px; }
/* fix: el :hover generico de .carly-feature-card pone background #fff, que
   sobre la lead card (texto blanco) dejaba el contenido invisible */
.carly-feature-card--lead:hover{ background: var(--black); border-color: var(--accent); }

/* ---------- coding destacado (marcas con supports_coding) ---------- */
.carly-feature-card__badge{ align-self:flex-start; background: var(--accent); color: var(--black); font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; margin-bottom:14px; }
.carly-feature-card--lead .carly-feature-card__proof{ border-top-color: rgba(255,255,255,.12); color:#fff; }
.carly-feature-card--coding{ justify-content:flex-start; box-shadow: 0 0 0 2px var(--accent); }
/* stats de Diagnostics cuando no es lead card */
.carly-feature-card:not(.carly-feature-card--lead) .carly-feature-card__stats{ display:flex; gap:22px; margin-top:auto; padding-top:16px; border-top:1px solid #E3E5E7; }
.carly-feature-card:not(.carly-feature-card--lead) .carly-feature-card__stat-v{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:22px; line-height:1; color:#23262A; }
.carly-feature-card:not(.carly-feature-card--lead) .carly-feature-card__stat-l{ font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--text-muted); margin-top:4px; }

/* ---------- setup (3 steps) ---------- */
.carly-setup-head{ max-width:760px; margin-bottom: clamp(32px,4vw,52px); }
.carly-setup-head h2{ margin:0 0 14px; }
.carly-setup-head p{ font-size:clamp(15px,1.6vw,18px); line-height:1.55; color: var(--text-muted-dark-2); margin:0; }
.carly-setup-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap: clamp(20px,2.6vw,34px); }
.carly-step{ border-top:2px solid var(--accent); padding-top:22px; min-width:0; }
.carly-step__photo{ position:relative; width:100%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background-color:#141414; background-size:cover; margin-bottom:18px; }
.carly-step__num{ position:absolute; left:12px; bottom:12px; width:44px; height:44px; border-radius:50%; background: var(--accent); color: var(--black); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:24px; line-height:1; }
.carly-step h3{ margin:0 0 10px; }
.carly-step p{ font-size:15px; line-height:1.6; color: var(--text-muted-dark-2); margin:0; }

/* ---------- final CTA ---------- */
.carly-final-cta{ background: var(--black-alt); color:#fff; border-top:1px solid rgba(255,255,255,.07); padding: clamp(56px,7vw,100px) 0; text-align:center; }
.carly-final-cta__inner{ max-width:900px; margin:0 auto; }
.carly-final-cta .carly-eyebrow{ margin-bottom:14px; justify-content:center; }
.carly-final-cta h2{ color:#fff; margin:0 0 14px; }
.carly-final-cta p{ font-size:clamp(16px,1.7vw,19px); line-height:1.5; color: var(--text-muted-dark); margin:0 auto 28px; max-width:34em; }
.carly-final-cta__countdown{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; margin:0 auto 24px; }
.carly-final-cta__fine{ font-size:11px; line-height:1.6; color: var(--text-label-dark); margin:40px auto 0; max-width:46em; }

/* ---------- reviews (Elfsight embed, restyled dark section) ---------- */
.carly-reviews{ background: var(--black); color:#fff; }
.carly-reviews-head{ text-align:center; margin-bottom: clamp(26px,3vw,42px); }
.carly-reviews-head .carly-eyebrow{ justify-content:center; margin-bottom:10px; }
.carly-reviews-head h2{ margin:0; font-size:clamp(26px,3.6vw,40px); color:#fff; }

/* ---------- footer ---------- */
.carly-footer{ background: var(--black); border-top:1px solid rgba(255,255,255,.08); }
.carly-footer__inner{ max-width: var(--max-width); margin:0 auto; padding:26px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.carly-footer__logo img{ height:20px; width:auto; }
.carly-footer__legal{ font-size:12.5px; color: var(--text-label-dark); }
.carly-footer__legal a{ color:inherit; text-decoration:underline; }

/* ---------- sticky bottom bar (campaign only) ---------- */
.carly-sticky-cta{
  position:sticky;
  bottom:0;
  z-index:60;
  background: var(--accent);
  color: var(--black);
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
}
.carly-sticky-cta__inner{ max-width: var(--max-width); margin:0 auto; padding:11px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; }
.carly-sticky-cta__offer{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:16px; letter-spacing:.1em; text-transform:uppercase; }
.carly-sticky-cta__countdown{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; background:rgba(11,11,11,.12); padding:4px 10px; border-radius:999px; }

/* ---------- misc ---------- */
[data-cd-hide-on-expire].is-expired{ display:none !important; }

@media (max-width:767px){
  .carly-header__nav{ display:none; }
}


/* ---- Precio visible (= Offer del schema) ---- */
.carly-price{ margin:0 0 22px; font-size:15px; color:var(--text-muted); }
.carly-price__value{ color:var(--ink); font-size:20px; font-weight:700; margin-left:4px; }
.carly-final-cta .carly-price{ color:var(--text-muted-dark); margin:0 auto 20px; max-width:none; text-align:center; }
.carly-final-cta .carly-price__value{ color:#fff; }

/* ---- FAQ (texto server-side, visible para Google/LLMs) ---- */
.carly-faq__list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.carly-faq__item{ background:var(--bg-white); border:1px solid var(--border-light); border-radius:14px; padding:0 22px; }
.carly-faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; }
.carly-faq__item summary::-webkit-details-marker{ display:none; }
.carly-faq__item summary::after{ content:"+"; font-size:22px; line-height:1; color:var(--accent-ink); flex:none; }
.carly-faq__item[open] summary::after{ content:"–"; }
.carly-faq__q{ margin:0; font-size:17px; font-weight:600; color:var(--ink); }
.carly-faq__a{ padding:0 0 20px; color:var(--text-muted); }
.carly-faq__a p{ margin:0; }