/* ══════════════════════════════════════════════════ */
/*  HUMAN COACHING — Shared Stylesheet               */
/*  Used by: /duenos/ and /quiebre/                   */
/* ══════════════════════════════════════════════════ */

/* ── Variables ── */
:root{
  --bg-dark:#12091f;
  --bg-dark-2:#0d0617;
  --paper:#f3efe9;
  --paper-2:#e9e2da;
  --ink:#12091f;
  --accent:#7b5cff;
  --banner-bg:repeating-radial-gradient(circle at center,
    #3d19b8 0px,
    #3d19b8 2px,
    #12091f 3px,
    #12091f 6px);
}

/* ── Base ── */
body{
  background: var(--bg-dark);
  color: #f3f3f3;
  font-family: Avenir, "Avenir Next", system-ui, sans-serif;
  padding-top: 74px;
}

a{ text-decoration:none; }

h1,h2,h3{
  font-family: Avenir, "Avenir Next", system-ui, sans-serif;
  letter-spacing:.04em;
}

/* ── Layout sections ── */
.section-wrap{ width:100%; }
.section-dark{ background: var(--bg-dark); color:#f3f3f3; }
.section-paper{ background: var(--paper); color: var(--ink); }
.section-paper-2{ background: var(--paper-2); color: var(--ink); }

/* ── Hero ── */
.hero-wrap{ background: var(--bg-dark); }

.hero{
  padding: 3.75rem 0 2.25rem 0;
  padding-top:0; padding-bottom:0;
  margin-top:0; margin-bottom:0;
}

.hero-title{
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.02;
  font-weight: 900;
}

.lead-text{
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  max-width: 46rem;
  opacity: .92;
}

/* ── Block typography ── */
.block-title{
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  margin-bottom: 14px;
  font-weight: 900;
}

.block-text{
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  max-width: 56rem;
  line-height: 1.65;
}

.highlight{ font-weight: 800; }

/* ── Centered block (used by both pages) ── */
.centered-block{
  text-align:center;
}
.centered-block .block-title,
.centered-block .block-text{
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}
.centered-block .block-title{
  margin-bottom: 26px;
}

.left-block .block-text{
  max-width: 720px;
}

/* ── Questions block (quiebre page) ── */
.questions-block{
  text-align:center;
}
.questions-block .block-title,
.questions-block .block-text{
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}
.questions-block .block-title{
  margin-bottom: 26px;
}

/* ── Credentials block (quiebre page) ── */
.credentials-block .block-text,
.credentials-block .block-title{
  max-width: 900px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* ── Video reel ── */
.video-reel{
  width:100%;
  max-width:420px;
  margin-left:auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  background: rgba(255,255,255,.04);
  aspect-ratio: 4 / 5;
}
.video-reel video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#0b0713;
}

/* Tall video variant (quiebre page) */
.video-reel--tall{
  aspect-ratio: 9 / 16;
}

/* ── Banner ── */
.banner-featured{
  background: var(--banner-bg);
  color:#fff;
}
.banner-featured-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding:60px 20px;
}
.banner-featured-title{
  font-family: Avenir, "Avenir Next", system-ui, sans-serif;
  letter-spacing:.04em;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.05;
  font-weight: 900;
}
.banner-featured-subtitle{
  margin-top:18px;
  font-size:clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight:700;
  opacity:.95;
}

/* ── Buttons ── */
.btn-main{
  background: var(--paper);
  color: var(--ink);
  padding:16px 32px;
  border:none;
  border-radius:10px;
  font-weight:800;
  margin-top:16px;
  display:inline-block;
  transition: background .2s;
}
.btn-main:hover{
  background:#ffffff;
  color:var(--ink);
}

/* ── Topbar ── */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 2000;
  background: rgba(13,6,23,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:#fff;
}
.topbar .brand img{
  height: 40px;
  width: auto;
}

/* ── WhatsApp FAB ── */
.fab{
  background:#fff;
  border-radius:999px;
  padding:.4rem .9rem;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  text-decoration:none;
  color:#111;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.55rem;
  white-space:nowrap;
  max-width: 145px;
}

/* ── Signal list (duenos page) ── */
.signal-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.signal-list li{
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .85rem;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.55;
}
.signal-list li::before{
  content: "\2014";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  opacity: .5;
}

/* ── Etapa cards (duenos page) ── */
.etapa-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 2rem 2rem 1.6rem;
}
.etapa-number{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .5;
  margin-bottom: .5rem;
  font-weight: 700;
}
.etapa-title{
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: .75rem;
}
.etapa-text{
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .88;
}

/* ── Quote block ── */
.quote-block{
  border-left: 3px solid var(--accent);
  padding-left: 1.2rem;
  margin: 2rem 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-style: italic;
  opacity: .92;
  max-width: 640px;
}

/* ── Form section (quiebre page) ── */
.form-section{
  background: var(--bg-dark-2);
  padding: 3rem;
  border-radius: 20px;
}

.form-section input,
.form-section select{
  background:#1a0f2b!important;
  border:none!important;
  color:white!important;
  padding:14px!important;
}

.form-section label{
  margin-top:18px;
}

/* ── Footer ── */
.footer{
  text-align:center;
  padding: 40px 20px;
  opacity:.65;
  font-size:14px;
}


.clients-section{
  padding: 2.5rem 0 1rem;
  text-align: center;
}
.clients-title{
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .4;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.clients-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.client-logo{
  height: 36px;
  opacity: .35;
  filter: grayscale(100%);
  transition: opacity .25s;
}
.client-logo:hover{
  opacity: .6;
}
.logo-b{
  filter:brightness(500%);
}
/* ══════════════════════════════════════════════════ */
/* RESPONSIVE                                        */
/* ══════════════════════════════════════════════════ */

@media (max-width: 991.98px){
  .hero{ padding-top: 1.25rem; }
}

@media (max-width: 575.98px){
  body{ padding-top: 66px; }
  .btn-main{ width:100%; text-align:center; }
  .topbar .brand img{ height: 32px; }

  /* Duenos hero: title (1) → video (2) → bajada+CTA (3) */
  .hero .hero-title-col{ order: 1 !important; text-align: center; }
  .hero .video-col{ order: 2 !important; width: auto; margin: 0 auto; }
  .hero .hero-body-col{ order: 3 !important; text-align: center; }

  /* Quiebre hero: video arriba, texto abajo */
  .hero .text-col{ order: 2 !important; text-align: center; padding-top: 50px; margin: auto; }

  /* Prevent lead-text overflow on small screens */
  .lead-text{ max-width: 100%; word-break: break-word; }

  .banner-featured-inner{ padding:44px 18px; }
  .form-section{ padding: 24px; }
  .etapa-card{ padding: 1.5rem; }
   .clients-grid{gap: 1.5rem;}
}