/* =========================================================
   BRANDING v10 — CHROME Y2K (de los pines guardados en Pinterest)
   Negro puro, cromo líquido plateado, rojo intenso de acento y un
   halo violeta. Superficies de vidrio oscuro; textos destacados con
   acabado de metal pulido; filos cromados con un toque de rojo.
   Paleta: #050506 negro · #1F2026 grafito · #6B6F76 acero ·
   #C9CCD1 plata · #F5F6F8 cromo claro · #E1251B rojo · #8B3DFF violeta
   ========================================================= */
:root {
  --bg: #050506;
  --lum-1: #f5f5f7; --lum-2: #d9dce1; --lum-3: #f5f6f8; --accent: #d9dce1;
  --iris: linear-gradient(100deg, #ffffff 0%, #c9ccd1 14%, #6b6f76 26%, #f5f6f8 38%, #9aa0a8 52%, #ffffff 64%, #7c8088 78%, #e6e8ec 90%, #ffffff 100%);
  --lum-grad: var(--iris);
  --glass: rgba(255, 255, 255, .06);
  --glass-line: rgba(255, 255, 255, .22);
  --g-fill: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --g-blur: blur(22px) saturate(175%);
  --g-edge: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 1px 0 0 rgba(255, 255, 255, .14);
  --g-prism: -1px 0 0 rgba(245, 246, 248, .45), 1px 0 0 rgba(225, 37, 27, .45), 0 28px 60px -26px rgba(0, 0, 0, .75);
}
/* el color base va en html; body transparente para que se vea la capa del foco (z-index negativo) */
html { background: var(--bg) !important; }
body { background: transparent !important; }

/* Fondo: foco turquesa sobre oscuridad petróleo, como la foto del empaque.
   Solo degradados (sin imagen) en una capa fija: no se repinta al deslizar. */
#prism { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 58%, rgba(230, 232, 236, .30), rgba(139, 61, 255, .14) 45%, transparent 72%),
    radial-gradient(80% 60% at 50% 62%, rgba(90, 30, 180, .32), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, rgba(31, 32, 38, .9), transparent 60%),
    linear-gradient(180deg, #020203 0%, #0b0b0d 40%, #141417 70%, #050506 100%); }
#prism::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(2, 2, 3, .7) 100%); }

/* ---------- Superficies de vidrio líquido ---------- */
:is(.svc-card, .rv, .rv-score, .chart-sites, .grid > div:not(.featured), .roi fieldset, .roi-results, .orbit-caption, .project .info, .todos-search, .dream-tag, .snd) {
  background: var(--g-fill) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: var(--g-edge), var(--g-prism) !important;
}
.hero-dream .svc-carousel .svc-card { border-radius: 22px; }
.rv, .rv-score, .chart-sites { border-radius: 22px; }
.svc-card small, .rv-t span, .rv-score small { color: rgba(245, 245, 247, .7); }
.svc-ico { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.grid > div:hover { box-shadow: var(--g-edge), -2px 0 0 rgba(245, 246, 248, .55), 2px 0 0 rgba(225, 37, 27, .55), 0 34px 70px -28px rgba(0, 0, 0, .8) !important; }
.grid .featured::after { background: linear-gradient(160deg, rgba(13, 13, 16, .92), rgba(5, 5, 6, .96) 70%); }
.project .info { padding: clamp(20px, 3vw, 34px); border-radius: 26px; }
.roi input[type=number] { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #ffffff; }

/* Buscador: píldora de vidrio con texto claro */
.todos-search { color: #f5f5f7; }
.todos-search input { color: #ffffff; }
.todos-search input::placeholder { color: rgba(245, 245, 247, .55); }

/* ---------- Textos iridiscentes ---------- */
.svc-big, .in-big b {
  background: var(--iris) !important; background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  animation-name: iris; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.in-big b { animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards, iris 9s linear infinite; }
.in-big b + b { animation-delay: .12s, 0s; } .in-big b:first-child { animation-delay: .25s, 0s; }
@keyframes iris { to { background-position: -220% 0; } }
em { background-image: var(--iris); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }

/* ---------- Escena del inicio en vidrio y luz ---------- */
.dream-sky { background: radial-gradient(70% 60% at 62% 72%, rgba(217, 220, 225, .28), rgba(139, 61, 255, .12) 45%, transparent 70%) !important; }
.dream-sun { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .9) 0%, rgba(238, 240, 243, .45) 14%, rgba(217, 220, 225, .25) 32%, rgba(225, 37, 27, .12) 48%, transparent 66%) !important; }
.dream-mountains .m1 { fill: rgba(255, 255, 255, .06); stroke: rgba(238, 240, 243, .35); stroke-width: 1.2; opacity: 1; }
.dream-mountains .m2 { fill: rgba(10, 10, 12, .78); stroke: rgba(225, 37, 27, .3); stroke-width: 1; }
.dream-water { background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(217, 220, 225, .12) 14%, rgba(12, 12, 15, .82) 55%, var(--bg) 100%) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dream-fade { background: linear-gradient(90deg, rgba(5, 5, 6, .7) 0%, rgba(5, 5, 6, .4) 34%, rgba(5, 5, 6, 0) 60%), linear-gradient(180deg, transparent 72%, var(--bg) 100%) !important; }

/* ---------- Botones de vidrio con filo prismático ---------- */
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .1)) padding-box,
    linear-gradient(rgba(17, 17, 20, .62), rgba(17, 17, 20, .62)) padding-box,
    conic-gradient(from 210deg, #ffffff, #8a8f97, #f5f6f8, #5b5f66, #d9dce1, #e1251b, #ffffff) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px -14px rgba(0, 0, 0, .8);
  border-radius: 999px; border-width: 1.5px;
}
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_)::before {
  box-shadow: -10px 8px 26px rgba(245, 246, 248, .32), 10px 8px 26px rgba(225, 37, 27, .28);
}
.orbit-arrow:not(#_) { border-radius: 50%; }
.pill-ico, .dream-play-ico { border-color: rgba(255, 255, 255, .55) !important; background: rgba(255, 255, 255, .1) !important; }

/* ---------- Menú de vidrio neutro ---------- */
.top { background: rgba(5, 5, 6, .35) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom-color: rgba(255, 255, 255, .08); }
.top nav.menu { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .22);
  box-shadow: var(--g-edge), -1px 0 0 rgba(245, 246, 248, .4), 1px 0 0 rgba(225, 37, 27, .4), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.top nav.menu a.active { background: rgba(255, 255, 255, .88); color: #111114; }
@media (hover: hover) { .top nav.menu a:hover { color: #ffffff; background-color: rgba(255, 255, 255, .16); } }
.logo .mark { background: conic-gradient(from 210deg, #ffffff, #8a8f97, #f5f6f8, #5b5f66, #d9dce1, #ffffff) !important; color: #050506 !important; }

/* ---------- Entrada ---------- */
.in-half { background: radial-gradient(80% 90% at 50% 100%, #16161a, #09090b 55%, #020203) !important; }


/* ---------- Modo ligero (celulares modestos): mismo look, sin desenfoques ---------- */
.lite :is(.svc-card, .rv, .rv-score, .chart-sites, .grid > div:not(.featured), .roi fieldset, .roi-results, .orbit-caption, .project .info, .todos-search, .dream-tag, .snd) {
  background: linear-gradient(135deg, rgba(52, 54, 62, .82), rgba(17, 17, 20, .86) 50%, rgba(44, 46, 54, .84)) !important;
}
.lite :is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .08)) padding-box,
    linear-gradient(rgba(18, 18, 22, .94), rgba(18, 18, 22, .94)) padding-box,
    conic-gradient(from 210deg, #ffffff, #8a8f97, #f5f6f8, #5b5f66, #d9dce1, #e1251b, #ffffff) border-box;
}
.lite #prism { animation: none; will-change: auto; }
.lite .top { background: rgba(5, 5, 6, .92) !important; }
@media (prefers-reduced-motion: reduce) { #prism, .svc-big, em { animation: none !important; } }