/* =========================================================
   BRANDING v11 — OCÉANO (solo cambió la paleta)
   Azul marino profundo, azul océano, turquesa y celestes; superficies
   de vidrio con filo turquesa y textos destacados en degradado de agua.
   Paleta: #03045E marino · #0077B6 océano · #00B4D8 turquesa ·
   #90E0EF celeste · #CAF0F8 celeste hielo (fondo derivado: #020324)
   ========================================================= */
:root {
  --bg: #020324;
  --lum-1: #f0fbfd; --lum-2: #90e0ef; --lum-3: #caf0f8; --accent: #90e0ef;
  --iris: linear-gradient(100deg, #ffffff 0%, #90e0ef 14%, #0077b6 26%, #caf0f8 38%, #48cae4 52%, #ffffff 64%, #5e8fb0 78%, #d6f4fa 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(202, 240, 248, .45), 1px 0 0 rgba(0, 180, 216, .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(202, 240, 248, .30), rgba(0, 180, 216, .14) 45%, transparent 72%),
    radial-gradient(80% 60% at 50% 62%, rgba(0, 119, 182, .32), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, rgba(10, 26, 92, .9), transparent 60%),
    linear-gradient(180deg, #01021a 0%, #030530 40%, #060d42 70%, #020324 100%); }
#prism::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(1, 2, 26, .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(240, 251, 253, .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(202, 240, 248, .55), 2px 0 0 rgba(0, 180, 216, .55), 0 34px 70px -28px rgba(0, 0, 0, .8) !important; }
.grid .featured::after { background: linear-gradient(160deg, rgba(4, 8, 52, .92), rgba(2, 3, 36, .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: #f0fbfd; }
.todos-search input { color: #ffffff; }
.todos-search input::placeholder { color: rgba(240, 251, 253, .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(144, 224, 239, .28), rgba(0, 180, 216, .12) 45%, transparent 70%) !important; }
.dream-sun { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .9) 0%, rgba(227, 247, 251, .45) 14%, rgba(144, 224, 239, .25) 32%, rgba(0, 180, 216, .12) 48%, transparent 66%) !important; }
.dream-mountains .m1 { fill: rgba(255, 255, 255, .06); stroke: rgba(227, 247, 251, .35); stroke-width: 1.2; opacity: 1; }
.dream-mountains .m2 { fill: rgba(3, 5, 45, .78); stroke: rgba(0, 180, 216, .3); stroke-width: 1; }
.dream-water { background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(144, 224, 239, .12) 14%, rgba(4, 6, 58, .82) 55%, var(--bg) 100%) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dream-fade { background: linear-gradient(90deg, rgba(2, 3, 36, .7) 0%, rgba(2, 3, 36, .4) 34%, rgba(2, 3, 36, 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(5, 10, 58, .62), rgba(5, 10, 58, .62)) padding-box,
    conic-gradient(from 210deg, #ffffff, #0096c7, #caf0f8, #0077b6, #90e0ef, #00b4d8, #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(202, 240, 248, .32), 10px 8px 26px rgba(0, 180, 216, .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(2, 3, 36, .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(202, 240, 248, .4), 1px 0 0 rgba(0, 180, 216, .4), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.top nav.menu a.active { background: rgba(255, 255, 255, .88); color: #050a3a; }
@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, #0096c7, #caf0f8, #0077b6, #90e0ef, #ffffff) !important; color: #020324 !important; }

/* ---------- Entrada ---------- */
.in-half { background: radial-gradient(80% 90% at 50% 100%, #071047, #02042a 55%, #01021a) !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(12, 50, 120, .82), rgba(5, 10, 58, .86) 50%, rgba(10, 40, 105, .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(6, 12, 64, .94), rgba(6, 12, 64, .94)) padding-box,
    conic-gradient(from 210deg, #ffffff, #0096c7, #caf0f8, #0077b6, #90e0ef, #00b4d8, #ffffff) border-box;
}
.lite #prism { animation: none; will-change: auto; }
.lite .top { background: rgba(2, 3, 36, .92) !important; }
@media (prefers-reduced-motion: reduce) { #prism, .svc-big, em { animation: none !important; } }