/* ══════════════════════════════════════════════════════════════
   Peakk Media — páginas sueltas
   /calendario · /calendario-proyeccion
   /confirmacion-pre-llamada · /confirmacion-pre-llamada-proyeccion
   /politicas-de-privacidad-page · /terminos-y-condiciones
   ══════════════════════════════════════════════════════════════ */

.sec { position: relative; }

/* ── barra con el logo solo ─────────────────────────────────── */

.barra-inner--centro { justify-content: center; }
.barra-inner--centro .barra-logo img { height: 30px; }

@media (max-width: 620px) {
  .barra-inner--centro .barra-logo img { height: 26px; }
}

/* ── aviso superior ─────────────────────────────────────────── */

.aviso {
  background: var(--oliva);
  color: var(--hueso);
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 13px var(--lado);
  line-height: 1.4;
}

@media (max-width: 620px) {
  .aviso {
    font-size: 13px;
    padding: 11px 16px;
  }
}

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

.sec--cabecera {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 7vw, 78px) 0 clamp(26px, 4vw, 40px);
  text-align: center;
}

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

.sec--cabecera .wrap { position: relative; }
.sec--cabecera h1 {
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.sec--cabecera .bajada { margin: 0 auto; }
.sec--cabecera .acciones {
  justify-content: center;
  margin-top: 30px;
}

/* ── calendario ─────────────────────────────────────────────── */

.sec--calendario {
  padding: 0 0 clamp(64px, 8vw, 104px);
  text-align: center;
}

.sec--calendario .wrap { max-width: 1240px; }

.marco-calendario {
  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;
}

/* Pegá acá adentro el iframe de iClosed. Se estira solo. */
.marco-calendario iframe {
  width: 100%;
  min-height: 780px;
  height: 780px;
  border: 0;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
  background: var(--tinta);
  color-scheme: light;
}

.calendario-hueco {
  border: 1px dashed rgba(223,220,215,.3);
  border-radius: 16px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-3);
}

.calendario-nota {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--texto-3);
}

@media (max-width: 620px) {
  .marco-calendario {
    padding: 8px;
    border-radius: 18px;
  }

  .marco-calendario iframe {
    height: 760px;
    min-height: 760px;
    border-radius: 12px;
  }
}

/* ── pasos ──────────────────────────────────────────────────── */

.sec--pasos {
  padding: clamp(20px, 3vw, 34px) 0 clamp(64px, 8vw, 100px);
}

/*
  Onboarding más ancho.
  Esto afecta únicamente al bloque #pasos y no al resto de las páginas.
*/
#pasos .wrap--angosto {
  max-width: 1180px;
}

#pasos .paso {
  width: 100%;
}

.paso {
  border: 1px solid var(--linea);
  border-radius: 26px;
  background: var(--tinta-2);
  padding: clamp(26px, 3.4vw, 44px);
  margin-bottom: 20px;
}

.paso:last-child { margin-bottom: 0; }

.paso-num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--oliva-pale);
  background: rgba(114,118,93,.14);
  border: 1px solid rgba(114,118,93,.3);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.paso h2 {
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: 12px;
}

.paso .bajada { max-width: 60ch; }
.paso .acciones { margin-top: 24px; }

.paso-lista {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.paso-lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto-2);
}

.paso-lista li b {
  color: var(--hueso);
  font-weight: 700;
}

.paso-lista li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 99px;
  background: rgba(114,118,93,.18);
  border: 1px solid rgba(114,118,93,.35);
  color: var(--oliva-pale);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso-aviso {
  margin: 24px 0 0;
  border-left: 2px solid var(--tierra-2);
  padding: 4px 0 4px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-2);
}

.paso-firma {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--oliva-pale);
}

.marco-video {
  margin-top: 26px;
  border: 1px solid rgba(223,220,215,.14);
  border-radius: 22px;
  overflow: hidden;
  background: var(--tinta);
}

.marco-video .video--alto {
  max-width: 340px;
  margin: 0 auto;
}

/* botones de salto */

.saltos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.salto {
  display: block;
  text-align: left;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--tinta-2);
  padding: 18px 20px;
  transition: border-color .18s, transform .18s var(--curva);
}

.salto:hover {
  border-color: rgba(169,173,144,.4);
  transform: translateY(-2px);
}

.salto b {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oliva-claro);
  margin-bottom: 6px;
}

.salto span {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.015em;
}

@media (max-width: 620px) {
  .saltos {
    grid-template-columns: 1fr;
  }
}

/* ── formularios y calendarios embebidos ─────────────────────
   Airtable y el widget de calendario de GoHighLevel vienen con
   fondo claro, así que les damos un marco hueso en vez del oscuro
   del resto del sitio. Si no, se ve un parche blanco flotando.
   ─────────────────────────────────────────────────────────── */

.marco-embed {
  border: 1px solid rgba(223,220,215,.16);
  border-radius: 24px;
  background: var(--hueso);
  padding: clamp(8px, 1.1vw, 14px);
  width: 100%;
  margin: 26px auto 0;
  overflow: hidden;
}

.marco-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: 16px;
  background: #fff;
  color-scheme: light;
}

/*
  Formulario de Airtable: altura fija.
  !important evita que scripts externos intenten achicarlo.
*/
.marco-embed--form iframe {
  height: 1533px !important;
  min-height: 1533px !important;
}

/*
  Calendario de GoHighLevel: altura fija (sin el script de GHL,
  que rompía el formulario de Airtable). Si faltara lugar,
  el iframe tiene scroll habilitado.
*/
.marco-embed--agenda iframe {
  height: 900px !important;
  min-height: 900px !important;
}

@media (max-width: 620px) {
  .marco-embed {
    padding: 6px;
    border-radius: 18px;
  }

  .marco-embed iframe {
    border-radius: 13px;
  }

  .marco-embed--form iframe {
    height: 1700px !important;
    min-height: 1700px !important;
  }

  /* En celular el calendario y los horarios se apilan: necesita más alto */
  .marco-embed--agenda iframe {
    height: 1500px !important;
    min-height: 1500px !important;
  }
}

/* ── formulario propio de onboarding ────────────────────────
   Reemplaza al embed de Airtable. Usa la paleta del sitio.
   ─────────────────────────────────────────────────────────── */

[hidden] { display: none !important; }

.marco-form {
  margin-top: 24px;
  border: 1px solid var(--linea);
  border-radius: 24px;
  background: var(--tinta);
  padding: clamp(20px, 2.4vw, 32px);
}

.form-cabecera {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linea);
}

.form-titulo {
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--hueso);
  margin: 0 0 8px;
}

.form-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0;
  max-width: 62ch;
}

.form-req {
  color: var(--tierra-2);
  font-weight: 700;
}

/* grupos */

/* Una sola columna: las preguntas van una debajo de la otra */
.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

/* etiquetas y ayudas */

.form-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--hueso);
  margin-bottom: 5px;
}

.form-ayuda {
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-3);
  margin: 0 0 8px;
}

/* controles */

.form-control {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hueso);
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 10px 13px;
  transition: border-color .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
}

/*
  Los textareas arrancan chicos y crecen solos a medida que
  se escribe (lo maneja el script de la página).
*/
textarea.form-control {
  resize: vertical;
  min-height: 0;
  overflow: hidden;
}

.form-control::placeholder { color: var(--texto-3); }

.form-control:focus,
.form-control:focus-within {
  outline: 0;
  border-color: rgba(169,173,144,.55);
  background: rgba(114,118,93,.08);
}

/* el ícono del calendario nativo se ve negro sobre fondo oscuro */
input[type="date"].form-control { color-scheme: dark; }

/* campos con prefijo ($, @) */

.form-control--prefijo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
}

.form-prefijo {
  font-size: 15px;
  font-weight: 700;
  color: var(--oliva-pale);
  flex: 0 0 auto;
}

.form-control--prefijo input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--hueso);
  background: none;
  border: 0;
  padding: 10px 0;
}

.form-control--prefijo input:focus { outline: 0; }
.form-control--prefijo input::placeholder { color: var(--texto-3); }

/* opciones Sí / No */

.form-opciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-opcion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--tinta-2);
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}

.form-opcion:hover { border-color: rgba(169,173,144,.4); }

.form-opcion input {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid rgba(223,220,215,.4);
  border-radius: 99px;
  flex: 0 0 auto;
  transition: border-color .18s, box-shadow .18s;
}

.form-opcion input:checked {
  border-color: var(--oliva-pale);
  box-shadow: inset 0 0 0 4px var(--oliva);
}

.form-opcion:has(input:checked) {
  border-color: rgba(169,173,144,.55);
  background: rgba(114,118,93,.14);
  color: var(--hueso);
}

/* error */

.form-campo.tiene-error .form-control,
.form-campo.tiene-error .form-opcion {
  border-color: rgba(196,92,62,.75);
}

.form-error {
  margin: 22px 0 0;
  border: 1px solid rgba(196,92,62,.45);
  border-radius: 14px;
  background: rgba(196,92,62,.1);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hueso);
}

/* pie del formulario */

.form-pie {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form-enviar {
  font-size: 16px;
  padding: 15px 30px;
}

.form-enviar:disabled {
  opacity: .6;
  cursor: default;
}

.form-nota {
  font-size: 13.5px;
  color: var(--texto-3);
  margin: 0;
}

@media (max-width: 620px) {
  .marco-form {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .form-grid { gap: 16px; }

  .form-pie {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ── calendario bloqueado ───────────────────────────────────── */

.agenda-bloqueada {
  margin-top: 26px;
  border: 1px dashed rgba(223,220,215,.24);
  border-radius: 24px;
  background: rgba(20,19,15,.35);
  padding: clamp(34px, 5vw, 60px) clamp(20px, 4vw, 40px);
  text-align: center;
}

.agenda-candado {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 99px;
  background: rgba(114,118,93,.14);
  border: 1px solid rgba(114,118,93,.3);
  color: var(--oliva-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agenda-bloqueada-titulo {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hueso);
  margin: 0 0 8px;
}

.agenda-bloqueada-texto {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 46ch;
  margin: 0 auto;
}

.agenda-bloqueada .acciones {
  justify-content: center;
  margin-top: 24px;
}

/* ── estado de los pasos en las píldoras de arriba ──────────
   /onboarding        → Paso 01 pendiente, Paso 02 bloqueado
   /onboarding-listo  → Paso 01 completado, Paso 02 activo
   ─────────────────────────────────────────────────────────── */

.salto-estado {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-3);
}

/* Paso que todavía no se puede hacer: no es link, se ve apagado */
.salto--bloqueado {
  opacity: .55;
  cursor: default;
}

.salto--bloqueado:hover {
  border-color: var(--linea);
  transform: none;
}

/* Paso ya realizado */
.salto--hecho {
  border-color: rgba(114,118,93,.45);
  background: rgba(114,118,93,.1);
  cursor: default;
}

.salto--hecho:hover {
  border-color: rgba(114,118,93,.45);
  transform: none;
}

.salto--hecho .salto-estado { color: var(--oliva-pale); }

.salto-check {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: var(--oliva);
  color: var(--hueso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Paso 01 una vez enviado: la tarjeta se achica a una sola línea */

.paso--compacto {
  border-color: rgba(114,118,93,.45);
  background: rgba(114,118,93,.09);
  padding: 18px 24px;
}

.paso-hecho {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.paso-hecho-check {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: var(--oliva);
  color: var(--hueso);
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso-hecho-titulo {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hueso);
  margin: 0;
}

.paso-hecho-texto {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto-3);
  margin: 0 0 0 auto;
}

.paso-hecho-texto a {
  color: var(--oliva-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .paso--compacto { padding: 16px 18px; }

  .paso-hecho-texto { margin: 0; }
}

/* Paso actual */
.salto--activo {
  border-color: rgba(169,173,144,.45);
}

.salto--activo .salto-estado { color: var(--oliva-claro); }

/* ── páginas legales ────────────────────────────────────────── */

.sec--legal {
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 100px);
}

.sec--legal .wrap { max-width: 860px; }

.legal-meta {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--texto-3);
  margin: 0 0 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}

.legal h2 {
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 52px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--linea);
}

.legal > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--oliva-pale);
  margin: 30px 0 10px;
}

.legal p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-2);
  margin: 0 0 14px;
  max-width: 72ch;
}

.legal p strong,
.legal li strong {
  color: var(--hueso);
  font-weight: 700;
}

.legal a {
  color: var(--oliva-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover { color: var(--oliva-pale); }

.legal ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 72ch;
}

.legal ul li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-2);
}

.legal ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--oliva);
}

.legal-caja {
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: var(--tinta-2);
  padding: 24px 26px;
  margin: 22px 0;
}

.legal-caja p:last-child { margin-bottom: 0; }

.legal-indice {
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: var(--tinta-2);
  padding: 24px 26px;
  margin-bottom: 48px;
}

.legal-indice p {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-3);
  margin: 0 0 14px;
}

.legal-indice ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  color: var(--texto-2);
}

.legal-indice a {
  color: inherit;
  text-decoration: none;
}

.legal-indice a:hover { color: var(--oliva-claro); }

@media (max-width: 620px) {
  .legal-caja,
  .legal-indice {
    padding: 20px;
    border-radius: 18px;
  }
}