/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0d1f3c;
  --navy2:  #071020;
  --teal:   #0fb39b;
  --teal2:  #24ccb0;
  --gold:   #c9a84c;
  --gold2:  #dab96e;
  --light:  #f0f4ff;
  --white:  #ffffff;
  --gray:   #64748b;
  --shadow: 0 4px 28px rgba(7,16,32,.12);
  --radius: 16px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --transition: .32s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: #334155;
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Utility ──────────────────────────────────────────────── */
.container { width: min(1180px, 92%); margin-inline: auto; }
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--navy);
  text-align: center;
  margin-bottom: .5rem;
  letter-spacing: -.3px;
}
.section-subtitle {
  text-align: center;
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.72;
  margin-bottom: 3.5rem;
}
.divider {
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent);
  margin: .85rem auto 1.4rem;
  border-radius: 2px;
}
section { padding: 110px 0; }

/* ─── Animaciones de carga del Hero ─────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-anim {
  opacity: 0;
  animation: fadeInUp .9s var(--ease-out) forwards;
}
.hero-anim-card {
  opacity: 0;
  animation: fadeInRight 1s var(--ease-out) forwards;
}
.hero-d1 { animation-delay: .08s; }
.hero-d2 { animation-delay: .22s; }
.hero-d3 { animation-delay: .38s; }
.hero-d4 { animation-delay: .54s; }
.hero-d5 { animation-delay: .70s; }
.hero-d6 { animation-delay: .86s; }
.hero-d7 { animation-delay: 1.02s; }

/* ─── Scroll Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .28s; }
.reveal-d4 { transition-delay: .38s; }
.reveal-d5 { transition-delay: .48s; }
.reveal-d6 { transition-delay: .58s; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }
.reveal-delay-6 { transition-delay: .6s; }

/* ─── Ripple ─────────────────────────────────────────────────── */
.btn-primary,
.btn-calendly { position: relative; overflow: hidden; }

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  transform: scale(0);
  animation: rippleAnim .55s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4.5); opacity: 0; }
}

/* ─── NAV ──────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  padding: 0;
  background: rgba(7,16,32,.38);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
#navbar.scrolled {
  background: rgba(7,16,32,.94);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 40px rgba(0,0,0,.4);
}
#navbar.scrolled .nav-inner { padding: .55rem 0; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  transition: padding var(--transition);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}
.nav-logo-icon {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 10px;
  transition: height var(--transition);
  flex-shrink: 0;
}
#navbar.scrolled .nav-logo-icon { height: 34px; }
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav-logo-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .4px;
}
.nav-logo-tex { color: var(--teal2); }
.nav-logo-tagline {
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .2px;
  position: relative;
  padding-bottom: 4px;
  transition: color .28s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border-radius: 2px;
  transition: width .35s var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--teal2); }
.nav-links a.active::after { width: 100%; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(7,16,32,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    z-index: 998;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.25rem; }
}

/* ─── HERO ─────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes orbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .65; transform: scale(1.06); }
}

#inicio {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 65% 60% at 12% 45%, rgba(15,179,155,.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 75% at 88% 18%, rgba(20,85,170,.18) 0%, transparent 55%),
    radial-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(145deg, #071020 0%, #0c1a30 40%, #0e2040 75%, #071828 100%);
  background-size: auto, auto, 28px 28px, 100% 100%;
  overflow: hidden;
  padding-top: 105px;
}
#inicio::before {
  content: '';
  position: absolute;
  top: -140px; right: -140px;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,179,155,.11) 0%, transparent 65%);
  pointer-events: none;
  animation: orbPulse 9s ease-in-out infinite;
}
#inicio::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,85,170,.1) 0%, transparent 65%);
  pointer-events: none;
  animation: orbPulse 11s ease-in-out infinite reverse;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(15,179,155,.1);
  border: 1px solid rgba(15,179,155,.25);
  color: var(--teal2);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .45rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 1.1rem;
  letter-spacing: -.5px;
}
.hero-title span {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 55%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,.55);
  font-weight: 400;
  margin-bottom: 1.75rem;
  letter-spacing: .5px;
  font-style: italic;
}
.hero-text {
  color: rgba(255,255,255,.7);
  line-height: 1.82;
  font-size: .97rem;
  margin-bottom: 2.5rem;
  max-width: 500px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  color: #071020;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .28s var(--ease-out), box-shadow .28s ease, filter .28s ease;
  box-shadow: 0 4px 22px rgba(15,179,155,.38), inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing: .1px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(15,179,155,.52), inset 0 1px 0 rgba(255,255,255,.15);
  filter: brightness(1.06);
}
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--teal2);
  display: inline-block;
  min-width: 3.5ch;
}
.stat-label {
  font-size: .77rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .5px;
}
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.08);
  animation: float 8s ease-in-out infinite;
}
.hero-card-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(15,179,155,.35);
}
.hero-card-icon i { font-size: 1.55rem; color: #071020; }
.hero-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--white);
  font-size: 1.18rem;
  margin-bottom: .7rem;
}
.hero-card p { color: rgba(255,255,255,.6); font-size: .87rem; line-height: 1.72; }
.hero-card-list {
  list-style: none;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.hero-card-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
}
.hero-card-list li i { color: var(--teal2); font-size: .8rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-text { margin-inline: auto; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
}

/* ─── SERVICES ─────────────────────────────────────────────── */
#servicios {
  background: var(--light);
  position: relative;
}

.section-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.section-watermark i {
  font-size: 44rem;
  color: var(--navy);
  opacity: .05;
  line-height: 1;
}

#servicios .container { position: relative; z-index: 1; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}
.service-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  box-shadow: 0 2px 10px rgba(7,16,32,.07), 0 8px 28px rgba(7,16,32,.05);
  border: 1px solid rgba(7,16,32,.07);
  border-top: 3px solid var(--teal);
  transition:
    transform .42s var(--ease-out),
    box-shadow .42s var(--ease-out),
    background .42s ease,
    border-color .42s ease;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.service-card::before {
  content: attr(data-num);
  position: absolute;
  bottom: -.75rem; right: 1.25rem;
  font-family: 'Playfair Display', serif;
  font-size: 6.5rem;
  font-weight: 700;
  color: var(--navy);
  opacity: .05;
  line-height: 1;
  pointer-events: none;
  transition: opacity .42s ease, color .42s ease;
  user-select: none;
}

.service-card::after { content: none; }

.service-card:hover {
  background: var(--navy);
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(7,16,32,.3), 0 0 0 2px rgba(15,179,155,.38), 0 0 24px rgba(15,179,155,.12);
  border-color: var(--teal);
}
.service-card:hover::before {
  opacity: .12;
  color: var(--teal);
}

.service-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--navy) 0%, #152a4e 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background .42s ease, transform .6s ease-out, box-shadow .32s ease;
  box-shadow: 0 3px 12px rgba(7,16,32,.16);
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  transform: rotate(360deg) scale(1.06);
  box-shadow: 0 6px 20px rgba(15,179,155,.4);
}
.service-icon i {
  font-size: 1.35rem;
  color: var(--white);
  transition: color .42s ease;
}
.service-card:hover .service-icon i { color: #071020; }

.service-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  color: var(--navy);
  margin-bottom: .7rem;
  transition: color .42s ease;
  letter-spacing: -.1px;
}
.service-card:hover h3 { color: var(--white); }

.service-card p {
  color: var(--gray);
  font-size: .87rem;
  line-height: 1.78;
  transition: color .42s ease;
}
.service-card:hover p { color: rgba(255,255,255,.58); }

/* ─── ABOUT ────────────────────────────────────────────────── */
#sobre-mi { background: var(--white); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}
.about-visual { position: relative; }
.about-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--navy) 0%, #152a4e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.5);
}
.about-img-placeholder i { font-size: 4rem; color: var(--teal); }
.about-img-placeholder span { font-size: .85rem; letter-spacing: 1px; }
.about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.about-badge {
  position: absolute;
  bottom: -1.5rem; right: -1.5rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  color: #071020;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(15,179,155,.4);
}
.about-badge strong { display: block; font-size: 1.8rem; font-family: 'Playfair Display', serif; }
.about-badge span { font-size: .75rem; font-weight: 600; letter-spacing: 1px; }
.about-content { padding-bottom: 1rem; }
.about-content .section-title { text-align: left; }
.about-content .divider { margin-left: 0; }
.about-content .section-subtitle { text-align: left; margin-bottom: 1.5rem; }
.about-text { color: var(--gray); line-height: 1.88; font-size: .96rem; margin-bottom: 1.5rem; }
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 1.5rem;
}
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem;
  background: var(--light);
  border-radius: 12px;
  border: 1px solid rgba(7,16,32,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.about-feature:hover { box-shadow: 0 4px 16px rgba(7,16,32,.1); transform: translateY(-2px); }
.about-feature i { color: var(--teal); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.about-feature p { font-size: .84rem; color: var(--navy); font-weight: 500; line-height: 1.4; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { display: none; }
  .about-content .section-title { text-align: center; }
  .about-content .divider { margin-inline: auto; }
  .about-content .section-subtitle { text-align: center; }
}

/* ─── CALENDLY ─────────────────────────────────────────────── */
#agendar { background: var(--light); }
.calendly-wrap {
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 8px 48px rgba(7,16,32,.1);
  overflow: hidden;
  border: 1px solid rgba(7,16,32,.07);
}

.calendly-header {
  background:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(135deg, #071020 0%, #0d1f3c 50%, #152a4e 100%);
  background-size: 24px 24px, 100% 100%;
  padding: 3.75rem 2.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.calendly-header-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3rem;
  pointer-events: none;
}
.calendly-header-bg i {
  font-size: 18rem;
  color: var(--teal);
  opacity: .05;
  line-height: 1;
}

.calendly-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendly-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(15,179,155,.12);
  border: 1px solid rgba(15,179,155,.28);
  color: var(--teal2);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.calendly-badge i { font-size: .75rem; }

.calendly-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--white);
  margin-bottom: .85rem;
  line-height: 1.15;
  letter-spacing: -.2px;
}
.calendly-header p {
  color: rgba(255,255,255,.62);
  max-width: 460px;
  line-height: 1.74;
  font-size: .95rem;
  margin-bottom: 2rem;
}

.calendly-trust {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.65);
  font-size: .83rem;
  font-weight: 500;
}
.trust-item i { color: var(--teal); font-size: .8rem; }

.calendly-body {
  padding: 3.25rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.calendly-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--gray);
  font-size: .85rem;
  max-width: 420px;
  line-height: 1.65;
}
.calendly-note i { color: var(--teal); flex-shrink: 0; font-size: .8rem; }
.calendly-inline-widget {
  border-radius: var(--radius);
  overflow: hidden;
}
.btn-calendly {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  color: #071020;
  padding: 1.1rem 2.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform .28s var(--ease-out), box-shadow .28s ease, filter .28s ease;
  box-shadow: 0 6px 28px rgba(15,179,155,.38), inset 0 1px 0 rgba(255,255,255,.15);
  margin-bottom: 2.5rem;
}
.btn-calendly:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(15,179,155,.52), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ─── CONTACT ──────────────────────────────────────────────── */
#contacto { background: var(--white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--navy);
  margin-bottom: .5rem;
  letter-spacing: -.2px;
}
.contact-info .divider { margin-left: 0; }
.contact-info p { color: var(--gray); line-height: 1.82; font-size: .95rem; margin-bottom: 2rem; }
.contact-items { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--light);
  border: 1px solid rgba(7,16,32,.06);
  transition: box-shadow .32s ease, transform .32s ease, border-color .32s ease;
  text-decoration: none;
  color: inherit;
}
.contact-item:hover {
  box-shadow: 0 8px 28px rgba(7,16,32,.1);
  transform: translateX(5px);
  border-color: rgba(15,179,155,.2);
}
.contact-icon {
  width: 46px; height: 46px;
  background: var(--navy);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .32s ease;
}
.contact-item:hover .contact-icon { background: var(--teal); }
.contact-icon i { font-size: 1.1rem; color: var(--white); transition: color .32s ease; }
.contact-item:hover .contact-icon i { color: #071020; }
.contact-detail strong { display: block; font-size: .78rem; color: var(--gray); letter-spacing: .5px; margin-bottom: .15rem; }
.contact-detail span { font-size: .95rem; color: var(--navy); font-weight: 500; }

.social-section { margin-top: 2rem; }
.social-section h4 { color: var(--navy); font-size: .9rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: .5px; }
.social-links { display: flex; gap: .75rem; }
.social-link {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.15rem;
  transition: transform .32s var(--ease-out), box-shadow .32s ease;
}
.social-link:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.social-link.linkedin  { background: #0a66c2; color: #fff; }
.social-link.whatsapp  { background: #25d366; color: #fff; }
.social-link.instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

.contact-card {
  background: linear-gradient(135deg, var(--navy) 0%, #152a4e 100%);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  color: var(--white);
}
.contact-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: .5rem;
  color: var(--white);
  letter-spacing: -.15px;
}
.contact-card p { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.74; margin-bottom: 2rem; }
.contact-card-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-card-list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.5;
}
.contact-card-list li i { color: var(--teal); font-size: .9rem; margin-top: 3px; flex-shrink: 0; }
.contact-cta { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.contact-cta p { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 1rem; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ─── FOOTER ───────────────────────────────────────────────── */
footer { background: var(--navy2); padding: 2.5rem 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo-img {
  height: 54px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
}
.footer-copy { color: rgba(255,255,255,.42); font-size: .82rem; }
.footer-copy a { color: var(--teal2); text-decoration: none; }

/* ─── Scroll-to-top ────────────────────────────────────────── */
#scrollTop {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 46px; height: 46px;
  background: var(--teal);
  color: #071020;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease, transform .32s var(--ease-out);
  box-shadow: 0 4px 18px rgba(15,179,155,.45);
  z-index: 800;
}
#scrollTop.show { opacity: 1; pointer-events: auto; }
#scrollTop:hover { transform: translateY(-3px); }

/* ─── TICKER TRIBUTARIO ────────────────────────────────────── */
#ticker-bar {
  position: fixed;
  top: 70px;
  left: 0; right: 0;
  height: 34px;
  background: linear-gradient(90deg, #0a6e58, #0e9276, #0a6e58);
  z-index: 997;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: top var(--transition);
}
#ticker-bar.navbar-shrunk { top: 55px; }
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 45s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-content {
  color: rgba(255,255,255,.9);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .4px;
  padding-right: 5rem;
  flex-shrink: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── HERO SYMBOLS ──────────────────────────────────────────── */
.hero-symbols {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-symbols span {
  position: absolute;
  color: var(--teal);
  opacity: .025;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  user-select: none;
  animation: heroSymFloat linear infinite;
}
.hero-symbols span:nth-child(1) { font-size: 6.5rem; top: 12%; left:  6%; animation-duration: 18s; animation-delay:   0s; }
.hero-symbols span:nth-child(2) { font-size: 4.5rem; top: 62%; left: 12%; animation-duration: 22s; animation-delay:  -4s; }
.hero-symbols span:nth-child(3) { font-size: 8.5rem; top: 28%; left: 44%; animation-duration: 20s; animation-delay:  -7s; }
.hero-symbols span:nth-child(4) { font-size: 5.5rem; top: 68%; left: 62%; animation-duration: 25s; animation-delay:  -2s; }
.hero-symbols span:nth-child(5) { font-size: 7.5rem; top:  8%; left: 74%; animation-duration: 17s; animation-delay: -10s; }
.hero-symbols span:nth-child(6) { font-size: 5rem;   top: 52%; left: 86%; animation-duration: 23s; animation-delay:  -5s; }
@keyframes heroSymFloat {
  0%   { transform: translateY(0)     rotate(0deg);  }
  25%  { transform: translateY(-16px) rotate(4deg);  }
  50%  { transform: translateY(-8px)  rotate(-2deg); }
  75%  { transform: translateY(-20px) rotate(3deg);  }
  100% { transform: translateY(0)     rotate(0deg);  }
}

/* ─── CHECKS SECUENCIALES ────────────────────────────────────── */
.check-item {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.check-item.in-view { opacity: 1; transform: translateX(0); }
.check-item:nth-child(1) { transition-delay: .1s; }
.check-item:nth-child(2) { transition-delay: .4s; }
.check-item:nth-child(3) { transition-delay: .7s; }
.check-item:nth-child(4) { transition-delay: 1.0s; }

.check-svg {
  width: 14px; height: 14px;
  stroke: var(--teal2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .55s ease-out;
}
.check-item.in-view .check-svg { stroke-dashoffset: 0; }
.check-item.in-view:nth-child(1) .check-svg { transition-delay: .1s; }
.check-item.in-view:nth-child(2) .check-svg { transition-delay: .4s; }
.check-item.in-view:nth-child(3) .check-svg { transition-delay: .7s; }
.check-item.in-view:nth-child(4) .check-svg { transition-delay: 1.0s; }

/* ─── WHATSAPP FLOTANTE ──────────────────────────────────────── */
#whatsapp-float {
  position: fixed;
  bottom: 5.75rem;
  right: 2rem;
  width: 60px; height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  z-index: 800;
  box-shadow: 0 4px 18px rgba(37,211,102,.5);
  animation: waPulse 4s linear infinite;
  transition: transform .3s ease-out;
}
#whatsapp-float:hover { transform: scale(1.1); animation-play-state: paused; }
@keyframes waPulse {
  0%   { box-shadow: 0 4px 18px rgba(37,211,102,.5), 0 0 0 0   rgba(37,211,102,.45); }
  20%  { box-shadow: 0 4px 18px rgba(37,211,102,.5), 0 0 0 16px rgba(37,211,102,0);  }
  100% { box-shadow: 0 4px 18px rgba(37,211,102,.5), 0 0 0 0   rgba(37,211,102,.45); }
}

/* ─── COUNTER BOUNCE ─────────────────────────────────────────── */
@keyframes counterBounce {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.3); }
  80%  { transform: scale(.95); }
  100% { transform: scale(1);   }
}
.counter-bounce { animation: counterBounce .5s ease-out forwards; }

/* ─── CALCULADORA TRIBUTARIA ────────────────────────────────── */
#calculadora {
  background:
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(15,179,155,.06) 0%, transparent 55%),
    radial-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(145deg, #071020 0%, #0c1a30 55%, #0d1f3a 100%);
  background-size: auto, 28px 28px, 100% 100%;
  position: relative;
  overflow: hidden;
}
#calculadora .section-title   { color: var(--white); }
#calculadora .section-subtitle { color: rgba(255,255,255,.58); }
#calculadora .section-watermark i { color: var(--teal); opacity: .04; }
#calculadora .container { position: relative; z-index: 1; }

.calc-widget {
  max-width: 640px;
  margin: 0 auto 3rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.calc-widget-label {
  color: rgba(255,255,255,.72);
  font-size: .87rem;
  font-weight: 500;
  margin-bottom: 1rem;
  letter-spacing: .25px;
}
.calc-input-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.calc-input-wrap {
  position: relative;
  flex: 0 0 100px;
}
.calc-input-icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal2);
  font-size: .8rem;
  pointer-events: none;
}
.calc-input {
  width: 100%;
  height: 100%;
  min-height: 56px;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(15,179,155,.28);
  border-radius: 12px;
  color: var(--white);
  font-size: 2rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-align: center;
  padding: 0 .5rem 0 1.5rem;
  transition: border-color .28s ease, box-shadow .28s ease;
  outline: none;
  -moz-appearance: textfield;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input::placeholder { color: rgba(255,255,255,.18); font-size: 1.75rem; }
.calc-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,179,155,.18);
}
.calc-input.invalid {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.15);
}
.calc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  color: #071020;
  padding: 1rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: transform .28s var(--ease-out), box-shadow .28s ease, filter .28s ease;
  box-shadow: 0 4px 20px rgba(15,179,155,.38);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(15,179,155,.52);
  filter: brightness(1.06);
}
.calc-btn:active { transform: translateY(0); }
.calc-error {
  margin-top: .75rem;
  font-size: .83rem;
  color: #fca5a5;
  min-height: 1.2em;
}

.calc-results { margin-bottom: 2rem; }
.calc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.calc-cards-grid.calc-single {
  grid-template-columns: minmax(230px, 380px);
  justify-content: center;
}
.calc-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  padding: 1.75rem;
  opacity: 0;
  transform: translateY(24px);
  animation: calcCardIn .5s ease-out forwards;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes calcCardIn {
  to { opacity: 1; transform: translateY(0); }
}
.calc-card-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 14px rgba(15,179,155,.32);
}
.calc-card-icon i { font-size: 1.3rem; color: #071020; }
.calc-card-name {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.48);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.calc-card-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.32);
  margin-bottom: .75rem;
}
.calc-card-date {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--teal2);
  margin-bottom: .75rem;
  line-height: 1.25;
}
.calc-card-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 600;
  padding: .3rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.calc-card-badge.upcoming {
  background: rgba(34,197,94,.14);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.2);
}
.calc-card-badge.expired {
  background: rgba(251,146,60,.11);
  color: #fdba74;
  border: 1px solid rgba(251,146,60,.18);
  font-size: .72rem;
  white-space: normal;
}
.calc-card-badge.today {
  background: rgba(15,179,155,.14);
  color: var(--teal2);
  border: 1px solid rgba(15,179,155,.25);
}
.calc-card-note {
  margin-top: .75rem;
  font-size: .76rem;
  color: rgba(255,255,255,.36);
  line-height: 1.5;
}
.calc-card-recurring {
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  line-height: 1.62;
  font-weight: 500;
  margin-bottom: .75rem;
}

.calc-disclaimer {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.calc-disclaimer > i {
  color: var(--teal);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.calc-disclaimer p {
  color: rgba(255,255,255,.52);
  font-size: .84rem;
  line-height: 1.65;
  margin-bottom: .85rem;
}
.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1.5px solid var(--teal);
  color: var(--teal2);
  background: transparent;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .28s ease, color .28s ease;
}
.btn-outline-gold:hover { background: var(--teal); color: #071020; }

@media (max-width: 1024px) and (min-width: 769px) {
  .nav-links { gap: .85rem; }
  .nav-links a { font-size: .77rem; }
}
@media (max-width: 600px) {
  .calc-input-row { flex-direction: column; }
  .calc-input-wrap { flex: unset; width: 100%; }
  .calc-input { padding: 0 1rem; }
  .calc-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .calc-cards-grid { grid-template-columns: 1fr; }
  .calc-toggle { flex-direction: column; }
}

/* ─── TOGGLE TIPO CONTRIBUYENTE ─────────────────────────────── */
.calc-toggle {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.75rem;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: .35rem;
}
.calc-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.48);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .28s ease, color .28s ease, box-shadow .28s ease;
  white-space: nowrap;
}
.calc-toggle-btn.active {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  color: #071020;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(15,179,155,.28);
}

/* ─── TARJETA CUOTAS RENTA ───────────────────────────────────── */
.calc-cuota {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .85rem;
  margin-top: .85rem;
}
.calc-cuota:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.calc-cuota-label,
.calc-card-sub-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.36);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

/* ─── IVA PRÓXIMOS PERÍODOS ──────────────────────────────────── */
.calc-iva-proximos {
  margin-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .75rem;
}
.calc-iva-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .74rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.calc-iva-item:last-child { border-bottom: none; }
.calc-iva-item .periodo { color: rgba(255,255,255,.33); }
.calc-iva-item .fecha   { color: rgba(255,255,255,.62); text-align: right; }

/* ─── NOTA EXÓGENA Y FUENTE DIAN ─────────────────────────────── */
.calc-exogena-note {
  background: rgba(15,179,155,.07);
  border: 1px solid rgba(15,179,155,.18);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  color: rgba(255,255,255,.7);
  font-size: .84rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.calc-exogena-note a { color: var(--teal2); text-decoration: none; font-weight: 600; }
.calc-exogena-note a:hover { text-decoration: underline; }
.calc-fuente {
  text-align: center;
  font-size: .74rem;
  color: rgba(255,255,255,.26);
  letter-spacing: .3px;
  margin-top: .25rem;
}
.calc-fuente a { color: rgba(15,179,155,.42); text-decoration: none; }
.calc-fuente a:hover { color: var(--teal2); }

/* ─── DIAGNÓSTICO TRIBUTARIO ────────────────────────────────── */
#diagnostico { background: var(--light); }

.diag-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 24px;
  padding: 2.75rem;
  box-shadow: 0 4px 32px rgba(7,16,32,.08), 0 16px 64px rgba(7,16,32,.06);
  border: 1px solid rgba(7,16,32,.06);
}
.diag-progress-wrap { margin-bottom: 2rem; }
.diag-progress-bar {
  height: 5px;
  background: rgba(7,16,32,.07);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .6rem;
}
.diag-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border-radius: 999px;
  width: 0%;
  transition: width .5s var(--ease-out);
}
.diag-progress-label {
  text-align: right;
  font-size: .74rem;
  color: var(--gray);
  font-weight: 500;
  letter-spacing: .25px;
}

.diag-quiz {
  position: relative;
  min-height: 300px;
}
.diag-q-num {
  font-size: .7rem;
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.diag-q-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.05rem, 2.5vw, 1.28rem);
  color: var(--navy);
  line-height: 1.48;
  margin-bottom: 1.75rem;
  letter-spacing: -.1px;
}
.diag-options {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.diag-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 2px solid rgba(7,16,32,.09);
  background: var(--white);
  color: var(--navy);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  width: 100%;
  transition: border-color .22s ease, background .22s ease, transform .2s ease, box-shadow .22s ease;
}
.diag-option:hover {
  border-color: var(--teal);
  background: rgba(15,179,155,.04);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(15,179,155,.11);
}
.diag-option.selected {
  border-color: var(--teal);
  background: rgba(15,179,155,.07);
  box-shadow: 0 4px 18px rgba(15,179,155,.15);
}
.diag-option-letter {
  min-width: 32px;
  height: 32px;
  background: rgba(7,16,32,.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
  transition: background .22s ease, color .22s ease;
}
.diag-option.selected .diag-option-letter {
  background: var(--teal);
  color: #071020;
}
.diag-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: none;
  color: var(--gray);
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  padding: .4rem .6rem;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.diag-back-btn:hover { color: var(--navy); background: rgba(7,16,32,.05); }

/* Result screen */
.diag-result-inner { text-align: center; padding-top: .5rem; }
.diag-semaforo-wrap {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 1.5rem;
}
.diag-circle-svg {
  width: 120px; height: 120px;
  transform: rotate(-90deg);
}
.diag-circle-bg {
  fill: none;
  stroke: rgba(7,16,32,.07);
  stroke-width: 8;
}
.diag-circle-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.diag-circle-animated { stroke-dashoffset: 0 !important; }
.diag-emoji {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.25rem;
  line-height: 1;
}
.diag-nivel {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: .75rem;
  letter-spacing: -.15px;
}
.diag-mensaje {
  color: var(--gray);
  font-size: .95rem;
  line-height: 1.78;
  max-width: 480px;
  margin: 0 auto 1.75rem;
}
.diag-areas {
  background: var(--light);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: 460px;
  text-align: left;
  border: 1px solid rgba(7,16,32,.06);
}
.diag-areas-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.diag-areas-label i { color: var(--teal); font-size: .8rem; }
.diag-areas ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.diag-areas ul li {
  font-size: .87rem;
  color: var(--gray);
  padding-left: 1rem;
  position: relative;
  line-height: 1.42;
}
.diag-areas ul li::before { content: '•'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.diag-cta { display: inline-flex; margin-bottom: 1rem; }
.diag-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1.5px solid rgba(7,16,32,.14);
  color: var(--gray);
  font-size: .84rem;
  font-weight: 500;
  padding: .65rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
  margin-bottom: 1.5rem;
}
.diag-restart-btn:hover { border-color: var(--navy); color: var(--navy); }
.diag-legal {
  font-size: .73rem;
  color: var(--gray);
  opacity: .65;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.68;
  font-style: italic;
}

@media (max-width: 600px) {
  .diag-wrapper { padding: 1.75rem 1.25rem; }
  .diag-quiz { min-height: 380px; }
  .diag-option { font-size: .88rem; }
}

/* ─── PREFERS-REDUCED-MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .hero-symbols span,
  #whatsapp-float,
  .hero-card,
  #inicio::before,
  #inicio::after { animation: none !important; }
  .counter-bounce { animation: none !important; }
  .calc-card,
  .calc-disclaimer { animation: none !important; opacity: 1 !important; transform: none !important; }
  .check-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .check-svg {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .diag-progress-fill { transition: none !important; }
  .diag-circle-fill   { transition: none !important; stroke-dashoffset: 0 !important; }
  .diag-option        { transition: none !important; }
}