/* Landing finanzasconmarcela.com.mx — "Muy pronto"
   Sin dependencias externas: tipografía del sistema, sin JS, sin imágenes. */

:root {
  --bg: #faf7f2;
  --bg-glow: #f0e9dd;
  --ink: #0f2231;
  --ink-soft: #4a5a68;
  --accent: #8a6a15; /* 4.73:1 sobre --bg; el dorado claro (#b8901f) daba 2.79:1 y no pasa AA */
  --rule: #ddd2c0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1b26;
    --bg-glow: #132635;
    --ink: #f2ece2;
    --ink-soft: #a8b6c2;
    --accent: #d8b256;
    --rule: #294152;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 1.5rem 1.5rem;
  background: var(--bg);
  background-image: radial-gradient(ellipse 90% 65% at 50% 0%, var(--bg-glow) 0%, var(--bg) 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sin min-height: la presentación NO reserva una pantalla completa. Agendar es la razón de
   ser de la página, así que el calendario tiene que entrar cuanto antes; obligar a hacer
   scroll para llegar a lo único accionable es esconderlo. */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.card {
  max-width: 34rem;
  text-align: center;
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.brand {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
}

.brand-line {
  display: block;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  font-style: italic;
  color: var(--ink-soft);
}

.brand-name {
  display: block;
  margin-top: 0.15em;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  letter-spacing: -0.015em;
}

.rule {
  width: 3.5rem;
  height: 2px;
  margin: 1.5rem auto;
  background: var(--accent);
  opacity: 0.75;
}

.lede {
  margin: 0 auto;
  max-width: 27rem;
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.note {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  opacity: 0.72;
}

/* --- Agendador ------------------------------------------------------------ */

.agenda {
  width: 100%;
  max-width: 60rem;
  text-align: center;
}

.agenda-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
}

.agenda-nota {
  margin: 0.5rem 0 1.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* El widget SIEMPRE en claro, sobre marco SIEMPRE blanco. Las dos mitades de la misma
   decisión, y ninguna es cosmética:

   1. El `body` del iframe es transparente: el fondo del widget lo pone ESTE contenedor.
      Comprobado el 2026-08-08 pintándolo de rojo — todo el widget se puso rojo MENOS la
      columna de horarios, que Google pinta de blanco dentro del iframe y que no podemos
      tocar por ser otro origen. Igualar el marco a blanco borra esa costura.

   2. `color-scheme: light` en el iframe fija el tema del widget. Sin eso el tema es una
      lotería: en dos cargas seguidas con `prefers-color-scheme: dark` se renderizó una vez
      oscuro y otra CLARO, y en el segundo caso su texto oscuro cayó sobre nuestro fondo
      oscuro y quedó ilegible. Un marco blanco sin fijar el tema tendría el problema
      espejo. Fijando ambos, el resultado es el mismo pase lo que pase del lado de Google.

   En modo oscuro esto deja una tarjeta blanca sobre página oscura: es deliberado, y se lee
   como tarjeta —no como error— gracias al borde y la sombra. */
.agenda-marco {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 34, 49, .06), 0 12px 32px rgba(15, 34, 49, .08);
}

.agenda-marco iframe {
  color-scheme: light;   /* ver la nota de arriba: sin esto el tema del widget es una lotería */
  display: block;
  width: 100%;
  height: clamp(38rem, 82vh, 46rem);
  border: 0;
}

/* En móvil el widget se apila en vertical y necesita bastante más alto; con la altura
   de escritorio el calendario queda cortado y obliga a hacer scroll DENTRO del scroll
   de la página, que es de las cosas más incómodas en un teléfono. */
@media (max-width: 640px) {
  .agenda-marco iframe { height: 56rem; }
}

.foot {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.55;
}

/* Pantallas bajas (móvil apaisado): el agendador necesita alto útil, no proporcional
   a la ventana, o queda una rendija inservible. */
@media (max-height: 560px) {
  .rule { margin: 1rem auto; }
  .agenda-marco iframe { height: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}