/*
Theme Name: Solinc Premium
Theme URI: https://solinc.mx/
Author: Grupo Solinc
Description: Tema personalizado de alto rendimiento para Solinc.
Version: 1.0
Text Domain: solinc-premium
*/

/* ═══════════════════════════════════════════════════════
   SOLINC · styles.css — Edición Lujo
   ═══════════════════════════════════════════════════════ */

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

:root {
  --gold:      #FFD100;
  --gold-lt:   #FFE566;
  --dark:      #0C1829;
  --dark-deep: #070F20;
  --dark-mid:  #080F1E;
  --light:     #FAFAF8;
  --white:     #ffffff;
  --font:      'Nunito Sans', sans-serif;
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--dark-deep);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
}

/* ── AYUDAS ── */
.max-container { max-width: 1400px; margin: 0 auto; padding: 0 3.5rem; }
@media (max-width: 768px) { .max-container { padding: 0 1.5rem; } }

.gold-text {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-eyebrow {
  font-size: .7rem; letter-spacing: .35em;
  text-transform: uppercase; font-weight: 600;
}
.section-eyebrow.light    { color: rgba(255,255,255,.15); margin-bottom: 1.5rem; }
.section-eyebrow.dark-eye { color: rgba(12,24,41,.2);     margin-bottom: 1.5rem; }
.section-title {
  font-family: var(--font); font-weight: 900;
  font-size: clamp(3rem,7vw,7rem); line-height: 1.1;
}
.section-title.light      { color: var(--white); }
.section-title.dark-title { color: var(--dark);  }

/* ── CURSOR ── */
#cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold);
  pointer-events: none; z-index: 9999; will-change: transform;
}
#cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid rgba(255,209,0,.5);
  pointer-events: none; z-index: 9998; will-change: transform;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s, background .35s;
}
#cursor-ring.link  { width: 52px; height: 52px; border-color: rgba(255,209,0,.9); }
#cursor-ring.image { width: 80px; height: 80px; border-color: rgba(255,209,0,.4); }
#cursor-ring.cta   { width: 60px; height: 60px; border-color: transparent; background: rgba(255,209,0,.15); }

/* ── CARGANDO ── */
#loader {
  position: fixed; inset: 0; z-index: 9990; background: var(--dark-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; transition: opacity .6s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader-logo { font-weight: 900; font-size: 1.8rem; color: var(--white); margin-bottom: 4rem; letter-spacing: -.02em; }
#loader-logo span { color: var(--gold); }
#loader-count {
  font-weight: 900; color: var(--gold); font-size: clamp(5rem,15vw,12rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
#loader-bar-wrap { position: absolute; bottom: 2.5rem; left: 2.5rem; right: 2.5rem; }
#loader-bar { height: 1px; background: rgba(255,255,255,.08); position: relative; margin-bottom: .5rem; }
#loader-bar-labels {
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,.2); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
}
#loader-panel {
  position: absolute; inset: 0; background: var(--gold);
  transform-origin: bottom; transform: scaleY(0); pointer-events: none;
}

/* ── NAVBAR ── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .5s, box-shadow .5s;
}
#navbar.scrolled {
  background: rgba(250,250,248,.96); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between; height: 4.5rem;
}
.nav-logo {
  font-weight: 900; font-size: 1.2rem; background: none; border: none; cursor: pointer;
  color: var(--white); transition: color .5s; letter-spacing: -.02em; font-family: var(--font);
}
.nav-logo span { color: var(--gold); }
#navbar.scrolled .nav-logo { color: var(--dark); }
.nav-links { display: flex; gap: 2rem; }
.nav-links button {
  background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.7); transition: color .3s;
}
.nav-links button:hover { color: var(--gold); }
#navbar.scrolled .nav-links button { color: rgba(12,24,41,.7); }
#navbar.scrolled .nav-links button:hover { color: var(--gold); }
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .6rem 1.3rem; font-family: var(--font);
  font-size: .875rem; font-weight: 700; text-decoration: none;
  background: var(--gold); color: var(--dark); transition: background .3s, transform .2s;
}
.nav-cta:hover { background: var(--white); transform: scale(1.04); }
#navbar.scrolled .nav-cta { background: var(--dark); color: var(--gold); }
#navbar.scrolled .nav-cta:hover { background: var(--gold); color: var(--dark); }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: background .5s, transform .3s; }
#navbar.scrolled .nav-hamburger span { background: var(--dark); }
.nav-hamburger.open span:first-child { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:last-child  { transform: rotate(-45deg) translate(5px,-5px); }
.nav-mobile {
  display: none; flex-direction: column; background: var(--light);
  border-top: 1px solid rgba(0,0,0,.05); padding: 1rem 2.5rem 1.5rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile button {
  background: none; border: none; border-bottom: 1px solid rgba(0,0,0,.05);
  padding: .8rem 0; text-align: left; font-family: var(--font); font-size: .875rem;
  color: rgba(12,24,41,.7); cursor: pointer; transition: color .2s;
}
.nav-mobile button:hover { color: var(--dark); }
.nav-mobile-cta {
  display: block; margin-top: 1rem; text-align: center;
  background: var(--dark); color: var(--gold); border-radius: 999px;
  padding: .75rem 1.5rem; font-weight: 700; font-size: .875rem;
  text-decoration: none; font-family: var(--font);
}
@media (max-width: 1024px) { .nav-links { display: none; } .nav-hamburger { display: flex; } }
@media (max-width: 640px)  { .nav-cta { display: none; } }

/* ── HERO ── */
.hero {
  position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  background: var(--dark-deep); display: flex; align-items: flex-end;
}
.hero-bg-img { position: absolute; inset: -5%; will-change: transform; }
.hero-bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.hero-gradient-r {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #070F20, rgba(7,15,32,.8), rgba(7,15,32,.2));
}
.hero-gradient-b {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #070F20, transparent);
}

/* SOL */
.hero-sun {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
  width: 350px; height: 350px;
}
.sun-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(255,209,0,.1); transform: translate(-50%,-50%);
  animation: sunRingPulse 3s ease-in-out infinite;
}
.sun-ring-1 { width: 280px; height: 280px; animation-delay: 0s; }
.sun-ring-2 { width: 220px; height: 220px; animation-delay: .4s; }
.sun-ring-3 { width: 160px; height: 160px; animation-delay: .8s; }
@keyframes sunRingPulse {
  0%,100% { opacity: .4;  transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: .15; transform: translate(-50%,-50%) scale(1.06); }
}
.sun-orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%; border-style: solid;
  transform: translate(-50%,-50%);
}
.sun-orbit-1 {
  width: 240px; height: 240px; border: 1px solid rgba(255,209,0,.2);
  animation: sunOrbit1 18s linear infinite;
}
.sun-orbit-2 {
  width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.1);
  animation: sunOrbit2 28s linear infinite;
}
@keyframes sunOrbit1 {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes sunOrbit2 {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(-360deg); }
}
.sun-orbit-dot {
  position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
}
.sun-orbit-dot-2 { width: 6px; height: 6px; background: rgba(255,255,255,.4); }
.sun-core-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 200px; height: 200px; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(circle, #FFE566 0%, #FFD100 35%, #FF8C00 70%, transparent 100%);
  animation: sunCoreGlow 2.5s ease-in-out infinite;
}
@keyframes sunCoreGlow {
  0%,100% { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.04); }
}
.sun-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #FFE566 40%, #FFD100 100%);
  animation: sunCore 2s ease-in-out infinite;
}
@keyframes sunCore {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.06); }
}
.sun-rays { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; }
.sun-ray {
  position: absolute; height: 1.5px; transform-origin: 0 50%; top: 0; left: 0;
  background: linear-gradient(to right, rgba(255,209,0,.35), transparent);
  animation: rayPulse 2s ease-in-out infinite;
}
@keyframes rayPulse {
  0%,100% { opacity: .3; transform: scaleX(.8); }
  50%     { opacity: .8; transform: scaleX(1.1); }
}
.sun-tag {
  position: absolute; display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 999px;
  padding: .35rem .75rem; white-space: nowrap;
  color: var(--white); font-size: 11px; font-weight: 500;
  opacity: 0; animation: tagFloat .6s var(--ease-out) forwards;
}
.sun-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.sun-tag-1 { top: 8%; left: 50%; transform: translate(-50%,0); animation-delay: 1.8s; }
.sun-tag-2 { bottom: 25%; right: -20%; animation-delay: 2.1s; }
.sun-tag-3 { top: 65%; left: -25%; animation-delay: 2.4s; }
@keyframes tagFloat {
  from { opacity: 0; transform: translate(-50%,0) scale(0); }
  to   { opacity: 1; transform: translate(-50%,0) scale(1); }
}
.sun-tag-2, .sun-tag-3 { animation-name: tagFloatSimple; }
@keyframes tagFloatSimple {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hero contenido */
.hero-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 0 3.5rem 3rem; }
@media (max-width: 768px) { .hero-content { padding: 0 1.5rem 2.5rem; } }
.hero-inner { max-width: 1400px; }
.hero-eyebrow {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; opacity: 0;
}
.hero-eyebrow.visible { animation: fadeUp .7s ease forwards; }
.eyebrow-line  { width: 2rem; height: 1px; background: var(--gold); flex-shrink: 0; }
.eyebrow-text  { color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; }
.hero-headline { font-weight: 900; line-height: 1.1; margin-bottom: .5rem; font-size: clamp(3.5rem,9vw,8.5rem); }
.split-line    { display: flex; gap: .22em; flex-wrap: wrap; }
.split-line-gold .split-word {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.split-word { display: inline-block; overflow: hidden; opacity: 0; transform: translateY(115%) rotate(4deg); }
.split-word.visible { animation: wordReveal 1.2s var(--ease-out) forwards; }
@keyframes wordReveal { to { opacity: 1; transform: translateY(0) rotate(0); } }
.hero-sub { opacity: 0; margin-top: 1.5rem; }
.hero-sub.visible { animation: fadeUp .9s var(--ease-out) forwards; }
.hero-sub p { color: rgba(255,255,255,.35); font-size: 1rem; max-width: 20rem; line-height: 1.6; }
.hero-ctas { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 2rem; margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08); opacity: 0; flex-wrap: wrap;
}
.hero-stats.visible { animation: fadeUp .8s ease forwards; }
.stat-n { font-weight: 900; color: var(--gold); font-size: 1.3rem; }
.stat-l { color: rgba(255,255,255,.25); font-size: .7rem; margin-top: 2px; }
.hero-scroll {
  position: absolute; bottom: 2.5rem; right: 3.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.2); opacity: 0;
}
.hero-scroll.visible { animation: fadeIn .8s ease forwards; }
.hero-scroll span {
  font-size: .6rem; letter-spacing: .35em; text-transform: uppercase;
  writing-mode: vertical-rl; margin-bottom: 1rem;
}
.scroll-line {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50%     { transform: scaleY(.2); opacity: .4; }
}

/* ── BOTONES ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: var(--dark);
  border-radius: 999px; padding: .875rem 1.75rem;
  font-family: var(--font); font-weight: 700; font-size: .9rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .3s, transform .2s;
}
.btn-primary:hover { background: var(--white); transform: scale(1.04); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.2); color: var(--white);
  border-radius: 999px; padding: .875rem 1.75rem;
  font-family: var(--font); font-weight: 500; font-size: .9rem;
  text-decoration: none; transition: border-color .3s, transform .2s; backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); transform: scale(1.04); }
.btn-dark {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--dark); color: var(--gold);
  border-radius: 999px; padding: 1.1rem 2.2rem;
  font-family: var(--font); font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: background .3s, color .3s, transform .2s;
}
.btn-dark:hover { background: var(--gold); color: var(--dark); transform: scale(1.04); }
.btn-outline-light {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.15); color: var(--white);
  border-radius: 999px; padding: 1.1rem 2.2rem;
  font-family: var(--font); font-weight: 500; font-size: .9rem;
  text-decoration: none; transition: border-color .3s, transform .2s;
}
.btn-outline-light:hover { border-color: rgba(255,255,255,.5); transform: scale(1.04); }
.btn-large { padding: 1.4rem 3rem; font-size: 1rem; }

/* ── MARCOS ── */
.marquee-wrap { background: var(--dark); }
.marquee-row  { overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); padding: 1rem 0; }
.marquee-row-2 { border-top: 1px solid rgba(255,255,255,.04); }
.marquee-track { display: flex; white-space: nowrap; width: max-content; }
.marquee-fwd { animation: marqueeForward 30s linear infinite; }
.marquee-rev { animation: marqueeReverse 24s linear infinite; }
@keyframes marqueeForward {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.marquee-track span {
  padding: 0 1.25rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.25); flex-shrink: 0;
}
.m-dot, .m-dot-2 { color: var(--gold) !important; font-size: 1rem !important; }

/* ── NUMEROS ── */
.numbers-section { background: var(--gold); overflow: hidden; }
.numbers-headline-wrap { overflow: hidden; border-bottom: 1px solid rgba(12,24,41,.1); }
.numbers-headline {
  white-space: nowrap; padding: 2rem 6rem;
  font-weight: 900; font-size: clamp(4rem,11vw,10rem); line-height: 1.1;
  color: rgba(12,24,41,.2); will-change: transform;
}
.numbers-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(12,24,41,.1);
}
@media (max-width: 768px) { .numbers-grid { grid-template-columns: repeat(2,1fr); } }
.number-card {
  padding: 2.5rem 2rem; border-right: 1px solid rgba(12,24,41,.1);
  cursor: default; transition: background .5s;
}
.number-card:last-child { border-right: none; }
@media (max-width: 768px) {
  .number-card:nth-child(even) { border-right: none; }
  .number-card:nth-child(1), .number-card:nth-child(2) { border-bottom: 1px solid rgba(12,24,41,.1); }
}
.number-card:hover { background: var(--dark); }
.number-val {
  font-weight: 900; color: var(--dark);
  font-size: clamp(2.5rem,5.5vw,5rem); line-height: 1; transition: color .5s;
}
.number-card:hover .number-val   { color: var(--gold); }
.number-label { font-weight: 700; font-size: .9rem; color: rgba(12,24,41,.6); margin-top: 1rem; transition: color .5s; }
.number-card:hover .number-label { color: var(--white); }
.number-sub   { font-size: .75rem; color: rgba(12,24,41,.35); margin-top: .25rem; transition: color .5s; }
.number-card:hover .number-sub   { color: rgba(255,255,255,.35); }

/* ── ETIQUETAS DE SECCIÓN ── */
.section-label-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 3.5rem;
}
.section-label-bar.dark { background: var(--dark-deep); border-bottom: 1px solid rgba(255,255,255,.05); }
@media (max-width: 768px) { .section-label-bar { padding: 1rem 1.5rem; } }
.label-text { font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.2); }
.label-big  { font-weight: 900; font-size: clamp(3rem,8vw,6rem); line-height: 1; color: rgba(255,255,255,.05); }

/* ── SERVICIOS ── */
.service-panel {
  display: grid; 
  grid-template-columns: 1fr 1fr;
  min-height: 100vh; 
  overflow: hidden;
  background: var(--dark-deep);
}

/* Aplicamos opacidad inicial a todo el panel para que el JS lo anime */
.service-panel {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out);
  will-change: transform, opacity;
}

/* Cuando el JS detecta scroll, se vuelve visible suavemente */
.service-panel.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-panel-alt .service-img-side { order: 2; }
.service-panel-alt .service-content  { order: 1; }

@media (max-width: 1024px) {
  .service-panel { grid-template-columns: 1fr; min-height: auto; }
  .service-panel-alt .service-img-side { order: 1; }
  .service-panel-alt .service-content  { order: 2; }
}

.service-img-side { 
  position: relative; 
  overflow: hidden; 
  min-height: 50vh; 
  background: var(--dark-mid);
}

.service-img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block;

  /* El filtro permite que no "brille" tanto de golpe al aparecer */
  filter: brightness(0.8);
  transition: transform 1.2s var(--ease-out), filter 1.2s ease;
}

.service-img-side:hover .service-img { 
  transform: scale(1.08); 
  filter: brightness(1);
}

.service-img-overlay {
  position: absolute; 
  inset: 0;
  background: linear-gradient(to top, rgba(7,15,32,0.8), rgba(7,15,32,0.2), transparent);
}

.service-num-watermark {
  position: absolute; 
  bottom: 0; 
  right: 0; 
  font-weight: 900;
  color: rgba(255,255,255,0.03); /* Más sutil */
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: .8; 
  user-select: none; 
  pointer-events: none;
}

.service-tag {
  position: absolute; 
  top: 2rem; 
  left: 2rem;
  display: inline-flex; 
  align-items: center; 
  gap: .5rem;
  background: var(--gold); 
  color: var(--dark);
  font-size: .65rem; 
  font-weight: 700; 
  letter-spacing: .25em; 
  text-transform: uppercase;
  border-radius: 999px; 
  padding: .4rem .9rem;
  z-index: 2;
}

.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dark); }

.service-content {
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding: 5rem 4rem; 
  background: var(--dark);
}

@media (max-width: 768px) { .service-content { padding: 3rem 1.5rem; } }

.service-step { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.5rem; }
.step-n     { color: rgba(255,255,255,0.2); font-weight: 700; font-size: .875rem; }
.step-line  { flex: 0 0 60px; height: 1px; background: rgba(255,255,255,0.08); }
.step-label { color: rgba(255,255,255,0.3); font-size: 0.7rem; letter-spacing: .3em; text-transform: uppercase; }

/* ── ANIMACIÓN DE TEXTO EN SERVICIOS ── */

/* 1. Estado inicial del texto (Oculto y abajo) */
.service-title, 
.service-desc, 
.service-features, 
.service-content .btn-primary {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  will-change: transform, opacity;
}

/* 2. Activación cuando el panel se vuelve visible */
.service-panel.visible .service-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s; /* Aparece casi de inmediato */
}

.service-panel.visible .service-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s; /* Aparece un poquito después */
}

.service-panel.visible .service-features {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.service-panel.visible .service-content .btn-primary {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; /* El botón es lo último en animarse */
}

/* Mascara — títulos de servicios */
.service-title { font-weight: 900; font-size: clamp(3rem,5vw,5.5rem); line-height: 1.0; color: var(--white); margin-bottom: 2rem; }
.mask-line  { display: block; overflow: hidden; line-height: 1.05; }
.mask-inner { display: block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.reveal-slide-left.visible  .mask-inner,
.reveal-slide-right.visible .mask-inner { transform: translateY(0); }
.reveal-slide-left.visible  .mask-line:nth-child(2) .mask-inner,
.reveal-slide-right.visible .mask-line:nth-child(2) .mask-inner {
  transition-delay: .12s;
}

.service-desc { color: rgba(255,255,255,.35); font-size: 1rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 22rem; }
.service-features { list-style: none; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1rem; }
.service-features li { display: flex; align-items: center; gap: 1.25rem; color: rgba(255,255,255,.5); font-size: .875rem; }
.feat-line       { display: block; width: 2rem; height: 1.5px; flex-shrink: 0; }
.feat-line.gold  { background: var(--gold); }
.feat-line.white { background: rgba(255,255,255,.5); }

/* ── PROCESOS ── */
.process-section { background: var(--dark-mid); }
.process-step {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh;
  border-top: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.process-step-alt .process-img-side { order: 2; }
.process-step-alt .process-content  { order: 1; }
@media (max-width: 1024px) {
  .process-step { grid-template-columns: 1fr; min-height: auto; }
  .process-step-alt .process-img-side { order: 1; }
  .process-step-alt .process-content  { order: 2; }
}
.process-img-side { position: relative; overflow: hidden; min-height: 45vh; }
.process-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.1);
}
.clip-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); }
.clip-reveal.revealed { clip-path: inset(100% 0 0 0); }
.process-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 3rem 4rem 5rem; background: var(--dark-mid);
}
@media (max-width: 768px) { .process-content { padding: 3rem 1.5rem; } }
.process-num {
  font-weight: 900; color: rgba(255,209,0,.2);
  font-size: clamp(4rem,11vw,9rem); line-height: 1; margin-bottom: .5rem; user-select: none;
}
.process-title {
  font-weight: 900; font-size: clamp(2rem,4.5vw,4rem); line-height: 1.0;
  color: var(--white); margin-bottom: 1.5rem;
}
.process-desc { color: rgba(255,255,255,.35); font-size: 1rem; line-height: 1.7; max-width: 22rem; }
.process-bar { height: 1px; background: rgba(255,255,255,.08); max-width: 200px; margin-top: 2.5rem; }
.process-bar-fill {
  height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.grow-bar.revealed { transform: scaleX(1); }
.process-counter { color: rgba(255,255,255,.2); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; margin-top: .5rem; }
.process-cta { display: flex; justify-content: center; padding: 6rem 1.5rem; }

/* ── SISTEMAS ── */
.packages-section { background: var(--white); }
.packages-header {
  padding-top: 7rem; padding-bottom: 4rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.packages-sub { color: rgba(12,24,41,.35); font-size: 1rem; line-height: 1.6; max-width: 22rem; align-self: flex-end; }
.packages-list { border-top: 1px solid rgba(12,24,41,.08); }
.pkg-row {
  border-bottom: 1px solid rgba(12,24,41,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 3.5rem; transition: background .4s; cursor: default;
}
.pkg-row:hover { background: var(--dark); }
@media (max-width: 768px) { .pkg-row { padding: 1.2rem 1.5rem; } }
.pkg-left  { display: flex; align-items: center; gap: 2.5rem; flex: 1; }
.pkg-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; flex-wrap: wrap; }
.pkg-kw {
  font-weight: 900; font-size: clamp(1.5rem,2.8vw,2.8rem); color: var(--dark);
  transition: color .3s; width: 7rem; flex-shrink: 0;
}
.pkg-row:hover .pkg-kw { color: var(--gold); }
.pkg-ideal  { font-weight: 600; font-size: .95rem; color: rgba(12,24,41,.55); transition: color .3s; }
.pkg-row:hover .pkg-ideal { color: rgba(255,255,255,.7); }
.pkg-panels { font-size: .75rem; color: rgba(12,24,41,.3); transition: color .3s; }
.pkg-row:hover .pkg-panels { color: rgba(255,255,255,.3); }
.pkg-save   { font-weight: 700; font-size: .9rem; color: rgba(12,24,41,.3); transition: color .3s; }
.pkg-row:hover .pkg-save { color: rgba(255,209,0,.8); }
.pkg-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  background: var(--gold); color: var(--dark); border-radius: 999px; padding: .25rem .75rem;
}
.pkg-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--dark); color: var(--gold);
  border-radius: 999px; padding: .6rem 1.2rem;
  font-family: var(--font); font-weight: 700; font-size: .875rem;
  text-decoration: none; transition: background .3s, color .3s; white-space: nowrap;
}
.pkg-row:hover .pkg-btn { background: var(--gold); color: var(--dark); }
.packages-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 2.5rem 3.5rem; gap: 1rem;
}
@media (max-width: 768px) { .packages-footer { padding: 2rem 1.5rem; } }
.pkg-payment { color: rgba(12,24,41,.25); font-size: .875rem; }

/* ── PROYECTOS ── */
.projects-section { background: var(--dark-deep); padding-bottom: 14; }
.projects-header {
  padding-top: 7rem; padding-bottom: 4rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.proj-filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.proj-filter {
  border-radius: 999px; padding: .5rem 1.25rem; font-family: var(--font);
  font-size: .875rem; font-weight: 500; cursor: pointer; border: none; transition: all .3s;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.4);
}
.proj-filter:hover  { background: rgba(255,255,255,.1); color: var(--white); }
.proj-filter.active { background: var(--gold); color: var(--dark); }
.projects-grid {
  padding: 0 3.5rem 5rem; max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem;
}
@media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2,1fr); padding: 0 1.5rem 3rem; } }
@media (max-width: 640px)  { .projects-grid { grid-template-columns: 1fr; } }
.proj-card {
  position: relative; overflow: hidden; cursor: pointer; min-height: 280px;
  background: var(--dark);
}
.proj-card.proj-wide { grid-column: span 2; }
@media (max-width: 640px) { .proj-card.proj-wide { grid-column: span 1; } }
.proj-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  min-height: 280px; transition: transform .9s var(--ease-out);
}
.proj-card:hover img { transform: scale(1.1); }
.proj-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.1), transparent);
  transition: background .4s;
}
.proj-card:hover .proj-overlay {
  background: linear-gradient(135deg, rgba(255,209,0,.12) 0%, rgba(12,24,41,.88) 100%);
}
.proj-info {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem;
  transition: transform .4s var(--ease-out);
}
.proj-card:hover .proj-info { transform: translateY(-8px); }
.proj-type  { color: var(--gold); font-size: .65rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; margin-bottom: .4rem; }
.proj-name  { color: var(--white); font-weight: 900; font-size: 1.3rem; line-height: 1.2; }
.proj-loc   { color: rgba(255,255,255,.4); font-size: .75rem; margin-top: .2rem; }
.proj-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: var(--gold); color: var(--dark); font-weight: 700; font-size: .875rem;
  border-radius: 999px; padding: .35rem .9rem;
  opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s;
}
.proj-card:hover .proj-badge { opacity: 1; transform: translateY(0); }
.proj-card.hidden { display: none; }
.projects-footer {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 2rem 3.5rem; display: flex; justify-content: space-between; align-items: center;
}
.proj-count { color: rgba(255,255,255,.15); font-size: .875rem; }
.proj-more  { color: rgba(255,255,255,.3); font-size: .875rem; text-decoration: none; transition: color .3s; }
.proj-more:hover { color: var(--gold); }

/* ── NOSOTROS ── */
.about-section { background: var(--light); overflow: hidden; }
.about-label-bar {
  border-bottom: 1px solid rgba(12,24,41,.06); padding: 1.2rem 3.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 768px) { .about-label-bar { padding: 1rem 1.5rem; } }
.about-big-num { font-weight: 900; color: rgba(12,24,41,.1); font-size: clamp(3rem,6vw,5rem); line-height: 1; }
.about-grid    { display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; } }
.about-collage { position: relative; overflow: hidden; min-height: 70vh; background: #E8E8E0; }
.about-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); }
.about-card-1 {
  position: absolute; top: 2rem; right: 2rem; width: 180px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  transform: rotate(2deg); z-index: 5; opacity: 0;
}
.about-card-1.visible { animation: cardReveal 1s var(--ease-out) .5s forwards; }
@keyframes cardReveal {
  from { opacity: 0; transform: rotate(2deg) translateX(30px); }
  to   { opacity: 1; transform: rotate(2deg) translateX(0); }
}
.about-card-1 img   { width: 100%; height: 120px; object-fit: cover; display: block; }
.about-card-caption { background: var(--gold); padding: .75rem; }
.about-card-title   { font-weight: 700; font-size: .875rem; color: var(--dark); }
.about-card-sub     { font-size: .7rem; color: rgba(12,24,41,.5); margin-top: .1rem; }
.about-card-2 {
  position: absolute; bottom: 2rem; left: 2rem; background: var(--dark);
  padding: 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: rotate(-2deg); z-index: 5; opacity: 0; width: 180px;
}
.about-card-2.visible { animation: card2Reveal 1s var(--ease-out) .7s forwards; }
@keyframes card2Reveal {
  from { opacity: 0; transform: rotate(-2deg) translateX(-30px); }
  to   { opacity: 1; transform: rotate(-2deg) translateX(0); }
}
.about-card-stat       { font-weight: 900; color: var(--gold); font-size: 3rem; line-height: 1; }
.about-card-stat-label { color: rgba(255,255,255,.4); font-size: .65rem; text-transform: uppercase; letter-spacing: .2em; margin-top: .25rem; }
.about-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 4rem; background: var(--light);
}
@media (max-width: 768px) { .about-content { padding: 3rem 1.5rem; } }
.about-title  { font-weight: 900; font-size: clamp(2.5rem,5vw,5rem); line-height: .95; margin-bottom: 2.5rem; color: var(--dark); }
.about-desc   { color: rgba(12,24,41,.45); font-size: 1rem; line-height: 1.7; max-width: 26rem; margin-bottom: 3rem; }
.about-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(12,24,41,.08); margin-bottom: 3rem;
}
.about-stat-card { background: var(--light); padding: 1.5rem; cursor: default; transition: background .3s; }
.about-stat-card:hover { background: var(--dark); }
.ast-n { font-weight: 900; color: var(--dark); font-size: 1.8rem; transition: color .3s; }
.about-stat-card:hover .ast-n { color: var(--gold); }
.ast-l { color: rgba(12,24,41,.4); font-size: .75rem; margin-top: .2rem; transition: color .3s; }
.about-stat-card:hover .ast-l { color: rgba(255,255,255,.4); }

/* ── OPINIONES ── */
.testimonials-section { background: var(--dark); overflow: hidden; padding-bottom: 0; }
.testi-header {
  padding-top: 7rem; padding-bottom: 2rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.testi-rating     { display: flex; align-items: center; gap: .75rem; }
.testi-stars      { color: var(--gold); font-size: 1.1rem; }
.testi-rating-num { color: rgba(255,255,255,.25); font-size: .875rem; }
.testi-slider {
  position: relative; height: 60vh; min-height: 440px;
  max-width: 900px; margin: 0 auto; padding: 0 2rem;
}
.testi-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; text-align: center; padding: 2rem;
  opacity: 0; transform: scale(.96) translateY(28px); pointer-events: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.testi-slide.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.testi-stars-row { color: var(--gold); font-size: 1.2rem; letter-spacing: .2em; margin-bottom: 2.5rem; }
.testi-quote {
  font-weight: 900; font-size: clamp(1.5rem,4vw,3.5rem); line-height: 1.2;
  color: var(--white); margin-bottom: 2.5rem;
}
.testi-highlight { display: flex; align-items: baseline; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.testi-big       { font-weight: 900; color: var(--gold); font-size: clamp(3rem,7vw,6rem); line-height: 1; }
.testi-hl-label  { color: rgba(255,255,255,.3); font-size: .875rem; text-align: left; max-width: 80px; line-height: 1.3; }
.testi-author    { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.testi-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,209,0,.2); border: 1px solid rgba(255,209,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--gold); font-size: .875rem;
}
.testi-name { font-weight: 700; color: var(--white); font-size: .9rem; text-align: left; }
.testi-loc  { color: rgba(255,255,255,.3); font-size: .75rem; text-align: left; }
.testi-controls {
  max-width: 1400px; margin: 0 auto; padding: 0 3.5rem 6rem;
  display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 768px) { .testi-controls { padding: 0 1.5rem 4rem; } }
.testi-dots { display: flex; gap: .75rem; align-items: center; }
.testi-dot {
  height: 8px; border-radius: 999px; border: none; cursor: pointer;
  transition: width .4s var(--ease-out), background .4s;
  background: rgba(255,255,255,.15); width: 8px;
}
.testi-dot.active { width: 36px; background: var(--gold); }
.testi-nav        { display: flex; gap: .75rem; }
.testi-btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: none;
  color: rgba(255,255,255,.4); font-family: var(--font); font-size: 1rem;
  cursor: pointer; transition: border-color .3s, color .3s;
}
.testi-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── CALCULADORA ── */
.calculator-section { background: var(--dark-deep); padding: 6rem 0 7rem; }
.calc-header {
  padding-bottom: 4rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.calc-sub { color: rgba(255,255,255,.3); font-size: 1rem; line-height: 1.6; max-width: 22rem; align-self: flex-end; }
.calc-grid {
  max-width: 1400px; margin: 0 auto; padding: 0 3.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; padding: 0 1.5rem; } }
.calc-inputs {
  padding: 3rem; border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 3rem;
}
@media (max-width: 768px) {
  .calc-inputs { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 2rem 1.5rem; }
}
.calc-field-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; }
.calc-field-label  { color: rgba(255,255,255,.4); font-size: .875rem; }
.calc-field-val    { font-weight: 900; color: var(--gold); font-size: 1.8rem; }
.range-input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--gold) 50%, rgba(255,255,255,.1) 50%);
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--dark-deep); cursor: pointer;
}
.range-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--dark-deep); cursor: pointer;
}
.range-limits { display: flex; justify-content: space-between; margin-top: .5rem; color: rgba(255,255,255,.2); font-size: .75rem; }
.calc-results { padding: 3rem; }
@media (max-width: 768px) { .calc-results { padding: 2rem 1.5rem; } }
.calc-results-label { color: rgba(255,255,255,.3); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2rem; }
.calc-rows { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.05); }
.calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; background: var(--dark-deep);
}
.calc-row-accent { background: rgba(255,209,0,.08) !important; }
.calc-row-label  { color: rgba(255,255,255,.4); font-size: .875rem; }
.calc-row-val    { font-weight: 900; font-size: 1.3rem; color: var(--white); }
.calc-row-val.gold { color: var(--gold); }
.calc-cta { margin-top: 2rem; width: 100%; justify-content: center; }

/* ── FAQ ── */
.faq-section { background: var(--light); padding: 6rem 0 7rem; }
.faq-list { margin-top: 4rem; display: flex; flex-direction: column; gap: 1px; background: rgba(12,24,41,.08); }
.faq-item { background: var(--white); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; text-align: left; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .95rem; color: var(--dark);
  background: var(--white); transition: background .2s, color .2s;
}
.faq-q:hover { background: var(--dark); color: var(--white); }
.faq-icon     { font-size: 1.1rem; font-weight: 300; flex-shrink: 0; margin-left: 1rem; transition: transform .35s; }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-q.open   { background: var(--dark); color: var(--white); }
.faq-a {
  max-height: 0; overflow: hidden; padding: 0 1.5rem;
  color: rgba(12,24,41,.5); font-size: .875rem; line-height: 1.7;
  transition: max-height .35s ease, padding .35s ease;
  border-top: 1px solid rgba(0,0,0,.05);
}
.faq-a.open { max-height: 200px; padding: 1.25rem 1.5rem; }

/* ── CTA ── */
.cta-section { position: relative; overflow: hidden; background: var(--dark); padding: 8rem 0; }
.cta-bg       { position: absolute; inset: 0; }
.cta-bg img   { width: 100%; height: 100%; object-fit: cover; opacity: .15; }
.cta-inner    { position: relative; text-align: center; }
.cta-title    { font-weight: 900; font-size: clamp(4rem,13vw,12rem); line-height: .95; margin: 2rem 0 3rem; }
.cta-desc     { color: rgba(255,255,255,.35); font-size: 1.1rem; max-width: 36rem; margin: 0 auto 3rem; line-height: 1.6; }
.cta-btns     { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── FOOTER ── */
.footer { background: var(--dark-deep); padding: 5rem 0 2rem; }
.footer-inner {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem;
}
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } }
.footer-logo    { font-weight: 900; font-size: 1.5rem; color: var(--white); margin-bottom: .5rem; }
.footer-logo span { color: var(--gold); }
.footer-tagline { color: rgba(255,255,255,.25); font-size: .875rem; margin-bottom: 1.5rem; }
.footer-desc    { color: rgba(255,255,255,.2); font-size: .75rem; line-height: 1.6; }
.footer-col-title { color: rgba(255,255,255,.3); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.25rem; }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a, .footer-links button {
  color: rgba(255,255,255,.3); font-size: .875rem; text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: var(--font);
  text-align: left; transition: color .2s;
}
.footer-links a:hover, .footer-links button:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.05); padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  color: rgba(255,255,255,.15); font-size: .75rem;
}
.footer-bottom a { color: rgba(255,255,255,.15); text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: var(--gold); }

/* ── SPLIT-REVEAL (.split-reveal — secciones scroll) ── */
.split-reveal { display: inline-block; overflow: hidden; vertical-align: top; }
.split-reveal .sr-inner {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.split-reveal.visible .sr-inner { transform: translateY(0); }

/* ── REVEAL ANIMATIONS (Efecto Infinito) ── */
.reveal-fade, 
.reveal-up, 
.reveal-slide-left, 
.reveal-slide-right {
  opacity: 0; /* Empiezan invisibles */
  will-change: transform, opacity;
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
}

.reveal-up          { transform: translateY(40px); }
.reveal-slide-left  { transform: translateX(-40px); }
.reveal-slide-right { transform: translateX(40px); }

/* Esta clase la controla el JavaScript */
.reveal-fade.visible, 
.reveal-up.visible, 
.reveal-slide-left.visible, 
.reveal-slide-right.visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Hero-specific entrance animations */
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes fadeUp  { to { opacity: 1; transform: translateY(0); } }

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 768px) {
  .hero-sun    { display: none; }
  .service-panel { min-height: auto; }
  .process-step  { min-height: auto; }
  .pkg-info  { display: none; }
  .pkg-save  { display: none; }
  .hero-scroll { display: none; }
}
/* Animación para los textos del título de sección */
.section-title span.reveal-up {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.2s cubic-bezier(.16,1,.3,1);
}

.section-title span.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retraso para la segunda línea del título */
.section-title .gold-text.visible {
  transition-delay: 0.2s;
}

/* ── NUEVA ANIMACIÓN: STAGGER FADE PARA FAQ ── */

/* Seleccionamos cada item de la lista y le damos un retraso progresivo */
.faq-list .faq-item:nth-child(1) { transition-delay: 0.1s; }
.faq-list .faq-item:nth-child(2) { transition-delay: 0.2s; }
.faq-list .faq-item:nth-child(3) { transition-delay: 0.3s; }
.faq-list .faq-item:nth-child(4) { transition-delay: 0.4s; }
.faq-list .faq-item:nth-child(5) { transition-delay: 0.5s; }
.faq-list .faq-item:nth-child(6) { transition-delay: 0.6s; }

/* Ajuste de suavidad extra para los items del FAQ */
.faq-item.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.faq-item.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── CONFIGURACIÓN SOFT LUXURY ── */

/* Animación Zoom Soft: Movimiento sutil y desaparición elegante */
.reveal-zoom-in {
  opacity: 0 !important;
  transform: scale(0.98) translateY(10px); /* Menos escala y menos desplazamiento para suavidad */
  filter: blur(8px); /* Desenfoque más profundo para un efecto de "materialización" */
  transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1); /* Tiempo extendido a 1.5s */
}

.reveal-zoom-in.visible {
  opacity: 1 !important;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* ── REINICIO DE ANIMACIONES (SCROLL UP) ── */

/* Forzamos el estado oculto con valores "soft" cuando no son visibles */
.reveal-up:not(.visible), 
.reveal-zoom-in:not(.visible) {
  opacity: 0 !important;
  transform: translateY(15px) scale(0.98);
  filter: blur(8px);
  transition: all 0.8s ease; /* El regreso al estado oculto es más rápido para no distraer */
}

.reveal-slide-left:not(.visible) {
  opacity: 0 !important;
  transform: translateX(-30px); /* Distancia reducida para evitar saltos bruscos */
  filter: blur(4px);
}

.reveal-slide-right:not(.visible) {
  opacity: 0 !important;
  transform: translateX(30px);
  filter: blur(4px);
}

/* Ajuste general para reveal-up (Títulos y párrafos) */
.reveal-up {
  opacity: 0 !important;
  transform: translateY(20px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
  opacity: 1 !important;
  transform: translateY(0);
}

/* ── ANIMACIÓN HERO SOFT LUXURY (FLOTANTE) ── */

.hero-soft-entry {
  opacity: 0;
  transform: translateY(15px) scale(0.99);
  filter: blur(10px);
  /* Entrada suave y luego se queda flotando infinito */
  animation: heroFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, 
             heroFloatInfinite 4s ease-in-out infinite alternate;
}

/* Entrada de materialización */
@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Movimiento sutil de flote (Luxury vibe) */
@keyframes heroFloatInfinite {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

/* ─── TAMAÑO DEL LOGO EN EL NAVBAR ─── */
.nav-logo img {
  height: 50px; 
  width: auto;
  object-fit: contain;
  vertical-align: middle; /
}

/* ─── ANIMACIÓN DESENMASCARADO CASCADA (SERVICIOS) ─── */
.service-features li {
  display: flex;
  align-items: center;
}

.unmask-wrap {
  overflow: hidden; /* Esto crea la "pared" invisible */
  display: inline-flex;
}

.unmask-text {
  display: block;
  transform: translateX(-105%); /* Esconde el texto a la izquierda, detrás de la línea */
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.6s ease-in;
}

/* Cuando el panel se vuelve visible al hacer scroll, el texto sale de su escondite */
.service-panel.visible .unmask-text {
  transform: translateX(0);
  opacity: 1;
}

/* Tiempos de cascada: 1ro, 2do y 3ro salen uno tras otro */
.service-panel.visible li:nth-child(1) .unmask-text { transition-delay: 0.3s; }
.service-panel.visible li:nth-child(2) .unmask-text { transition-delay: 0.5s; }
.service-panel.visible li:nth-child(3) .unmask-text { transition-delay: 0.7s; }

/* Línea de acento vertical en el proceso */
.process-accent-line {
  width: 2px;
  height: 40px;
  background: var(--gold);
  margin-bottom: 1.5rem;
  transform-origin: top;
}

/* --- LOGO Y NAVBAR --- */
#navbar {
  background: rgba(7, 15, 32, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-section {
  padding-top: 140px !important; /* Baja el contenido para no chocar con el logo */
}

/* --- AJUSTE MÓVIL Y PANTALLA --- */
body, html {
  overflow-x: hidden; /* Elimina el movimiento lateral */
}

.hero-section {
  overflow: hidden; /* Corta el recuadro azul del sol */
}

@media (max-width: 768px) {
  .hero-sun {
    transform: translateY(-50%) scale(1.1) !important; /* Sol más chico en celular */
    right: -5% !important;
  }
  .hero-section {
    padding-top: 110px !important;
  }
}

/* --- ANIMACIÓN LETRAS NÚMEROS --- */
.numbers-headline {
  display: inline-block;
  white-space: nowrap;
  animation: moveText 20s linear infinite;
}

@keyframes moveText {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- AJUSTES FINALES RESPONSIVOS Y ANIMACIÓN --- */

/* 1. Eliminar rastro del cursor en móviles */
@media (max-width: 768px) {
  #cursor-dot, 
  #cursor-ring {
    display: none !important;
  }
}

/* 2. Asegurar que el fondo de los números se mueva (Marquee) */
.numbers-headline {
  display: inline-block;
  white-space: nowrap;
  animation: moveText 30s linear infinite;
}

@keyframes moveText {
  from { transform: translateX(0); }
  to { transform: translateX(-33.33%); } /* Ajustado para que el loop sea fluido */
}

/* 3. Evitar que el sol cree cuadros azules o scroll lateral */
.hero-section {
  overflow: hidden !important;
}

/* --- ARREGLO CAMBIO DE COLOR NAVBAR --- */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important; /* Fondo blanco al bajar */
  border-bottom: 1px solid #ddd !important;
}

#navbar.scrolled .nav-link {
  color: #070F20 !important; /* Letras oscuras para que se lean en el blanco */
}

#navbar.scrolled .hamburger span {
  background: #070F20 !important; /* El botón de menú móvil también cambia a oscuro */
}

/* --- CORRECCIÓN NAVBAR BLANCO AL BAJAR --- */

/* Forzamos el fondo blanco cuando existe la clase .scrolled */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-bottom: 1px solid #eee !important;
}

/* Cambiamos las letras a oscuras para que se lean sobre el blanco */
#navbar.scrolled .nav-link {
  color: #070F20 !important;
}

/* Cambiamos el color de las rayitas del menú móvil (hamburger) a oscuro */
#navbar.scrolled .hamburger span {
  background: #070F20 !important;
}

/* Si tienes un logo de texto, cámbialo a oscuro también */
#navbar.scrolled .logo-text, 
#navbar.scrolled .logo-dot {
  color: #070F20 !important;
}

/* ===================================================
   SOLUCIÓN DEFINITIVA: PAQUETES + CURSOR PC
   =================================================== */

/* 1. Blindaje del Cursor (Para que nada lo tape en PC) */
#cursor-dot, 
#cursor-ring {
  z-index: 999999 !important; /* El número más alto posible */
  pointer-events: none !important;
  position: fixed !important;
  visibility: visible !important;
}

/* 2. Arreglo de Paquetes para Móvil (480px o menos) */
@media (max-width: 480px) {
  /* Ocultar cursor en cel para evitar errores de clics */
  #cursor-dot, #cursor-ring { display: none !important; }

  .pkg-row {
    display: flex !important;
    flex-direction: column !important; /* Apila Título arriba, Precio abajo */
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px 15px !important;
  }

  /* Aseguramos que los textos no choquen */
  .pkg-left, .pkg-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .pkg-right {
    padding-top: 15px !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    /* Aquí ponemos precio y botón en fila para que no se vea tan vacío */
    flex-direction: row !important; 
    justify-content: space-between !important;
    align-items: center !important;
  }

  .pkg-save {
    font-size: 1rem !important;
    margin: 0 !important;
  }

  .pkg-btn {
    padding: 8px 15px !important;
    font-size: 0.8rem !important;
    width: auto !important;
  }
}

/* --- LIMPIEZA MÓVIL: SOLO TÍTULO, PRECIO Y BOTÓN --- */
@media (max-width: 480px) {
  /* Ocultamos los detalles técnicos (watts e inversor) */
  .pkg-info {
    display: none !important;
  }

  /* Aseguramos que el precio sea visible y tenga buen tamaño */
  .pkg-save {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #666 !important; /* Un gris elegante o puedes usar var(--gold) */
    margin: 10px 0 !important;
  }

  /* Alineamos el precio y el botón para que no se vea vacío */
  .pkg-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 15px !important;
  }
}

/* --- CAMBIO DE LOGO DINÁMICO --- */

/* Por defecto, ocultamos el logo oscuro */
.logo-color {
  display: none !important;
}

/* Cuando bajamos (.scrolled): */
/* Ocultamos el blanco y mostramos el de color */
#navbar.scrolled .logo-white {
  display: none !important;
}

#navbar.scrolled .logo-color {
  display: block !important;
  height: 50px; /* Ajusta según el tamaño de tu logo */
  width: auto;
}