@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --site-bg: #FFFFFF;
  --site-text: #12141A;
  --site-caption: #5B5F6B;
  --site-border: #E7E9E1;
  --site-accent: #D2EF3A;
  --site-accent-ink: #0B0B0B;
  --site-dark: #0A0B09;
  --site-dark-text: #F2F4EC;
  --site-footer: #14161D;
  --site-card-shadow: 0 20px 45px rgb(10 11 9 / .07);
  --site-link: #5C6B14;
  /* Tokens del rediseño "Conversación viva" (hero live + 404) — nombres
     propios, no sustituyen --site-dark/--site-accent globales, para no
     afectar el resto del sitio (claro) ni el footer existente. */
  --live-dark: #1C2024;
  --live-surface: #262B31;
  --live-surface-hover: #2E343B;
  --live-accent: #CDF23D;
  --live-border: rgb(255 255 255 / .14);
  --live-border-soft: rgb(255 255 255 / .08);
  --live-text-1: #D6DBE0;
  --live-text-2: #A9B2BA;
  --live-accent-ink: #7FA300;
  --live-light-bg: #F7F9FA;
  --live-light-border: #E4E8EC;
  --live-lime-bg: #F1FBCB;
  --live-lime-ink: #5E7A00;
  --live-muted-1: #3E464E;
  --live-muted-2: #5C666F;
  --live-panel-bg: #EDF0F3;
  --live-text-3: #8A939C;
  --live-label: #6C757D;
  --font: 'Outfit', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--font);
  color: var(--site-text);
  background: var(--site-bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font); font-weight: 700; margin: 0; letter-spacing: -.02em; }

.site-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.button--accent { background: var(--site-accent); color: var(--site-accent-ink); }
.button--dark { background: var(--site-dark); color: var(--site-dark-text); }
.button--lg { padding: 16px 32px; font-size: 16px; }

/* Header — barra flotante en píldora, igual en todas las páginas del sitio */
.preview-banner { position: sticky; top: 0; z-index: 30; padding: 10px 24px; background: #7A5B00; color: #FFF7DB; font-size: 13px; font-weight: 600; text-align: center; }
.admin-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 40px; background: #14171A; color: #F2F4EC; font-size: 13px; }
.admin-bar__inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-bar__brand { font-weight: 700; }
.admin-bar__actions { display: flex; align-items: center; gap: 20px; }
.admin-bar__actions a { color: #F2F4EC; text-decoration: none; opacity: .82; }
.admin-bar__actions a:hover { opacity: 1; text-decoration: underline; }
html.has-admin-bar body { padding-top: 40px; }
html.has-admin-bar .site-header { top: 40px; }
/* La píldora va a 30px del borde superior (medido en producción). El reparto
   30/10 mantiene los 100px de alto total que el hero descuenta con su
   margin-top negativo — cambiar esa suma descuadra el hero. */
.site-header { position: sticky; top: 0; z-index: 20; padding: 30px 0 10px; background: transparent; }
/* La píldora siempre flota transparente sobre el fondo real de la página
   (hero oscuro o panel claro) — nunca lleva color propio. La sección que
   sigue (hero/breadcrumb) se estira detrás con margin-top negativo y
   compensa con padding-top ≥170px para no quedar tapada. Ver .blog-hero,
   .services-hero, .pricing-hero, .contact-intro, .service-detail-hero y
   .hero-live, que comparten este mismo patrón. */
.site-header--panel { background: transparent; }
.site-header__inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 14px 26px; background: rgb(255 255 255 / .97); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 18px 40px rgb(16 20 24 / .16); }
.site-logo { display: flex; align-items: center; justify-self: start; }
.site-logo img { height: 45px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; justify-self: center; gap: 28px; font-weight: 500; font-size: 15px; }
.site-header__actions { justify-self: end; }
.site-nav-toggle { display: none; }
.site-nav a[aria-current="page"] { color: var(--site-accent-ink); border-bottom: 2px solid var(--site-accent); padding-bottom: 4px; }

/* Submenú de "Servicios" en el header público: lista real de servicios
   publicados, agrupados por categoría (ver siteServicesMenu()). Solo
   aplica en desktop — por debajo de 900px .site-nav ya se oculta entera
   (ver @media más abajo), no hay un menú móvil que resolver aquí. */
.site-nav__item { position: relative; }
.site-nav__trigger { display: inline-flex; align-items: center; gap: 5px; }
.site-nav__chevron { width: 11px; height: 11px; transition: transform .18s ease; }
.site-nav__item:hover .site-nav__chevron, .site-nav__item:focus-within .site-nav__chevron { transform: rotate(180deg); }
.site-nav__dropdown {
  position: absolute; top: calc(100% + 20px); left: 0; z-index: 30;
  display: flex; gap: 28px; padding: 22px 26px;
  background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 16px; box-shadow: var(--site-card-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav__item:hover .site-nav__dropdown, .site-nav__item:focus-within .site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__dropdown-group { display: flex; flex-direction: column; min-width: 190px; }
.site-nav__dropdown--flat { flex-direction: column; min-width: 200px; gap: 2px; }
.site-nav__dropdown-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--site-caption); }
.site-nav__dropdown-link { padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--site-text); text-decoration: none; }
.site-nav__dropdown-link:hover { color: var(--site-link); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { font-size: 13px; font-weight: 600; color: var(--site-caption); padding: 4px 6px; }
.lang-switch--active { color: var(--site-text); }
.site-nav-toggle { flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; padding: 0; border: none; background: none; cursor: pointer; }
.site-nav-toggle span { width: 22px; height: 2px; background: var(--site-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.site-header__inner.is-nav-open .site-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__inner.is-nav-open .site-nav-toggle span:nth-child(2) { opacity: 0; }
.site-header__inner.is-nav-open .site-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero { background: var(--site-dark); color: var(--site-dark-text); padding: 88px 0 0; overflow: hidden; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgb(242 244 236 / .25); color: var(--site-accent); margin-bottom: 24px; }
.hero__mark svg { width: 24px; height: 24px; }
.hero__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; max-width: 720px; }
.hero__accent { color: var(--site-accent); }
.hero__lead { max-width: 620px; margin: 24px 0 32px; color: rgb(242 244 236 / .72); font-size: 16px; line-height: 1.7; }
.hero__image { margin-top: 56px; width: 100%; max-width: 920px; }
.hero__image img { width: 100%; border-radius: 20px 20px 0 0; }

/* Stats */
.stats { padding: 96px 0; text-align: center; }
.stats__title { font-size: clamp(22px, 3vw, 30px); margin-bottom: 56px; }
.stats__title span { color: var(--site-accent-ink); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; }
.stats__photo { grid-row: 1; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.stats__photo img { width: 100%; height: 100%; object-fit: cover; }
.stats__card { grid-row: 2; background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 16px; box-shadow: var(--site-card-shadow); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stat-icon { width: 26px; height: 26px; color: var(--site-accent-ink); }
.stats__card strong { font-size: 28px; }
.stats__card span { color: var(--site-caption); font-size: 14px; }

/* Process */
.process { padding: 0 0 96px; }
.process__title { text-align: center; font-size: clamp(22px, 3vw, 30px); margin-bottom: 56px; }
.process__timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; position: relative; }
.process__timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--site-border); }
.process__timeline li { position: relative; padding: 0 0 40px 40px; }
.process__timeline li:last-child { padding-bottom: 0; }
.process__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 999px; background: var(--site-accent); border: 3px solid var(--site-bg); box-shadow: 0 0 0 2px var(--site-border); }
.process__timeline h3 { font-size: 19px; margin-bottom: 8px; }
.process__timeline p { margin: 0; color: var(--site-caption); line-height: 1.65; }

/* Testimonials */
.testimonials { padding: 0 0 96px; }
.testimonials h2 { text-align: center; font-size: clamp(22px, 3vw, 30px); margin-bottom: 48px; }
.testimonials__carousel { position: relative; }
.testimonials__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial-card { scroll-snap-align: start; flex: 0 0 min(320px, 85vw); background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 16px; box-shadow: var(--site-card-shadow); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.testimonial-card strong { font-size: 16px; }
.testimonial-card span { color: var(--site-accent-ink); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.testimonial-card p { margin: 0; color: var(--site-caption); font-size: 14px; line-height: 1.65; }
.testimonials__controls { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.testimonials__arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-bg); font-size: 20px; cursor: pointer; }
.testimonials__arrow:hover { background: var(--site-accent); border-color: var(--site-accent); }

/* Contact */
.eyebrow { text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--site-caption); background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 999px; display: table; margin: 0 auto 20px; padding: 6px 16px; }
.contact-intro { margin-top: -120px; padding: calc(58px + 120px) 0 0; text-align: center; background: var(--live-panel-bg); }
.contact-intro h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 40px; }
.contact-map { position: relative; border-radius: 16px; overflow: hidden; }
.contact-map img { width: 100%; }
.contact-map__pin { position: absolute; width: 14px; height: 14px; border-radius: 999px; background: var(--site-accent); border: 3px solid var(--site-accent-ink); transform: translate(-50%, -50%); }
.contact-body { padding: 72px 0 96px; }
.contact-body__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.contact-body__grid h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 28px; }
.contact-form { display: grid; gap: 18px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-size: 13px; color: var(--site-caption); }
.contact-form input, .contact-form textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--site-border); border-radius: 8px; color: var(--site-text); resize: vertical; }
.contact-form__consent { display: flex !important; flex-direction: row; align-items: flex-start; gap: 8px; }
.contact-form__consent input { width: auto; margin-top: 3px; }
.contact-form__disclaimer { font-size: 12px; color: var(--site-caption); line-height: 1.6; }
.contact-form__feedback { margin: 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; background: var(--live-panel-bg); color: var(--site-text); }
.contact-form__feedback--error { background: rgb(220 38 38 / .12); color: #B91C1C; }
.contact-social { background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 16px; box-shadow: var(--site-card-shadow); padding: 28px; height: fit-content; }
.contact-social h3 { font-size: 14px; margin-bottom: 12px; }
.contact-social a { display: block; padding: 6px 0; font-size: 14px; }

/* Services */
.eyebrow--start { margin: 0 0 16px; text-align: left; display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--live-dark); color: var(--live-accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: none; }
.services-hero { background: var(--live-panel-bg); margin-top: -120px; padding: calc(58px + 120px) 0 56px; }
.services-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.services-hero h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px; color: var(--site-text); }
.services-hero__lead { color: var(--live-muted-2); margin-bottom: 28px; line-height: 1.65; font-size: 17px; max-width: 540px; }
.services-hero__photo img { border-radius: 20px; aspect-ratio: 1; object-fit: cover; }
.services-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.services-hero__stat { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: #FFFFFF; box-sizing: border-box; }
.services-hero__stat--dark { background: var(--live-dark); }
.services-hero__stat--lime { background: var(--live-lime-bg); }
.services-hero__stat strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--site-text); }
.services-hero__stat--dark strong { color: var(--live-accent); }
.services-hero__stat span { font-size: 13px; line-height: 1.5; color: var(--live-muted-2); }
.services-hero__stat--dark span { color: var(--live-text-3); }
.services-hero__stat--lime span { color: var(--live-lime-ink); }
.services-catalog { padding: 56px 0 70px; }
.services-category { padding-bottom: 40px; }
.services-category:last-child { padding-bottom: 0; }
.services-category h2 { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -.02em; margin: 0 0 8px; color: var(--site-text); }
.services-category > p { margin: 0 0 22px; color: var(--live-muted-2); font-size: 15px; max-width: 640px; }
.services-catalog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.service-card { background: var(--live-light-bg); border: 1px solid var(--live-light-border); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.service-card--featured { grid-column: span 2; background: var(--live-dark); border: none; padding: 34px; }
.service-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--live-label); }
.service-card--featured .service-card__eyebrow { color: var(--live-text-3); }
.service-card strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--site-text); }
.service-card--featured strong { font-size: 24px; color: #FFFFFF; }
.service-card p { margin: 0; color: var(--live-muted-2); font-size: 14.5px; line-height: 1.6; flex: 1; }
.service-card--featured p { color: var(--live-text-2); }
.service-card a { font-size: 14px; font-weight: 700; color: var(--site-text); align-self: flex-start; }
.service-card--featured a { color: #FFFFFF; }
.service-card a span[aria-hidden] { color: var(--live-accent-ink); }
.service-card--featured a span[aria-hidden] { color: var(--live-accent); }
.services-cta { padding: 64px 0; text-align: center; background: var(--live-dark); }
.services-cta h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 16px; color: #FFFFFF; }
.services-cta__accent { color: var(--live-accent); }
.services-cta p { color: var(--live-text-2); max-width: 520px; margin: 0 auto 28px; }

/* Pricing */
.pricing-hero { margin-top: -120px; padding: calc(58px + 120px) 0 56px; text-align: center; background: var(--live-panel-bg); }
.pricing-hero h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 16px; }
.pricing-hero p { color: var(--site-caption); max-width: 480px; margin: 0 auto; }
.pricing-plans { padding-bottom: 96px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 20px; background: var(--site-dark); color: var(--site-dark-text); }
.pricing-card--highlighted { background: var(--site-accent); color: var(--site-accent-ink); }
.pricing-card__name { display: block; font-size: 18px; margin-bottom: 12px; }
.pricing-card__price { font: 700 34px var(--font); }
.pricing-card__price span { display: block; font: 400 12px var(--font); opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.pricing-card__price--text { font-size: 18px; }
.pricing-card__tagline { margin: 4px 0 0; font-size: 13px; opacity: .7; }
.pricing-card .button { width: 100%; justify-content: center; margin-top: 16px; }
.pricing-card__body { border-top: 1px solid rgb(242 244 236 / .15); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pricing-card--highlighted .pricing-card__body { border-top-color: rgb(11 11 11 / .15); }
.pricing-card__includes { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.pricing-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; flex: 1; }
.pricing-card__features li { padding-left: 20px; position: relative; }
.pricing-card__features li::before { content: "✓"; position: absolute; left: 0; }
.pricing-card__setup { margin: 0; font-size: 12px; opacity: .6; border-top: 1px dashed rgb(242 244 236 / .2); padding-top: 12px; }
.pricing-card--highlighted .pricing-card__setup { border-top-color: rgb(11 11 11 / .2); }

/* Service detail */
.service-detail-back { display: inline-block; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: var(--live-text-2); }
.service-detail-back:hover { color: #FFFFFF; }
.service-detail-hero { background: var(--live-dark); margin-top: -120px; padding: calc(58px + 120px) 0 56px; text-align: left; }
.service-detail-hero .breadcrumb { color: var(--live-text-3); }
.service-detail-hero .breadcrumb a { color: var(--live-text-2); }
.service-detail-hero .breadcrumb a:hover { color: #FFFFFF; }
.service-detail-hero h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px; color: #FFFFFF; max-width: 720px; }
.service-detail-hero__lead { color: var(--live-text-2); max-width: 620px; margin: 0; line-height: 1.65; font-size: 17px; }
.service-detail-hero__image { margin-top: 36px; }
.service-detail-hero__image img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; }
.service-detail-section { padding: 48px 0; }
.service-detail-section__narrow { max-width: 720px; margin: 0 auto; text-align: center; }
.service-detail-section__narrow p { color: var(--live-muted-2); line-height: 1.7; }
.service-detail-section__narrow img { margin-top: 24px; border-radius: 16px; width: 100%; }
.service-detail-section__title { text-align: center; font-size: clamp(22px, 3.2vw, 32px); letter-spacing: -.02em; margin-bottom: 12px; color: var(--site-text); }
.service-detail-section__lead { text-align: center; color: var(--live-muted-2); max-width: 560px; margin: 0 auto 32px; }
.service-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.service-detail-card { background: var(--live-light-bg); border: 1px solid var(--live-light-border); border-radius: 16px; padding: 26px; box-sizing: border-box; }
.service-detail-card strong { display: block; margin-bottom: 8px; font-size: 16px; color: var(--site-text); }
.service-detail-card p { margin: 0; color: var(--live-muted-2); font-size: 14px; line-height: 1.6; }
.service-detail-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.service-detail-results li { padding-left: 26px; position: relative; color: var(--live-muted-2); text-align: left; }
.service-detail-results li::before { content: "✓"; position: absolute; left: 0; color: var(--live-accent-ink); font-weight: 700; }
.service-detail-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--site-caption); margin: 0 0 20px; }
.breadcrumb a { font-weight: 600; }
.breadcrumb a:hover { color: var(--site-accent-ink); }
.breadcrumb span { margin: 0 4px; }

/* Blog */
.blog-hero { margin-top: -120px; padding: calc(58px + 120px) 0 48px; text-align: center; background: var(--live-panel-bg); }
.blog-hero .breadcrumb { text-align: left; }
.blog-hero h1 { font-size: clamp(30px, 5vw, 44px); }
.blog-hero--post { text-align: left; }
.blog-hero--post h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.blog-listing { padding: 64px 0 96px; }
.blog-empty { text-align: center; color: var(--site-caption); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.blog-card { display: flex; flex-direction: column; gap: 8px; }
.blog-card__category { color: var(--site-accent-ink); background: linear-gradient(to top, var(--site-accent) 35%, transparent 35%); display: inline-block; padding: 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; align-self: flex-start; }
.blog-card__title { font-size: 19px; line-height: 1.35; margin: 4px 0 0; }
.blog-card__title a:hover { color: var(--site-accent-ink); }
.blog-card__excerpt { color: var(--site-caption); font-size: 14px; line-height: 1.6; margin: 0; }
.blog-card__meta { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--site-caption); margin: 4px 0 0; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.blog-categories__item { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--site-border); font-size: 13px; font-weight: 600; color: var(--site-caption); }
.blog-categories__item:hover { border-color: var(--site-accent); color: var(--site-text); }
.blog-categories__item--active { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-ink); }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.blog-pagination__link { font-weight: 600; color: var(--site-link); }
.blog-pagination__status { font-size: 13px; color: var(--site-caption); }

/* Blog post detail */
.blog-post-hero__lead { color: var(--site-caption); font-size: 17px; line-height: 1.6; max-width: 720px; margin: 0 0 20px; }
.blog-post-hero__meta { font-size: 13px; color: var(--site-caption); font-weight: 500; }
.blog-post-body { padding: 56px 0 96px; }
.blog-post-body__narrow { max-width: 720px; margin: 0 auto; line-height: 1.75; }
.blog-post-body__narrow h2 { font-size: clamp(20px, 3vw, 26px); margin: 40px 0 16px; }
.blog-post-body__narrow p { color: var(--site-text); margin: 0 0 16px; }
.blog-post-body__narrow ul { padding-left: 20px; }
.blog-post-body__narrow li { margin-bottom: 8px; }
.blog-post-body__narrow a { font-weight: 600; color: var(--site-link); border-bottom: 1px solid var(--site-accent); }
.story-detail__image { width: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; margin: 0 0 40px; }
.story-detail__logo { height: 40px; width: auto; margin-bottom: 20px; }
.story-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.story-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
.story-card__image { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.service-card--featured .story-card__image { height: 260px; }

/* Quiénes somos */
.about-story { padding: 64px 0; }
.about-story h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; }
.about-story__lead { color: var(--site-caption); font-size: 16px; line-height: 1.65; max-width: 640px; margin: 0 0 40px; }
.about-story__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 48px; }
.about-story__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.about-story__step { padding: 24px; border: 1px solid var(--site-border); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.about-story__step strong { font-size: 17px; }
.about-story__step p { margin: 0; color: var(--site-caption); font-size: 14.5px; line-height: 1.6; }
.about-principles { padding: 56px 0; background: var(--live-panel-bg); text-align: center; }
.about-principles h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 auto 32px; max-width: 560px; }
.about-principles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; }
.about-principles__item { background: var(--site-bg); border-radius: 16px; padding: 24px; box-shadow: var(--site-card-shadow); }
.about-principles__item strong { display: block; font-size: 17px; margin-bottom: 8px; }
.about-principles__item p { margin: 0; color: var(--site-caption); font-size: 14px; line-height: 1.6; }
.about-capabilities__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.about-capabilities__item { padding: 18px; border: 1px solid var(--site-border); border-radius: 12px; text-align: center; font-weight: 600; font-size: 14px; }
.about-clients { padding: 48px 0 64px; }
.about-clients h2 { margin: 8px 0 32px; }
.about-clients__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.about-clients__grid img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .7; }
.ainoa-cta { background: var(--site-bg); border: 1px solid var(--site-border); box-shadow: var(--site-card-shadow); border-radius: 16px; padding: 28px; margin: 32px 0; }
.ainoa-cta h2 { font-size: 20px; margin-bottom: 8px; }
.ainoa-cta p:last-child { margin-bottom: 0; }
.ainoa-cta-secundario { background: transparent; border: none; box-shadow: none; padding: 0; text-align: center; color: var(--site-caption); }
.blog-post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.blog-post-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--site-accent-ink); border: 1px solid var(--site-border); border-radius: 999px; padding: 6px 14px; }
.blog-post-sources { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--site-border); }
.blog-post-sources h2 { font-size: 18px; margin-bottom: 12px; }
.blog-post-sources ul { margin: 0; padding-left: 20px; }
.blog-post-sources li { margin-bottom: 6px; }
.blog-post-related { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--site-border); }
.blog-post-related h2 { font-size: 18px; margin-bottom: 12px; }
.blog-post-related ul { margin: 0; padding-left: 20px; }
.blog-post-related li { margin-bottom: 6px; }

/* FAQ */
.faq-list { padding: 64px 0 96px; }
.faq-list__narrow { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--site-border); padding: 20px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--site-accent-ink); flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { color: var(--site-caption); line-height: 1.7; padding-top: 14px; }
.faq-closing { text-align: center; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--site-border); }
.faq-closing h3 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 12px; }
.faq-closing p { color: var(--site-caption); margin-bottom: 20px; }
.glossary-list { margin: 0; }
.glossary-term { border-bottom: 1px solid var(--site-border); padding: 20px 0; scroll-margin-top: 24px; }
.glossary-term dt { font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.glossary-term dd { margin: 0; color: var(--site-caption); line-height: 1.7; }
.faq-closing a { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; font-weight: 600; background: var(--site-accent); color: var(--site-accent-ink); }

/* Closing CTA */
.closing-cta { padding: 0 0 96px; text-align: center; }
.closing-cta h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 12px; }
.closing-cta__accent { color: var(--site-accent-ink); background: linear-gradient(to top, var(--site-accent) 35%, transparent 35%); padding: 0 4px; }
.closing-cta p { color: var(--site-caption); margin-bottom: 28px; }

/* Footer */
.site-footer { position: relative; overflow: hidden; background: var(--live-dark); color: var(--live-text-1); }
.site-footer__cta { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding: 52px 0; border-bottom: 1px solid var(--live-border-soft); }
.site-footer__cta-halo { position: absolute; left: -120px; top: -160px; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(205 242 61 / .13), rgb(205 242 61 / 0) 70%); }
.site-footer__cta h2 { margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: #FFFFFF; }
.site-footer__cta p { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--live-text-2); }
.site-footer__cta-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.site-footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding: 48px 24px 40px; }
.site-footer__brand img { height: 26px; width: auto; display: block; margin-bottom: 18px; }
.site-footer__brand p { margin: 0 0 18px; max-width: 260px; font-size: 14px; line-height: 1.6; color: var(--live-text-3); }
.site-footer__socials { display: flex; align-items: center; gap: 10px; }
.site-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--live-border); color: var(--live-text-1); font-size: 13px; }
.site-footer__social:hover { border-color: var(--live-accent); color: #FFFFFF; }
.site-footer h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--live-label); margin-bottom: 14px; font-weight: 700; }
.site-footer__inner > div > a { display: block; padding: 5px 0; font-size: 14px; color: var(--live-text-1); }
.site-footer__inner > div > a:hover { color: var(--live-accent); }
.site-footer__contact-note { margin: 2px 0 0; font-size: 13px; color: var(--live-text-3); }
.site-footer__bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--live-border-soft); font-size: 13px; color: var(--live-label); flex-wrap: wrap; }
.site-footer__legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--live-text-3); }
.site-footer__legal a { color: inherit; }
.site-footer__legal a:hover { color: #FFFFFF; }
.site-footer__legal .lang-switch { color: var(--live-text-3); }
.site-footer__legal .lang-switch--active { color: #FFFFFF; }

@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav, .lang-switch { display: none; }
  .site-nav-toggle { display: flex; }
  .site-header__inner.is-nav-open .site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: calc(100% + 12px); left: 16px; right: 16px;
    background: var(--site-bg); border-radius: 16px; box-shadow: var(--site-card-shadow);
    padding: 12px; z-index: 30;
  }
  .site-header__inner.is-nav-open .site-nav a { padding: 10px 8px; }
  .site-header__inner.is-nav-open .site-nav__item { position: static; }
  .site-header__inner.is-nav-open .site-nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    flex-direction: column; box-shadow: none; border: none; margin-top: 4px; padding: 0 0 0 16px;
  }
  .stats__grid { grid-template-columns: 1fr; }
  .stats__photo { display: none; }
  .site-footer__cta { grid-template-columns: 1fr; text-align: left; }
  .site-footer__cta-actions { justify-content: flex-start; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .contact-body__grid { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .services-hero__inner { grid-template-columns: 1fr; }
  .service-card--featured { grid-column: span 1; }
  .pricing-grid { grid-template-columns: 1fr; }
  .hero-live__inner, .error-404__inner { grid-template-columns: 1fr; }
  .hero-live__demo, .error-404__assistant { margin-top: 40px; }
  .hero-live__float { display: none; }
  .hero-live__metrics { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero-live__ctas, .error-404 .hero-live__ctas { flex-direction: column; align-items: stretch; }
  .hero-live__ctas .button, .error-404 .hero-live__ctas .button { justify-content: center; }
  .error-404__routes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Animaciones "Conversación viva" (hero live + 404) — desactivadas si el
   usuario prefiere menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ai-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
  @keyframes ai-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
  @keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
  .live-chip__dot { animation: ai-pulse 1.8s ease-in-out infinite; }
  .live-bubble--typing span { animation: ai-pulse 1.2s ease-in-out infinite; }
  .live-bubble--typing span:nth-child(2) { animation-delay: .2s; }
  .live-bubble--typing span:nth-child(3) { animation-delay: .4s; }
  .live-wave i { animation: ai-wave 1s ease-in-out infinite; }
  .live-wave i:nth-child(2) { animation-delay: .15s; }
  .live-wave i:nth-child(3) { animation-delay: .3s; }
  .live-wave i:nth-child(4) { animation-delay: .45s; }
  .hero-live__float--a { animation: ai-float 6s ease-in-out infinite; }
  .hero-live__float--b { animation: ai-float 6s ease-in-out 1.6s infinite; }
}

/* Hero "Conversación viva" — el fondo oscuro sube por detrás de la barra
   flotante (que es transparente entre la píldora y los bordes), en vez de
   dejar un hueco blanco encima; ver handoff v2. */
.hero-live { position: relative; overflow: hidden; background: var(--live-dark); color: var(--site-dark-text); margin-top: -120px; padding-top: calc(58px + 120px); padding-bottom: 48px; }
.hero-live__halo { position: absolute; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(205 242 61 / .16), rgb(205 242 61 / 0) 70%); }
.hero-live__halo--left { top: -160px; left: -120px; }
.hero-live__halo--right { top: -20px; right: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgb(205 242 61 / .18), rgb(205 242 61 / 0) 68%); }
.hero-live__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-live__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-live__title { margin: 0; font-size: clamp(36px, 5.2vw, 74px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; color: #FFFFFF; }
.hero-live__accent { color: var(--live-accent); }
.hero-live__lead { margin: 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: var(--live-text-2); }
.hero-live__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button--outline-live { background: transparent; border: 1px solid var(--live-border); color: #FFFFFF; }
.button--outline-live:hover { border-color: var(--live-accent); }
.hero-live__metrics { display: flex; gap: 44px; padding-top: 24px; border-top: 1px solid var(--live-border-soft); width: 100%; max-width: 560px; }
.hero-live__metric { display: flex; flex-direction: column; gap: 4px; }
.hero-live__metric strong { font-size: 30px; font-weight: 700; color: #FFFFFF; letter-spacing: -.02em; }
.hero-live__metric span { font-size: 13px; color: var(--live-text-3); }
.hero-live__demo { position: relative; display: flex; justify-content: flex-end; padding: 30px 0 58px; }
.hero-live__integrations { border-top: 1px solid var(--live-border-soft); }
.hero-live__integrations-inner { display: flex; align-items: center; gap: 34px; padding: 22px 0 30px; flex-wrap: wrap; }
.hero-live__integrations-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--live-label); white-space: nowrap; }
.hero-live__integrations-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-live__float { position: absolute; z-index: 2; }
.hero-live__float--a { left: -10px; top: 40px; }
.hero-live__float--b { left: -20px; bottom: 60px; }

/* Chips reutilizables (hero live + 404) */
.live-chip { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 10px; border: 1px solid var(--live-border); border-radius: 999px; background: rgb(255 255 255 / .04); font-size: 13px; font-weight: 600; color: var(--live-text-1); }
.live-chip__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live-accent); flex-shrink: 0; }
.live-chip--outline { padding: 9px 18px; border: 1px solid var(--live-border); color: var(--live-text-2); font-weight: 500; background: transparent; }
a.live-chip--outline:hover { border-color: var(--live-accent); color: #FFFFFF; }

/* Tarjeta de chat / asistente (hero live + 404) */
.live-chat-card { position: relative; width: 100%; max-width: 430px; background: #FFFFFF; border-radius: 24px; padding: 22px; box-shadow: 0 26px 60px rgb(0 0 0 / .4); }
.live-chat-card__header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--site-border); }
.live-chat-card__header img { display: block; border-radius: 8px; }
.live-chat-card__header strong { display: block; font-size: 14px; color: var(--site-text); }
.live-chat-card__header small { font-size: 12px; color: var(--site-caption); }
.live-chat-card__badge { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #F1FBCB; color: #5E7A00; font-size: 11px; font-weight: 700; white-space: nowrap; }
.live-chat-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 6px; }
.live-bubble { margin: 0; max-width: 82%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.45; }
.live-bubble--in { align-self: flex-start; max-width: 78%; border-radius: 16px 16px 16px 4px; background: var(--site-bg); border: 1px solid var(--site-border); color: var(--site-text); }
.live-bubble--out { align-self: flex-end; background: var(--live-dark); color: #FFFFFF; }
.live-bubble--cta { align-self: flex-end; display: flex; align-items: center; gap: 12px; background: var(--live-accent); padding: 12px 14px; }
.live-bubble--cta strong { display: block; font-size: 13px; color: #1C2024; }
.live-bubble--cta small { font-size: 12px; color: #4C5A00; }
.live-bubble__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #1C2024; color: var(--live-accent); font-size: 15px; flex-shrink: 0; }
.live-bubble--typing { align-self: flex-start; display: flex; align-items: center; gap: 6px; background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 16px 16px 16px 4px; max-width: none; width: fit-content; }
.live-bubble--typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #A9B2BA; }

.live-float-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--live-surface); border: 1px solid var(--live-border-soft); box-shadow: 0 18px 40px rgb(0 0 0 / .35); text-decoration: none; }
.live-float-card strong { display: block; font-size: 13px; color: #FFFFFF; }
.live-float-card small { font-size: 12px; color: var(--live-text-3); }
.live-float-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(205 242 61 / .14); color: var(--live-accent); font-size: 16px; flex-shrink: 0; }
.live-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.live-wave i { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--live-accent); font-style: normal; }
.live-wave--lg { height: 56px; gap: 5px; }
.live-wave--lg i { width: 7px; background: rgb(255 255 255 / .18); }

/* Página 404 */
.error-404 { position: relative; overflow: hidden; background: var(--live-dark); color: var(--site-dark-text); margin-top: -120px; padding: calc(70px + 120px) 0 60px; }
.error-404__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: center; }
.error-404__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.error-404__numeral { display: flex; align-items: center; gap: 18px; }
.error-404__numeral span:first-child { font-size: clamp(64px, 9vw, 112px); line-height: .9; font-weight: 800; letter-spacing: -.05em; color: var(--live-accent); }
.error-404__copy h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: #FFFFFF; }
.error-404__lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--live-text-2); }
.error-404__routes { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 640px; padding-top: 26px; border-top: 1px solid var(--live-border-soft); }
.error-404__routes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.error-404__route { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--live-surface); border: 1px solid var(--live-border-soft); color: #FFFFFF; }
.error-404__route:hover { background: var(--live-surface-hover); }
.error-404__route strong { display: block; font-size: 14px; font-weight: 600; }
.error-404__route small { font-size: 12px; color: var(--live-text-3); }
.error-404__route span[aria-hidden] { color: var(--live-accent); font-size: 16px; flex-shrink: 0; }
.error-404__assistant { position: relative; display: flex; flex-direction: column; gap: 18px; }
.error-404__assistant-card { display: flex; flex-direction: column; gap: 16px; max-width: none; }
.error-404__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.error-404__chips .live-chip--outline { padding: 9px 14px; font-size: 12.5px; border-color: var(--site-border); color: var(--site-caption); }
.error-404__chips .live-chip--outline:hover { border-color: var(--site-accent); color: var(--site-text); }
.error-404__search { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--site-bg); border: 1px solid var(--site-border); }
.error-404__search input { flex: 1; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--site-text); outline: none; }
.error-404__search button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-ink); border: none; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.error-404__diagnostic { position: relative; align-items: center; }
.error-404__diagnostic > span[aria-hidden] { margin-left: auto; color: var(--live-accent); font-size: 16px; }

/* Antetítulo compartido de las secciones "Conversación viva" del cuerpo del home */
.eyebrow-live { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--live-text-2); }
.steps .eyebrow-live { color: var(--live-label); }

/* Scroll-reveal genérico — el estado oculto solo existe con JS activo
   (clase .js añadida por site.js), para que el contenido siga siendo
   legible sin JavaScript. Ver prefers-reduced-motion más abajo.

   Se desplaza con la propiedad `translate`, no con `transform`: muchas de las
   piezas que ahora revelan (tarjetas de caso, de artículo, del equipo) ya
   tienen su propio `:hover { transform: translateY(...) }`, y como
   `[data-reveal].is-in` gana en especificidad, un `transform: none` aquí les
   habría anulado el levantamiento al pasar el ratón. `translate` es una
   propiedad independiente y se compone con `transform` en vez de pisarlo. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .58s cubic-bezier(.16, .84, .44, 1), translate .58s cubic-bezier(.16, .84, .44, 1);
}
.js [data-reveal].is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
}

/* Split de titulares por caracteres — reproduce el `effect6` del tema Mokko
   que usa producción (Splitting.js + GSAP + ScrollTrigger) con CSS puro. Los
   valores de partida de cada carácter (escala, desplazamiento, giro y retardo)
   los calcula site.js con la misma fórmula del original y los inyecta como
   custom properties, porque dependen de la posición del carácter dentro de su
   palabra y no se pueden expresar en una hoja de estilos.

   El estado oculto vive en `.cl-char`, que solo existe si el JS ha corrido:
   sin JavaScript el titular es texto normal y visible. Producción, en cambio,
   deja `.content__title { opacity: 0 }` en el CSS y solo JS lo levanta, así
   que allí un fallo de JS deja los titulares invisibles. */
.cl-word { display: inline-block; }
/* Separador entre palabras. Es un elemento y no un espacio del texto porque
   hay titulares que son contenedores flex (los de `.cl-stats`, centrados con
   `display: flex`) y flex descarta los nodos de texto en blanco: las palabras
   salían pegadas. `white-space: pre` impide que el espacio se colapse, y al
   ser inline-block mide un espacio exacto de la fuente y admite el salto de
   línea a su lado. */
.cl-space { display: inline-block; white-space: pre; }
.cl-char {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: translateY(var(--cl-char-y, 0)) rotate(var(--cl-char-rot, 0deg)) scale(var(--cl-char-scale, 1));
  /* Producción mete la opacidad DENTRO del filtro (`blur(12px) opacity(0)`),
     y por eso su desenfoque apenas se percibe: el carácter está transparente
     precisamente cuando está más desenfocado, y cuando ya se ve el desenfoque
     casi ha desaparecido. Aquí van separados y la opacidad entra en el primer
     tercio del recorrido, así que el carácter se hace visible pronto y se le
     ve enfocarse. El radio también sube de 12px a 18px. */
  opacity: 0;
  filter: blur(18px);
  transition:
    transform 1s cubic-bezier(.455, .03, .515, .955) var(--cl-char-delay, 0ms),
    filter 1s cubic-bezier(.455, .03, .515, .955) var(--cl-char-delay, 0ms),
    opacity .34s linear var(--cl-char-delay, 0ms);
}
.cl-word.is-in .cl-char { transform: none; opacity: 1; filter: blur(0px); }
/* Un `filter` distinto de `none` mantiene una capa de composición por cada
   carácter, y un titular largo son decenas. Al acabar la transición se retira
   del todo para no dejar cientos de capas vivas en la página. Se vuelve a
   poner al salir de pantalla, porque entonces el titular tiene que poder
   animarse de nuevo. */
.cl-word.is-done .cl-char { transform: none; opacity: 1; filter: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cl-char { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
}

/* Bento de resultados (2a) */
.bento { padding: 78px 0 84px; }
.bento__header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.bento__title { margin: 0; font-size: clamp(28px, 4vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: var(--site-text); }
.bento__title span { color: var(--live-accent-ink); }
.bento__intro { margin: 0 0 8px; font-size: 18px; line-height: 1.65; color: var(--live-muted-2); }
.bento__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; gap: 20px; }
.bento__cell { border-radius: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.bento__cell--featured { grid-row: span 2; padding: 34px; background: var(--live-dark); }
.bento__cell--photo { border-radius: 20px; overflow: hidden; background: var(--live-panel-bg); margin: 0; }
.bento__cell--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.8); display: block; }
.bento__cell--light { padding: 30px; background: var(--live-light-bg); border: 1px solid var(--live-light-border); }
.bento__cell--lime { padding: 30px; background: var(--live-lime-bg); }
.bento__cell-top { display: flex; align-items: center; justify-content: space-between; }
.bento__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: rgb(205 242 61 / .14); color: var(--live-accent); }
.bento__icon svg { width: 20px; height: 20px; }
.bento__icon--dark { width: 44px; height: 44px; background: #FFFFFF; border: 1px solid var(--live-light-border); color: var(--site-text); }
.bento__cell--lime .bento__icon--dark { border: none; color: var(--live-lime-ink); }
.bento__badge { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--live-border); color: var(--live-text-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.bento__value { display: block; font-size: 78px; line-height: .92; font-weight: 700; letter-spacing: -.04em; color: var(--live-accent); }
.bento__value--dark { font-size: 46px; line-height: 1; letter-spacing: -.03em; color: var(--site-text); }
.bento__label { margin: 12px 0 0; font-size: 19px; font-weight: 600; color: #FFFFFF; }
.bento__label--dark { margin-top: 8px; font-size: 15px; color: var(--site-text); }
.bento__description { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--live-text-3); }
.bento__description--dark { font-size: 13.5px; color: var(--live-muted-2); }
.bento__cell--lime .bento__description--dark { color: var(--live-lime-ink); }
.bento__progress { display: flex; flex-direction: column; gap: 8px; }
.bento__progress-track { height: 8px; border-radius: 5px; background: rgb(255 255 255 / .1); overflow: hidden; }
.bento__progress-fill { width: 0; height: 100%; background: var(--live-accent); }
@media (prefers-reduced-motion: no-preference) {
  .bento__progress-fill { transition: width .8s ease; }
}
.bento__progress-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--live-label); }

/* Paso a paso (2b) */
.steps { padding: 78px 0 84px; background: var(--live-dark); color: var(--site-dark-text); }
.steps__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 52px; }
.steps__title { margin: 0; font-size: clamp(26px, 4vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: #FFFFFF; max-width: 720px; }
.steps__accent { color: var(--live-accent); }
.steps__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps__grid::before { content: ""; position: absolute; left: 60px; right: 60px; top: 58px; height: 2px; background: repeating-linear-gradient(90deg, rgb(205 242 61 / .5) 0 8px, transparent 8px 18px); }
.step-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 20px; background: var(--live-surface); border: 1px solid var(--live-border-soft); box-sizing: border-box; }
.step-card__top { display: flex; align-items: center; justify-content: space-between; }
.step-card__number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--live-accent); color: var(--live-dark); font-size: 22px; font-weight: 700; }
.step-card__days { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--live-label); }
.step-card__image { margin: 0; height: 150px; border-radius: 14px; overflow: hidden; background: var(--live-dark); }
.step-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; transform: scale(2.6); display: block; }
.step-card h3 { margin: 0; font-size: 21px; font-weight: 700; color: #FFFFFF; letter-spacing: -.01em; }
.step-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--live-text-2); }
.step-card__deliverable { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--live-border-soft); font-size: 13px; color: var(--live-text-1); }
.step-card__deliverable span { color: var(--live-accent); font-size: 14px; }

/* Reseñas + cierre (2c) */
.reviews { padding: 78px 0 70px; background: var(--live-panel-bg); }
.reviews__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 44px; }
.reviews__header h2 { margin: 0; font-size: clamp(26px, 4vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: var(--site-text); max-width: 700px; }
.reviews__arrows { display: flex; align-items: center; gap: 10px; }
.reviews__arrow { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #C4CBD2; background: #FFFFFF; color: var(--site-text); font-size: 16px; cursor: pointer; }
.reviews__arrow--dark { border: none; background: var(--live-dark); color: var(--live-accent); }
.reviews__carousel { position: relative; }
.reviews__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.reviews__track::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; flex: 0 0 min(340px, 85vw); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 20px; background: #FFFFFF; box-sizing: border-box; }
.review-card--featured { flex: 0 0 min(420px, 90vw); gap: 28px; padding: 38px; background: var(--live-dark); }
.review-card__quote-mark { font-size: 44px; line-height: 1; color: var(--live-accent); font-weight: 700; }
.review-card__stars { display: flex; align-items: center; gap: 4px; color: var(--live-accent-ink); font-size: 15px; }
.review-card--featured .review-card__stars { color: var(--live-accent); }
.review-card__quote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--live-muted-1); }
.review-card--featured .review-card__quote { font-size: 22px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: #FFFFFF; }
.review-card__footer { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--live-light-border); }
.review-card--featured .review-card__footer { gap: 14px; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .12); }
.review-card__footer strong { display: block; font-size: 14px; font-weight: 700; color: var(--site-text); }
.review-card__footer span { font-size: 12.5px; color: var(--live-text-3); }
.review-card--featured .review-card__footer strong { font-size: 15px; color: #FFFFFF; }
.review-card--featured .review-card__footer span { font-size: 13px; }
.review-card__badge { margin-left: auto; padding: 8px 14px; border-radius: 999px; background: rgb(205 242 61 / .14); color: var(--live-accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.reviews__progress { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.reviews__progress-track { flex: 1; height: 3px; border-radius: 2px; background: #D5DBE1; overflow: hidden; }
.reviews__progress-fill { width: 0; height: 100%; background: var(--site-text); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .reviews__progress-fill { transition: width .3s ease; }
}
.reviews__counter { font-size: 13px; color: var(--live-text-3); white-space: nowrap; }

/* Cierre oscuro exclusivo del home "Conversación viva" — no usa renderClosingCta() */
.live-closing { position: relative; overflow: hidden; background: var(--live-dark); padding: 64px 0 72px; text-align: center; }
.live-closing__halo { position: absolute; left: 50%; top: -140px; transform: translateX(-50%); width: 760px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(205 242 61 / .16), rgb(205 242 61 / 0) 70%); }
.live-closing__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.live-closing__mark { color: var(--live-accent); }
.live-closing__mark svg { width: 52px; height: 52px; }
.live-closing__title { margin: 0; font-size: clamp(30px, 5vw, 50px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: #FFFFFF; max-width: 900px; }
.live-closing__accent { color: var(--live-accent); }
.live-closing__lead { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--live-text-2); }
.live-closing .hero-live__ctas { justify-content: center; margin-top: 6px; }
.live-closing__trust { margin: 0; font-size: 13px; color: var(--live-label); }

@media (max-width: 900px) {
  .bento__header { grid-template-columns: 1fr; align-items: flex-start; gap: 20px; }
  .steps__header, .reviews__header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bento__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento__cell--featured { grid-row: auto; }
  .bento__cell--photo { display: none; }
  .steps__grid { grid-template-columns: 1fr; }
  .steps__grid::before { display: none; }
  .review-card, .review-card--featured { flex: 0 0 88vw; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .bento__grid { grid-template-columns: 1fr 1fr; }
  .bento__cell--featured { grid-column: span 2; grid-row: auto; }
  .steps__grid { grid-template-columns: 1fr 1fr; }
}

/* Marcas que han confiado — franja de sectores bajo el hero */
.marquee-strip { background: var(--live-dark); overflow: hidden; display: flex; flex-direction: column; }
.marquee-strip__inner { display: flex; flex-direction: column; gap: 0; padding: 0; }
.marquee-strip__caption { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--live-text-2); white-space: nowrap; flex-shrink: 0; padding: 24px 0; height: 20%; display: flex; align-items: center; }
.marquee-strip__items { display: flex; flex-wrap: nowrap; gap: 10px; animation: marquee-scroll 60s linear infinite; will-change: transform; padding: 24px 0; height: 80%; align-items: center; }
.marquee-strip__chip { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--live-border); color: var(--live-text-1); font-size: 13px; font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.marquee-strip__chip img { display: block; max-height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .85; }

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  50.1% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pausa la animación al hacer hover para mejor interacción */
.marquee-strip:hover .marquee-strip__items {
  animation-play-state: paused;
}

/* El desafío — introducción + cuatro servicios */
.challenge { padding: 78px 0 84px; background: var(--live-panel-bg); }
.challenge__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 40px; }
.challenge__header h2 { margin: 10px 0 0; font-size: clamp(26px, 4vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: var(--site-text); max-width: 620px; }
.challenge__lead { margin: 14px 0 0; max-width: 480px; font-size: 16px; line-height: 1.6; color: var(--live-muted-2); }
.challenge__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.challenge-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; background: var(--site-bg); box-shadow: var(--site-card-shadow); }
.challenge-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--site-text); }
.challenge-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--live-muted-2); flex: 1; }
.challenge-card a { font-size: 13px; font-weight: 700; color: var(--live-accent-ink); }

/* Quiénes somos — franja destacada de cierre institucional */
.about-teaser { position: relative; padding: 88px 0; background: var(--live-dark); color: #FFFFFF; text-align: center; background-size: cover; background-position: center; }
.about-teaser::before { content: ""; position: absolute; inset: 0; background: rgb(28 32 36 / .78); }
.about-teaser__inner { position: relative; max-width: 760px; margin: 0 auto; }
.about-teaser__title { margin: 0 0 20px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--live-text-1); }
.about-teaser__overlay { margin: 0; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.35; letter-spacing: -.01em; font-weight: 600; }
.about-teaser__overlay strong { color: var(--live-accent); font-weight: 700; }

/* Más que un aliado — capacidades destacadas */
.capabilities-live { padding: 78px 0 84px; }
.capabilities-live__header { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.capabilities-live__header h2 { margin: 10px 0 12px; font-size: clamp(26px, 4vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: var(--site-text); }
.capabilities-live__header p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--live-muted-2); }
.capabilities-live__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.capability-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; border: 1px solid var(--site-border); }
.capability-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--site-text); }
.capability-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--site-caption); flex: 1; }
.capability-card a { font-size: 13px; font-weight: 700; color: var(--live-accent-ink); }

/* Historias de éxito — teaser del home, alimentado con casos reales */
.stories-listing { padding: 64px 0 90px; background: var(--live-panel-bg); }

@media (max-width: 900px) {
  .marquee-strip__inner { flex-direction: column; gap: 14px; }
  .challenge__header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .challenge__grid { grid-template-columns: 1fr; }
  .capabilities-live__header { text-align: left; }
}

/* ===================================================================
 * Cupperlab — Home hero (piloto de tema, ver themes/cupperlab/theme.json)
 * Prefijo cl- para no chocar con las reglas de Ainoa de arriba.
 * =================================================================== */
body.cl-theme { --font: 'Montserrat', system-ui, sans-serif; background: var(--cl-bg); }
/* Contenedor principal: producción usa `min(100%, 1400px)` de ancho de
   CONTENIDO, sin padding horizontal, centrado (medido: en un viewport de
   1600px el contenido va de 100 a 1500).
   El max-width incluye el padding (border-box), así que se suma el padding
   al tope para que en pantallas anchas el contenido mida 1400 exactos y en
   pantallas estrechas el padding siga protegiendo los bordes — sin saltos
   ni media query. */
body.cl-theme .site-container {
  max-width: calc(var(--cl-page-max) + 2 * var(--cl-space-5));
  padding: 0 var(--cl-space-5);
}

/* Header "cristal" adaptativo — replica el real de cupperlab.com
   (clase .header-glass-cupper de producción): la píldora del header ya
   flota (ver .site-header__inner arriba); aquí solo se ajusta su opacidad/
   blur y el color de la navegación según qué sección quede detrás,
   alternado por IntersectionObserver (ver script en index.php). */
body.cl-theme .site-header__inner {
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background .5s ease-in-out, border-color .5s ease-in-out, box-shadow .5s ease-in-out;
}
/* Solo los enlaces de primer nivel (hijos directos de .site-nav, o el
   trigger de un dropdown) siguen el color claro/oscuro de la píldora — los
   enlaces DENTRO de un dropdown (.site-nav__dropdown-link) vivan sobre un
   panel blanco propio y siempre son de color oscuro, sin importar el modo
   del header (ver body.cl-theme .site-nav__dropdown-link más abajo). */
body.cl-theme .site-nav > a, body.cl-theme .site-nav__trigger { color: #41516c; transition: color .4s ease-in-out; }
body.cl-theme .site-nav > a:hover, body.cl-theme .site-nav__trigger:hover,
body.cl-theme .site-nav > a[aria-current="page"],
body.cl-theme .site-nav__trigger[aria-current="page"] { color: var(--cl-accent, #FF5F3F) !important; border-bottom: none; }
body.cl-theme .site-header__inner.cl-header--dark {
  background: rgba(8, 48, 77, .31);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, .3);
}
body.cl-theme .site-header__inner.cl-header--dark .site-nav > a,
body.cl-theme .site-header__inner.cl-header--dark .site-nav__trigger { color: #ffffff; }
body.cl-theme .site-header__inner.cl-header--dark .site-nav > a:hover,
body.cl-theme .site-header__inner.cl-header--dark .site-nav__trigger:hover,
body.cl-theme .site-header__inner.cl-header--dark .site-nav > a[aria-current="page"],
body.cl-theme .site-header__inner.cl-header--dark .site-nav__trigger[aria-current="page"] { color: var(--cl-accent, #FF5F3F) !important; }

/* Medidas tomadas directo de producción (cupperlab.com): 60px de alto,
   radio 20px (no píldora completa como el header de Ainoa), casi ancho
   completo con 30px de margen a cada lado, logo ~34px, texto en
   Montserrat 16px/500 — ver hallazgos de fidelidad del header. */
body.cl-theme .site-header .site-container.site-header__inner {
  max-width: var(--cl-page-max);
  width: calc(100% - 60px);
  height: 60px;
  padding: 0 20px;
  border-radius: 20px;
}
body.cl-theme .site-logo img { height: 34px; }
body.cl-theme .site-nav { font-family: 'Montserrat', system-ui, sans-serif; font-size: 16px; font-weight: 500; }
body.cl-theme .lang-switch { font-family: 'Montserrat', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--cl-accent); }
body.cl-theme .site-header__socials { display: flex; align-items: center; gap: 14px; margin-right: 4px; }
body.cl-theme .site-header__social { color: #ffffff; display: flex; transition: color .4s ease-in-out, transform .2s ease; }
body.cl-theme .site-header__inner:not(.cl-header--dark) .site-header__social { color: #41516c; }
body.cl-theme .site-header__social:hover { color: var(--cl-accent) !important; transform: translateY(-2px); }
body.cl-theme .site-nav__dropdown { background: #FFFFFF; border-color: rgba(0,0,0,.08); }
body.cl-theme .site-nav__dropdown-link { color: var(--cl-navy); font-family: var(--cl-font-body); }
body.cl-theme .site-nav__dropdown-link:hover { color: var(--cl-btn-bg, var(--cl-accent)); }

/* Footer real de producción: fondo claro (hereda #F5F5F5 de la página, sin
   color propio), texto negro, sin banner de CTA ni columnas de enlaces —
   solo marca+tagline, LinkedIn/Email como píldoras, y la barra legal. */
body.cl-theme .cl-footer {
  background: var(--cl-bg);
  padding: 48px 0 32px;
}
body.cl-theme .cl-footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 50px; background: #ffffff; border-radius: 30px;
}
body.cl-theme .cl-footer__pill {
  font-family: var(--cl-font-heading); font-size: 13px; font-weight: 600; color: #000000;
  border: 1px solid #000000; border-radius: 40px; padding: 7px 20px; transition: all .2s ease; flex: none;
}
body.cl-theme .cl-footer__pill:hover { background: #000000; color: #ffffff; }
/* Grupo ícono + texto, dentro de la tarjeta blanca de .cl-footer__top
   (ver hallazgo de fidelidad — el fondo blanco es de toda la fila, no de
   un card angosto aparte). */
body.cl-theme .cl-footer__card {
  display: flex; align-items: center; gap: 0;
  border: 1px solid black; border-radius: 20px; overflow: hidden;
}
body.cl-theme .cl-footer__mark {
  width: 120px; height: 100px; align-self: center; padding: 0 20px;
  border-right: 1px solid rgba(0, 0, 0, .85);
}
body.cl-theme .cl-footer__card-text { padding: 14px 24px; }
body.cl-theme .cl-footer__copyright {
  font-family: var(--cl-font-heading); font-size: 14px; font-weight: 700; color: #000000;
  margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgb(0 0 0);
}
body.cl-theme .cl-footer__tagline {
  font-family: var(--cl-font-body); font-size: 12px; color: #000000; margin: 0; max-width: 32ch;
}
body.cl-theme .cl-footer__legal-row {
  display: flex; justify-content: center;
  padding-top: 0; margin-top: 10px; border-top: 0px;
}
body.cl-theme .cl-footer__legal-row .site-footer__legal {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center;
  font-family: var(--cl-font-body); font-size: 13px;
}
body.cl-theme .cl-footer__legal-row .site-footer__legal a { color: #000000; }
body.cl-theme .cl-footer__legal-row .lang-switch { color: var(--cl-accent); font-weight: 600; }
@media (max-width: 700px) {
  body.cl-theme .cl-footer__top { flex-direction: column; }
  body.cl-theme .cl-footer__card { order: -1; }
}

:root {
  --cl-dark: #031825;
  --cl-navy: #002F40;
  --cl-accent: #FF5F3F;
  --cl-accent-ink: #FFFFFF;
  --cl-cyan: #42BDDE;
  --cl-text: #403F41;
  --cl-bg: #F5F5F5;
  /* Ancho máximo del contenedor principal, medido en producción: la píldora
     del header y las secciones oscuras topan en 1400px y se centran; por
     debajo de eso ceden al ancho de viewport menos su margen. */
  --cl-page-max: 1400px;
  /* Color del kicker y de los titulares sobre sección oscura en producción:
     un gris azulado, no blanco puro. */
  --cl-kicker-muted: #99ACB2;
  /* Color real del fondo de los botones en producción (--color-primary
     medido en vivo: #E9561E), distinto del acento #FF5F3F usado en los
     spans de color de los titulares — son dos naranjas distintos, no un
     error de medición. */
  --cl-btn-bg: #E9561E;
  --cl-btn-ink: #FFFFFF;
  --cl-btn-hover-bg: #FFFFFF;
  --cl-btn-hover-ink: #262626;
  /* Radio de tarjeta real de producción (contenedores Elementor: 20px en
     absolutamente todas las secciones del home, medido en el _elementor_data
     real) — no se deriva de la escala áurea, se respeta literal. */
  --cl-radius-card: 20px;
  /* Transición de escala de grises → color medida en producción
     (`filter 1s cubic-bezier(.645,.045,.355,1)` en el carrusel del equipo,
     el único sitio donde prod la usa). Se aplica también al carrusel de
     casos del home y a las tarjetas de casos, que en local llevan el mismo
     efecto: una única curva para que los tres se sientan igual. */
  --cl-ease-grayscale: cubic-bezier(.645, .045, .355, 1);
  --cl-dur-grayscale: 1s;
  /* Tipografía real de producción: Montserrat en todo (body, h1, botones —
     no hay una segunda familia para títulos, ver hallazgo de fidelidad). */
  --cl-font-heading: 'Montserrat', system-ui, sans-serif;
  --cl-font-body: 'Montserrat', system-ui, sans-serif;

  /* --- Sistema de proporción áurea (φ ≈ 1.618) ---
     Tamaños de fuente: escala de "medio paso" alternando √φ (~1.272) y φ
     (~1.618) desde una base de 16px — 16 → 20 (lead real medido) → 26 → 33
     → 42 → 68 (cerca del h1 real de producción, ~73px vía clamp) → 86.
     Espaciados y radios: sucesión de Fibonacci (converge a φ), la forma
     práctica y habitual de aplicar proporción áurea a un sistema de espacios
     con números enteros en vez de decimales irracionales. */
  --cl-ratio: 1.618;
  --cl-fs-xs: 10px;
  --cl-fs-sm: 13px;
  --cl-fs-base: 16px;
  --cl-fs-md: 20px;
  --cl-fs-lg: 26px;
  --cl-fs-xl: 33px;
  --cl-fs-2xl: 42px;
  --cl-fs-3xl: 68px;
  --cl-fs-4xl: 86px;

  --cl-space-1: 5px;
  --cl-space-2: 8px;
  --cl-space-3: 13px;
  --cl-space-4: 21px;
  --cl-space-5: 34px;
  --cl-space-6: 55px;
  --cl-space-7: 89px;
  --cl-space-8: 144px;

  --cl-radius-sm: 8px;
  --cl-radius-md: 13px;
  --cl-radius-lg: 21px;
  --cl-radius-xl: 34px;
}
/* Marco blanco real de producción: el hero no toca el fondo de la página,
   vive dentro de un contenedor blanco con 10px de margen visible en los
   cuatro lados (medido en vivo: frameLeft/Top/Right/Bottom = 10px) — esto
   es lo que se percibe como "borde blanco" del hero. */
.cl-hero-frame {
  background: #FFFFFF;
  padding: 10px;
  margin-top: -100px;
}
.cl-hero {
  position: relative;
  overflow: hidden;
  background: var(--cl-dark);
  border-radius: var(--cl-radius-card);
  padding: calc(100px + var(--cl-space-6)) 0 var(--cl-space-7);
}
.cl-hero__media { position: absolute; inset: 0; z-index: 0; }
.cl-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-hero__overlay { position: absolute; inset: 0; background: var(--cl-dark); opacity: .5; }
.cl-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  /* Reparto áureo real: 61.8% / 38.2% (var(--cl-ratio) no sirve como track-size sin unidad) */
  grid-template-columns: 1.618fr 1fr;
  gap: var(--cl-space-6);
  align-items: start;
}
.cl-hero--no-form .cl-hero__inner { grid-template-columns: 1fr; max-width: 720px; }
.cl-hero__title {
  font-family: var(--cl-font-heading);
  /* 5.1vw calibrado contra producción: 73.24px reales a 1440px de viewport */
  font-size: clamp(var(--cl-fs-2xl), 5.1vw, var(--cl-fs-4xl));
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: 600;
}
.cl-hero__title-accent { color: var(--cl-cyan); display: block; }
.cl-hero__lead {
  font-family: var(--cl-font-body);
  color: #C9D3D8;
  font-size: var(--cl-fs-md);
  line-height: 1.6;
  margin-top: var(--cl-space-4);
  max-width: 46ch;
}
/* Botón real de producción (.btn.btn--primary.btn--md): 45px de alto,
   8.25px/24px de padding, radio 40px, fuente 17.6px — y la animación real
   de hover, que NO es un simple filter/translateY: es un relleno que sube
   desde abajo (::before, forma de domo que se aplana al 100%) seguido de
   un segundo pase (::after) que entra rápido con retardo para tapar la
   costura, mientras el texto/ícono hacen un "flip" vertical con keyframes
   (MoveScaleUpInitial/End reales del tema, medidos en mokko-main.css). */
.cl-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-space-2);
  height: 45px;
  /* Producción: 17.6px con peso 400 (no 700) — todos los botones del sitio
     comparten exactamente estas medidas, no hay variantes de tamaño. */
  padding: 0 24px; border-radius: 40px; font-weight: 400; font-size: 17.6px;
  font-family: var(--cl-font-heading); border: none; cursor: pointer; margin-top: var(--cl-space-5);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease-in-out;
}
.cl-button:active { transform: translateY(4px); }
.cl-button__text,
.cl-button__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.cl-button__icon img { width: 15px; height: 15px; display: block; }
.cl-button::before,
.cl-button::after {
  content: "";
  position: absolute;
  left: -4pt;
  top: 0;
  width: calc(100% + 8pt);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--cl-btn-hover-bg);
}
.cl-button::before {
  border-radius: 100% 100% 0 0;
  transform: translate3d(0, 100%, 0);
  transition: border-radius .5s cubic-bezier(.1,0,.3,1), transform 0s cubic-bezier(.1,0,.3,1);
}
.cl-button::after {
  transform: translate3d(0, -105%, 0);
  transition: transform .4s cubic-bezier(.1,0,.3,1);
}
.cl-button:hover::before {
  border-radius: 0;
  transform: translateZ(0) scaleX(1);
  transition: border-radius .5s cubic-bezier(.1,0,.3,1), transform .2s cubic-bezier(.1,0,.3,1);
}
.cl-button:hover::after {
  transform: translateZ(0);
  transition-delay: .4s;
  transition-duration: .05s;
  transition-timing-function: linear;
}
.cl-button:hover .cl-button__text,
.cl-button:hover .cl-button__icon {
  animation: cl-btn-move-up-initial .3s forwards, cl-btn-move-up-end .3s .2s forwards;
  color: var(--cl-btn-hover-ink);
}
.cl-button:hover .cl-button__icon img { filter: brightness(0) saturate(100%); }
@keyframes cl-btn-move-up-initial {
  to { opacity: 0; transform: translate3d(0, -105%, 0) scaleY(2); }
}
@keyframes cl-btn-move-up-end {
  0% { opacity: 0; transform: translate3d(0, 100%, 0) scaleY(2); }
  to { opacity: 1; transform: translateZ(0); }
}
.cl-button--accent { background: var(--cl-btn-bg); color: var(--cl-btn-ink); }
.cl-button--outline { background: transparent; color: var(--cl-navy); border: 2px solid var(--cl-navy); }
.cl-button--outline::before, .cl-button--outline::after { background: var(--cl-navy); }
.cl-button--outline:hover .cl-button__text, .cl-button--outline:hover .cl-button__icon { color: #FFFFFF; }
.cl-button--outline:hover .cl-button__icon img { filter: none; }
.cl-button--outline-light { background: transparent; color: #FFFFFF; border: 2px solid rgba(255,255,255,.4); }
.cl-button--outline-light::before, .cl-button--outline-light::after { background: #FFFFFF; }
.cl-button--outline-light:hover .cl-button__text, .cl-button--outline-light:hover .cl-button__icon { color: var(--cl-navy); }
/* Variante compacta: CTAs secundarias dentro de tarjetas (dolores, apps) */
/* `--sm` se queda como no-op: en producción NO hay botones pequeños, todos
   miden lo mismo. Se conserva el selector (en vez de borrarlo) porque varias
   plantillas y bloques ya lo emiten, y así no hay que tocarlas una a una
   para que hereden el tamaño único. */
.cl-button--sm { height: 45px; padding: 0 24px; font-size: 17.6px; }

/* Badge "kicker" (ícono + texto) real, repetido arriba de casi todos los
   titulares de sección — mismo símbolo Cupperlab en todas partes. */
/* Medidas reales de producción, verificadas en el home y en Nuestro ADN:
   25px con weight 300 (no 13px/600) y color --cl-text; sobre sección oscura
   el color es el gris azulado --cl-kicker-muted, no blanco puro. */
.cl-kicker {
  display: inline-flex; align-items: center; gap: var(--cl-space-2);
  font-family: var(--cl-font-heading); font-weight: 300; font-size: 25px;
  color: var(--cl-text); text-decoration: none; margin-bottom: var(--cl-space-3);
}
.cl-kicker img { width: 14px; height: 14px; display: block; }
.cl-section-title--light + .cl-kicker,
.cl-kicker + .cl-section-title--light { color: #FFFFFF; }
section[data-header-mode] .cl-kicker { color: var(--cl-text); }
/* Sobre sección oscura el kicker va en blanco. La regla de arriba
   (`section[data-header-mode]`) tiene más especificidad que un simple
   `.cl-pillars .cl-kicker`, así que sin este selector equivalente el kicker
   quedaba en #403F41 sobre #031825: texto oscuro sobre fondo oscuro.
   (En producción ese kicker es #99ACB2; aquí se usa blanco a petición.) */
section[data-header-mode="dark"] .cl-kicker,
.cl-pillars .cl-kicker { color: #FFFFFF; }
.cl-section-title__accent { color: var(--cl-accent); }
.cl-hero__form {
  background: #FFFFFF;
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-5) var(--cl-space-5);
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}
.cl-hero__form-title {
  /* 22px/600 real, medido en el widget ms_animated_headline del formulario */
  font-family: var(--cl-font-heading); font-weight: 600; color: var(--cl-navy);
  font-size: 22px; line-height: 1.1; text-align: center; margin-bottom: var(--cl-space-2);
}
.cl-hero__form-lead {
  font-family: var(--cl-font-body); color: #6B6A6C; font-size: var(--cl-fs-sm);
  text-align: center; margin: 0 0 var(--cl-space-4);
}
/* Campos reales medidos en producción: fondo/borde gris-azulado
   translúcido (no crema), radio 20px (igual que las tarjetas), padding
   bajo (5px 14px, mucho menos alto que lo que teníamos), 15px de fuente. */
.cl-form-field { margin-bottom: var(--cl-space-3); }
.cl-form-field label {
  display: block; font-family: var(--cl-font-heading); font-weight: 600;
  font-size: 16px; color: var(--cl-text); margin-bottom: var(--cl-space-2);
}
.cl-form-field input {
  width: 100%; padding: 5px 14px; border-radius: var(--cl-radius-card); border: 1px solid rgb(153, 172, 178);
  font-family: var(--cl-font-body); font-size: 15px; background: rgba(153, 172, 178, .25); color: var(--cl-text);
}
.cl-form-field input::placeholder { color: #7C8A90; }
.cl-hero__form-consent {
  display: flex; align-items: flex-start; gap: var(--cl-space-2); margin: var(--cl-space-3) 0;
  font-family: var(--cl-font-body); font-size: 12.5px; color: #6B6A6C; line-height: 1.4;
}
.cl-hero__form-consent input { margin-top: 3px; flex: none; }
.cl-hero__form-consent a { color: var(--cl-btn-bg); }
.cl-hero__form-submit { width: 100%; margin-top: var(--cl-space-2); }
.cl-hero__form-note {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-xs); color: #9A9A9A;
  text-align: center; margin: var(--cl-space-3) 0 0;
}
@media (max-width: 860px) {
  .cl-hero__inner { grid-template-columns: 1fr; }
  .cl-hero { padding: var(--cl-space-6) 0 var(--cl-space-6); }
}

/* --- Tipografía / botones compartidos del resto de secciones ---
   H2 real de producción: 40-50px según sección, siempre weight 600
   (medido en vivo a 1440px: "Vende más..." 40px, "Nueva integrante"/
   "Nuestro ADN" 50px) — no se deriva de la escala áurea de fuentes, se
   respeta el rango real medido. */
.cl-section-title {
  font-family: var(--cl-font-heading); font-weight: 600; color: var(--cl-navy);
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.15; max-width: 46ch;
}
.cl-section-title--center { margin: 0 auto var(--cl-space-6); text-align: center; }
.cl-section-title--light { color: #FFFFFF; }
/* Variante reducida: algunos titulares de sección en producción son 32px/500
   en vez de 50px/600 (p. ej. "Contenido con ganancia de información"). */
.cl-section-title--sm { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; max-width: 60ch; }

/* Título de tarjeta real de producción — 25px, weight 300 (light, no
   bold), line-height 30px (medido en pain/apps/methodology/benefits por
   igual, misma clase ".p1" del tema en los cuatro). */

/* --- Dolores / preguntas --- */
.cl-pain { padding: var(--cl-space-7) 0; background: var(--cl-bg); }
.cl-pain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-4); }
.cl-pain__card {
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: 30px; box-shadow: 0 8px 24px rgb(3 24 37 / .06);
}
.cl-pain__question {
  font-family: var(--cl-font-heading); font-weight: 300; font-size: 25px; line-height: 30px; color: #000000; margin: 0 0 var(--cl-space-3);
}

/* --- Marketplace de apps --- */
.cl-apps { padding: var(--cl-space-7) 0; background: #FFFFFF; }
/* `justify-content` solo alinea el icono y el texto DENTRO del badge, no
   centra el badge en su columna: para eso hacen falta los márgenes auto,
   igual que en .cl-stats. */
.cl-apps .cl-kicker { display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
.cl-apps__headline { text-align: center; margin: 0 auto var(--cl-space-2); }
.cl-apps__headline-sub {
  text-align: center; font-family: var(--cl-font-heading); font-weight: 600; color: var(--cl-accent);
  font-size: var(--cl-fs-md); margin: 0 0 var(--cl-space-4);
}
.cl-apps__intro {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); color: var(--cl-text);
  max-width: 62ch; margin: 0 auto var(--cl-space-6); text-align: center;
}
.cl-apps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-4); }
.cl-apps__card {
  /* Fondo real: blanco (no gris), medido en el _elementor_data real */
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: 30px;
  box-shadow: 0 8px 24px rgb(3 24 37 / .06); display: flex; flex-direction: column;
}
/* Los logos son apaisados (p. ej. 300x57). Forzarlos a una caja cuadrada de
   96px los dejaba a 96x18 — diminutos. Producción los pinta a 48px de alto
   con el ancho natural. */
.cl-apps__card-logo {
  width: auto; height: 48px; max-width: 100%;
  object-fit: contain; object-position: left center;
  margin-bottom: var(--cl-space-3);
}
.cl-apps__card--featured { background: var(--cl-navy); color: #fff; grid-column: span 3; }
.cl-apps__card--featured h3, .cl-apps__card--featured p { color: #fff; }
.cl-apps__card h3 {
  font-family: var(--cl-font-heading); font-weight: 300; font-size: 25px; line-height: 30px; color: #000000; margin: 0 0 var(--cl-space-2);
}
.cl-apps__card p { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: var(--cl-text); margin: 0 0 var(--cl-space-3); flex: 1; }
.cl-apps__card--featured p { color: #D9E3E8; }

/* --- Pilares: lista numerada con divisores reales, no tarjetas ---
   (medido en el _elementor_data real: cada fila tiene border-bottom 1px,
   la última no lleva borde) */
/* En producción NO es una banda a todo lo ancho: es una tarjeta redondeada
   dentro del contenedor principal (1400px, #031825, radio 20px, padding
   50px), igual patrón que los bloques `cl-block--bg-dark`. */
.cl-pillars {
  background: var(--cl-dark);
  max-width: var(--cl-page-max); margin-inline: auto;
  border-radius: var(--cl-radius-card); padding: 50px;
}
/* El bloque ya aporta los 50px; el contenedor interior no debe sumar más. */
.cl-pillars > .site-container { padding: 0; max-width: none; }
@media (max-width: 860px) {
  .cl-pillars { margin-inline: 10px; padding: var(--cl-space-5) var(--cl-space-4); }
}
.cl-pillars .cl-section-title { margin-bottom: var(--cl-space-2); }
.cl-pillars__eyebrow {
  font-family: var(--cl-font-body); font-weight: 300; color: #C9D3D8; font-size: var(--cl-fs-md);
  margin: 0 0 var(--cl-space-6);
}
.cl-pillars__list { display: flex; flex-direction: column; }
.cl-pillars__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--cl-space-5);
  /* Divisor real: cian de marca, no blanco translúcido */
  padding: 40px 0; border-bottom: 1px solid var(--cl-cyan);
}
.cl-pillars__row--last { border-bottom: none; }
.cl-pillars__number {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-lg); font-weight: 300; color: rgba(255,255,255,.4);
}
.cl-pillars__body h3 { font-family: var(--cl-font-heading); font-weight: 600; font-size: var(--cl-fs-lg); color: #fff; margin: 0 0 var(--cl-space-2); }
.cl-pillars__body p { font-family: var(--cl-font-body); font-weight: 400; font-size: var(--cl-fs-base); color: #C9D3D8; margin: 0; max-width: 56ch; }
.cl-pillars__row .cl-button { margin-top: 0; white-space: nowrap; }

/* --- Asistente destacado --- */
.cl-assistant { padding: var(--cl-space-7) 0; background: var(--cl-bg); }
.cl-assistant__inner {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--cl-space-6); align-items: center;
}
.cl-assistant__media img { width: 100%; border-radius: var(--cl-radius-card); display: block; }
.cl-assistant__copy h2 {
  font-family: var(--cl-font-heading); font-weight: 600; font-size: clamp(32px, 3.6vw, 50px); color: var(--cl-navy); margin: 0 0 var(--cl-space-4);
}
.cl-assistant__copy > p {
  font-family: var(--cl-font-body); color: var(--cl-text); font-size: var(--cl-fs-base); line-height: 1.5; max-width: 56ch; margin: 0 0 var(--cl-space-4);
}
.cl-assistant__features { list-style: none; margin: 0 0 var(--cl-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--cl-space-2); }
.cl-assistant__features li {
  display: flex; align-items: center; gap: var(--cl-space-2); font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: var(--cl-text);
}
.cl-assistant__card {
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: var(--cl-space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-4); flex-wrap: wrap;
}
.cl-assistant__card p { font-family: var(--cl-font-heading); font-size: var(--cl-fs-md); color: var(--cl-navy); margin: 0; }
.cl-assistant__card strong { color: var(--cl-accent); }
.cl-assistant__card .cl-button { margin-top: 0; }

/* --- Stats: tira de logos de clientes + contadores --- */
.cl-stats { padding: var(--cl-space-7) 0; background: #FFFFFF; }
.cl-stats .cl-kicker, .cl-stats .cl-section-title { justify-content: center; margin-left: auto; margin-right: auto; display: flex; }
/* Tarjetas reales: blancas, padding 10px, ~262x182 (grid de 5, no tira
   angosta) — medido en vivo. */
/* Los logos de cliente del home ya no son una rejilla propia: usan el mismo
   carril que /nuestro-adn (`Blocks::logoStrip`). Aquí solo queda el margen que
   los separa del resto de la sección. */
.cl-stats__logos { margin: var(--cl-space-6) 0; }
.cl-stats__logo-card {
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: 10px;
  box-shadow: 0 8px 24px rgb(3 24 37 / .06);
  display: flex; align-items: center; justify-content: center; aspect-ratio: 262 / 182;
}
.cl-stats__logo-card img { max-height: 88%; max-width: 92%; object-fit: contain; }
.cl-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-4); text-align: center; }
.cl-stats__item {
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  padding: var(--cl-space-5); border-radius: var(--cl-radius-card); background: var(--cl-bg);
}
/* Medido en producción: 50px, weight 600 y en el acento naranja (no 42/800
   en navy). */
.cl-stats__value { font-family: var(--cl-font-heading); font-weight: 600; font-size: 50px; color: var(--cl-accent); }
.cl-stats__label { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: var(--cl-text); }

/* --- Metodología --- */
.cl-methodology { padding: var(--cl-space-7) 0; background: var(--cl-bg); }
.cl-methodology__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--cl-space-5); margin-bottom: var(--cl-space-6); }
.cl-methodology__head .cl-section-title { margin: 0; }
.cl-methodology__lead {
  font-family: var(--cl-font-body); font-weight: 400; font-size: var(--cl-fs-sm); color: var(--cl-text);
  max-width: 40ch; margin: 0; text-align: left;
}
.cl-methodology__body { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--cl-space-4); align-items: stretch; }
.cl-methodology__grid { display: flex; flex-direction: column; gap: var(--cl-space-4); }
/* Padding 30px e icono 100px son las medidas de producción (el icono estaba
   a 42px, menos de la mitad). */
/* Icono a la izquierda y el bloque de texto a su derecha: el icono ocupa la
   columna 1 abarcando las dos filas (título y descripción), así el texto
   queda alineado frente al icono en vez de debajo. No hace falta tocar el
   HTML: el orden del marcado ya es icono → h3 → p. */
.cl-methodology__card {
  background: #fff; border-radius: var(--cl-radius-card); padding: 30px; position: relative; flex: 1;
  display: grid; grid-template-columns: 100px 1fr; gap: var(--cl-space-2) var(--cl-space-5);
  align-content: center;
}
.cl-methodology__icon { width: 100px; height: auto; grid-row: 1 / span 2; align-self: center; }
/* Título en negrita y texto a 16px (antes 300 y 13px): con la disposición en
   dos columnas el texto pequeño dejaba la tarjeta medio vacía. */
.cl-methodology__card h3 { font-family: var(--cl-font-heading); font-weight: 700; font-size: 25px; line-height: 30px; color: var(--cl-navy); margin: 0 0 var(--cl-space-2); }
.cl-methodology__card p { font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 24px; color: var(--cl-text); margin: 0; max-width: 46ch; }
/* Botón de flecha naranja abajo a la derecha, mismo círculo de 50px que los
   canales de contacto. */
.cl-methodology__card-arrow {
  grid-column: 2; justify-self: end; margin-top: var(--cl-space-3);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--cl-btn-bg); display: grid; place-items: center;
  transition: transform .2s ease;
}
.cl-methodology__card-arrow svg { width: 18px; height: 18px; display: block; }
.cl-methodology__card-arrow:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
  /* En móvil el icono vuelve arriba: 100px + texto no caben en fila. */
  .cl-methodology__card { grid-template-columns: 1fr; }
  .cl-methodology__icon { grid-row: auto; }
}

/* Carrusel de casos de éxito real (widget loop-carousel en producción) —
   versión estática con puntos de navegación en vez de un slider JS
   completo, mismo layout visual (foto + kicker + título + flecha). */
.cl-case-carousel { position: relative; border-radius: var(--cl-radius-card); overflow: hidden; background: #FFFFFF; }
.cl-case-carousel__track { position: relative; aspect-ratio: 700 / 875; }
.cl-case-carousel__slide {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden;
  /* 500ms es el `speed` de los dos Swiper del home de producción. */
  transition: opacity .5s ease;
}
.cl-case-carousel__slide.is-active { opacity: 1; visibility: visible; }
/* Solo la foto del slide (hijo directo). Sin el `>` esta regla también
   alcanzaba al símbolo de 16px del kicker y a la flecha, que viven dentro
   del slide, y los estiraba al 100% del slide: el símbolo salía como un
   círculo naranja de 483px tapando la imagen. */
/* Foto en escala de grises que recupera el color al pasar el ratón (mejora
   sobre producción, donde siempre está a color). El foco por teclado también
   la activa, para no dejar fuera a quien no usa ratón. */
.cl-case-carousel__slide > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(100%); transition: filter var(--cl-dur-grayscale) var(--cl-ease-grayscale);
}
.cl-case-carousel__slide:hover > img,
.cl-case-carousel__slide:focus-visible > img { filter: grayscale(0%); }
@media (prefers-reduced-motion: reduce) {
  .cl-case-carousel__slide > img { transition: none; }
}
/* Degradado blanco (antes negro) y más alto, para que el texto respire. */
/* El padding inferior deja hueco para los puntos, que van por debajo del
   título en vez de pegados a él. */
.cl-case-carousel__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--cl-space-6) var(--cl-space-5) calc(var(--cl-space-5) + 22px);
  background: linear-gradient(0deg, #FFFFFF 55%, rgba(255,255,255,.85) 78%, transparent 100%);
}
/* Sobre fondo blanco los textos van en navy, no en blanco. Se cualifica con
   `section[data-header-mode]` para ganarle a la regla genérica del kicker,
   que si no lo dejaría en --cl-text. */
section[data-header-mode] .cl-case-carousel__caption .cl-kicker,
.cl-case-carousel__caption .cl-kicker { color: var(--cl-navy); margin-bottom: var(--cl-space-2); }
.cl-case-carousel__caption h3 { font-family: var(--cl-font-heading); font-weight: 600; font-size: var(--cl-fs-md); color: var(--cl-navy); margin: 0; }
.cl-case-carousel__arrow {
  position: absolute; right: var(--cl-space-3); bottom: var(--cl-space-3); width: 44px; height: 44px; border-radius: 50%;
  background: var(--cl-btn-bg); display: flex; align-items: center; justify-content: center;
}
.cl-case-carousel__arrow img { filter: brightness(0) invert(1); }
/* Más aire: separados del borde y entre sí (antes 13px del borde y 8px de
   separación, quedaban apelotonados contra la esquina y contra el título). */
.cl-case-carousel__dots { position: absolute; left: var(--cl-space-5); bottom: var(--cl-space-5); display: flex; gap: var(--cl-space-3); z-index: 2; }
/* Controles en naranja: el degradado del pie ya es blanco, así que los
   puntos blancos de antes eran invisibles. */
.cl-case-carousel__dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(233,86,30,.35); cursor: pointer; padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.cl-case-carousel__dot:hover { background: rgba(233,86,30,.6); }
.cl-case-carousel__dot.is-active { background: var(--cl-btn-bg); transform: scale(1.15); }
@media (max-width: 860px) {
  .cl-methodology__body { grid-template-columns: 1fr; }
  .cl-methodology__head { flex-direction: column; align-items: flex-start; }
}

/* --- Beneficios --- */
/* Las cards son blancas — sin un fondo gris de sección no se distinguen
   (bug encontrado: no tenían fondo propio y quedaban invisibles sobre
   blanco). Gris real de página: #ebeaea. */
.cl-benefits { padding: var(--cl-space-7) 0; background: #ebeaea; }
.cl-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-space-4); }
.cl-benefits__card {
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: 30px;
  box-shadow: 0 8px 24px rgb(3 24 37 / .06);
}
.cl-benefits__card h3 { font-family: var(--cl-font-heading); font-weight: 300; font-size: 25px; line-height: 30px; color: #000000; margin: 0 0 var(--cl-space-2); }
.cl-benefits__card p { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: var(--cl-text); margin: 0; }

/* --- CTA Conócenos --- */
/* Real: fondo claro (hereda el gris de página, no navy) y dos columnas
   30/70 — kicker+título a la izquierda, texto+botón a la derecha, botón
   a todo el ancho de su columna (medido en vivo: 917px de 938px). */
.cl-about-cta { padding: var(--cl-space-7) 0; }
.cl-about-cta .site-container { display: flex; gap: var(--cl-space-5); align-items: flex-start; }
.cl-about-cta__aside { flex: 0 0 30%; }
.cl-about-cta__main { flex: 1; }
.cl-about-cta .cl-kicker { color: var(--cl-navy); }
.cl-about-cta .cl-section-title { text-align: left; margin: 0; }
.cl-about-cta p {
  font-family: var(--cl-font-body); color: var(--cl-text); font-size: var(--cl-fs-base); max-width: 70ch; margin: 0 0 var(--cl-space-5); line-height: 1.7;
}
.cl-about-cta .cl-button { width: 100%; margin-top: 0; }
@media (max-width: 860px) {
  .cl-about-cta .site-container { flex-direction: column; }
  .cl-about-cta__aside { flex: none; }
}

/* --- CTA final --- */
/* Sección real de dos columnas: formulario de diagnóstico duplicado a la
   izquierda + titular/contacto a la derecha — no es una sola columna
   centrada como se había asumido (medido en vivo: form 620px / copy
   599px lado a lado). */
/* Fondo real: la misma textura del hero (BG-cupperlab.webp) + marca de
   agua del símbolo blanco abajo a la derecha (71% ancho, opacidad baja,
   mix-blend darken) — confirmado en el CSS generado real del post, no a
   ojo. */
.cl-final-cta {
  position: relative; overflow: hidden; padding: var(--cl-space-7) 0; background: var(--cl-dark);
  background-image: url('/assets/video/cupperlab-hero-poster.webp');
  background-repeat: no-repeat; background-size: cover;
}
.cl-final-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/img/cupperlab-simbolo-blanco.svg');
  background-repeat: no-repeat; background-position: bottom right; background-size: 71% auto;
  opacity: .13; mix-blend-mode: darken;
}
.cl-final-cta__inner { position: relative; z-index: 1; }
.cl-final-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-6); align-items: start; }
.cl-final-cta__form { margin-top: 0; }
.cl-final-cta__headline {
  font-family: var(--cl-font-heading); color: #fff; font-weight: 600; font-size: clamp(30px, 3.4vw, 50px); margin: 0 0 var(--cl-space-4); max-width: 20ch;
}
.cl-final-cta__inner h3 {
  font-family: var(--cl-font-heading); color: var(--cl-cyan); font-weight: 600; font-size: var(--cl-fs-lg); margin: 0 0 var(--cl-space-6);
}
.cl-final-cta__contact { display: flex; border-top: 1px solid rgb(153, 172, 178); }
.cl-final-cta__contact-item {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-2); text-decoration: none;
}
.cl-final-cta__contact-item span { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: #fff; line-height: 1.5; }
.cl-final-cta__contact-item img { width: 24px; height: 24px; flex: none; }
.cl-final-cta__socials { justify-content: flex-start; gap: var(--cl-space-3); }
.cl-final-cta__socials a {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.cl-final-cta__socials a:hover { border-color: var(--cl-cyan); color: var(--cl-cyan); }

@media (max-width: 860px) {
  .cl-pain__grid, .cl-apps__grid, .cl-methodology__grid { grid-template-columns: 1fr; }
  .cl-stats__grid, .cl-stats__logos { grid-template-columns: repeat(2, 1fr); }
  .cl-apps__card--featured { grid-column: span 1; }
  .cl-benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .cl-assistant__inner { grid-template-columns: 1fr; }
  .cl-pillars__row { grid-template-columns: 1fr; text-align: left; }
  .cl-final-cta__inner { grid-template-columns: 1fr; }
  .cl-final-cta__contact { flex-direction: column; }
}

/* ==========================================================================
   Bloques de página (Ainoa\Cms\Blocks)
   Catálogo reutilizable que pinta las páginas del sitio fuera del home.
   Reusa los tokens ya medidos contra producción: radio de tarjeta 20px,
   acento #FF5F3F, botón #E9561E, Montserrat, y el título de tarjeta real
   (25px / weight 300 / line-height 30px).
   ========================================================================== */

body.cl-theme .cl-block { padding: var(--cl-space-7) 0; position: relative; }
body.cl-theme .cl-block--bg-default,
body.cl-theme .cl-block--bg-transparent { background: transparent; }
body.cl-theme .cl-block--bg-white { background: #FFFFFF; }
body.cl-theme .cl-block--bg-grey { background: #ebeaea; }
body.cl-theme .cl-block--bg-light { background: var(--cl-bg); }
/* Las secciones oscuras NO son full-bleed: en producción son un bloque
   redondeado que respeta el contenedor principal (máx. 1400px, centrado),
   igual que la píldora del header. Ver .cl-container-width más abajo. */
body.cl-theme .cl-block--bg-dark,
body.cl-theme .cl-block--bg-navy {
  max-width: var(--cl-page-max); margin-inline: auto;
  border-radius: var(--cl-radius-card); padding: 50px;
}
/* El bloque ya aporta los 50px de producción; el contenedor interior no
   debe sumar padding encima. */
body.cl-theme .cl-block--bg-dark > .site-container,
body.cl-theme .cl-block--bg-navy > .site-container { padding: 0; max-width: none; }
body.cl-theme .cl-block--bg-dark { background: var(--cl-dark); }
body.cl-theme .cl-block--bg-navy { background: var(--cl-navy); }
body.cl-theme .cl-block--bg-dark .cl-kicker,
body.cl-theme .cl-block--bg-navy .cl-kicker { color: #FFFFFF; }
body.cl-theme .cl-block--bg-dark .cl-section-title,
body.cl-theme .cl-block--bg-navy .cl-section-title { color: var(--cl-kicker-muted); }

.cl-block__head { margin-bottom: var(--cl-space-6); display: flex; flex-direction: column; }
.cl-block__head--center { align-items: center; text-align: center; }
.cl-block__head--center .cl-section-title { margin-left: auto; margin-right: auto; }
.cl-block__intro {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.65;
  color: var(--cl-text); max-width: 68ch; margin: var(--cl-space-3) 0 0;
}
.cl-block--bg-dark .cl-block__intro,
.cl-block--bg-navy .cl-block__intro { color: rgba(255,255,255,.82); }
/* Etiqueta bajo el intro (p. ej. "Pilares de Autoridad"): 25px/400 en el
   acento de marca, medido en producción. */
.cl-block__label {
  font-family: var(--cl-font-heading); font-size: 25px; font-weight: 400;
  color: var(--cl-accent); margin: var(--cl-space-4) 0 0;
}
.cl-block__actions { display: flex; flex-wrap: wrap; gap: var(--cl-space-3); margin-top: var(--cl-space-5); }
.cl-block__head--center + .cl-block__actions,
.cl-block__head--center .cl-block__actions { justify-content: center; }

/* --- Hero de página ------------------------------------------------------ */
/* Geometría medida en producción: el bloque va inset 10px en los cuatro
   lados (allí el wrapper de sección lleva `padding: 10px`), con radio 20px.
   Aquí el header es `sticky` y sí ocupa sus 100px de alto en el flujo, así
   que el frame se sube 90px para aterrizar justo en los 10px de arriba; la
   píldora del header queda flotando encima, como en producción. */
.cl-page-hero { background: #FFFFFF; }
.cl-page-hero__frame {
  position: relative; overflow: hidden; border-radius: var(--cl-radius-card);
  margin: -90px 10px 0; padding: 140px 0 var(--cl-space-7);
  background: var(--cl-dark);
}
.cl-page-hero--plain .cl-page-hero__frame,
.cl-page-hero--app .cl-page-hero__frame { background: var(--cl-dark); }
.cl-page-hero__media { position: absolute; inset: 0; z-index: 0; }
.cl-page-hero__video,
.cl-page-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-page-hero__scrim { position: absolute; inset: 0; background: var(--cl-dark); opacity: .55; }
.cl-page-hero .site-container { position: relative; z-index: 1; }
.cl-page-hero__body { max-width: 780px; }
/* Hero con logo de cliente: dos columnas, texto a la izquierda y la marca
   grande a la derecha, centrada verticalmente. */
.cl-page-hero__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--cl-space-6); align-items: center;
}
.cl-page-hero__layout .cl-page-hero__body { max-width: none; }
.cl-page-hero__brand { display: flex; justify-content: flex-end; align-items: center; }
.cl-page-hero__logo { display: block; height: 110px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 860px) {
  /* En móvil el logo vuelve arriba y a tamaño reducido. */
  .cl-page-hero__layout { grid-template-columns: 1fr; gap: var(--cl-space-4); }
  .cl-page-hero__brand { order: -1; justify-content: flex-start; }
  .cl-page-hero__logo { height: 64px; }
}
.cl-page-hero__eyebrow {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cl-cyan); margin: 0 0 var(--cl-space-3);
}
.cl-page-hero__title {
  font-family: var(--cl-font-heading); font-weight: 600; color: #FFFFFF;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; margin: 0;
}
.cl-page-hero__title .cl-section-title__accent { color: var(--cl-hero-accent, var(--cl-accent)); }
.cl-page-hero__lead {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-md); line-height: 1.6;
  color: rgba(255,255,255,.85); margin: var(--cl-space-4) 0 0; max-width: 62ch;
}
.cl-page-hero__lead b, .cl-page-hero__lead strong { font-weight: 700; }
.cl-page-hero__chips {
  list-style: none; margin: var(--cl-space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--cl-space-4);
}
.cl-page-hero__chips li {
  display: inline-flex; align-items: center; gap: var(--cl-space-2);
  font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: rgba(255,255,255,.9);
}

/* --- Rejilla de tarjetas (2 a 8 columnas) -------------------------------- */
.cl-card-grid { display: grid; gap: var(--cl-space-4); }
.cl-card-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.cl-card-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.cl-card-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.cl-card-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.cl-card-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
.cl-card-grid[data-columns="7"] { grid-template-columns: repeat(7, 1fr); }
.cl-card-grid[data-columns="8"] { grid-template-columns: repeat(8, 1fr); }

/* Padding 30px y gap 20px son las medidas literales de producción (Método,
   Pilares de Autoridad) — no salen de la escala de espaciado. */
.cl-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 30px; border-radius: var(--cl-radius-card);
  background: #FFFFFF; border: 1px solid rgba(0,47,64,.08);
}
.cl-card__icon { width: 48px; height: 48px; object-fit: contain; }
.cl-card__title {
  font-family: var(--cl-font-heading); font-size: 25px; font-weight: 300;
  line-height: 30px; color: var(--cl-navy); margin: 0;
}
.cl-card__text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 24px;
  color: var(--cl-text); margin: 0;
}
.cl-card__cta { margin-top: auto; padding-top: var(--cl-space-3); }
.cl-card--dark { background: var(--cl-navy); border-color: transparent; }
.cl-card--dark .cl-card__title { color: #FFFFFF; font-weight: 600; }
.cl-card--dark .cl-card__text { color: rgba(255,255,255,.8); }
.cl-card--quote { background: var(--cl-bg); border-color: transparent; }
.cl-card--quote .cl-card__icon { width: 32px; height: 32px; }
.cl-block--bg-dark .cl-card--light,
.cl-block--bg-navy .cl-card--light { border-color: rgba(255,255,255,.12); }
/* Tarjeta navy sobre sección oscura (p. ej. "Nuestros Valores"): el fondo
   es #002F40 — un azul más claro que el #031825 de la sección, medido en
   producción, donde vive en un ::before del contenedor. Título en cyan y
   peso 300; padding 15px y gap 20px, también literales de producción. */
.cl-card--navy {
  background: var(--cl-navy); border: none;
  padding: 15px; gap: 20px;
}
.cl-card--navy .cl-card__title { color: var(--cl-cyan); }
.cl-card--navy .cl-card__text { color: var(--cl-bg); }

/* --- Pasos numerados ----------------------------------------------------- */
.cl-steps { display: flex; flex-direction: column; gap: var(--cl-space-5); }
.cl-steps--columns { display: grid; grid-template-columns: repeat(3, 1fr); }
.cl-step {
  display: grid; grid-template-columns: 1fr; gap: var(--cl-space-5);
  align-items: center; padding: var(--cl-space-5) 0;
  border-top: 1px solid rgba(0,47,64,.12);
}
.cl-steps--alternating .cl-step { grid-template-columns: 1fr 1fr; }
.cl-steps--alternating .cl-step--reverse .cl-step__body { order: 2; }
.cl-steps--columns .cl-step { border-top: none; padding: 0; }
.cl-step__number {
  display: block; font-family: var(--cl-font-heading); font-size: var(--cl-fs-lg);
  font-weight: 700; color: var(--cl-accent); margin-bottom: var(--cl-space-2);
}
.cl-step__icon { display: block; width: 56px; height: 56px; object-fit: contain; margin-bottom: var(--cl-space-3); }
.cl-step__title {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-lg); font-weight: 600;
  line-height: 1.25; color: var(--cl-navy); margin: 0 0 var(--cl-space-2);
}
.cl-step__text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.65;
  color: var(--cl-text); margin: 0;
}
.cl-step__result {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600;
  color: var(--cl-accent); margin: var(--cl-space-3) 0 0;
}
.cl-step__media img {
  width: 100%; height: auto; display: block; border-radius: var(--cl-radius-card); object-fit: cover;
}
.cl-block--bg-dark .cl-step { border-color: rgba(255,255,255,.14); }
.cl-block--bg-dark .cl-step__title { color: #FFFFFF; }
.cl-block--bg-dark .cl-step__text { color: rgba(255,255,255,.8); }

/* --- Bloque partido (texto + imagen) ------------------------------------- */
.cl-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-6); align-items: center; }
.cl-split--reverse .cl-split__body { order: 2; }
.cl-split__text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.7;
  color: var(--cl-text); margin: var(--cl-space-4) 0 0;
}
.cl-split__media img { width: 100%; height: auto; display: block; border-radius: var(--cl-radius-card); }

/* --- Sección declarativa ------------------------------------------------- */
.cl-statement { max-width: 900px; margin: 0 auto; }
.cl-statement__list { list-style: none; margin: var(--cl-space-5) 0 0; padding: 0; display: grid; gap: var(--cl-space-3); }
.cl-statement__list li {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.6;
  color: var(--cl-text); padding-left: var(--cl-space-4); position: relative;
}
.cl-statement__list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cl-accent);
}
.cl-statement__highlight {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-md); font-weight: 600;
  color: var(--cl-navy); margin: var(--cl-space-5) 0 0; text-align: center;
}
.cl-block--bg-dark .cl-statement__list li { color: rgba(255,255,255,.85); }
.cl-block--bg-dark .cl-statement__highlight { color: #FFFFFF; }

/* --- FAQ ----------------------------------------------------------------- */
.cl-faq { display: grid; gap: var(--cl-space-3); max-width: 900px; margin: 0 auto; }
.cl-faq__item {
  background: #FFFFFF; border: 1px solid rgba(0,47,64,.1);
  border-radius: var(--cl-radius-card); padding: var(--cl-space-4) var(--cl-space-5);
}
.cl-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-4);
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-md); font-weight: 500;
  color: var(--cl-navy); cursor: pointer; list-style: none;
}
.cl-faq__question::-webkit-details-marker { display: none; }
.cl-faq__marker { position: relative; flex: none; width: 16px; height: 16px; }
.cl-faq__marker::before,
.cl-faq__marker::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--cl-accent);
  transition: transform .25s ease;
}
.cl-faq__marker::after { transform: rotate(90deg); }
.cl-faq__item[open] .cl-faq__marker::after { transform: rotate(0deg); }
.cl-faq__answer p {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.7;
  color: var(--cl-text); margin: var(--cl-space-3) 0 0;
}

/* --- Fila de logos ------------------------------------------------------- */
/* Tarjeta blanca que envuelve un carril y su titular, tal como en producción
   (medido en los contenedores de /soluciones/automatizacion y del carrusel de
   equipo de /nuestro-adn: #FFF, radio 20px, padding 30px, 20px de separación
   entre piezas). El difuminado de los extremos SOLO funciona sobre un fondo
   liso conocido, así que va siempre de la mano de esta tarjeta. */
.cl-media-card {
  display: flex; flex-direction: column; gap: 20px;
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: 30px;
}
.cl-media-card .cl-block__head { margin-bottom: 0; }
/* La tarjeta es blanca siempre, así que el texto de dentro no puede heredar
   los colores de una sección oscura. */
.cl-block--bg-dark .cl-media-card .cl-team-card__name { color: var(--cl-navy); }
.cl-block--bg-dark .cl-media-card .cl-team-card__role { color: var(--cl-text); }

/* Difuminado en los dos extremos de un carril. En producción es una clase
   compartida, `cupper-carousel-fade`: dos pseudoelementos de 120px que van del
   blanco de la tarjeta a transparente, con z-index alto y sin capturar el
   ratón. La usan tanto el carril de logos como el carrusel de equipo. */
.cl-fade-edges { --cl-fade-w: 120px; position: relative; }
.cl-fade-edges::before,
.cl-fade-edges::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: var(--cl-fade-w); z-index: 2; pointer-events: none;
}
.cl-fade-edges::before {
  left: 0; background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
}
.cl-fade-edges::after {
  right: 0; background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}
/* Producción no hace responsivo el difuminado, pero con 120px por lado se
   comería casi toda la cinta en una pantalla de 375px. */
@media (max-width: 767px) {
  .cl-fade-edges { --cl-fade-w: 48px; }
}
.cl-logo-row__footnote {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); font-weight: 400;
  color: #403F41; text-align: center; margin: 0;
}

.cl-logo-row { overflow: hidden; }
.cl-logo-row__track { display: flex; align-items: center; gap: var(--cl-space-6); }
/* Marquesina. Producción no la hace con CSS sino con un carrusel de imágenes
   de Elementor configurado como cinta continua: `slides_to_show: 6` (2 en
   móvil), `slides_to_scroll: 6`, `autoplay_speed: 0` y `speed: 70000`, con
   69px de hueco y sin flechas ni puntos. O sea: seis logos por ancho que
   avanzan seis posiciones en 70 segundos. Aquí se reproduce con la animación
   CSS que ya existía, pero con esas medidas — antes eran 42s y huecos de
   55px, un 60% más rápido de lo que va producción.

   Las columnas se miden en `cqw` (el ancho de la propia fila) porque el
   carril es `max-content`: un porcentaje se resolvería contra el carril y no
   contra la fila, que es circular. El hueco va como `margin-right` de cada
   logo y no con `gap` para que el carril mida exactamente 12 × (logo + hueco)
   y el -50% de la animación caiga en un múltiplo justo del paso: con `gap`
   sobraba medio hueco y el bucle daba un salto visible. */
.cl-logo-row--marquee {
  --cl-logo-cols: 6;
  --cl-logo-gap: 69px;
  container-type: inline-size;
}
/* Ritmo único para todas las cintas: producción avanza 6 logos en 70s, o sea
   11,667s por logo. Con `--cl-marquee-items` (los logos de media cinta, que
   pinta el renderizador) la velocidad es idéntica en la cinta de 6 logos
   pequeños y en la de clientes, que tiene más y más anchos. */
.cl-logo-row--scrolls .cl-logo-row__track {
  width: max-content; gap: 0;
  animation: cl-logo-scroll calc(var(--cl-marquee-items, 6) * 11.667s) linear infinite;
}
.cl-logo-row--scrolls .cl-logo-row__item { margin-right: var(--cl-logo-gap); }
.cl-logo-row--marquee .cl-logo-row__item {
  width: calc((100cqw - (var(--cl-logo-cols) - 1) * var(--cl-logo-gap)) / var(--cl-logo-cols));
}
.cl-logo-row--marquee .cl-logo-row__item img { max-width: 100%; }
.cl-logo-row__item { flex: none; display: grid; place-items: center; }
.cl-logo-row__item img { max-height: 56px; width: auto; object-fit: contain; border-radius: var(--cl-radius-card); }
/* Logos de cliente a tamaño real de producción (228px de ancho, alto libre)
   y repartidos en la fila, en vez del carril de logos pequeños. */
/* Los clientes mantienen los 228px de ancho real de producción; al ser cinta
   ya no hay espacio libre que repartir con space-between. */
.cl-logo-row--clients { --cl-logo-gap: var(--cl-space-5); }
.cl-logo-row--clients .cl-logo-row__item { flex: 0 0 228px; width: 228px; }
.cl-logo-row--clients .cl-logo-row__item img { max-height: none; width: 100%; height: auto; }
/* Logo enlazado: solo los clientes con caso de éxito lo llevan, así que el
   afordance tiene que distinguirse del resto de la fila. */
/* Cinta arrastrable. Cuando site.js toma el control marca `.is-draggable` y
   apaga la animación CSS: las dos no pueden mover el mismo carril a la vez, y
   solo la de JavaScript se puede interrumpir a media posición para seguir el
   puntero. Sin JavaScript no se añade la clase y la animación CSS sigue
   funcionando, así que la cinta se mueve igual, solo que sin arrastre.

   La pausa al pasar el ratón también pasa a JS, por lo mismo: con la animación
   apagada, `animation-play-state` ya no hace nada. Se aplica a las dos cintas
   — producción solo detiene la suya al interactuar, pero desde que se pueden
   arrastrar conviene que se paren al acercarse, y en la de clientes además
   hace falta para poder pulsar los logos con caso de éxito. */
.cl-logo-row.is-draggable .cl-logo-row__track {
  animation: none;
  cursor: grab;
  /* Sin esto, arrastrar sobre un logo selecciona la imagen en vez de mover. */
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.cl-logo-row.is-grabbing .cl-logo-row__track { cursor: grabbing; }
.cl-logo-row.is-draggable .cl-logo-row__item img { -webkit-user-drag: none; pointer-events: none; }
/* El logo enlazado sí tiene que recibir el ratón, o no se podría pulsar. */
.cl-logo-row.is-draggable .cl-logo-row__link { pointer-events: auto; }
.cl-logo-row__link { display: block; text-decoration: none; transition: transform .25s ease, opacity .25s ease; }
.cl-logo-row__link:hover, .cl-logo-row__link:focus-visible { transform: translateY(-3px); opacity: .82; }
@media (prefers-reduced-motion: reduce) {
  .cl-logo-row__link { transition: none; }
  .cl-logo-row__link:hover, .cl-logo-row__link:focus-visible { transform: none; }
}
@keyframes cl-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Móvil: 2 logos por ancho, igual que `slides_to_show_mobile: 2`. El
   difuminado sí se reduce: producción no lo hace responsivo y con 120px por
   lado se comería casi toda la cinta en una pantalla de 375px. Es el mismo
   criterio que ya sigue el carrusel del equipo (100px → 60px). */
@media (max-width: 767px) {
  .cl-logo-row--marquee { --cl-logo-cols: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-logo-row--scrolls .cl-logo-row__track {
    animation: none; flex-wrap: wrap; width: auto; gap: var(--cl-space-5);
  }
  /* Sin movimiento el carril se convierte en una rejilla, así que los logos
     recuperan su ancho natural y no arrastran el hueco de la cinta. La
     segunda pasada de logos solo existe para que el bucle no deje hueco: en
     rejilla sobra y mostraría cada logo dos veces. */
  .cl-logo-row--scrolls .cl-logo-row__item { margin-right: 0; }
  .cl-logo-row--marquee .cl-logo-row__item { width: auto; }
  .cl-logo-row__item--clone { display: none; }
  /* En rejilla no se sale nada por los bordes: un degradado ahí solo taparía
     logos. La fila estática de clientes sí lo conserva, no depende del
     movimiento. */
  .cl-logo-row--scrolls.cl-fade-edges::before,
  .cl-logo-row--scrolls.cl-fade-edges::after { display: none; }
}

/* --- Carrusel de equipo --------------------------------------------------- */
.cl-team-carousel { position: relative; overflow: hidden; padding: var(--cl-space-4) 0; touch-action: pan-y; }
/* El difuminado lo aporta ahora `.cl-fade-edges` (120px sobre el blanco de la
   tarjeta), igual que en producción, donde este carrusel comparte clase con el
   carril de logos. Antes eran 100px sobre el gris de la página, porque el
   carrusel no iba dentro de una tarjeta blanca. */
.cl-team-carousel__track { display: flex; gap: var(--cl-space-4); width: max-content; will-change: transform; cursor: grab; }
.cl-team-carousel__track.is-dragging { cursor: grabbing; }
.cl-team-card {
  flex: none; display: block; text-align: center; text-decoration: none; user-select: none;
  width: calc((min(100vw, 980px) - 3 * var(--cl-space-4)) / 4);
}
.cl-team-card__photo {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border-radius: var(--cl-radius-card); filter: grayscale(100%);
  transition: filter var(--cl-dur-grayscale) var(--cl-ease-grayscale), transform .3s ease; display: block; pointer-events: none;
}
.cl-team-card:hover .cl-team-card__photo { filter: grayscale(0%); transform: translateY(-4px); }
.cl-team-card__name {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-base); font-weight: 600;
  color: var(--cl-navy); margin: var(--cl-space-2) 0 2px; pointer-events: none;
}
.cl-team-card__role { font-family: var(--cl-font-body); font-size: var(--cl-fs-xs); color: var(--cl-text); min-height: 32px; pointer-events: none; }
.cl-team-card__linkedin { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; pointer-events: none; }
.cl-block--bg-dark .cl-team-card__name { color: #FFFFFF; }
.cl-block--bg-dark .cl-team-card__role { color: rgba(255,255,255,.8); }
@media (max-width: 600px) {
  .cl-team-card { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-team-carousel__track { transition: none; }
  /* La foto del equipo también anima (grises → color y un desplazamiento de
     4px); sin esto se quedaba fuera del respeto a reduced-motion, al
     contrario que el carrusel de casos y las tarjetas de casos de éxito. */
  .cl-team-card__photo { transition: none; }
}

/* --- Contadores ---------------------------------------------------------- */
.cl-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cl-space-5); }
.cl-counter { text-align: center; }
.cl-counter__icon { display: block; margin: 0 auto var(--cl-space-2); }
.cl-counter__value {
  display: block; font-family: var(--cl-font-heading); font-weight: 700;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; color: var(--cl-accent);
}
.cl-counter__label {
  display: block; font-family: var(--cl-font-body); font-size: var(--cl-fs-sm);
  color: var(--cl-text); margin-top: var(--cl-space-2);
}
.cl-block--bg-dark .cl-counter__label { color: rgba(255,255,255,.8); }

/* --- Cita ---------------------------------------------------------------- */
.cl-quote { max-width: 860px; margin: 0 auto; text-align: center; }
.cl-quote__text {
  font-family: var(--cl-font-heading); font-size: clamp(22px, 2.4vw, 32px); font-weight: 300;
  line-height: 1.35; color: var(--cl-navy); margin: 0; quotes: '\201C' '\201D';
}
.cl-quote__text::before { content: open-quote; } .cl-quote__text::after { content: close-quote; }
.cl-quote__author {
  display: block; font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm);
  font-weight: 600; color: var(--cl-accent); margin-top: var(--cl-space-4);
}
.cl-quote__role { display: block; font-weight: 400; color: var(--cl-text); }
.cl-block--bg-dark .cl-quote__text { color: #FFFFFF; }

/* --- Texto largo (legales) ----------------------------------------------- */
.cl-rich { max-width: 78ch; margin: 0 auto; font-family: var(--cl-font-body); color: var(--cl-text); }
/* Sobre sección oscura o navy el texto largo tenía los colores por defecto
   (títulos en --cl-navy y párrafos en --cl-text): navy sobre navy, ilegible.
   Aquí se aclaran título, cuerpo y enlaces. */
.cl-block--bg-dark .cl-rich,
.cl-block--bg-navy .cl-rich { color: rgba(255,255,255,.85); }
.cl-block--bg-dark .cl-rich h2, .cl-block--bg-dark .cl-rich h3, .cl-block--bg-dark .cl-rich h4,
.cl-block--bg-navy .cl-rich h2, .cl-block--bg-navy .cl-rich h3, .cl-block--bg-navy .cl-rich h4 { color: #FFFFFF; }
.cl-block--bg-dark .cl-rich strong, .cl-block--bg-dark .cl-rich b,
.cl-block--bg-navy .cl-rich strong, .cl-block--bg-navy .cl-rich b { color: #FFFFFF; }
.cl-block--bg-dark .cl-rich a,
.cl-block--bg-navy .cl-rich a { color: var(--cl-cyan); }
.cl-block--bg-dark .cl-rich li::marker,
.cl-block--bg-navy .cl-rich li::marker { color: var(--cl-accent); }
.cl-rich h2, .cl-rich h3, .cl-rich h4 {
  font-family: var(--cl-font-heading); color: var(--cl-navy); line-height: 1.25;
  margin: var(--cl-space-6) 0 var(--cl-space-3);
}
.cl-rich h2 { font-size: var(--cl-fs-xl); font-weight: 600; }
.cl-rich h3 { font-size: var(--cl-fs-lg); font-weight: 600; }
.cl-rich h4 { font-size: var(--cl-fs-md); font-weight: 600; }
.cl-rich p, .cl-rich li { font-size: var(--cl-fs-base); line-height: 1.75; }
.cl-rich p { margin: 0 0 var(--cl-space-4); }
.cl-rich ul, .cl-rich ol { margin: 0 0 var(--cl-space-4); padding-left: var(--cl-space-5); }
.cl-rich li { margin-bottom: var(--cl-space-2); }
.cl-rich a { color: var(--cl-btn-bg); }
/* Variante "split" (p. ej. "ADN CupperLab"): kicker+título en una columna
   angosta a la izquierda, el texto en una columna ancha a la derecha. El
   texto en negrita dentro del cuerpo lleva el acento de marca, igual que en
   producción ("se vive en presente."). */
.cl-rich-split { display: flex; gap: var(--cl-space-6); align-items: flex-start; }
.cl-rich-split__head { flex: 0 0 30%; }
.cl-rich-split__body { flex: 1; min-width: 0; }
.cl-rich-split__body .cl-rich { max-width: none; margin: 0; }
.cl-rich-split__body .cl-rich b,
.cl-rich-split__body .cl-rich strong { color: var(--cl-accent); }
@media (max-width: 860px) {
  .cl-rich-split { flex-direction: column; gap: var(--cl-space-4); }
  .cl-rich-split__head { flex: none; }
}

/* --- CTA / presupuesto --------------------------------------------------- */
.cl-cta-banner, .cl-pricing { text-align: center; max-width: 820px; margin: 0 auto; }
.cl-cta-banner .cl-block__actions, .cl-pricing .cl-block__actions { justify-content: center; }
.cl-pricing .cl-section-title { margin: 0 auto; text-align: center; }
.cl-pricing__text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.7;
  color: var(--cl-text); margin: var(--cl-space-4) 0 0;
}

/* --- Comparativa a dos columnas ------------------------------------------ */
.cl-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cl-space-4); }
.cl-compare__col {
  padding: var(--cl-space-5); border-radius: var(--cl-radius-card);
  background: var(--cl-bg); border: 1px solid rgba(0,47,64,.08);
}
.cl-compare__col--highlight { background: var(--cl-navy); border-color: transparent; }
.cl-compare__col--highlight .cl-kicker,
.cl-compare__col--highlight .cl-compare__headline { color: #FFFFFF; }
.cl-compare__col--highlight .cl-compare__sub,
.cl-compare__col--highlight .cl-compare__list li { color: rgba(255,255,255,.8); }
.cl-compare__headline {
  font-family: var(--cl-font-heading); font-size: clamp(28px, 3vw, 42px); font-weight: 700;
  color: var(--cl-navy); margin: 0; line-height: 1.1;
}
.cl-compare__sub { font-family: var(--cl-font-body); font-size: var(--cl-fs-base); color: var(--cl-text); margin: var(--cl-space-2) 0 0; }
.cl-compare__list { list-style: none; margin: var(--cl-space-4) 0 0; padding: 0; display: grid; gap: var(--cl-space-2); }
.cl-compare__list li { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); color: var(--cl-text); }

/* --- Datos de contacto y mapa -------------------------------------------- */
.cl-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--cl-space-4); }
.cl-contact-card {
  padding: var(--cl-space-5); border-radius: var(--cl-radius-card);
  background: #FFFFFF; border: 1px solid rgba(0,47,64,.08);
}
.cl-contact-card__title {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-md); font-weight: 600;
  color: var(--cl-navy); margin: 0 0 var(--cl-space-3);
}
.cl-contact-card__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cl-space-2); }
.cl-contact-card__lines li, .cl-contact-card__lines a {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); color: var(--cl-text); text-decoration: none;
}
.cl-contact-card__lines a:hover { color: var(--cl-btn-bg); }
.cl-map {
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  padding: var(--cl-space-5); border-radius: var(--cl-radius-card);
  background: var(--cl-navy); color: #FFFFFF; text-decoration: none;
}
.cl-map__label { font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600; color: var(--cl-cyan); }
.cl-map__address { font-family: var(--cl-font-body); font-size: var(--cl-fs-md); }

/* Contadores en dos columnas: cifras a la izquierda, carrusel a la derecha. */
.cl-counters-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--cl-space-6); align-items: center;
}
.cl-counters-split .cl-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cl-space-5) var(--cl-space-4); }
.cl-counters-split .cl-counter { text-align: left; }
.cl-counters-split .cl-block__head { margin-bottom: var(--cl-space-5); }
.cl-counters-split__media .cl-gallery { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .cl-counters-split { grid-template-columns: 1fr; gap: var(--cl-space-5); }
  .cl-counters-split .cl-counters { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* --- Galería de capturas (casos de éxito) -------------------------------- */
/* Tarjeta blanca redondeada con las capturas en bucle, medido en producción:
   radio 20px, padding 10px y las imágenes en proporción 1290x684. */
.cl-gallery {
  background: #FFFFFF; border: 1px solid rgba(0,47,64,.08);
  border-radius: var(--cl-radius-card); padding: 10px;
  position: relative; max-width: 938px; margin: 0 auto;
}
.cl-gallery__track { position: relative; aspect-ratio: 1290 / 684; border-radius: var(--cl-radius-md); overflow: hidden; }
.cl-gallery__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.cl-gallery__slide.is-active { opacity: 1; visibility: visible; }
.cl-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-gallery__dots { display: flex; justify-content: center; gap: var(--cl-space-3); padding: var(--cl-space-4) 0 var(--cl-space-2); }
.cl-gallery__dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(233,86,30,.35); transition: background .2s ease, transform .2s ease;
}
.cl-gallery__dot:hover { background: rgba(233,86,30,.6); }
.cl-gallery__dot.is-active { background: var(--cl-btn-bg); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .cl-gallery__slide { transition: none; }
}

/* --- Contacto: formulario + datos al lado -------------------------------- */
/* Layout de /contacto medido en producción: dos columnas de 480px, el
   formulario a la izquierda y a la derecha el título con los datos de
   contacto y el horario, sobre el fondo claro de la página. */
.cl-contact-plain {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 480px);
  gap: var(--cl-space-7); justify-content: space-between; align-items: start;
}
.cl-contact-plain__form {
  background: #FFFFFF; border: 1px solid rgba(0,47,64,.08);
  border-radius: var(--cl-radius-card); padding: 30px;
}
.cl-contact-plain__info .cl-section-title { font-size: clamp(32px, 3.4vw, 51px); font-weight: 500; margin: 0 0 var(--cl-space-4); }
.cl-contact-plain__lead {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.65;
  color: var(--cl-text); margin: 0 0 var(--cl-space-5);
}
.cl-contact-plain__detail { margin-bottom: var(--cl-space-5); display: grid; gap: 2px; }
.cl-contact-plain__detail-title {
  font-family: var(--cl-font-heading); font-size: 22px; font-weight: 600;
  color: var(--cl-text); margin: 0 0 var(--cl-space-2);
}
.cl-contact-plain__detail a, .cl-contact-plain__detail span {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.6; color: var(--cl-text); text-decoration: none;
}
.cl-contact-plain__detail a:hover { color: var(--cl-btn-bg); }
@media (max-width: 860px) {
  .cl-contact-plain { grid-template-columns: 1fr; gap: var(--cl-space-5); }
}

/* --- Bloque de cierre: formulario + canales ------------------------------ */
/* Geometría real de producción: bloque redondeado casi a sangre (10px a cada
   lado, radio 20px), la imagen de fondo va directa sobre la sección (ya es
   oscura, sin capa de oscurecido) y el logo blanco queda como marca de agua
   abajo a la derecha al 66%. El contenido interior respeta el contenedor
   principal con 50px arriba/abajo. */
/* Con `body.cl-theme` para ganar en especificidad a `.cl-block` (padding
   vertical) y a `body.cl-theme .site-container` (ancho/padding interior). */
body.cl-theme .cl-block--contact-cta {
  position: relative; overflow: hidden;
  margin: 0 10px; padding: 0 80px; border-radius: var(--cl-radius-card);
  background-color: var(--cl-dark);
  background-image: var(--cl-contact-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cl-block--contact-cta::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  opacity: var(--cl-contact-overlay-opacity, .32);
  background-image: url(/assets/img/logo-blanco.png);
  background-size: 69%; background-position: 100% 100%; background-repeat: no-repeat;
  /* Mismo modo de fusión que producción: el logo se integra con la foto de
     fondo en vez de quedar como una marca de agua plana encima. */
  mix-blend-mode: overlay;
}
body.cl-theme .cl-block--contact-cta > .site-container {
  position: relative; z-index: 1;
  max-width: var(--cl-page-max); padding: 50px 0;
}
@media (max-width: 860px) {
  body.cl-theme .cl-block--contact-cta { padding: 0 var(--cl-space-4); }
  /* En móvil los 50px de producción son demasiados y el bloque quedaría
     pegado a los bordes: se mantiene como tarjeta redondeada con margen. */
  body.cl-theme .cl-block--bg-dark,
  body.cl-theme .cl-block--bg-navy {
    margin-inline: 10px; padding: var(--cl-space-5) var(--cl-space-4);
  }
}
.cl-contact-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-6); align-items: start; }
.cl-contact-cta__form-card {
  background: #FFFFFF; border-radius: var(--cl-radius-card); padding: var(--cl-space-6);
}
.cl-contact-cta__form-card .cl-section-title { font-size: clamp(24px, 2.4vw, 34px); }
.cl-contact-cta__text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.65;
  color: var(--cl-text); margin: var(--cl-space-3) 0 var(--cl-space-5);
}
.cl-contact-cta__aside .cl-contact-cta__text { color: rgba(255,255,255,.82); }
.cl-contact-cta__socials { margin-top: var(--cl-space-5); }
.cl-contact-cta__socials-label {
  display: block; font-family: var(--cl-font-heading); font-size: 25px; font-weight: 300;
  color: #FFFFFF; margin-bottom: var(--cl-space-3);
}
.cl-contact-cta__socials-links { display: flex; align-items: center; gap: var(--cl-space-2); }
/* Iconos de 50x50 con el glifo a 25px, medidos en producción. */
.cl-contact-cta__social {
  width: 50px; height: 50px; display: grid; place-items: center;
  color: var(--cl-bg); text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.cl-contact-cta__social svg { width: 25px; height: 25px; display: block; fill: currentColor; }
.cl-contact-cta__social:hover { color: var(--cl-accent); transform: translateY(-2px); }
.cl-contact-form { display: grid; gap: var(--cl-space-3); }
.cl-field { display: grid; gap: var(--cl-space-1); font-family: var(--cl-font-body); }
.cl-field > span { font-size: var(--cl-fs-sm); font-weight: 500; color: var(--cl-navy); }
.cl-field input[type="text"], .cl-field input[type="email"], .cl-field input[type="tel"] {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); color: var(--cl-navy);
  padding: 12px 14px; border: 1px solid rgba(0,47,64,.2); border-radius: var(--cl-radius-sm); background: #FFFFFF;
}
.cl-field input:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 1px; }
.cl-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--cl-space-2); }
.cl-field--check span { font-size: 12.5px; color: var(--cl-text); font-weight: 400; }
.cl-field--check a { color: var(--cl-btn-bg); }
.cl-contact-form .cl-button { margin-top: var(--cl-space-2); justify-self: start; }
.cl-contact-form__status { font-family: var(--cl-font-body); font-size: var(--cl-fs-sm); margin: 0; min-height: 1.2em; }
.cl-contact-form__status[data-state="error"] { color: #C0392B; }
.cl-contact-form__status[data-state="ok"] { color: #1E8449; }
/* Canales de contacto: en producción los dos van EN FILA, con una única
   línea divisoria encima de ambos (no una por canal) y un círculo naranja
   con la flecha a la izquierda de cada uno. */
.cl-contact-cta__channels {
  display: flex; flex-wrap: wrap; gap: var(--cl-space-6);
  margin-top: var(--cl-space-5); padding-top: var(--cl-space-4);
  border-top: 1px solid var(--cl-kicker-muted);
}
.cl-contact-cta__channel {
  display: flex; align-items: center; gap: var(--cl-space-3); text-decoration: none;
}
.cl-contact-cta__channel-icon {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: var(--cl-btn-bg); display: grid; place-items: center;
  transition: transform .2s ease;
}
.cl-contact-cta__channel-icon svg { width: 18px; height: 18px; display: block; }
.cl-contact-cta__channel:hover .cl-contact-cta__channel-icon { transform: translateY(-2px); }
.cl-contact-cta__channel-text { display: grid; gap: 2px; }
.cl-contact-cta__channel-label {
  font-family: var(--cl-font-heading); font-size: 25px; font-weight: 300; color: #FFFFFF;
}
.cl-contact-cta__channel-value { font-family: var(--cl-font-body); font-size: var(--cl-fs-base); color: #FFFFFF; }
.cl-contact-cta__channel:hover .cl-contact-cta__channel-value { color: var(--cl-accent); }
@media (max-width: 600px) {
  .cl-contact-cta__channels { flex-direction: column; gap: var(--cl-space-4); }
}

/* --- Tarjetas de caso y de artículo -------------------------------------- */
.cl-story-grid, .cl-post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--cl-space-5);
}
.cl-story-card, .cl-post-card {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: var(--cl-radius-card); overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(0,47,64,.08); transition: transform .25s ease, box-shadow .25s ease;
}
.cl-story-card:hover, .cl-post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(3,24,37,.12); }
.cl-story-card__media, .cl-post-card__media {
  display: block; aspect-ratio: 16 / 10; background: var(--cl-bg); overflow: hidden;
}
.cl-story-card__media img, .cl-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Casos de éxito: imagen en escala de grises que recupera el color al pasar
   por encima, igual criterio que el carrusel de casos del home. */
.cl-story-card__media img { filter: grayscale(100%); transition: filter var(--cl-dur-grayscale) var(--cl-ease-grayscale); }
.cl-story-card:hover .cl-story-card__media img,
.cl-story-card:focus-visible .cl-story-card__media img { filter: grayscale(0%); }
@media (prefers-reduced-motion: reduce) {
  .cl-story-card__media img { transition: none; }
}
.cl-story-card__body, .cl-post-card__body {
  /* 30px es el padding de tarjeta estándar del sitio. */
  display: flex; flex-direction: column; gap: var(--cl-space-2); padding: 30px;
}
.cl-story-card__client, .cl-post-card__meta {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600;
  color: var(--cl-accent); display: flex; gap: var(--cl-space-3);
}
.cl-post-card__date { color: var(--cl-text); font-weight: 400; }
.cl-story-card__title, .cl-post-card__title {
  font-family: var(--cl-font-heading); font-size: 25px; font-weight: 300; line-height: 30px; color: var(--cl-navy);
}
.cl-post-card__excerpt {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.6; color: var(--cl-text);
}
.cl-story-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--cl-space-2); margin: var(--cl-space-2) 0 0; padding: 0; }
.cl-story-card__tags li {
  font-family: var(--cl-font-body); font-size: 12px; color: var(--cl-text);
  border: 1px solid rgba(0,47,64,.15); border-radius: 40px; padding: 3px 10px;
}

@media (max-width: 1024px) {
  .cl-card-grid[data-columns="4"],
  .cl-card-grid[data-columns="5"],
  .cl-card-grid[data-columns="6"],
  .cl-card-grid[data-columns="7"],
  .cl-card-grid[data-columns="8"] { grid-template-columns: repeat(2, 1fr); }
  .cl-card-grid[data-columns="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cl-block { padding: var(--cl-space-6) 0; }
  .cl-page-hero__frame { margin: 0 var(--cl-space-3); padding: calc(90px + var(--cl-space-5)) 0 var(--cl-space-6); }
  .cl-card-grid { grid-template-columns: 1fr !important; }
  .cl-steps--alternating .cl-step,
  .cl-steps--columns { grid-template-columns: 1fr; }
  .cl-steps--alternating .cl-step--reverse .cl-step__body { order: 0; }
  .cl-split, .cl-compare, .cl-contact-cta__grid { grid-template-columns: 1fr; }
  .cl-split--reverse .cl-split__body { order: 0; }
  .cl-contact-cta__form-card { padding: var(--cl-space-5); }
}

.cl-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-3); }
.cl-field--guard { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) { .cl-contact-form__row { grid-template-columns: 1fr; } }

/* --- Barra de datos del caso de éxito ------------------------------------ */
.cl-block--case-meta { padding: var(--cl-space-5) 0; }
.cl-case-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cl-space-5); margin: 0;
  border-top: 1px solid rgba(0,47,64,.12); border-bottom: 1px solid rgba(0,47,64,.12);
  padding: var(--cl-space-5) 0;
}
.cl-case-meta__item dt {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600;
  color: var(--cl-accent); margin-bottom: var(--cl-space-2);
}
.cl-case-meta__item dd {
  margin: 0; font-family: var(--cl-font-heading); font-size: var(--cl-fs-md);
  font-weight: 500; color: var(--cl-navy);
}
.cl-case-meta__item dd span {
  display: block; font-family: var(--cl-font-body); font-size: var(--cl-fs-sm);
  font-weight: 400; color: var(--cl-text); margin-top: 2px;
}
.cl-case-meta__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--cl-space-2); margin: 0; padding: 0; }
.cl-case-meta__tags li {
  font-family: var(--cl-font-body); font-size: 13px; color: var(--cl-text);
  border: 1px solid rgba(0,47,64,.15); border-radius: 40px; padding: 4px 12px;
}

/* --- Blog: filtros, paginación y artículo -------------------------------- */
.cl-post-filters { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); margin-bottom: var(--cl-space-5); }
.cl-post-filter {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 500;
  color: var(--cl-navy); text-decoration: none; padding: 6px 16px; border-radius: 40px;
  border: 1px solid rgba(0,47,64,.16); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cl-post-filter:hover { border-color: var(--cl-btn-bg); color: var(--cl-btn-bg); }
.cl-post-filter--active { background: var(--cl-navy); border-color: var(--cl-navy); color: #FFFFFF; }
.cl-post-empty { font-family: var(--cl-font-body); font-size: var(--cl-fs-md); color: var(--cl-text); }
.cl-pagination { display: flex; gap: var(--cl-space-2); justify-content: center; margin-top: var(--cl-space-6); }
.cl-pagination__link {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 600;
  color: var(--cl-navy); text-decoration: none; min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(0,47,64,.16);
}
.cl-pagination__link--active { background: var(--cl-btn-bg); border-color: var(--cl-btn-bg); color: #FFFFFF; }

.cl-article { padding-top: var(--cl-space-6); }
.cl-article__header-inner { max-width: 820px; }
.cl-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-space-3);
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); margin: 0 0 var(--cl-space-3);
  color: var(--cl-text);
}
.cl-article__category { color: var(--cl-accent); font-weight: 600; }
.cl-article__title {
  font-family: var(--cl-font-heading); font-weight: 700; color: var(--cl-navy);
  font-size: clamp(32px, 4vw, 54px); line-height: 1.12; margin: 0;
}
.cl-article__lead {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-md); line-height: 1.6;
  color: var(--cl-text); margin: var(--cl-space-4) 0 0;
}
.cl-article__cover { margin: var(--cl-space-6) 0; }
.cl-article__cover img {
  width: 100%; height: auto; display: block; border-radius: var(--cl-radius-card);
  max-height: 520px; object-fit: cover;
}
.cl-article__body { margin: 0 auto; padding-bottom: var(--cl-space-6); }
.cl-article__body table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--cl-space-5);
  font-family: var(--cl-font-body); font-size: var(--cl-fs-sm);
}
.cl-article__body th, .cl-article__body td {
  border: 1px solid rgba(0,47,64,.14); padding: 10px 12px; text-align: left; vertical-align: top;
}
.cl-article__body th { background: rgba(0,47,64,.05); font-weight: 600; color: var(--cl-navy); }
.cl-article__body figure { margin: var(--cl-space-5) 0; }
.cl-article__body figure img { width: 100%; height: auto; border-radius: var(--cl-radius-card); display: block; }
.cl-article__back { max-width: 78ch; margin: 0 auto var(--cl-space-7); }

/* --- Artículo: respuesta rápida y FAQ ------------------------------------ */
.cl-article__quick {
  max-width: 78ch; margin: var(--cl-space-5) auto 0; padding: var(--cl-space-4) var(--cl-space-5);
  border-left: 4px solid var(--cl-accent); background: #FFFFFF; border-radius: var(--cl-radius-sm);
}
.cl-article__quick-label {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cl-accent); margin: 0 0 var(--cl-space-2);
}
.cl-article__quick-text {
  font-family: var(--cl-font-body); font-size: var(--cl-fs-md); line-height: 1.6;
  color: var(--cl-navy); margin: 0;
}
.cl-article__faq { max-width: 78ch; margin: 0 auto var(--cl-space-6); }
.cl-article__faq > h2 {
  font-family: var(--cl-font-heading); font-size: var(--cl-fs-xl); font-weight: 600;
  color: var(--cl-navy); margin: 0 0 var(--cl-space-4);
}
.cl-article__body blockquote {
  margin: var(--cl-space-5) 0; padding: var(--cl-space-4) var(--cl-space-5);
  border-left: 4px solid var(--cl-cyan); background: #FFFFFF; border-radius: var(--cl-radius-sm);
  font-family: var(--cl-font-body); font-size: var(--cl-fs-base); line-height: 1.65; color: var(--cl-navy);
}
.cl-article__body blockquote p:last-child { margin-bottom: 0; }