/* ========================================
   CREATIVA DIGITAL — CSS GLOBAL
   Optimizado: sin duplicados, ordenado por sección
======================================== */


/* ========================================
   1. VARIABLES
======================================== */

:root {
  --cd-primary: #18A0FB;
  --cd-primary-dark: #0B4F7D;
  --cd-black: #0F1115;
  --cd-gray: #6B7280;
  --cd-light: #F7F8FA;
  --cd-white: #FFFFFF;
  --cd-container: 1360px;
  --cd-radius: 28px;
  --cd-shadow: 0 30px 90px rgba(0,0,0,.18);
}


/* ========================================
   2. RESET & BASE
======================================== */

* { box-sizing: border-box }

body {
  margin: 0;
  font-family: Manrope, Inter, Arial, sans-serif;
  background: var(--cd-black);
  overflow-x: hidden;
}


/* ========================================
   3. ASTRA OVERRIDES
======================================== */

html, body, .site, .site-content, .ast-container,
.site-content .ast-container, #primary, .content-area,
.site-main, .entry-content, .entry-content > .wp-block-html {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cd-page-full {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden;
}

/* Header */
.site-header, .main-header-bar, .ast-primary-header-bar,
.ast-builder-grid-row-container, .ast-builder-grid-row,
.ast-builder-grid-row-container-inner {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.site-header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.ast-primary-header-bar { min-height: 110px !important }
.ast-builder-grid-row-container-inner { padding-left: 40px !important; padding-right: 40px !important }
.custom-logo { max-width: 190px; height: auto }
.main-header-menu .menu-link { color: #fff !important; font-weight: 800; font-size: 15px; text-shadow: 0 2px 14px rgba(0,0,0,.35) }
.main-header-menu .menu-link:hover { color: var(--cd-primary) !important }


/* ========================================
   4. LAYOUT BASE
======================================== */

.cd-site { width: 100%; overflow: hidden }
.cd-container { width: 100%; max-width: var(--cd-container); margin: 0 auto; padding: 0 clamp(24px,5vw,86px) }
.cd-section { position: relative; width: 100%; padding: 120px 0; overflow: hidden }

.cd-bg-dark  { background: var(--cd-black); color: #fff }
.cd-bg-white { background: #fff; color: var(--cd-black); padding-top: 95px !important; padding-bottom: 95px !important }
.cd-bg-light { background: var(--cd-light); color: var(--cd-black); padding-top: 95px !important; padding-bottom: 95px !important }
.cd-bg-blue  { background: linear-gradient(135deg, var(--cd-primary-dark), var(--cd-primary)); color: #fff }


/* ========================================
   5. TYPOGRAPHY
======================================== */

.cd-eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--cd-primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cd-eyebrow-light { color: #fff }

.cd-section-head { max-width: 940px; margin-bottom: 42px }

.cd-section-head h2,
.cd-redesign h2,
.cd-commerce-card h2,
.cd-diagnostic h2 {
  margin: 0 0 22px;
  font-size: clamp(34px,4.4vw,64px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 800;
}

.cd-section-head p,
.cd-redesign p,
.cd-commerce-card p,
.cd-diagnostic p {
  font-size: 20px;
  line-height: 1.75;
  color: inherit;
  opacity: .72;
}

/* Secciones claras */
.cd-bg-white .cd-section-head h2,
.cd-bg-light .cd-section-head h2 { color: #0F1115 !important }

.cd-bg-white .cd-eyebrow,
.cd-bg-light .cd-eyebrow { color: #18A0FB !important }

.cd-bg-white .cd-section-head,
.cd-bg-light .cd-section-head { max-width: 1080px }

.cd-bg-dark .cd-section-head h2 { color: #fff !important }
.cd-bg-dark .cd-section-head p  { color: rgba(255,255,255,.72) !important }


/* ========================================
   6. BUTTONS
======================================== */

.cd-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 42px }

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 28px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none !important;
  transition: .28s ease;
}

.cd-btn-primary { background: var(--cd-primary); color: #fff !important; box-shadow: 0 18px 50px rgba(24,160,251,.25) }
.cd-btn-primary:hover { background: var(--cd-primary-dark); transform: translateY(-2px) }
.cd-btn-secondary { border: 1px solid rgba(255,255,255,.24); color: #fff !important }
.cd-btn-secondary:hover { background: #fff; color: var(--cd-black) !important }
.cd-btn-light { background: #fff; color: var(--cd-black) !important }


/* ========================================
   7. HERO — HOME
======================================== */

.cd-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 165px 0 120px;
  background-image:
    linear-gradient(rgba(15,17,21,.78), rgba(15,17,21,.84)),
    url("https://creativadigital.com.ar/wp-content/uploads/2026/05/Diseno-WEB-avanzado.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.cd-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,540px); gap: clamp(52px,7vw,110px); align-items: center }
.cd-hero h1 { max-width: 850px; margin: 0 0 30px; color: #fff; font-size: clamp(50px,6vw,94px); line-height: .94; letter-spacing: -.065em; font-weight: 800 }
.cd-hero p  { max-width: 660px; margin: 0; color: rgba(255,255,255,.72); font-size: 21px; line-height: 1.75 }

.cd-hero-visual { display: flex; justify-content: flex-end }

.cd-mockup-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 44px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: var(--cd-shadow);
  overflow: hidden;
  animation: cdFloat 6s ease-in-out infinite;
}

.cd-mockup-card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -140px;
  right: -120px;
  background: rgba(24,160,251,.18);
  filter: blur(90px);
}

.cd-mockup-card > * { position: relative; z-index: 2 }
.cd-mockup-card span { color: var(--cd-primary); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.cd-mockup-card h3   { margin: 20px 0 16px; color: #fff; font-size: clamp(30px,3vw,44px); line-height: 1.08; letter-spacing: -.04em }
.cd-mockup-card p    { color: rgba(255,255,255,.72); font-size: 17px }

.cd-ui-lines { display: grid; gap: 12px; margin-top: 34px }
.cd-ui-lines i { display: block; height: 12px; border-radius: 999px; background: rgba(255,255,255,.12) }
.cd-ui-lines i:nth-child(1) { width: 80% }
.cd-ui-lines i:nth-child(2) { width: 58% }
.cd-ui-lines i:nth-child(3) { width: 70% }


/* ========================================
   8. PROJECTS
======================================== */

.cd-project-grid { display: grid; gap: 32px }

.cd-project-card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items: end;
  padding: 26px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  transition: .35s ease;
}
.cd-project-card:hover { transform: translateY(-8px); border-color: rgba(24,160,251,.4) }

.cd-project-image { overflow: hidden }
.cd-project-image img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
  border-radius: 28px;
  transition: .6s ease;
}
.cd-project-card:hover .cd-project-image img { transform: scale(1.04) }

.cd-project-card span,
.cd-commerce-card span,
.cd-blog-card span { color: var(--cd-primary); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }

.cd-project-card h3 { margin: 16px 0; color: #fff; font-size: 42px; letter-spacing: -.04em }
.cd-project-card p  { color: rgba(255,255,255,.7); line-height: 1.7 }
.cd-project-card a,
.cd-commerce-card a { color: var(--cd-primary); font-weight: 900; text-decoration: none }

.cd-before-after { display: grid; gap: 20px }
.cd-before-after img { width: 100%; display: block; margin: 18px 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25) }
.cd-before-after div,
.cd-commerce-card,
.cd-form-box { padding: 36px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05) }
.cd-before-after span { color: var(--cd-primary); font-weight: 900; text-transform: uppercase }
.cd-before-after p    { color: rgba(255,255,255,.72) }


/* ========================================
   9. SERVICE CARDS & PROCESS
======================================== */

.cd-services-grid,
.cd-process-grid,
.cd-blog-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px }

.cd-service-card,
.cd-step,
.cd-blog-card {
  position: relative;
  min-height: 230px !important;
  padding: 34px !important;
  border-radius: var(--cd-radius);
  background: #fff;
  color: var(--cd-black);
  box-shadow: 0 18px 60px rgba(15,17,21,.08);
  text-decoration: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: .3s ease;
}
.cd-service-card:hover,
.cd-step:hover,
.cd-blog-card:hover { transform: translateY(-8px); box-shadow: 0 28px 80px rgba(15,17,21,.14) }

.cd-service-card span,
.cd-step span { font-size: 38px !important; margin-bottom: 34px; color: rgba(24,160,251,.45) !important }

.cd-service-card h3,
.cd-step h3,
.cd-blog-card h3 { margin: 0 0 14px !important; color: #0F1115 !important; font-size: 22px !important; line-height: 1.18 !important }

.cd-service-card p,
.cd-step p,
.cd-blog-card p { color: #6B7280 !important; font-size: 15px !important; line-height: 1.65 !important }

.cd-blog-card { min-height: 240px !important }
.cd-blog-card span { margin-bottom: 26px; display: block; color: #18A0FB !important }


/* ========================================
   10. SPECIALTIES
======================================== */

.cd-specialties { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px }

.cd-specialties a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 30px;
  border-radius: 20px;
  background: #fff !important;
  color: #0F1115 !important;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none !important;
  border: 1px solid rgba(15,17,21,.06);
  transition: .3s ease;
}
.cd-specialties a::after { content: "→"; color: var(--cd-primary) }
.cd-specialties a:hover  { transform: translateX(8px); box-shadow: 0 18px 50px rgba(15,17,21,.08); background: #0F1115 !important; color: #fff !important }


/* ========================================
   11. REDESIGN / COMMERCE GRIDS
======================================== */

.cd-redesign-grid,
.cd-commerce-grid,
.cd-diagnostic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }

.cd-redesign-compare   { grid-template-columns: 1fr 1fr }
.cd-redesign-problems  { grid-template-columns: repeat(3,1fr) }

.cd-commerce-card {
  background: #0F1115;
  color: #fff;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
}
.cd-commerce-card h2 { color: #FFFFFF !important; font-size: clamp(34px,3.4vw,54px); line-height: 1.05; letter-spacing: -.05em; margin: 10px 0 12px }
.cd-commerce-card p  { color: rgba(255,255,255,.82) !important; font-size: 20px; line-height: 1.7 }
.cd-commerce-card a  { color: #18A0FB !important; font-weight: 900 }


/* ========================================
   12. MARQUEE
======================================== */

.cd-marquee { overflow: hidden; padding: 35px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08) }
.cd-marquee-track { display: flex; gap: 48px; width: max-content; animation: cdMarquee 28s linear infinite }
.cd-marquee span   { color: #fff; font-size: 28px; font-weight: 900; white-space: nowrap }


/* ========================================
   13. ANIMATIONS
======================================== */

.cd-reveal { opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity .85s ease, transform .85s ease, filter .85s ease }
.cd-reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0) }

@keyframes cdFloat   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes cdMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }


/* ========================================
   14. SERVICE PAGES — HERO
======================================== */

.cd-service-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 165px 0 120px;
  background:
    radial-gradient(circle at 82% 18%, rgba(24,160,251,.20), transparent 34%),
    linear-gradient(180deg, #0F1115 0%, #08090C 100%);
}

.cd-service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,540px);
  gap: clamp(52px,7vw,110px);
  align-items: center;
}

.cd-service-hero h1 { max-width: 850px; margin: 0 0 30px; color: #fff; font-size: clamp(50px,6vw,94px); line-height: .94; letter-spacing: -.065em; font-weight: 800 }
.cd-service-hero p  { max-width: 660px; color: rgba(255,255,255,.72); font-size: 21px; line-height: 1.75 }

.cd-service-mockup {
  min-height: 480px;
  padding: 44px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cdFloat 6s ease-in-out infinite;
}

.cd-service-mockup span,
.cd-service-project span { color: var(--cd-primary); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.cd-service-mockup h3   { color: #fff; font-size: clamp(30px,3vw,46px); line-height: 1.05; letter-spacing: -.04em }


/* ========================================
   15. SERVICE PAGES — CONTENT
======================================== */

.cd-service-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px }

.cd-service-mini-card {
  padding: 34px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(15,17,21,.08);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  transition: .3s ease;
}
.cd-service-mini-card:hover { transform: translateY(-8px); box-shadow: 0 28px 80px rgba(15,17,21,.14) }

.cd-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px }

/* Benefits */
.cd-service-benefits { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px }

.cd-benefit {
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.cd-benefit strong { display: block; margin-bottom: 30px; color: var(--cd-primary); font-size: 46px; line-height: 1 }
.cd-benefit span   { color: #fff; font-size: 20px; font-weight: 900 }

/* Benefits en secciones claras */
.cd-bg-white .cd-service-benefits,
.cd-bg-light .cd-service-benefits { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 22px; margin-top: 44px }

.cd-bg-white .cd-benefit,
.cd-bg-light .cd-benefit { min-height: 230px; padding: 32px; border-radius: 26px; background: #fff; border: 1px solid rgba(15,17,21,.06); box-shadow: 0 18px 60px rgba(15,17,21,.08) }

.cd-bg-white .cd-benefit strong,
.cd-bg-light .cd-benefit strong { display: block; margin-bottom: 28px; color: #18A0FB !important; font-size: 42px; line-height: 1 }

.cd-bg-white .cd-benefit span,
.cd-bg-light .cd-benefit span { display: block; color: #0F1115 !important; font-size: 22px; line-height: 1.15; font-weight: 900 }

/* Projects */
.cd-service-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 28px }

.cd-service-project { padding: 28px; border-radius: 34px; background: #0F1115; color: #fff }
.cd-service-project h3 { color: #fff; font-size: 42px; margin: 16px 0 }
.cd-service-project p  { color: rgba(255,255,255,.72) }

.cd-service-project-img { overflow: hidden; min-height: 300px; margin-bottom: 28px; border-radius: 26px; background: linear-gradient(135deg,rgba(24,160,251,.25),rgba(255,255,255,.05)) }
.cd-service-project-img img { width: 100%; height: 100%; min-height: 300px; display: block; object-fit: cover; border-radius: 26px; transition: .6s ease }
.cd-service-project:hover .cd-service-project-img img { transform: scale(1.04) }

/* Timeline — valor final (3 columnas) */
.cd-service-timeline {
  display: grid;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 20px !important;
}

.cd-timeline-item {
  min-width: 0 !important;
  min-height: 300px;
  padding: 34px 28px !important;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(15,17,21,.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cd-timeline-item span {
  display: block;
  margin-bottom: 28px;
  color: #18A0FB !important;
  font-size: 22px !important;
  font-weight: 900;
}

.cd-timeline-item h3 {
  margin: 0 0 14px !important;
  color: #0F1115 !important;
  font-size: clamp(24px,1.8vw,30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  word-break: normal !important;
  hyphens: none !important;
}

.cd-timeline-item p {
  color: #6B7280 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* FAQ */
.cd-service-faq { display: grid; gap: 14px; max-width: 820px; margin: 40px auto 0 }

.cd-service-faq details {
  background: #14181F;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  transition: .3s ease;
}
.cd-service-faq details:hover { transform: translateY(-1px); border-color: rgba(24,160,251,.25); box-shadow: 0 14px 34px rgba(0,0,0,.22) }

.cd-service-faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  min-height: 68px;
  padding: 16px 56px 16px 24px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  transition: .3s ease;
}
.cd-service-faq summary:hover { color: #18A0FB }
.cd-service-faq summary::-webkit-details-marker { display: none }
.cd-service-faq summary::after  { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: #18A0FB; font-size: 22px; font-weight: 300 }
.cd-service-faq details[open] summary::after { content: "−" }

.cd-service-faq details p { margin: 0; padding: 0 24px 22px; color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.7 }

.cd-service-faq-section .cd-section-head h2 { max-width: 900px; font-size: clamp(40px,4.2vw,68px) }


/* ========================================
   16. SERVICES HUB
======================================== */

.cd-sector-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px }

.cd-sector-card {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 38px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  box-shadow: 0 20px 70px rgba(15,17,21,.08);
  text-decoration: none !important;
  transition: .45s ease;
}
.cd-sector-card:hover { transform: translateY(-10px); box-shadow: 0 40px 100px rgba(24,160,251,.16) }

.cd-sector-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -120px;
  right: -120px;
  background: rgba(24,160,251,.12);
  filter: blur(70px);
  opacity: 0;
  transition: .5s ease;
}
.cd-sector-card:hover::before { opacity: 1 }

.cd-sector-card span { display: inline-block; margin-bottom: 22px; color: #18A0FB; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.cd-sector-card h3   { position: relative; z-index: 2; margin: 0 0 18px; color: #0F1115; font-size: 34px; line-height: 1.05; letter-spacing: -.04em }
.cd-sector-card p    { position: relative; z-index: 2; color: #6B7280; line-height: 1.7 }


/* ========================================
   17. SECTORES HUB
======================================== */

.cd-sector-mockup {
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    radial-gradient(circle at 80% 20%, rgba(24,160,251,.18), transparent 40%);
}

.cd-sector-differences { grid-template-columns: repeat(4,1fr) }

.cd-sector-comparison { display: grid; gap: 16px }

.cd-sector-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.cd-sector-row strong { color: #18A0FB; font-size: 20px }
.cd-sector-row span   { color: rgba(255,255,255,.76); font-weight: 700 }


/* ========================================
   18. INDUSTRIAS
======================================== */

.cd-industry-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(24,160,251,.22), transparent 34%),
    linear-gradient(180deg, #0F1115 0%, #08090C 100%);
}

.cd-industry-mockup {
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    radial-gradient(circle at 80% 20%, rgba(24,160,251,.2), transparent 42%);
}

.cd-industry-catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.cd-industry-catalog-grid h2 { color: #fff; font-size: clamp(34px,4vw,60px); line-height: 1.04; letter-spacing: -.05em; margin: 0 0 22px }
.cd-industry-catalog-grid p  { color: rgba(255,255,255,.76); font-size: 20px; line-height: 1.75; margin-bottom: 34px }

.cd-industry-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.cd-industry-feature-list div { padding: 26px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); color: #fff; font-weight: 900 }

/* Industrias en sección blanca */
.cd-bg-white .cd-industry-catalog-grid h2,
.cd-bg-white .cd-industry-catalog-grid p    { color: #0F1115 !important }
.cd-bg-white .cd-industry-catalog-grid h2   { font-size: clamp(38px,4vw,64px); line-height: 1.04; letter-spacing: -.05em; margin: 0 0 22px }
.cd-bg-white .cd-industry-catalog-grid p    { font-size: 20px; line-height: 1.75; color: #4B5563 !important; margin-bottom: 34px }
.cd-bg-white .cd-industry-feature-list div  { background: #fff !important; color: #0F1115 !important; border: 1px solid rgba(15,17,21,.08) !important; box-shadow: 0 18px 60px rgba(15,17,21,.08) }

.cd-keyword-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1120px; margin: 46px auto 0 }

.cd-keyword-chip {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15,17,21,.06);
  box-shadow: 0 18px 60px rgba(15,17,21,.08);
  color: #0F1115;
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  transition: .3s ease;
}
.cd-keyword-chip:hover { transform: translateY(-6px); box-shadow: 0 26px 80px rgba(24,160,251,.16) }

.cd-industry-ux,
.cd-industry-ux-light { grid-template-columns: repeat(5,1fr) }

/* Fix benefits en secciones claras */
.cd-bg-light .cd-benefit { background: #fff; border: 1px solid rgba(15,17,21,.06); box-shadow: 0 18px 60px rgba(15,17,21,.08) }
.cd-bg-light .cd-benefit span   { color: #0F1115 !important }
.cd-bg-light .cd-benefit strong { color: #18A0FB !important }


/* ========================================
   19. LANDING PAGES
======================================== */

.cd-landing-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(24,160,251,.24), transparent 34%),
    linear-gradient(180deg, #0F1115 0%, #08090C 100%);
}

.cd-landing-mockup { position: relative }
.cd-landing-mockup::after {
  content: "";
  position: absolute;
  inset: auto 34px 34px 34px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0FB 0%, rgba(255,255,255,.18) 64%);
  box-shadow: 0 0 38px rgba(24,160,251,.45);
}

.cd-landing-pain { grid-template-columns: repeat(4,1fr) }
.cd-landing-use  { grid-template-columns: repeat(5,1fr) }

.cd-landing-flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px }
.cd-landing-flow .cd-timeline-item { min-height: 260px }


/* ========================================
   20. DIAGNÓSTICO WEB
======================================== */

.cd-diagnostic-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 110px 0 70px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(24,160,251,.22), transparent 34%),
    linear-gradient(180deg, #0F1115 0%, #08090C 100%);
}

.cd-diagnostic-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(420px,560px) !important;
  gap: 70px !important;
  align-items: center !important;
}

.cd-diagnostic-hero h1 { max-width: 720px; font-size: clamp(54px,5.4vw,88px) !important; line-height: .92 !important; letter-spacing: -.065em; margin-bottom: 22px !important }
.cd-diagnostic-hero .cd-service-hero-content p { max-width: 620px; font-size: 18px !important; line-height: 1.65 !important; margin-bottom: 28px !important }

.cd-diagnostic-form-box {
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 28px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
}
.cd-diagnostic-form-box span { color: #18A0FB; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.cd-diagnostic-form-box h3   { color: #fff; font-size: 30px !important; line-height: 1.08; letter-spacing: -.04em; margin: 12px 0 8px !important }
.cd-diagnostic-form-box p    { color: rgba(255,255,255,.72); font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 18px !important }

.cd-diagnostic-form { display: grid; gap: 9px !important }
.cd-diagnostic-form label { font-size: 14px !important; margin-bottom: 4px !important }

.cd-diagnostic-form input,
.cd-diagnostic-form select,
.cd-diagnostic-form textarea {
  width: 100%;
  min-height: 42px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: inherit;
  font-size: 14px !important;
  outline: none;
}

.cd-diagnostic-form textarea { min-height: 82px !important; resize: vertical }
.cd-diagnostic-form input::placeholder,
.cd-diagnostic-form textarea::placeholder { color: rgba(255,255,255,.56) }
.cd-diagnostic-form select { color: rgba(255,255,255,.8) }

.cd-diagnostic-form input[type="submit"],
.cd-diagnostic-form button,
.cd-diagnostic-form .wpcf7-submit {
  min-height: 44px !important;
  border: 0;
  border-radius: 10px !important;
  background: #18A0FB;
  color: #fff;
  font-weight: 900;
  font-size: 13px !important;
  letter-spacing: .08em;
  cursor: pointer;
  transition: .3s ease;
}
.cd-diagnostic-form button:hover,
.cd-diagnostic-form input[type="submit"]:hover { background: #0B4F7D; transform: translateY(-2px) }

.cd-diagnostic-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 28px }

.cd-diagnostic-state { padding: 38px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045) }
.cd-diagnostic-state span { color: #18A0FB; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.cd-diagnostic-state h3   { color: #fff; font-size: 34px; line-height: 1.08; letter-spacing: -.04em; margin: 18px 0 24px }
.cd-diagnostic-state ul   { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px }
.cd-diagnostic-state li   { color: rgba(255,255,255,.76); font-weight: 700 }
.cd-diagnostic-state li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #18A0FB }

.cd-form-box { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22) }
.cd-form-box h3 { font-size: 34px; margin: 0 0 12px }


/* ========================================
   21. LEGAL
======================================== */

.cd-legal-hero {
  padding: 30px 0 40px !important;
  min-height: auto !important;
}
.cd-legal-hero .cd-service-hero-grid { display: block }
.cd-legal-hero .cd-service-hero-visual { display: none }
.cd-legal-hero h1 { max-width: 800px; font-size: clamp(42px,4vw,72px); line-height: .95 }
.cd-legal-hero p  { max-width: 700px; margin-top: 24px }

.cd-legal-content { max-width: 980px }
.cd-legal-content h2 { margin: 54px 0 16px; color: #0F1115; font-size: clamp(28px,3vw,44px); line-height: 1.08; letter-spacing: -.04em }
.cd-legal-content p  { max-width: 880px; margin: 0 0 18px; color: #4B5563; font-size: 18px; line-height: 1.8 }
.cd-legal-content strong { color: #0F1115 }


/* ========================================
   22. RESPONSIVE — 1200px
======================================== */

@media (max-width: 1200px) {
  .cd-service-timeline { grid-template-columns: repeat(2,1fr) !important }
}


/* ========================================
   23. RESPONSIVE — 1024px
======================================== */

@media (max-width: 1024px) {
  .cd-hero-grid,
  .cd-project-card,
  .cd-redesign-grid,
  .cd-commerce-grid,
  .cd-diagnostic-grid       { grid-template-columns: 1fr }
  .cd-services-grid,
  .cd-process-grid,
  .cd-blog-grid              { grid-template-columns: 1fr 1fr }
  .cd-service-hero-grid,
  .cd-service-grid,
  .cd-service-benefits,
  .cd-service-projects       { grid-template-columns: 1fr 1fr }
  .cd-service-strip          { grid-template-columns: 1fr 1fr }
  .cd-sector-grid            { grid-template-columns: 1fr 1fr }
  .cd-sector-differences     { grid-template-columns: 1fr 1fr }
  .cd-sector-row             { grid-template-columns: 1fr 1fr }
  .cd-industry-catalog-grid,
  .cd-keyword-grid,
  .cd-industry-ux,
  .cd-industry-ux-light      { grid-template-columns: 1fr 1fr }
  .cd-landing-pain,
  .cd-landing-use,
  .cd-landing-flow           { grid-template-columns: 1fr 1fr }
  .cd-diagnostic-hero        { min-height: auto; padding: 120px 0 70px !important }
  .cd-diagnostic-hero-grid   { grid-template-columns: 1fr !important }
  .cd-diagnostic-before-after{ grid-template-columns: 1fr }
  .cd-diagnostic-form-box    { max-height: none; overflow: visible }

  /* Astra mobile menu */
  #ast-hf-menu-1-mobile,
  #ast-hf-menu-1-mobile.main-header-menu,
  .main-navigation #ast-hf-menu-1-mobile { background: #0F1115 !important }

  #ast-hf-menu-1-mobile li.menu-item { background: #0F1115 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important }

  #ast-hf-menu-1-mobile li.menu-item > a.menu-link {
    background: #0F1115 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 20px 28px !important;
  }

  #ast-hf-menu-1-mobile li.menu-item > a.menu-link:hover,
  #ast-hf-menu-1-mobile li.current-menu-item > a.menu-link { color: #18A0FB !important }

  #ast-hf-menu-1-mobile .ast-menu-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #FFFFFF !important }

  #ast-hf-menu-1-mobile .ast-menu-toggle .ast-icon,
  #ast-hf-menu-1-mobile .ast-menu-toggle svg,
  #ast-hf-menu-1-mobile .dropdown-menu-toggle svg { fill: #FFFFFF !important; color: #FFFFFF !important }

  #ast-hf-menu-1-mobile .sub-menu { background: #111827 !important; padding: 6px 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important }
  #ast-hf-menu-1-mobile .sub-menu li.menu-item { background: #111827 !important; border-bottom: 0 !important }
  #ast-hf-menu-1-mobile .sub-menu li.menu-item > a.menu-link {
    background: #111827 !important;
    color: rgba(255,255,255,.82) !important;
    text-shadow: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 13px 40px !important;
  }
  #ast-hf-menu-1-mobile .sub-menu li.menu-item > a.menu-link:hover { color: #18A0FB !important }
}


/* ========================================
   24. RESPONSIVE — 768px
======================================== */

@media (max-width: 768px) {
  .cd-section                 { padding: 82px 0 }
  .cd-hero                    { min-height: auto; padding: 130px 0 82px }
  .cd-hero h1                 { font-size: 42px }
  .cd-hero p,
  .cd-section-head p          { font-size: 18px }
  .cd-actions                 { flex-direction: column }
  .cd-btn                     { width: 100% }
  .cd-services-grid,
  .cd-process-grid,
  .cd-blog-grid,
  .cd-specialties             { grid-template-columns: 1fr }
  .cd-project-image           { min-height: 220px }
  .custom-logo                { max-width: 160px }
  .cd-service-hero            { min-height: auto; padding: 130px 0 82px }
  .cd-service-hero h1         { font-size: 42px }
  .cd-service-hero-grid,
  .cd-service-grid,
  .cd-service-benefits,
  .cd-service-projects,
  .cd-service-strip           { grid-template-columns: 1fr }
  .cd-service-timeline        { grid-template-columns: 1fr !important }
  .cd-service-mockup          { min-height: 340px }
  .cd-sector-grid             { grid-template-columns: 1fr }
  .cd-sector-card             { min-height: auto }
  .cd-sector-differences,
  .cd-sector-row              { grid-template-columns: 1fr }
  .cd-redesign-compare,
  .cd-redesign-problems       { grid-template-columns: 1fr }
  .cd-industry-catalog-grid,
  .cd-industry-feature-list,
  .cd-keyword-grid,
  .cd-industry-ux,
  .cd-industry-ux-light       { grid-template-columns: 1fr }
  .cd-landing-pain,
  .cd-landing-use,
  .cd-landing-flow            { grid-template-columns: 1fr }
  .cd-diagnostic-state        { padding: 28px }
  .cd-diagnostic-form-box     { padding: 28px }
  .cd-service-faq             { max-width: 100%; margin-top: 34px }
  .cd-service-faq summary     { min-height: 62px; padding: 14px 48px 14px 20px; font-size: 17px }
  .cd-service-faq details p   { padding: 0 20px 20px; font-size: 15px }
  .cd-service-faq summary::after { right: 20px; font-size: 21px }
  .cd-legal-hero              { padding: 90px 0 60px }
  .cd-legal-hero h1           { font-size: 48px }
  .cd-legal-content h2        { margin-top: 38px }
  .cd-legal-content p         { font-size: 16px }
}