/* WhiteFox® — "pro" detail pass (local preview). Loaded after styles.css. */

/* ---- section tags: Dynamic Island ---- */
.eyebrow, .band .eyebrow, html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .band .eyebrow {
  background: #000; border: 1px solid rgba(255,255,255,.14); color: #f5f5f7;
  padding: 8px 34px 8px 14px; gap: 10px; position: relative;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em; text-transform: none; white-space: nowrap;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
}
.eyebrow .dot, .band .eyebrow .dot, html[data-theme="dark"] .eyebrow .dot, html[data-theme="dark"] .band .eyebrow .dot {
  width: 6px; height: 6px; background: #ff9f0a; box-shadow: 0 0 8px 1px rgba(255,159,10,.75); animation: island-dot 2.6s ease-in-out infinite; }
.eyebrow::after { content: ""; position: absolute; right: 11px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3350 0 18%, #0c0f1a 45%, #05060a 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
@keyframes island-dot { 50% { opacity: .45; } }
@media (max-width: 560px) { .hero .eyebrow { font-size: .62rem; letter-spacing: 0; padding: 7px 28px 7px 11px; gap: 7px; } }

/* ---- hero visual: black-and-white line flower; the vivid colours come in only while hovering or scrolling ---- */
.hero-orb { width: 96%; background: none; filter: none; opacity: 1; border-radius: 0; }
html[data-theme="dark"] .hero-orb { opacity: 1; }
.hero-orb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-orb svg { color: #0b0e14; --flower-fill: #fff; }
html[data-theme="dark"] .hero-orb svg { color: #fff; --flower-fill: #0b0e14; }
.flower-fill { fill: var(--flower-fill); }
.flower-outer { fill: none; stroke: currentColor; stroke-width: 6.4; }   /* outer half is masked away: reads as 3.2 */
.flower-inner { fill: none; stroke: currentColor; stroke-width: 1.1; }

/* floating cards over the flower: smaller tile, slightly smaller text */
.chip { padding: 9px 13px; gap: 10px; border-radius: 15px; font-size: .88rem; }
.chip small { font-size: .72rem; }
.chip .ic { width: 31px; height: 31px; border-radius: 9px; }
.chip .ic svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .chip { padding: 8px 11px; font-size: .8rem; } }

/* ---- nav links: sliding underline instead of a pill ---- */
.nav-links a { position: relative; transition: color .25s var(--ease); }
.nav-links a:hover, .nav.past-hero .nav-links a:hover, html[data-theme="dark"] .nav .nav-links a:hover { background: none; }
.nav-links a:hover { color: var(--ink); }
.nav.past-hero .nav-links a:hover, html[data-theme="dark"] .nav .nav-links a:hover { color: #fff; }
.nav-links a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- icons: hollow tile, thin dark outline, colour only in the glyph ---- */
.t-blue { --h: #2563eb; } .t-violet { --h: #6d28d9; } .t-cyan { --h: #0891b2; } .t-orange { --h: #ea580c; }
.t-rose { --h: #e11d48; } .t-indigo { --h: #4f46e5; } .t-sky { --h: #0284c7; } .t-slate { --h: #475569; }
.t-teal { --h: #0d9488; } .t-teal-dark { --h: #0e7490; } .t-emerald { --h: #059669; }
html[data-theme="dark"] .t-blue { --h: #7db1ff; } html[data-theme="dark"] .t-violet { --h: #b79dff; } html[data-theme="dark"] .t-cyan { --h: #5fe0f5; }
html[data-theme="dark"] .t-orange { --h: #ffab6b; } html[data-theme="dark"] .t-rose { --h: #ff8fa3; } html[data-theme="dark"] .t-indigo { --h: #a3acff; }
html[data-theme="dark"] .t-sky { --h: #6fcfff; } html[data-theme="dark"] .t-slate { --h: #c3ccda; } html[data-theme="dark"] .t-teal { --h: #5fe3d0; }
html[data-theme="dark"] .t-teal-dark { --h: #58c6e6; } html[data-theme="dark"] .t-emerald { --h: #6ee7a8; }
.card .ic, .value .ic, .chip .ic { background: none; color: var(--h, var(--ink)); border: 1.25px solid var(--ink); box-shadow: none; }
.card .ic { width: 46px; height: 46px; border-radius: 13px; }
.card .ic svg { width: 22px; height: 22px; }
.card .ic svg, .value .ic svg, .chip .ic svg, .plan li svg, .plan-tag svg, .pf-formats svg, .pf-tags svg { stroke-width: 1.5; }

/* ---- services as a list ---- */
.bento { grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px); }
.bento > .card-feature, .bento > .s-ai { grid-column: 1 / -1; margin-bottom: 18px; }
.bento > .card-feature { order: -2; }
.bento > .s-ai { order: -1; margin-bottom: 26px; }
.bento > .card:not(.card-feature) { display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; row-gap: 4px; align-items: start;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 20px 4px;
  -webkit-backdrop-filter: none; backdrop-filter: none; grid-column: auto; }
.bento > .card:not(.card-feature)::before { display: none; }
.bento > .card:not(.card-feature) .ic { grid-row: 1 / span 4; }
.bento > .card:not(.card-feature) > :not(.ic) { grid-column: 2; }
.bento > .card:not(.card-feature) h3 { font-size: 1.08rem; }
.bento > .card:not(.card-feature) p { font-size: .95rem; }
.bento > .card:not(.card-feature):hover { transform: translateX(6px); box-shadow: none; }
.bento > .card.card-more:not(.card-feature) { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 30px; }
.bento > .card.card-more:not(.card-feature):hover { transform: translateY(-3px); }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } }

/* ---- Proyecto F. band: photo present, drifting on its own scroll ---- */
:is(#proyecto-f .band, .band-photo) img.band-bg { inset: -20% 0; height: 140%; filter: grayscale(1) brightness(.95) contrast(1.08); object-position: 42% 78%;
  transform: translate3d(0, calc(var(--p, 0) * 13%), 0) scale(calc(-1.02 - var(--z, 0) * .3), calc(1.02 + var(--z, 0) * .3)); will-change: transform; }
:is(#proyecto-f .band, .band-photo)::after { background: linear-gradient(90deg, rgba(7,11,20,.9) 0%, rgba(7,11,20,.7) 40%, rgba(7,11,20,.08) 70%, rgba(7,11,20,.22) 100%); }
:is(#proyecto-f .band, .band-photo)::before { background: radial-gradient(ellipse 60% 90% at 22% 54%, rgba(5,8,18,.5) 0%, transparent 100%); }
@media (max-width: 560px) {
  :is(#proyecto-f .band, .band-photo) img.band-bg { filter: grayscale(1) brightness(.78); }
  :is(#proyecto-f .band, .band-photo)::after { background: linear-gradient(180deg, rgba(7,11,20,.78), rgba(7,11,20,.62) 60%, rgba(7,11,20,.8)); }
}

/* ---- modalidades: light sheets, hairline details ---- */
.plan { background: var(--glass-strong, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -32px rgba(15,23,42,.28); gap: 0; }
.plan::before { display: none; }
.plan-tag { font-size: .72rem; letter-spacing: .16em; color: var(--ink-mute); padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); align-self: stretch; }
.plan-tag svg { color: var(--ink); width: 17px; height: 17px; }
html[data-theme="dark"] .plan-tag { color: rgba(255,255,255,.6); }
.plan h3 { font-size: 1.32rem; letter-spacing: -.01em; }
.plan .price { margin: 18px 0 22px; gap: 10px; }
.plan .price b { font-size: clamp(3rem, 5.4vw, 3.9rem); letter-spacing: -.02em; }
.plan .price span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.plan ul { gap: 0; margin: 0 0 26px; }
.plan li { padding: 12px 0; border-top: 1px solid var(--line); font-size: .95rem; align-items: center; }
.plan li svg { width: 17px; height: 17px; color: var(--ink); margin-top: 0; }
.plan .btn { border-radius: 14px; justify-content: center; }
.plan-badge { background: none; box-shadow: none; color: #9a5b00; border: 1px solid rgba(180,110,0,.45); font-weight: 600; font-size: .7rem; letter-spacing: .04em; padding: 6px 11px; }
html[data-theme="dark"] .plan-badge { color: #fbc77c; border-color: rgba(251,199,124,.45); }

@media (prefers-reduced-motion: reduce) { .eyebrow .dot { animation: none; } }