/* ------------------------------------------------------------------
   site.css — hand-written layer on top of the generated design.css:
   fonts, brand themes, template conditionals, mobile, sticky CTA, video.
   ------------------------------------------------------------------ */

/* Fonts (Axi Saans, variable + static fallbacks) */
@font-face{font-family:"Axi Saans";src:url("../assets/fonts/AxiSaansVF.woff2") format("woff2-variations"),url("../assets/fonts/AxiSaansVF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Brand themes — the only thing that differs between axi and daniel */
:root{
  --accent:#E4002E;--accent-hover:#F00A38;
  --accent-glow:rgba(228,0,46,0.55);--accent-glow-strong:rgba(228,0,46,0.65);
  --accent-line:rgba(228,0,46,0.5);--accent-tint:rgba(228,0,46,0.12);
  --accent-veil:rgba(228,0,46,0.10);--accent-veil-strong:rgba(228,0,46,0.16);
  --on-accent:#FFFFFF;--on-accent-muted:rgba(255,255,255,0.85);--arrow-stroke:#FFFFFF;
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0 L8 4 L0 8 Z' fill='%23E4002E'/%3E%3C/svg%3E");
}
html[data-brand="daniel"]{
  --accent:#C9A24A;--accent-hover:#D5B05C;
  --accent-glow:rgba(201,162,74,0.45);--accent-glow-strong:rgba(201,162,74,0.55);
  --accent-line:rgba(201,162,74,0.5);--accent-tint:rgba(201,162,74,0.12);
  --accent-veil:rgba(201,162,74,0.10);--accent-veil-strong:rgba(201,162,74,0.16);
  --on-accent:#1A1508;--on-accent-muted:rgba(26,21,8,0.72);--arrow-stroke:#1A1508;
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0 L8 4 L0 8 Z' fill='%23C9A24A'/%3E%3C/svg%3E");
}

/* Base */
html{background:#080707;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#080707;color:#fff;font-family:"Axi Saans","Axi Saans Static",system-ui,sans-serif;font-weight:400}
*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.page{min-height:100vh}

/* Template conditionals (x-if is layout-transparent) */
x-if{display:contents}
html[data-brand="axi"] x-if[data-if="brand-daniel"],
html[data-brand="daniel"] x-if[data-if="brand-axi"],
html[data-hero="question"] x-if[data-if="hero-story"],
html[data-hero="story"] x-if[data-if="hero-question"]{display:none}

/* Placeholder links (no URL yet) — visible but inert */
a.is-placeholder{cursor:default}
/* «Descubre el trading fondeado» — only on author versions, and only when a link is set */
html[data-brand="axi"] [data-el="funded-cta"],
[data-el="funded-cta"].is-placeholder{display:none!important}
[data-el="host-card"] [data-el="funded-cta"]{margin-top:22px}

/* Grid children must be allowed to shrink (prevents horizontal overflow on phones) */
[class]{min-width:0}

/* Sticky bottom CTA — mobile only, appears after the hero */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(110%);transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.sticky-cta.is-visible{transform:translateY(0)}
@media (max-width:768px){
  .sticky-cta{display:block}
  body.has-sticky #footer{padding-bottom:96px}
}

/* Video slots */
[data-video]{cursor:pointer}
.video-slot.has-video{background-size:cover;background-position:center}
.video-slot.has-video .video-placeholder{display:none}

/* Inline playback: the clip runs in the designed frame instead of the still, muted, from page load.
   The still photo stays underneath and cross-fades out once the first frame is actually playing,
   so a blocked autoplay (iOS low-power mode) simply leaves the designed placeholder in place. */
.video-slot--inline{cursor:pointer}
.video-slot--inline .video-inline{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0D0D0D;opacity:0;transition:opacity 450ms ease}
.video-slot--inline.is-live .video-inline{opacity:1}
.video-slot--inline .video-still{transition:opacity 450ms ease}
.video-slot--inline.is-live .video-still{opacity:0}
.video-slot--inline [data-video]{top:50%;bottom:auto;transform:translate(-50%,-50%);transition:opacity 220ms ease,background 200ms cubic-bezier(.22,.61,.36,1)}
.video-slot--inline.is-playing [data-video]{opacity:0;pointer-events:none}
.video-slot--inline.has-first-frame .video-inline{opacity:1}
.video-slot--inline.has-first-frame .video-still{opacity:0}
.video-ctl{position:absolute;right:14px;bottom:26px;z-index:3;display:flex;gap:8px}
.video-ctl__btn{width:44px;height:44px;padding:0;border-radius:999px;border:1px solid rgba(254,254,254,0.55);background:rgba(8,7,7,0.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#FEFEFE;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 200ms cubic-bezier(.22,.61,.36,1)}
.video-ctl__btn:hover{background:rgba(8,7,7,0.85)}
.video-ctl__btn.is-on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.video-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:16px 14px 9px;cursor:pointer;touch-action:none;background:linear-gradient(180deg,rgba(8,7,7,0) 0%,rgba(8,7,7,0.55) 100%)}
.video-bar__track{position:relative;height:4px;border-radius:2px;background:rgba(254,254,254,0.40);box-shadow:0 0 0 1px rgba(8,7,7,0.25)}
.video-bar__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent)}
.video-bar__fill::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:999px;background:var(--accent);transform:translateY(-50%) scale(0);transition:transform 150ms cubic-bezier(.22,.61,.36,1)}
.video-slot--inline:hover .video-bar__fill::after,.video-slot--inline.is-seeking .video-bar__fill::after{transform:translateY(-50%) scale(1)}
@media (hover:none){.video-bar__track{height:5px}.video-bar__fill::after{transform:translateY(-50%) scale(1)}}
.video-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);padding:24px}
.video-modal.is-open{display:flex}
.video-modal video{max-width:min(96vw,1100px);max-height:90vh;width:auto;height:auto;background:#000;border-radius:12px;outline:none}
.video-modal video.is-vertical{max-height:90vh;max-width:min(96vw,420px)}
.video-modal__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,0.35);background:rgba(0,0,0,0.5);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}

/* Timeline minutes: placeholder brackets hidden until confirmed */

/* Hidden sections (e.g. testimonials before the videos arrive) */
.is-hidden{display:none!important}

/* --------------------------------------------------------------
   Mobile (≤768px) — values from the 390 artboard
   -------------------------------------------------------------- */
@media (max-width:768px){
  /* header: logo + CTA, date chip hidden */
  [data-el="header-inner"]{height:60px;padding:0 20px;gap:16px}
  [data-el="header-chip"]{display:none}
  #top a[data-cta]{height:40px;padding:0 18px;font-size:14px}
  #top img{height:20px}

  /* hero */
  #hero h1{font-size:38px;line-height:1.1;margin-top:18px}
  #hero > div:last-of-type{padding:36px 20px 40px;gap:26px}
  [data-el="cred-strip"]{grid-template-columns:1fr 1fr}
  [data-el="cred-strip"] > div:last-child{grid-column:1 / -1;border-top:1px solid #282828}

  /* facts table / timeline */
  [data-el="facts-row"]{grid-template-columns:96px 1fr;gap:14px;padding:14px 0}
  [data-el="timeline-row"]{grid-template-columns:44px 20px 1fr;gap:0 10px;padding:18px 0}

  /* steps */
  [data-el="step-row"]{grid-template-columns:40px 1fr;gap:18px}

  /* speaker card: avatar above text, bio at full width */
  [data-el="host-card"]{grid-template-columns:1fr;gap:20px;padding:28px 24px}
  [data-el="avatar"]{width:96px;height:96px}

  /* "Después del webinar: únete a Axi Select" pill: may wrap instead of running off narrow screens */
  #how a[data-href="axiSelectUrl"],
  a[data-el="funded-cta"],
  a[data-el="explore-cta"]{white-space:normal;height:auto;min-height:56px;padding:10px 22px 10px 10px;line-height:1.3;max-width:100%}

  /* generic: all section containers get the 20px gutters and tighter vertical rhythm */
  section > div:first-child{padding-left:20px;padding-right:20px}
  h2{font-size:28px!important;line-height:1.16!important}
}
@media (max-width:420px){
  #hero h1{font-size:34px}
  /* главная Axi: длинный подзаголовок клиента — компактнее, чтобы «Regístrate gratis» помещалась в первый экран */
  html[data-brand="axi"] #hero x-if p{font-size:16px;line-height:25px;margin-top:16px}
  html[data-brand="axi"] #hero div:has(> [data-el="hero-chip"]){margin-top:16px}
  html[data-brand="axi"] #hero div:has(> a[data-cta]){margin-top:20px}
  html[data-brand="axi"] #hero > div:last-of-type{padding-top:24px}
  /* hero chips may wrap: the date chip «… hora de Ciudad de México» did not fit a 320px screen */
  [data-el="hero-chip"]{white-space:normal;flex-wrap:wrap;height:auto;min-height:36px;padding:7px 14px;row-gap:2px;max-width:100%}
}

/* Editable copy: [[word]] → accent */
.accent-word{color:var(--accent)}
#registro h2 .accent-word{white-space:nowrap}      /* «Es gratis.» never splits across lines */

/* Video modal body: file or iframe embed */
.video-modal__body{position:relative;width:min(96vw,1100px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video-modal__body.is-vertical{width:min(96vw,calc(90vh * 9 / 16));aspect-ratio:9/16}
.video-modal__body video,.video-modal__body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}

/* Video present — frames (hero, "cómo funciona", testimonial thumbs): dimmed poster, text keeps contrast */
.video-slot--frame.has-video{position:relative;background-size:cover;background-position:center}
.video-slot--frame.has-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.30) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.80) 100%);pointer-events:none}
.video-slot--frame.has-video img.video-poster{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:center;transform:none!important;filter:none!important}
.video-slot--frame.has-poster *{text-shadow:0 1px 2px rgba(0,0,0,0.6)}
/* Video present — clip cards (fireside): poster becomes a thumbnail strip, text stays on the dark card */
.video-slot--clip.has-video .video-thumb{aspect-ratio:16/9;border-radius:8px;background-size:cover;background-position:center;margin:0 0 16px;position:relative;overflow:hidden}
.video-slot--clip.has-video .video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,0.35) 100%)}
.video-slot.has-video .video-placeholder{display:none}

/* --------------------------------------------------------------
   Brand triangle glyphs (geometry from the brand book, Figma):
   - right-angle triangle with chamfered tips: corners, background pattern, label markers
   - isosceles ▶ with chamfered base: play icons (set in the markup by the build)
   -------------------------------------------------------------- */
:root{
  --tri-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M12 12L0 12L0 10.19L8.52 0L12 0Z' fill='%23000'/%3E%3C/svg%3E");
  --tri-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.83 15'%3E%3Cpath d='M9.83 7.5L2.38 15L0 13.37L0 1.63L2.38 0Z' fill='%23000'/%3E%3C/svg%3E");
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M20 21L12 21L12 19.65L17.68 12L20 12Z' fill='%23E4002E'/%3E%3C/svg%3E");
}
html[data-brand="daniel"]{
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M20 21L12 21L12 19.65L17.68 12L20 12Z' fill='%23C9A24A'/%3E%3C/svg%3E");
}
/* label markers ▸ → brand ▶ (chamfered), same footprint */
.dbc65b9,.d6347c5,.dc41a1d,.dc7013a{border:0!important;background:var(--accent);-webkit-mask:var(--tri-play) center/contain no-repeat;mask:var(--tri-play) center/contain no-repeat}
.dbc65b9{width:7px!important;height:10px!important}
.d6347c5,.dc7013a{width:6.5px!important;height:9.5px!important}
.dc41a1d{width:5.5px!important;height:8px!important}
/* frame corners: right angle sits in the corner */
.dbe9e48,.d50777a,.dae4c46,.d5f6562{border:0!important;width:12px!important;height:12px!important;background:var(--accent);-webkit-mask:var(--tri-right) center/contain no-repeat;mask:var(--tri-right) center/contain no-repeat;top:auto;bottom:auto}
.dbe9e48{top:0!important;transform:rotate(180deg)}      /* top-left    ◤ */
.d50777a{top:0!important;transform:rotate(-90deg)}      /* top-right   ◥ */
.dae4c46{bottom:0!important;transform:none}             /* bottom-right ◢ */
.d5f6562{bottom:0!important;transform:rotate(90deg)}    /* bottom-left  ◣ */

/* FAQ availability answer: placeholder grey only while it is a placeholder */
.d66cf44:has(.is-real){color:#838383}

/* --------------------------------------------------------------
   Авторские версии (brand = daniel и любые будущие трейдеры):
   футер скрыт целиком. В версии Axi Select футер остаётся.
   -------------------------------------------------------------- */
html:not([data-brand="axi"]) #footer{display:none!important}   /* любая авторская версия, не только Daniel */
/* блоки «Cómo funciona» и «Traders Pro M» — только на авторских версиях скрыты,
   на основной Axi Select остаются. Номера блоков пересчитывает app.js. */
html:not([data-brand="axi"]) #how,
html:not([data-brand="axi"]) #fireside,
html:not([data-brand="axi"]) #testimonials{display:none!important}
/* на авторских версиях: 4-я тема программы и вопрос о доступности по стране не используются */
html:not([data-brand="axi"]) [data-el="timeline-row"][data-i="4"],
html:not([data-brand="axi"]) [data-el="faq-availability"]{display:none!important}
/* последний блок получает нижний отступ, иначе липкая кнопка на телефоне ляжет на текст */
@media (max-width:768px){
  html:not([data-brand="axi"]) body.has-sticky #registro,
  html.no-footer body.has-sticky #registro{padding-bottom:104px}
}

/* --------------------------------------------------------------
   Только версия Axi Select (правки клиента 30.09)
   -------------------------------------------------------------- */
html:not([data-brand="axi"]) [data-el="free-stamp"],
html:not([data-brand="axi"]) [data-el="explore-cta"]{display:none!important}
/* «Qué vas a aprender» — ровно четыре темы, как в документе клиента */
html[data-brand="axi"] [data-el="timeline-row"][data-i="5"]{display:none!important}
[data-el="explore-cta"]{margin-top:28px}
/* печать «WEBINAR GRATUITO» */
.free-stamp{pointer-events:none;line-height:0;filter:drop-shadow(0 10px 22px rgba(0,0,0,0.55))}
.free-stamp svg{width:100%;height:100%;overflow:visible}
.free-stamp text{font-family:"Axi Saans","Axi Saans Static",system-ui,sans-serif;fill:#FEFEFE}
.free-stamp__ring{font-size:10.5px;font-weight:570;letter-spacing:.06em}
.free-stamp__stars{font-size:9px;letter-spacing:.2em}
.free-stamp__main{font-size:17px;font-weight:570;letter-spacing:.08em}
.free-stamp--media{position:absolute;z-index:6;top:-38px;right:-26px;width:124px;height:124px;transform:rotate(12deg)}
.free-stamp--cta{display:none}
@media (max-width:768px){
  .free-stamp--media{display:none}
  .free-stamp--cta{display:inline-block;width:78px;height:78px;transform:rotate(-10deg);flex-shrink:0}
}

/* --------------------------------------------------------------
   Метки времени в программе. Выключены — колонка со временем
   убирается целиком (включая 00:00), текст сдвигается влево.
   Включаются тумблером «Показывать минуты» в админке.
   -------------------------------------------------------------- */
html[data-minutes="on"] [data-minute]{color:#838383}
html[data-minutes="off"] [data-el="timeline-row"] > :first-child{display:none}
html[data-minutes="off"] [data-el="timeline-row"]{grid-template-columns:24px 1fr}
/* без меток времени вертикальная направляющая не к чему привязана — убираем её */
html[data-minutes="off"] #webinar [data-el="timeline-rail"]{display:none}   /* только программа; линия в блоке шагов «Cómo funciona» остаётся */
html[data-minutes="off"] [data-t="minutesNote"],
html[data-minutes="off"] [data-t="qaMinutes"]{display:none}
html[data-minutes="on"]  [data-t="minutesNote"]{display:none}
@media (max-width:768px){
  html[data-minutes="off"] [data-el="timeline-row"]{grid-template-columns:20px 1fr}
}

/* --------------------------------------------------------------
   Мобильные исправления (найдено на iPhone 14 Pro Max, 430px)
   -------------------------------------------------------------- */
@media (max-width:768px){
  /* 1. Размытые «свечи» в первом экране на узком экране превращаются в светлое
        пятно поверх текста — на мобильном не показываем. Мягкий градиент остаётся. */
  [data-el="hero-candles"]{display:none!important}

  /* 2. Бейдж спикера не помещается в одну строку — даём ему переноситься аккуратно. */
  [data-el="speaker-badge"]{height:auto!important;min-height:26px;padding:5px 11px!important;
    border-radius:12px!important;line-height:1.35;text-align:left}
}

/* 3. Шапка авторской версии: «DANIEL» + подпись + кнопка не помещаются на телефоне
      (в Safari шрифт шире, кнопку срезает). На узких экранах подпись убираем. */
@media (max-width:560px){
  #top x-if[data-if="brand-daniel"] > span > span:not(:first-child){display:none}
  [data-el="header-inner"]{gap:12px}
  #top a[data-cta]{padding:0 18px}
}

/* 4. Текстовые ссылки на телефоне: увеличиваем зону нажатия до ~44px,
      не меняя внешний вид (отступ компенсируется отрицательным margin). */
@media (max-width:768px){
  #hero a[href="#webinar"],
  #footer a[data-href]{display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
  #footer a[data-href]{padding-right:4px}
}