/* ============================================================
   MENTORÍA PREMIUM — demo de Indo Suite
   Piel tomada del diseño de Canva: crema de seda, arcos café con
   degradé, filetes dorados finos, Tenor Sans para títulos y Arimo
   para el texto. Todo lo demás es el estándar de la fábrica.
   ============================================================ */

@font-face{ font-family: "Tenor Sans"; font-weight: 400; font-display: swap; src: url("fuentes/tenor-400.woff2") format("woff2"); }
@font-face{ font-family: "Arimo"; font-weight: 400; font-display: swap; src: url("fuentes/arimo-400.woff2") format("woff2"); }
@font-face{ font-family: "Arimo"; font-weight: 700; font-display: swap; src: url("fuentes/arimo-700.woff2") format("woff2"); }

:root{
  --crema:    #f5f1ea;
  --crema-2:  #ebe3d8;
  --taupe:    #8c6d5c;
  --ladrillo: #7b2d1a;
  --cafe-1:   #ad7460;
  --cafe-2:   #5a3024;
  --cafe-3:   #3f2019;
  --oro:      #c6a15b;
  --oro-2:    #e7c98c;
  --tinta:    #231814;
  --tinta-2:  #5d4a42;

  --arco: linear-gradient(160deg, var(--cafe-1) 0%, #8a4d3c 42%, var(--cafe-2) 78%, var(--cafe-3) 100%);

  --titulos: "Tenor Sans", "Didot", Georgia, serif;
  --texto: "Arimo", "Helvetica Neue", Arial, sans-serif;

  --t-h1: clamp(34px, 20px + 3.6vw, 64px);
  --t-h2: clamp(28px, 18px + 2.4vw, 48px);
  --t-h3: clamp(19px, 16px + .6vw, 23px);
  --t-cuerpo: clamp(16px, 15px + .3vw, 18px);
  --t-chico: 14px;

  --ancho: 1160px;
  --e-sec: clamp(64px, 9vw, 120px);
  --r: 18px;
  --curva: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0; color: var(--tinta); font-family: var(--texto); font-size: var(--t-cuerpo); line-height: 1.6;
  background:
    radial-gradient(900px 600px at 90% 8%, rgb(255 255 255 / .9), transparent 60%),
    radial-gradient(700px 500px at 0% 30%, rgb(214 198 178 / .35), transparent 60%),
    radial-gradient(800px 700px at 100% 70%, rgb(214 198 178 / .3), transparent 60%),
    var(--crema);
}
img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }
html, body{ overflow-x: clip; }
h1, h2, h3{ font-family: var(--titulos); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
h1{ font-size: var(--t-h1); }
h2{ font-size: var(--t-h2); }
h3{ font-size: var(--t-h3); }
p{ margin: 0 0 16px; }
strong, b{ font-weight: 700; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--oro); outline-offset: 4px; }

.env{ width: min(100% - 40px, var(--ancho)); margin-inline: auto; position: relative; }
section{ padding-block: var(--e-sec); position: relative; }
.rotulo{ font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin: 0 0 14px; }
.centro{ text-align: center; }
.centro p{ margin-inline: auto; }
em.acento{ font-style: normal; color: var(--ladrillo); }

/* ── Firma de Indo Suite: cinta de demo ─────────────────────── */
.firma{ background: #141110; color: #e7ded6; font-size: clamp(13.5px, 1.1vw, 15px); line-height: 1.45;
  padding: 12px 18px; text-align: center; position: relative; z-index: 60; }
.firma b{ color: #fff; }
.firma a{ color: #f0b46f; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgb(240 180 111 / .5); }
.firma .sep{ opacity: .4; margin: 0 10px; }
@media (max-width: 620px){ .firma .sep{ display: block; height: 0; margin: 2px 0; visibility: hidden; } }

/* ── Botón: el del diseño (rectángulo café, mayúsculas) con un brillo que lo cruza ── */
.btn{
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px;
  border-radius: 10px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--texto); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(180deg, #8b4a37, var(--ladrillo)); color: #fff6ec;
  box-shadow: 0 10px 28px rgb(91 48 36 / .28), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: transform 180ms var(--curva), box-shadow 180ms var(--curva);
}
.btn::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 236 200 / .35) 50%, transparent 65%);
  background-size: 260% 100%; animation: brillo 3.6s linear infinite;
}
@keyframes brillo{ from{ background-position: 130% 0; } to{ background-position: -130% 0; } }
.btn--crema{ background: linear-gradient(180deg, #fffaf2, var(--crema-2)); color: var(--cafe-2); box-shadow: 0 10px 28px rgb(0 0 0 / .22); }
@media (hover:hover) and (pointer:fine){ .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgb(91 48 36 / .34), inset 0 1px 0 rgb(255 255 255 / .22); } }
.btn:active{ transform: scale(.98); }
@media (prefers-reduced-motion: reduce){ .btn::after{ animation: none; } .btn, .btn:active{ transform: none; } }

/* ── Arco con foto y filetes dorados ───────────────────────── */
.arco-foto{ position: relative; margin: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.arco-foto::before, .arco-foto::after{
  content: ""; position: absolute; inset: -14px -14px 0 -14px; border: 1px solid var(--oro);
  border-radius: 999px 999px 0 0; border-bottom: 0; pointer-events: none;
}
.arco-foto::after{ inset: -22px -22px 0 -22px; opacity: .55; }
.arco-foto__marco{ border-radius: 999px 999px 0 0; overflow: hidden; background: var(--arco); aspect-ratio: 4 / 5.4; position: relative; }
.arco-foto__marco img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.arco-foto__vacio{ position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #f6e7da; padding: 24px; }
.arco-foto__vacio span{ font-family: var(--titulos); font-size: 64px; line-height: 1; }
.arco-foto__vacio small{ display: block; margin-top: 10px; font-size: 13px; opacity: .8; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{ padding-top: clamp(28px, 5vw, 64px); }
.hero__grilla{ display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px){ .hero__grilla{ grid-template-columns: 1.05fr .95fr; gap: 72px; } }
.logo{ font-family: var(--titulos); font-size: 34px; color: var(--cafe-2); letter-spacing: .02em; line-height: 1; margin-bottom: 30px; display: flex; width: max-content; flex-direction: column; align-items: center; }
.logo span{ display: block; width: 44px; height: 1px; background: var(--oro); margin-top: 8px; }
.hero h1{ text-transform: uppercase; letter-spacing: .01em; font-size: clamp(30px, 18px + 3vw, 56px); color: var(--cafe-2); }
.hero h1 b{ font-family: var(--texto); color: var(--ladrillo); letter-spacing: -.01em; }
.hero__sello{
  display: inline-block; font-family: var(--titulos); text-transform: uppercase; letter-spacing: .28em; font-size: 14px;
  color: var(--oro); border-block: 1px solid rgb(198 161 91 / .6); padding: 8px 2px; margin-bottom: 22px;
}
.hero__bajada{ color: var(--tinta-2); max-width: 46ch; margin-bottom: 30px; }
@media (max-width: 919px){ .hero__texto{ text-align: center; } .logo{ margin-inline: auto; } .hero__bajada{ margin-inline: auto; } }
.palabra{ display: inline-block; }
html.js .hero h1.partido .palabra{ opacity: 0; transform: translate3d(0, .5em, 0); filter: blur(6px);
  transition: opacity 700ms var(--curva), transform 900ms var(--curva), filter 900ms var(--curva); transition-delay: calc(var(--i) * 70ms + 150ms); }
html.js .hero h1.partido.listo .palabra{ opacity: 1; transform: none; filter: none; }

/* ── Cinta que corre ──────────────────────────────────────── */
.cinta{ overflow: hidden; background: var(--cafe-3); color: var(--oro-2); padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta__fila{ display: flex; gap: 34px; width: max-content; animation: corre 40s linear infinite; align-items: center; }
.cinta__fila span{ font-family: var(--titulos); text-transform: uppercase; letter-spacing: .2em; font-size: 14px; white-space: nowrap; }
.cinta__fila i{ width: 5px; height: 5px; border-radius: 50%; background: var(--oro); flex: none; }
@keyframes corre{ to{ transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce){ .cinta__fila{ animation: none; } }

/* ── Qué vas a aprender: fondo café, temas con título dorado ── */
.cafe{ background: var(--arco); color: #fbefe4; }
.cafe h2{ color: #fff; }
.cafe .rotulo{ color: var(--oro-2); }
.temas{ display: grid; gap: 0; max-width: 780px; margin: 44px auto 44px; }
.tema{ padding: 26px 0; border-bottom: 1px solid rgb(231 201 140 / .28); display: grid; gap: 6px; }
.tema:first-child{ border-top: 1px solid rgb(231 201 140 / .28); }
@media (min-width: 720px){ .tema{ grid-template-columns: 220px 1fr; gap: 32px; align-items: baseline; } }
.tema h3{ color: var(--oro-2); margin: 0; }
.tema p{ margin: 0; color: #f0dccd; }

/* ── Cómo funciona: filas café sobre crema ────────────────── */
.pasos{ display: grid; gap: 16px; max-width: 820px; margin: 44px auto 44px; }
.paso{ background: linear-gradient(120deg, #7a4232, var(--cafe-2)); color: #fbefe4; border-radius: 12px; padding: 22px 26px;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; box-shadow: 0 12px 30px rgb(63 32 25 / .16); }
.paso__num{ font-family: var(--titulos); font-size: 30px; color: var(--oro-2); line-height: 1; min-width: 44px; }
.paso h3{ margin: 0 0 4px; color: #fff; font-family: var(--texto); font-weight: 700; font-size: 18px; letter-spacing: 0; }
.paso p{ margin: 0; color: #ecd6c7; font-size: 16px; }

/* ── Mentora ──────────────────────────────────────────────── */
.mentora__caja{ position: relative; max-width: 720px; margin-inline: auto; }
.mentora__arco{ background: var(--arco); color: #fbefe4; border-radius: 0 0 999px 999px / 0 0 420px 420px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 7vw, 84px) clamp(150px, 20vw, 220px); text-align: center; position: relative; z-index: 1; }
.mentora__arco h2{ color: #fff; }
.mentora__arco h2 b{ font-family: var(--texto); }
.mentora__arco p{ font-family: Georgia, "Times New Roman", serif; font-size: clamp(17px, 16px + .4vw, 21px); line-height: 1.6; color: #f7e8dc; max-width: 34ch; margin-inline: auto; }
.mentora .arco-foto{ margin-top: clamp(-140px, -14vw, -90px); max-width: 420px; position: relative; z-index: 2; }
.mentora__nombre{ text-align: center; margin-top: 22px; }
.mentora__nombre b{ font-family: var(--titulos); font-weight: 400; font-size: 24px; color: var(--cafe-2); display: block; }
.mentora__nombre small{ color: var(--taupe); }

/* ── Testimonios: capturas tipo chat ──────────────────────── */
.chats{ display: grid; gap: 22px; margin: 44px 0; }
@media (min-width: 860px){ .chats{ grid-template-columns: repeat(3, 1fr); } }
.chat{ background: #e9dfd2; border-radius: 22px; padding: 18px 14px 20px; box-shadow: 0 14px 34px rgb(63 32 25 / .14); border: 1px solid rgb(140 109 92 / .18); }
.chat__cab{ display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; border-bottom: 1px solid rgb(140 109 92 / .2); margin-bottom: 14px; }
.chat__ava{ width: 34px; height: 34px; border-radius: 50%; background: var(--arco); color: #fff; display: grid; place-content: center; font-weight: 700; font-size: 14px; }
.chat__cab b{ font-size: 15px; } .chat__cab small{ display: block; color: var(--taupe); font-size: 12px; }
.globo{ background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-size: 15px; line-height: 1.45; max-width: 88%; margin-bottom: 8px; box-shadow: 0 1px 1px rgb(0 0 0 / .06); }
.globo small{ display: block; text-align: right; color: #9b8b82; font-size: 11px; margin-top: 2px; }
.globo--yo{ background: #f3d9c9; margin-left: auto; border-radius: 14px 4px 14px 14px; }
.nota{ font-size: 13px; color: var(--taupe); text-align: center; }

/* ── Precio ───────────────────────────────────────────────── */
.precio__caja{ max-width: 620px; margin-inline: auto; text-align: center; background: rgb(255 255 255 / .55);
  border: 1px solid rgb(198 161 91 / .45); border-radius: 28px; padding: clamp(36px, 6vw, 60px) 24px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgb(63 32 25 / .1); }
.precio__caja h2{ color: var(--cafe-2); margin-bottom: 6px; }
.precio__monto{ display: flex; align-items: flex-start; justify-content: center; gap: 6px; color: var(--ladrillo); margin: 14px 0 6px; }
.precio__monto span{ font-family: var(--titulos); font-size: 32px; margin-top: 18px; }
.precio__monto b{ font-family: var(--titulos); font-weight: 400; font-size: clamp(90px, 60px + 8vw, 150px); line-height: .9; font-variant-numeric: tabular-nums; }
.precio__monto small{ font-family: var(--titulos); font-size: 34px; margin-top: 18px; }
.precio__cuotas{ color: var(--tinta-2); margin-bottom: 28px; }
.garantia{ display: flex; gap: 20px; align-items: center; justify-content: center; max-width: 560px; margin: 44px auto 0; text-align: left; }
.garantia__sello{ flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--arco); color: #fff; box-shadow: 0 0 0 5px var(--crema), 0 0 0 6px var(--oro); }
.garantia__sello b{ font-family: var(--titulos); font-weight: 400; font-size: 44px; line-height: 1; }
.garantia__sello small{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.garantia p{ margin: 0; color: var(--tinta-2); }

/* ── Preguntas ────────────────────────────────────────────── */
.faq-wrap{ max-width: 760px; margin: 40px auto 0; }
.faq-wrap details{ border-bottom: 1px solid rgb(231 201 140 / .3); }
.faq-wrap summary{ cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--titulos); font-size: var(--t-h3); color: var(--oro-2); }
.faq-wrap summary::-webkit-details-marker{ display: none; }
.faq-wrap summary::after{ content: "+"; position: absolute; right: 4px; top: 20px; font-size: 26px; color: var(--oro-2); transition: transform 200ms var(--curva); }
.faq-wrap details[open] summary::after{ transform: rotate(45deg); }
.faq-wrap details p{ color: #f0dccd; margin: 0 0 22px; }

/* ── Pie ─────────────────────────────────────────────────── */
.pie{ padding: 44px 20px; text-align: center; color: var(--tinta-2); font-size: 15px; }
.pie p{ margin: 0 0 8px; }
.pie nav{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 14px; }
.pie nav a{ color: var(--taupe); }

/* ── Cierre de Indo Suite ─────────────────────────────────── */
.indo-cierre{ background: #141110; color: #f2ebe4; padding: clamp(52px, 8vw, 84px) 22px; text-align: center; }
.indo-cierre .marco{ max-width: 620px; margin-inline: auto; }
.indo-cierre .eyebrow{ font-size: 12.5px; letter-spacing: .17em; text-transform: uppercase; color: #f0b46f; margin: 0 0 16px; }
.indo-cierre h2{ color: #fff; font-size: clamp(27px, 3.7vw, 40px); }
.indo-cierre p{ color: #c3b6aa; max-width: 48ch; margin: 0 auto 28px; }
.indo-cierre .b{ display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; text-decoration: none; background: #f0b46f; color: #1a1310; }
@media (max-width: 899px){ .indo-cierre{ padding-bottom: 150px; } }

/* ── Barra fija de celular ────────────────────────────────── */
.barra-movil{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgb(245 241 234 / .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgb(198 161 91 / .4); }
.barra-movil span{ font-size: 13px; color: var(--tinta-2); line-height: 1.3; }
.barra-movil .btn{ min-height: 46px; padding: 0 20px; font-size: 13px; flex: none; }
@media (max-width: 899px){ .barra-movil.visible{ display: flex; } }

/* ── Cookies ─────────────────────────────────────────────── */
#hf-cookies{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 22px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgb(35 24 20 / .92); color: #e6d8cc; font-size: 13px; line-height: 1.5;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#hf-cookies.hf-show{ display: flex; }
#hf-cookies p{ margin: 0; max-width: 620px; text-align: center; }
#hf-cookies a{ color: var(--oro-2); }
#hf-cookies button{ border: 0; border-radius: 10px; min-height: 44px; padding: 0 24px; cursor: pointer; font: 700 13px var(--texto); letter-spacing: .12em; text-transform: uppercase; background: var(--oro-2); color: var(--cafe-3); }
body.hf-cookies-open .barra-movil{ bottom: 96px; }

/* ── Entradas ────────────────────────────────────────────── */
html.js .reveal{ opacity: 0; transform: translate3d(0, 22px, 0); }
html.js .reveal.visto{ opacity: 1; transform: none; transition: opacity 700ms var(--curva) var(--delay, 0ms), transform 800ms var(--curva) var(--delay, 0ms); }
/* La foto del arco se descubre de abajo hacia arriba */
html.js .arco-foto.reveal{ transform: none; }
html.js .arco-foto.reveal .arco-foto__marco{ clip-path: inset(100% 0 0 0 round 999px 999px 0 0); transition: clip-path 1300ms var(--curva); }
html.js .arco-foto.reveal.visto .arco-foto__marco{ clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
@media (prefers-reduced-motion: reduce){
  html.js .reveal, html.js .reveal.visto{ transform: none; }
  html.js .arco-foto.reveal .arco-foto__marco{ clip-path: none; }
}
html.rescate .reveal{ opacity: 1 !important; transform: none !important; }
html.rescate .arco-foto__marco{ clip-path: none !important; }

/* ── Legales ─────────────────────────────────────────────── */
.legal{ padding-block: 64px 96px; }
.legal .env{ max-width: 760px; }
.legal h1{ font-size: clamp(30px, 4vw, 44px); color: var(--cafe-2); }
.legal h2{ font-size: 24px; margin-top: 44px; color: var(--cafe-2); }
.legal p, .legal li{ color: var(--tinta-2); }
.legal .fecha{ font-size: 13px; color: var(--taupe); text-transform: uppercase; letter-spacing: .1em; }

/* ── La foto se funde en la crema (el degradé del diseño) ── */
.arco-foto__marco{ -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgb(0 0 0 / .6) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, rgb(0 0 0 / .6) 78%, transparent 100%); }
.arco-foto__marco img{ object-fit: cover; object-position: center top; transform: translateY(6%) scale(1.02); }
.arco-foto::before, .arco-foto::after{
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
.firma-foto{ position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; color: var(--ladrillo); z-index: 3; pointer-events: none; }
.firma-foto span{ display: block; font-family: var(--titulos); font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; }
.firma-foto small{ display: block; font-family: var(--titulos); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; margin-top: 6px; color: var(--cafe-2); }

/* En la sección de la mentora, como en el diseño: la foto recortada sobre
   la crema, con la cabeza metida en el arco café y los filetes dorados detrás. */
.arco-foto--libre .arco-foto__marco{ background: none; border-radius: 0; overflow: visible; }
.arco-foto--libre .arco-foto__marco img{ transform: none; object-fit: contain; object-position: center bottom; }
.arco-foto--libre .arco-foto__vacio{ background: var(--arco); border-radius: 999px 999px 0 0; }
html.js .arco-foto--libre.reveal .arco-foto__marco{ clip-path: inset(100% 0 0 0); }
html.js .arco-foto--libre.reveal.visto .arco-foto__marco{ clip-path: inset(-40% -20% 0 -20%); }