/* =========================================================
   INICIO "DREAM": escena de atardecer con arco de cristal y
   bloques flotando. Todo dibujado con CSS/SVG (sin imágenes).

   Brief: estudio de páginas web para negocios locales de Tijuana.
   Soñador, ambicioso, "tecnología que se siente mágica".
   Recurso firma: el arco de cristal con bloques (los "bloques"
   con los que se construye una web) reflejado en el agua.
   ========================================================= */
:root {
  --noche: #050506;
  --ciruela: #1f2026;
  --lavanda: #8b3dff;
  --rosa-cielo: #d9dce1;
  --durazno: #f5f5f7;
  --cristal: rgba(245, 245, 247, .55);
}

/* ---------- Contenedor ---------- */
.hero.hero-dream {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: none; margin: 0; display: block;
  min-height: clamp(720px, 100svh, 940px);
  padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px) clamp(90px, 9vw, 130px);
}
.hero-dream .dream-inner { position: relative; z-index: 5; max-width: 1280px; margin: 0 auto; }
.hero-dream .dream-inner > * { max-width: 640px; }

/* ---------- Escena ---------- */
.dream { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dream-sky {
  position: absolute; inset: 0 0 32% 0;
  background: linear-gradient(180deg,
    #050506 0%, #0c0c0f 22%, #1f2026 38%, #6d28d9 55%, #8b3dff 66%, #c9ccd1 78%, #d9dce1 88%, #f5f5f7 100%);
}
.dream-stars {
  position: absolute; inset: 0 0 50% 0; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #ffffff, transparent),
    radial-gradient(1px 1px at 28% 9%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 44% 24%, #ffffff, transparent),
    radial-gradient(1px 1px at 63% 12%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 79% 30%, #ffffff, transparent),
    radial-gradient(1px 1px at 91% 8%, #ffffff, transparent),
    radial-gradient(1px 1px at 55% 4%, #ffffff, transparent);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .35; } }
.dream-sun {
  position: absolute; left: 62%; top: 68%; width: 70vw; height: 40vw; max-width: 1100px; max-height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(245, 245, 247, .95) 0%, rgba(217, 220, 225, .55) 18%, rgba(201, 204, 209, .25) 40%, transparent 65%);
}
.dream-mountains { position: absolute; left: 0; right: 0; bottom: 32%; width: 100%; height: 18%; }
.dream-mountains .m1 { fill: #8b3dff; opacity: .8; }
.dream-mountains .m2 { fill: #6d28d9; }

/* Agua: reflejo del cielo + destellos que se mueven */
.dream-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background:
    linear-gradient(180deg, rgba(245, 245, 247, .55) 0%, rgba(139, 61, 255, .35) 18%, rgba(12, 12, 15, .9) 55%, var(--noche) 100%);
  overflow: hidden;
}
.dream-water::before { /* línea de horizonte iluminada */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 245, 247, .9) 40%, rgba(255, 255, 255, 1) 62%, rgba(245, 245, 247, .8) 80%, transparent);
  filter: blur(1px);
}
.dream-shimmer {
  position: absolute; inset: 0 -50%;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, .10) 9px 10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 30%, #000000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000000 30%, #000000 70%, transparent);
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { transform: translateX(8%); } }

/* ---------- Gráfica de ventas que sube (cristal) ---------- */
.dream-chart {
  position: absolute; right: clamp(5%, 9vw, 13%); bottom: 32%;
  width: clamp(300px, 36vw, 520px); aspect-ratio: 450 / 340;
}
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-svg .bars rect {
  fill: url(#barG); stroke: rgba(255, 255, 255, .8); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: bottom;
  animation: barGrow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * .1s);
}
.chart-svg:not(.chart-ref) { filter: drop-shadow(0 0 16px rgba(217, 220, 225, .7)) drop-shadow(0 0 40px rgba(139, 61, 255, .45)); }
@keyframes barGrow { from { transform: scaleY(0); } }
.chart-svg .trend, .chart-svg .trend-head {
  fill: none; stroke: url(#lineG); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 18px #d9dce1);
}
.chart-svg .trend { stroke-dasharray: 620; stroke-dashoffset: 620; animation: trendDraw 1.6s .9s cubic-bezier(.4, 0, .2, 1) forwards; }
.chart-svg .trend-head { stroke: #ffffff; opacity: 0; animation: headIn .3s 2.4s forwards; }
@keyframes trendDraw { to { stroke-dashoffset: 0; } }
@keyframes headIn { to { opacity: 1; } }
.chart-ref { /* reflejo en el agua */
  top: 100%; transform: scaleY(-1); opacity: .25; filter: blur(2px);
  -webkit-mask-image: linear-gradient(0deg, #000000, transparent 70%);
          mask-image: linear-gradient(0deg, #000000, transparent 70%);
}
.chart-badge {
  position: absolute; left: 4%; top: 38%; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center;
  padding: 10px 16px; border-radius: 16px; color: #ffffff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -15px rgba(2, 2, 3, .8);
  animation: floaty 6s ease-in-out infinite;
}
.chart-badge .cb-up { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #d9dce1, #8b3dff, #1f2026); font-size: 13px; }
.chart-badge b { font: 600 18px var(--serif); line-height: 1; }
.chart-badge small { font: 11px var(--mono); color: rgba(255, 255, 255, .75); }

/* ---------- Reseñas positivas flotando (ilustración, sin texto inventado) ---------- */
.rv {
  position: absolute; width: clamp(170px, 15vw, 230px); padding: 14px 16px 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(217, 220, 225, .35), 0 24px 50px -20px rgba(2, 2, 3, .9);
  animation: floaty var(--f, 7s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
.rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rv-av { width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--a1, #d9dce1), var(--a2, #8b3dff)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars svg { width: 15px; height: 15px; fill: #f5f5f7; filter: drop-shadow(0 0 4px rgba(245, 245, 247, .8)); }
.rv-l { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .5); margin-top: 7px; }
.rv-l.s { width: 62%; background: rgba(255, 255, 255, .3); }
.rv1 { right: calc(clamp(5%, 9vw, 13%) + clamp(250px, 30vw, 430px)); top: 20%; --d: -1s; transform: rotate(-4deg); }
.rv2 { right: 1%; top: 26%; --d: -3s; --f: 8s; --a1: #d9dce1; --a2: #8b3dff; transform: rotate(3deg); }
.rv3 { right: calc(clamp(5%, 9vw, 13%) + clamp(120px, 15vw, 210px)); top: 8%; --d: -5s; --f: 9s; --a1: #f5f5f7; --a2: #c9ccd1; width: clamp(150px, 12vw, 190px); }
.rv-score {
  position: absolute; right: 41%; bottom: 35%; display: grid; justify-items: center; gap: 4px;
  padding: 12px 18px; border-radius: 18px; color: #ffffff;
  background: rgba(2, 2, 3, .45); border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: floaty 7.5s ease-in-out infinite; animation-delay: -2s;
}
.rv-score b { font: 600 30px/1 var(--serif); }
.rv-score small { font: 11px var(--mono); color: rgba(255, 255, 255, .75); }
.rv-heart {
  position: absolute; right: 31%; top: 30%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #d9dce1, #1f2026); color: #ffffff; font-size: 20px;
  box-shadow: 0 0 24px rgba(201, 204, 209, .8); animation: floaty 5s ease-in-out infinite, pulse 2.4s ease-in-out infinite;
}
.rv-t { display: grid; gap: 2px; margin: 0; }
.rv-t b { font: 600 17px/1.1 var(--serif); color: #ffffff; }
.rv-t span { font: 12px var(--mono); color: rgba(255, 255, 255, .75); }
.chart-label {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  font: 600 13px var(--mono); letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
  text-shadow: 0 0 12px rgba(217, 220, 225, .8);
}
@keyframes floaty { 50% { translate: 0 -14px; } }
@keyframes pulse { 50% { scale: 1.12; } }

/* Oscurecer detrás del texto para que se lea, y fundir con la página abajo */
.dream-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 2, 3, .82) 0%, rgba(2, 2, 3, .55) 34%, rgba(2, 2, 3, 0) 60%),
    linear-gradient(180deg, transparent 72%, var(--bg) 100%);
}

/* ---------- Textos ---------- */
.dream-tag {
  display: inline-block; margin-bottom: 18px; padding: 7px 16px; border-radius: 99px;
  font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #f5f5f7;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-dream .svc-title { margin-bottom: 22px; }
.hero-dream .svc-small { font-size: clamp(48px, 7.4vw, 104px); }
.hero-dream .svc-big { font-size: clamp(40px, 6.4vw, 92px); white-space: normal; }

/* Carrusel compacto como subtítulo */
.hero-dream .svc-carousel { max-width: 600px; margin-bottom: 28px; }
.hero-dream .svc-track { height: 128px; mask-image: none; -webkit-mask-image: none; }
.hero-dream .svc-carousel .svc-card {
  height: 120px; font-size: clamp(19px, 1.8vw, 24px); padding: 40px 92px 22px 24px;
  /* solo se ve la activa: entra desde abajo y sale hacia arriba */
  transform: translateY(calc(-50% + var(--pos, 0) * 40px)); opacity: calc(1 - var(--abs, 0)); filter: none;
  pointer-events: none;
}
.hero-dream .svc-carousel .svc-card.on { pointer-events: auto; }
.hero-dream .svc-ico { width: 46px; height: 46px; top: 14px; right: 16px; }
.hero-dream .svc-ico svg { width: 28px; height: 28px; }
.hero-dream .svc-card small { top: 16px; left: 24px; }

/* Botones */
.hero-dream .svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn.btn-white { background: #ffffff; color: #050506; text-shadow: none; box-shadow: 0 12px 40px -10px rgba(217, 220, 225, .7); }
.btn.btn-white:hover { background: #ffffff; color: #050506; }
.dream-play { display: inline-flex; align-items: center; gap: 12px; font: 500 15px var(--sans); color: #ffffff; }
.dream-play-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding-left: 3px;
  font-size: 13px; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06);
  transition: background .25s, transform .25s;
}
@media (hover: hover) { .dream-play:hover .dream-play-ico { background: rgba(255, 255, 255, .2); transform: scale(1.06); } }
.hero-dream .pill { margin: 0; }

/* Texto manuscrito y pasos 01/02/03 */
.dream-script {
  position: absolute; z-index: 4; top: clamp(70px, 10vw, 120px); right: clamp(16px, 4vw, 60px);
  font: 600 clamp(26px, 2.6vw, 38px)/1 "Caveat", cursive; color: rgba(245, 245, 247, .9);
  transform: rotate(-10deg); text-align: center; text-shadow: 0 0 18px rgba(217, 220, 225, .6);
}
.dream-steps {
  position: absolute; z-index: 4; right: clamp(16px, 2.6vw, 40px); top: 50%; transform: translateY(-50%);
  list-style: none; display: grid; gap: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25);
  font: 600 12px var(--mono); color: rgba(255, 255, 255, .45);
}
.dream-steps li { position: relative; transition: color .3s; }
.dream-steps li::before {
  content: ""; position: absolute; left: -18px; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-50%); background: transparent; transition: background .3s, box-shadow .3s;
}
.dream-steps li.on { color: #ffffff; }
.dream-steps li.on::before { background: #ffffff; box-shadow: 0 0 10px #d9dce1; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .hero.hero-dream { min-height: 0; padding-top: 48px; padding-bottom: clamp(440px, 122vw, 540px); }
  /* en celular la escena va abajo: horizonte, agua y gráfica debajo de los botones */
  .dream-sky { inset: 0 0 20% 0; }
  .dream-mountains { bottom: 20%; height: 9%; }
  .dream-water { height: 20%; }
  .dream-sun { top: 80%; left: 50%; width: 140vw; height: 70vw; }
  .dream-chart { right: 50%; transform: translateX(50%); bottom: 20%; width: min(82vw, 420px); }
  .rv1, .rv2, .rv3, .rv-heart, .chart-badge { display: none; }
  .rv-score { right: auto; left: 4%; bottom: calc(20% + 8px); padding: 8px 12px; }
  .rv-score b { font-size: 22px; }
  .dream-fade { background:
    linear-gradient(180deg, rgba(2, 2, 3, .55) 0%, rgba(2, 2, 3, .45) 40%, rgba(2, 2, 3, 0) 62%, transparent 85%, var(--bg) 100%); }
  .dream-script { top: 30px; right: 18px; font-size: 24px; }
  .dream-steps { display: none; }
}
@media (max-width: 520px) {
  .hero-dream .svc-carousel .svc-card { padding: 40px 70px 18px 18px; font-size: 19px; }
  .hero-dream .svc-ico { width: 38px; height: 38px; }
  .hero-dream .svc-ico svg { width: 22px; height: 22px; }
  .hero-dream .svc-actions { gap: 12px 16px; }
  .dream-script { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-svg *, .rv, .rv-score, .rv-heart, .chart-badge, .dream-shimmer, .dream-stars { animation: none !important; }
  .chart-svg .trend { stroke-dashoffset: 0; } .chart-svg .trend-head { opacity: 1; }
}
/* Pausa mientras corre el opening */
.intro-on .chart-svg *, .intro-on .rv, .intro-on .rv-score, .intro-on .rv-heart, .intro-on .chart-badge, .intro-on .dream-shimmer, .intro-on .dream-stars { animation-play-state: paused !important; }


/* ---------- Gráfica "en vivo": barras que respiran, chispa en la línea y ventas que van cayendo ---------- */
.chart-svg .bars rect {
  animation: barGrow 1.1s cubic-bezier(.2, .8, .2, 1) both, barLive 3.2s ease-in-out infinite;
  animation-delay: calc(.35s + var(--i) * .1s), calc(2.2s + var(--i) * .22s);
  transition: stroke-width .3s, stroke .3s;
}
.chart-svg .bars rect.hit { stroke: #ffffff; stroke-width: 4; }
@keyframes barLive { 50% { transform: scaleY(.9); } }
.chart-svg .trend-spark {
  fill: none; stroke: #ffffff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 5 100; stroke-dashoffset: 5; opacity: 0;
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #d9dce1);
  animation: spark 2.6s 2.6s linear infinite;
}
@keyframes spark { 0% { stroke-dashoffset: 5; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
/* Recuadro tipo navegador con los sitios en escritorio pasando rápido */
.chart-sites {
  --w: clamp(150px, 15vw, 220px);
  position: absolute; left: 0; top: 0; width: var(--w); border-radius: 12px; overflow: hidden;
  background: #050506; border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 0 24px rgba(217, 220, 225, .55), 0 18px 34px -14px rgba(2, 2, 3, .9);
  animation: floaty 7s ease-in-out infinite; animation-delay: -1.5s;
}
.cs-bar { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: #1f2026; }
.cs-bar i { width: 6px; height: 6px; border-radius: 50%; background: #8b3dff; }
.cs-bar i + i { background: #d9dce1; } .cs-bar i + i + i { background: #a1a4ab; }
.cs-bar span { flex: 1; display: flex; align-items: center; gap: 5px; margin-left: 4px; padding: 2px 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); font: 9px var(--mono); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #4ade80; animation: livePing 1.6s ease-out infinite; }
.cs-view { aspect-ratio: 16 / 10; overflow: hidden; }
.cs-track { display: flex; width: max-content; height: 100%; animation: csRun 35s linear infinite; }
.cs-track img { display: block; width: var(--w); height: 100%; object-fit: cover; object-position: top; flex: none; }
@keyframes csRun { to { transform: translateX(-50%); } }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
@media (hover: hover) { .chart-sites:hover .cs-track { animation-play-state: paused; } }
.chart-chip {
  position: absolute; z-index: 2; white-space: nowrap; pointer-events: none;
  padding: 6px 11px; border-radius: 99px; font: 600 13px var(--sans, system-ui); color: #050506;
  background: linear-gradient(135deg, #ffffff, #f5f5f7); box-shadow: 0 0 18px rgba(217, 220, 225, .8);
  translate: -50% -100%; animation: chipUp 2.8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.chart-chip.alt { background: rgba(2, 2, 3, .7); color: #ffffff; border: 1px solid rgba(255, 255, 255, .4); }
@keyframes chipUp {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  14% { opacity: 1; transform: translateY(-6px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-64px) scale(.95); }
}
@media (max-width: 900px) {
  .chart-sites { --w: clamp(140px, 40vw, 190px); top: 4%; }
  .chart-chip { font-size: 12px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) { .chart-sites, .cs-dot, .cs-track, .chart-svg .trend-spark { animation: none !important; } }
.intro-on .chart-sites, .intro-on .cs-track, .intro-on .cs-dot { animation-play-state: paused !important; }

/* Celular: también se ven las tarjetas de "Más ventas" y "Clientes felices" (más chicas y sin blur para no trabar) */
@media (max-width: 900px) {
  .hero-dream .rv2, .hero-dream .rv3 {
    display: block; z-index: 2; top: auto; left: auto; width: max-content; padding: 8px 12px 9px; border-radius: 14px;
    background: rgba(2, 2, 3, .62); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 0 18px rgba(217, 220, 225, .35);
  }
  .hero-dream .rv2 .rv-top, .hero-dream .rv3 .rv-top { gap: 6px; margin-bottom: 4px; }
  .hero-dream .rv2 .rv-av, .hero-dream .rv3 .rv-av { width: 18px; height: 18px; }
  .hero-dream .rv2 .rv-stars svg, .hero-dream .rv3 .rv-stars svg { width: 11px; height: 11px; }
  .hero-dream .rv2 .rv-t b, .hero-dream .rv3 .rv-t b { font-size: 14px; }
  .hero-dream .rv2 .rv-t span, .hero-dream .rv3 .rv-t span { font-size: 10px; }
  .hero-dream .rv2 { right: 3%; bottom: 5%; transform: rotate(2deg); }
  .hero-dream .rv3 { left: 3%; bottom: 5%; transform: rotate(-2deg); }
  .rv-score { z-index: 2; }
}

/* Escritorio: el recuadro de sitios toma el lugar de la etiqueta "Ventas subiendo" */
@media (min-width: 901px) {
  .chart-badge { display: none; }
  .chart-sites { --w: clamp(150px, 12vw, 190px); left: 2%; top: 36%; }
  .rv-score { right: 44%; }
}