/* ══════════════════════════════════════════════════════════════
   Peakk Media — landing (/)
   ══════════════════════════════════════════════════════════════ */

.sec { position: relative; }

/* ── portada ────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 64px) 0 clamp(56px, 8vw, 80px);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -42%;
  transform: translateX(-50%);
  width: 1500px;
  height: 1100px;
  background: radial-gradient(
    rgba(82,44,31,.85)  0%,
    rgba(82,44,31,.25) 42%,
    rgba(20,19,15,0)   68%
  );
  pointer-events: none;
}

.hero .wrap { position: relative; max-width: 1060px; }
.hero .bajada { margin: 0 auto 40px; max-width: 840px; }
.hero .acciones { justify-content: center; margin-top: 32px; }

.marco-vsl {
  border: 1px solid rgba(223,220,215,.16);
  border-radius: 22px;
  background: var(--tinta-2);
  padding: 12px;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

.marco-vsl .video { border-radius: 14px; background: #0E0D0A; }

/* ── marcas ─────────────────────────────────────────────────── */

.sec--marcas { padding: 0 0 88px; }

.marcas-titulo {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
  padding: 0 var(--lado);
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.25;
  letter-spacing: -.03em;
  font-weight: 600;
  color: rgba(223,220,215,.9);
}

.carril {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.carril-track { display: flex; width: max-content; gap: 16px; animation: pk-marq 70s linear infinite; }
.carril-grupo { display: flex; gap: 16px; }

.marca-foto {
  position: relative;
  width: 290px;
  height: 290px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
}

.marca-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ── problemas ──────────────────────────────────────────────── */

.sec--problemas { padding: clamp(64px, 9vw, 96px) 0; }
.sec--problemas .sec-head { max-width: 760px; margin-bottom: 56px; }

.fugas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.fuga {
  background: var(--tinta);
  color: var(--hueso);
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fuga--tierra { background: var(--tierra); }
.fuga h3 { font-size: 20px; margin: 0 0 9px; }
.fuga p  { font-size: 15px; line-height: 1.55; color: rgba(223,220,215,.62); margin: 0; }
.fuga--tierra p { color: rgba(223,220,215,.75); }

.fuga-visual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: rgba(223,220,215,.06);
  border: 1px solid rgba(223,220,215,.12);
  border-radius: 12px;
}

.fuga-visual-label { font-size: 12.5px; color: rgba(223,220,215,.55); }
.fuga-visual-dato  { font-size: 19px; font-weight: 700; color: var(--oliva-claro); }

.fuga-barras { display: flex; gap: 6px; align-items: flex-end; height: 52px; }
.fuga-barras span { flex: 1; background: rgba(223,220,215,.16); border-radius: 4px; display: block; }
.fuga-barras .alta { background: var(--tierra); }

.fuga-reporte { border: 1px solid rgba(223,220,215,.12); border-radius: 12px; overflow: hidden; }
.fuga-reporte-top { padding: 9px 14px; background: rgba(223,220,215,.06); font-size: 12px; color: rgba(223,220,215,.5); }
.fuga-reporte-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.fuga-reporte-body span { height: 7px; background: rgba(223,220,215,.14); border-radius: 99px; display: block; }

.fuga-numero { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; background: rgba(223,220,215,.06); border: 1px solid rgba(223,220,215,.12); border-radius: 12px; }
.fuga-numero b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.fuga-numero span { font-size: 12.5px; color: rgba(223,220,215,.55); }

.fuga-chat { display: flex; flex-direction: column; gap: 8px; }
.fuga-chat span {
  align-self: flex-start;
  max-width: 90%;
  padding: 10px 13px;
  background: rgba(223,220,215,.09);
  border-radius: 13px 13px 13px 4px;
  font-size: 13px;
  color: rgba(223,220,215,.75);
}

.fuga-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fuga-tags span { padding: 6px 11px; border: 1px solid rgba(223,220,215,.28); border-radius: 99px; font-size: 12px; }
.fuga-tags .vos { background: var(--hueso); color: var(--tierra); border-color: transparent; font-weight: 700; }

/* ── solución ───────────────────────────────────────────────── */

.sec--solucion { padding-top: clamp(64px, 10vh, 110px); }
.sec--solucion .sec-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 0; }
.sec--solucion .sec-head h2 { max-width: 20ch; margin: 0; }
.sec--solucion .sec-head .bajada { max-width: 62ch; }

.raya { display: flex; align-items: center; gap: 14px; }
.raya::before { content: ""; width: 34px; height: 1px; background: var(--oliva); display: block; }
.raya span { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--oliva-claro); }

/* ── las seis areas, una debajo de la otra ──────────────────── */

.areas { max-width: var(--ancho); margin: 0 auto; padding: 8px 0 0; }

.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(20px, 3.4vw, 56px);
  align-items: center;
  padding: clamp(34px, 4.4vw, 60px) var(--lado);
  border-top: 1px solid rgba(223,220,215,.12);
}

.panel:first-child { border-top: 0; }

/* alterna el lado de la foto para que no se haga monotono */
.panel:nth-child(even) .panel-foto { order: -1; }

.panel-col { position: relative; min-width: 0; }

.panel-num {
  font-weight: 800;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(223,220,215,.22);
  font-size: clamp(52px, 6vw, 80px);
  line-height: .8;
  margin-bottom: 10px;
  pointer-events: none;
  user-select: none;
}

.panel-texto { position: relative; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.panel-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--tierra-2); }
.panel-texto h3 { font-size: clamp(25px, 3vw, 40px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; margin: 0; max-width: 22ch; }
.panel-texto p { font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.6; color: var(--texto-2); margin: 0; max-width: 52ch; }
.panel-texto p + p { color: rgba(223,220,215,.55); }

.panel-foto {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(223,220,215,.14);
  border-radius: 24px;
  overflow: hidden;
  background: var(--tinta-2);
}
.panel-foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .panel { padding: 30px var(--lado); gap: 22px; }
  .panel:nth-child(even) .panel-foto { order: 0; }
  .panel-num { font-size: clamp(44px, 8vw, 60px); margin-bottom: 4px; }
  .panel-foto { max-width: 460px; }
}

/* ── cierre de la seccion solucion ──────────────────────────── */

.solucion-cierre {
  padding: clamp(48px, 8vh, 96px) 0 clamp(72px, 11vh, 120px);
  border-top: 1px solid var(--linea);
}
.solucion-cierre .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.solucion-cierre p { font-size: clamp(22px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin: 0; max-width: 24ch; }

/* ── casos de exito ─────────────────────────────────────────── */

/* la seccion no tenia aire abajo: las ultimas tarjetas quedaban
   pegadas al borde de la calculadora */
.sec--casos { padding-bottom: clamp(56px, 7vw, 96px); }
.sec--casos .casos--vertical { margin-top: 4px; }

/* ── calculadora ────────────────────────────────────────────── */

.sec--calc { background: var(--tierra); padding: 96px 0; }
.sec--calc .sec-eyebrow { color: var(--oliva-pale); }
.sec--calc .bajada { color: rgba(223,220,215,.75); }
.sec--calc .sec-head { max-width: 740px; margin-bottom: 48px; }

.calc { display: grid; grid-template-columns: 1fr .85fr; gap: 16px; align-items: stretch; }

.calc-controles {
  background: rgba(20,19,15,.5);
  border: 1px solid rgba(223,220,215,.2);
  border-radius: 24px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.calc-grupo { display: flex; flex-direction: column; gap: 22px; }
.calc-grupo + .calc-grupo { padding-top: 24px; border-top: 1px solid rgba(223,220,215,.18); }
.calc-titulo { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--oliva-pale); }

.calc-campo { display: block; }
.calc-campo-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; }
.calc-campo-top span:first-child { font-size: 14.5px; color: rgba(223,220,215,.7); }
.calc-campo-top output { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.calc-campo input { width: 100%; accent-color: var(--oliva-claro); height: 22px; }

.calc-total { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(223,220,215,.18); display: flex; flex-direction: column; gap: 12px; }
.calc-total-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-total-fila span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(223,220,215,.55); }
.calc-total-fila output { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.035em; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chips span { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: rgba(223,220,215,.1); color: rgba(223,220,215,.75); }

.calc-resultado {
  background: var(--hueso);
  color: var(--tinta);
  border-radius: 24px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.calc-resultado-titulo { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--tierra); }
.calc-nota { font-size: 14.5px; color: rgba(20,19,15,.6); }
.calc-grande { font-size: clamp(34px, 4.4vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--tierra); }

.calc-celdas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-celda { padding: 14px 16px; border-radius: 14px; background: rgba(82,44,31,.09); }
.calc-celda-label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(20,19,15,.5); margin-bottom: 5px; }
.calc-celda output { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--tierra); display: block; }
.calc-celda small { font-size: 12.5px; color: rgba(20,19,15,.5); }

.calc-brecha { padding: 20px 22px; background: var(--tinta); color: var(--hueso); border-radius: 18px; }
.calc-brecha-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(223,220,215,.5); margin-bottom: 8px; }
.calc-brecha output { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--oliva-claro); display: block; }
.calc-brecha small { font-size: 14px; color: rgba(223,220,215,.6); display: block; margin-top: 8px; }

.calc-aclaracion { font-size: 13.5px; line-height: 1.5; color: rgba(20,19,15,.55); margin: 0; }
.calc-resultado .btn { margin-top: auto; text-align: center; }

/* ── nosotros ───────────────────────────────────────────────── */

.sec--nosotros { padding: 96px 0; }
.sec--nosotros .sec-head { max-width: 700px; margin-bottom: 52px; }

.persona {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(20,19,15,.16);
  margin-bottom: 44px;
}

.persona:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.persona--invertida { grid-template-columns: 1fr 340px; }
.persona--invertida .persona-foto { order: 2; }

.persona-foto { position: relative; border-radius: 22px; overflow: hidden; background: var(--tinta); height: 400px; }
.persona-foto img { width: 100%; height: 100%; object-fit: cover; }
.persona-foto--tierra { background: var(--tierra); }

.persona h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.035em; margin: 0 0 8px; }
.persona-rol { font-size: 15.5px; font-weight: 600; color: var(--tierra); margin: 0 0 22px; }
.persona p { font-size: 16.5px; line-height: 1.6; color: rgba(20,19,15,.7); margin: 0 0 16px; }
.persona p:last-child { margin-bottom: 0; }

/* ── capturas ───────────────────────────────────────────────── */

.sec--capturas { padding: 96px 0; }
.sec--capturas .sec-head { margin-bottom: 30px; }

/* ── agenda ─────────────────────────────────────────────────── */

.sec--agenda { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); text-align: center; }

.sec--agenda::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -45%;
  transform: translateX(-50%);
  width: 1400px;
  height: 1000px;
  background: radial-gradient(rgba(82,44,31,.9) 0%, rgba(82,44,31,.28) 44%, rgba(20,19,15,0) 70%);
  pointer-events: none;
}

.sec--agenda .wrap { position: relative; max-width: 1240px; }
.sec--agenda .pildora { margin-bottom: 22px; }
.sec--agenda h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.sec--agenda .bajada { margin: 0 auto 40px; max-width: 620px; }

.marco-agenda {
  border: 1px solid rgba(223,220,215,.16);
  border-radius: 24px;
  background: var(--tinta-2);
  padding: clamp(10px, 1.3vw, 16px);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.marco-agenda iframe {
  width: 100%;
  min-height: 780px;
  height: 780px;
  border: 0;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
  background: var(--tinta);
  color-scheme: light;
}

/* ── faq ────────────────────────────────────────────────────── */

.sec--faq { padding: 96px 0; }
.sec--faq .sec-head { margin-bottom: 36px; }

.chat { border: 1px solid rgba(20,19,15,.14); border-radius: 26px; overflow: hidden; box-shadow: 0 26px 70px rgba(20,19,15,.14); max-width: 900px; margin: 0 auto; }

.chat-barra { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--tinta); color: var(--hueso); }
.chat-barra img { height: 24px; width: auto; flex-shrink: 0; }
.chat-barra .chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  object-fit: cover;
  background: var(--tinta-2);
}
.chat-quien { flex: 1; min-width: 0; }
.chat-quien b { display: block; font-size: 15px; font-weight: 600; }
.chat-quien span { font-size: 12px; color: var(--oliva-claro); }
.chat-ayuda { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(223,220,215,.45); white-space: nowrap; }

.chat-cuerpo {
  background: #E7E2D9 radial-gradient(rgba(20,19,15,.043) 1px, transparent 1px) 0 0 / 22px 22px;
  padding: 24px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq { display: flex; flex-direction: column; gap: 12px; }

.faq-pregunta {
  align-self: flex-end;
  max-width: 80%;
  background: #D7EFC6;
  border: 0;
  padding: 14px 18px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -.015em;
  cursor: pointer;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 2px 5px rgba(20,19,15,.08);
}

.faq-mas {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 99px;
  background: var(--tierra);
  color: var(--hueso);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-left: auto;
}

.faq-pregunta.abierta { background: #C8E8B1; }
.faq-pregunta.abierta .faq-mas { background: var(--tinta); }

.faq-panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-respuesta { display: flex; gap: 12px; max-width: 86%; }
.faq-avatar { width: 44px; height: 44px; border-radius: 99px; flex-shrink: 0; object-fit: cover; background: var(--tinta); }
.faq-globo { background: #fff; border-radius: 4px 16px 16px 16px; padding: 14px 18px; box-shadow: 0 2px 5px rgba(20,19,15,.08); }
.faq-globo b { display: block; font-size: 12.5px; font-weight: 700; color: var(--tierra); margin-bottom: 5px; }
.faq-globo p { font-size: 16px; line-height: 1.55; color: rgba(20,19,15,.78); margin: 0; }

.faq-cierre { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .fugas { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .persona,
  .persona--invertida { grid-template-columns: 1fr; gap: 24px; }
  .persona--invertida .persona-foto { order: 0; }
  .persona-foto { height: 320px; }
  .marco-agenda iframe { height: 820px; min-height: 820px; }
}

@media (max-width: 620px) {
  .fugas { grid-template-columns: 1fr; }
  .sec--agenda { padding: 56px 0 64px; }
  .marco-agenda { padding: 8px; border-radius: 18px; }
  .marco-agenda iframe { height: 760px; min-height: 760px; border-radius: 12px; }
  .chat-barra .chat-avatar { width: 34px; height: 34px; }
  .calc-celdas { grid-template-columns: 1fr; }
  .marca-foto { width: 210px; height: 210px; }
  .solucion-cierre .wrap .btn { width: 100%; text-align: center; }
}