/* CoreFlow · marca v2 (29-sep-2026)
   Menos cosas, más aire. Fondo hondo, un solo dorado para la acción y la energía de fondo.
   Tinta #0C1A1E · Mar hondo #0B4A57 · Destello #FFC629 · Espuma #F4F1EA */

:root {
  --fondo: #061318;
  --tinta: #0C1A1E;
  --mar: #0B4A57;
  --mar-2: #16697A;
  --destello: #FFC629;
  --oro: #E9B43A;
  --espuma: #F4F1EA;
  --txt: #F4F1EA;
  --txt-2: rgba(244, 241, 234, .72);
  --txt-3: rgba(244, 241, 234, .5);
  --linea: rgba(244, 241, 234, .1);
  --linea-2: rgba(244, 241, 234, .18);
  --vidrio: rgba(7, 22, 28, .62);
  --vidrio-2: rgba(10, 32, 40, .72);
  --ok: #7FD1A8;
  --mal: #F2A69D;
  --ft: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs: "Instrument Serif", Georgia, serif;
  --ola: cubic-bezier(.22, 1, .36, 1);
  --g: clamp(16px, 4.2vw, 56px);
  --max: 1180px;
  --radio: 22px;
  --orb-y: 45vh;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-height: 100vh; color: var(--txt); font: 400 1.0625rem/1.55 var(--ft); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--destello); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--destello); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { width: min(100% - 2 * var(--g), var(--max)); margin-inline: auto; }
@media (max-width: 480px) { :root { --g: 16px; } }

/* ---------- fondo: un pozo de luz que sigue al núcleo ---------- */
.fondo { position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(70vmax 55vmax at 50% var(--orb-y), rgba(22, 105, 122, .34), transparent 60%),
    radial-gradient(120vmax 90vmax at 50% 120%, rgba(11, 74, 87, .35), transparent 60%),
    var(--fondo); }
.fondo::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(244, 241, 234, .06) 1px, transparent 1.2px); background-size: 34px 34px;
  -webkit-mask: radial-gradient(90% 70% at 50% 40%, #000, transparent 80%); mask: radial-gradient(90% 70% at 50% 40%, #000, transparent 80%); }
#energia { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ola); }
.energia-lista #energia { opacity: 1; }
#energia-css { position: fixed; left: 0; top: 0; z-index: -2; width: 240px; height: 240px; pointer-events: none; display: none; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFF6D8 0 8%, #FFD35A 22%, #F2A40B 40%, rgba(242, 164, 11, .0) 41%),
              radial-gradient(circle, rgba(255, 198, 41, .45) 0 30%, rgba(255, 198, 41, .12) 50%, transparent 70%);
  filter: drop-shadow(0 0 40px rgba(255, 198, 41, .35)); }
#energia-css::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1.5px solid rgba(255, 224, 138, .55); animation: girar 14s linear infinite; }
.energia-css #energia-css { display: block; }
.energia-css #energia { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- tipografía ---------- */
.kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font: 500 .78rem/1 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--txt-2); }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--destello); box-shadow: 0 0 12px var(--destello); }
.titular { margin: 0; font: 600 clamp(2.5rem, 7.2vw, 5.6rem)/.98 var(--ft); letter-spacing: -.035em; text-wrap: balance; }
.titular-2 { margin: 0; font: 600 clamp(1.9rem, 4.6vw, 3.4rem)/1.04 var(--ft); letter-spacing: -.03em; text-wrap: balance; }
.titular-3 { margin: 0; font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.2 var(--ft); letter-spacing: -.015em; }
.serif { font-family: var(--fs); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--destello); }
.bajada { margin: 1.1rem 0 0; max-width: 34rem; color: var(--txt-2); font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.5; text-wrap: pretty; }
.centro { text-align: center; }
.centro .bajada { margin-inline: auto; }
.nota { color: var(--txt-3); font-size: .86rem; }

/* ---------- botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 56px; padding: 0 1.6rem; border: 0; border-radius: 99px; font: 600 1.02rem/1 var(--ft); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ola), box-shadow .35s var(--ola), background .35s var(--ola); }
.btn-oro { background: var(--destello); color: #10170F; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 40px -8px rgba(255, 198, 41, .55); }
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 16px 60px -8px rgba(255, 198, 41, .75); }
.btn-oro .flecha { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -.7rem; border-radius: 50%; background: #10170F; color: var(--destello); transition: transform .35s var(--ola); }
.btn-oro:hover .flecha { transform: translateX(3px); }
.btn-vidrio { background: rgba(244, 241, 234, .06); color: var(--txt); box-shadow: 0 0 0 1px var(--linea-2) inset; }
.btn-vidrio:hover { background: rgba(244, 241, 234, .1); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.enlace { color: var(--txt-2); text-decoration: none; border-bottom: 1px solid var(--linea-2); transition: color .25s, border-color .25s; }
.enlace:hover { color: var(--txt); border-color: var(--destello); }

/* ---------- vidrio ---------- */
.vidrio { background: var(--vidrio); border: 1px solid var(--linea); border-radius: var(--radio); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }

/* ---------- barra ---------- */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s var(--ola), border-color .4s; border-bottom: 1px solid transparent; }
.barra.con-fondo { background: rgba(6, 19, 24, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--linea); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.08rem/1 var(--ft); letter-spacing: -.02em; }
.logo i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #FFF4CF 0 12%, #FFC629 34%, #C98A06 70%); box-shadow: 0 0 16px rgba(255, 198, 41, .55); }
.barra nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); font-size: .93rem; color: var(--txt-2); }
.barra nav a { text-decoration: none; transition: color .25s; }
.barra nav a:hover { color: var(--txt); }
.barra .btn { min-height: 42px; padding: 0 1.1rem; font-size: .92rem; }
@media (max-width: 760px) { .solo-ancho { display: none; } }

/* ---------- aparición ---------- */
[data-rev] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ola), transform 1s var(--ola); transition-delay: var(--d, 0s); }
[data-rev].visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rev] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- pie ---------- */
.pie { padding: 56px 0 40px; color: var(--txt-3); font-size: .86rem; }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--linea); padding-top: 26px; }
.pie nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--txt); }

/* ================= AGENDA (el componente de /reunion, del inicio y del tour) ================= */
.agenda { position: relative; width: min(100%, 560px); margin-inline: auto; padding: clamp(18px, 3.4vw, 30px); text-align: left; }
.agenda-pasos { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.3rem; font-size: .8rem; color: var(--txt-3); }
.agenda-pasos span { display: inline-flex; align-items: center; gap: .45rem; transition: color .3s; }
.agenda-pasos span b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea-2); font-weight: 600; font-size: .72rem; transition: all .35s var(--ola); }
.agenda-pasos span.hecho b { background: rgba(255, 198, 41, .16); border-color: rgba(255, 198, 41, .5); color: var(--destello); }
.agenda-pasos span.actual { color: var(--txt); }
.agenda-pasos span.actual b { background: var(--destello); border-color: var(--destello); color: #10170F; box-shadow: 0 0 16px rgba(255, 198, 41, .5); }
.agenda-pasos i { flex: 1; height: 1px; background: var(--linea); min-width: 10px; }
@media (max-width: 420px) { .agenda-pasos em { display: none; } }

.agenda-t { margin: 0 0 .9rem; font: 600 1.14rem/1.25 var(--ft); letter-spacing: -.01em; }
.agenda-t small { display: block; margin-top: .25rem; font-weight: 400; font-size: .86rem; color: var(--txt-3); }

.dias { position: relative; }
.dias-pista { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.dias-pista::-webkit-scrollbar { display: none; }
.dia { flex: 0 0 auto; scroll-snap-align: start; width: 74px; padding: 12px 6px 11px; border: 1px solid var(--linea); border-radius: 16px; background: rgba(244, 241, 234, .03); text-align: center; transition: all .3s var(--ola); }
.dia small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.dia strong { display: block; margin: .28rem 0 .2rem; font: 600 1.55rem/1 var(--ft); letter-spacing: -.03em; }
.dia em { display: block; font-style: normal; font-size: .7rem; color: var(--txt-3); }
.dia:hover { border-color: rgba(255, 198, 41, .5); transform: translateY(-2px); }
.dia[aria-pressed="true"] { border-color: var(--destello); background: rgba(255, 198, 41, .12); box-shadow: 0 0 0 1px var(--destello) inset, 0 10px 30px -12px rgba(255, 198, 41, .6); }
.dia[aria-pressed="true"] em { color: var(--destello); }
.dias-flecha { position: absolute; top: 50%; right: -6px; transform: translateY(-60%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--vidrio-2); display: grid; place-items: center; }
@media (pointer: coarse) { .dias-flecha { display: none; } }

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 1.1rem; }
.hora { min-height: 50px; border: 1px solid var(--linea); border-radius: 14px; background: rgba(244, 241, 234, .03); font-weight: 600; font-size: .98rem; transition: all .3s var(--ola); opacity: 0; transform: translateY(8px); animation: entra .5s var(--ola) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
.hora:hover { border-color: var(--destello); background: rgba(255, 198, 41, .1); color: var(--destello); }
@keyframes entra { to { opacity: 1; transform: none; } }

.elegido { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1rem; margin-bottom: 1rem; border-radius: 14px; background: rgba(255, 198, 41, .08); border: 1px solid rgba(255, 198, 41, .28); font-weight: 600; font-size: .95rem; }
.elegido button { background: none; border: 0; color: var(--txt-2); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }

.form { display: grid; gap: 12px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .82rem; color: var(--txt-2); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 50px; padding: .8rem .95rem; border-radius: 14px; border: 1px solid var(--linea-2); background: rgba(3, 12, 15, .55); font-size: 16px; transition: border-color .25s, box-shadow .25s; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--destello); box-shadow: 0 0 0 3px rgba(255, 198, 41, .16); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dos { grid-template-columns: 1fr; } }
.form .btn { width: 100%; margin-top: .3rem; }
.consiente { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--txt-3); cursor: pointer; }
.consiente input { margin-top: .15rem; accent-color: var(--destello); flex: none; }
.legal { margin: .2rem 0 0; font-size: .78rem; color: var(--txt-3); text-align: center; }
.aviso { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--linea-2); color: var(--txt-2); font-size: .92rem; }
.aviso.mal { border-color: rgba(242, 166, 157, .45); color: var(--mal); }
.aviso a { color: var(--txt); }

.esqueleto { display: flex; gap: 8px; }
.esqueleto i { flex: 0 0 74px; height: 82px; border-radius: 16px; background: rgba(244, 241, 234, .05); animation: late 1.4s ease-in-out infinite; }
.esqueleto i:nth-child(2) { animation-delay: .12s; } .esqueleto i:nth-child(3) { animation-delay: .24s; } .esqueleto i:nth-child(4) { animation-delay: .36s; }
@keyframes late { 50% { opacity: .45; } }

.listo { text-align: center; padding: .6rem 0 .2rem; }
.listo .tick { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 209, 168, .12); border: 1px solid rgba(127, 209, 168, .5); color: var(--ok); }
.listo .tick svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo .8s .2s var(--ola) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.listo h3 { margin: 0 0 .4rem; font: 600 1.5rem/1.2 var(--ft); letter-spacing: -.02em; }
.listo .cuando { margin: 0 0 1rem; color: var(--destello); font-weight: 600; }
.listo p { margin: 0 auto 1.2rem; max-width: 26rem; color: var(--txt-2); font-size: .95rem; }
.agenda-pie { display: flex; justify-content: center; margin-top: 1.1rem; font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .hora { animation: none; opacity: 1; transform: none; } }