/* ══════════════════════════════════════════════════════════════════════
   MasterBook — stffvb.com

   Concepto: la página ES un libro de citas. Secciones oscuras (la tapa de
   cuero, donde va el argumento) alternando con secciones de papel reglado
   (la página, donde van los datos). El oro del logo se usa como estampado
   en relieve — filetes, guardas, bordes — nunca como brillo decorativo.

   Paleta derivada del logo, no inventada:
     tinta  #090D16  fondo del círculo
     oro    #F59E0B → #D97706  degradado del aro y el separador
     verde  #22C55E  el check de confirmación (solo estados confirmados)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Tapa */
  --tinta:        #090D16;
  --tinta-2:      #0E1422;   /* panel levantado sobre la tapa */
  --tinta-3:      #161E30;   /* borde sobre oscuro */
  --tinta-texto:  #9BA5B8;   /* secundario sobre oscuro */

  /* Página */
  --papel:        #EFEBE3;
  --papel-2:      #E6E0D4;   /* reglado y bordes del papel */
  --papel-texto:  #3A4152;
  --papel-gris:   #6E7385;

  /* Oro del logo */
  --oro:          #F59E0B;
  --oro-hondo:    #D97706;
  --oro-filete:   linear-gradient(135deg, #F59E0B, #D97706);

  /* Confirmación */
  --verde:        #22C55E;

  --display: 'Fraunces', Georgia, serif;
  --texto:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --libro:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --lim: 1180px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  background: var(--tinta);
  color: #F5F3EF;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.lim { max-width: var(--lim); margin: 0 auto; padding: 0 var(--gutter); }

/* Enfoque visible sin excepción: el formulario se llena con teclado. */
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 3px; }

/* ── Tipografía ──────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 5.3vw, 4.05rem); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-variation-settings: 'opsz' 96, 'WONK' 1; }
h3 { font-size: 1.22rem; font-variation-settings: 'opsz' 24; letter-spacing: -.005em; }
h1 em, h2 em {
  font-style: italic; font-weight: 600;
  background: var(--oro-filete);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Rótulo de sección: la voz del índice de un libro. */
.rotulo {
  font-family: var(--libro); font-size: .72rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.rotulo.centro { justify-content: center; }
.rotulo.centro::before { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.papel .rotulo { color: var(--oro-hondo); }
.tapa  .rotulo { color: var(--oro); }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 4px;
  font-family: var(--texto); font-size: .97rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s;
}
.btn-oro {
  background: var(--oro-filete); color: #1A1204;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -10px rgba(217,119,6,.75);
}
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 30px -12px rgba(217,119,6,.9); }
.btn-linea { border-color: rgba(245,158,11,.45); color: var(--oro); background: transparent; }
.btn-linea:hover { border-color: var(--oro); background: rgba(245,158,11,.08); transform: translateY(-2px); }
.papel .btn-linea { border-color: rgba(217,119,6,.5); color: var(--oro-hondo); }
.papel .btn-linea:hover { background: rgba(217,119,6,.07); }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Encabezado ──────────────────────────────────────────────────────── */
.encabezado {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9,13,22,.82); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Filete de oro: la guarda del libro, 2px que separan tapa de contenido. */
.encabezado::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--oro-filete); opacity: .5; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca img { width: 40px; height: 40px; display: block; }
.marca span { font-family: var(--display); font-size: 1.3rem; font-weight: 600; font-variation-settings: 'opsz' 24; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  color: var(--tinta-texto); text-decoration: none; font-size: .93rem; font-weight: 500;
  position: relative; padding: 4px 0; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--oro-filete); transition: right .28s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover { color: #F5F3EF; }
.nav-links a:hover::after { right: 0; }

/* ── Portada (la tapa) ───────────────────────────────────────────────── */
.tapa { background: var(--tinta); position: relative; }
.portada { padding: 86px 0 104px; position: relative; overflow: hidden; }
/* Halo de oro muy bajo: sugiere el relieve de un estampado, no ilumina. */
.portada::before {
  content: ''; position: absolute; top: -280px; left: 50%; width: 900px; height: 700px;
  transform: translateX(-46%);
  background: radial-gradient(ellipse at center, rgba(245,158,11,.10), transparent 62%);
  pointer-events: none;
}
.portada-rejilla { display: grid; grid-template-columns: 1.02fr 1.08fr; gap: 66px; align-items: center; position: relative; }

.sello {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--libro); font-size: .71rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--oro);
  border: 1px solid rgba(245,158,11,.32); border-radius: 3px;
  padding: 7px 14px; margin-bottom: 26px;
}
.sello i { width: 5px; height: 5px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

.portada p.entrada { font-size: 1.16rem; color: var(--tinta-texto); max-width: 500px; margin: 24px 0 34px; }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.garantias { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); }
.garantias div { font-family: var(--libro); font-size: .715rem; letter-spacing: .06em; color: var(--tinta-texto); display: flex; align-items: center; gap: 8px; }
.garantias svg { width: 14px; height: 14px; color: var(--verde); flex-shrink: 0; }

/* ── EL LIBRO ABIERTO (elemento firma) ───────────────────────────────── */
.libro {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--papel);
  border-radius: 5px;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(245,158,11,.22),
    0 0 0 9px rgba(9,13,22,.6);
  position: relative; overflow: hidden;
}
/* El lomo: sombra del pliegue central, lo que hace que se lea como libro. */
.libro::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 34px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(58,65,82,.16) 42%, rgba(58,65,82,.22) 50%, rgba(58,65,82,.16) 58%, transparent);
}
.hoja { padding: 22px 20px; min-height: 428px; }
.hoja-rotulo {
  font-family: var(--libro); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--papel-gris); padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--papel-2);
  display: flex; justify-content: space-between; align-items: center;
}

/* Página izquierda: la conversación */
.hoja-chat { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; }
.burbuja {
  max-width: 88%; padding: 10px 13px; font-size: .855rem; line-height: 1.48;
  border-radius: 12px; color: var(--papel-texto);
  animation: entra .5s both cubic-bezier(.2,.7,.3,1); animation-delay: calc(var(--i) * .26s);
}
.burbuja.cliente { background: #FFF; border: 1px solid var(--papel-2); border-bottom-left-radius: 3px; align-self: flex-start; }
.burbuja.negocio { background: #DCF8C6; border: 1px solid #CBEBB2; border-bottom-right-radius: 3px; align-self: flex-end; }
.burbuja .t { display: block; font-family: var(--libro); font-size: .62rem; color: var(--papel-gris); text-align: right; margin-top: 5px; }
.burbuja.audio { display: flex; align-items: center; gap: 9px; }
.onda { display: flex; align-items: center; gap: 2px; height: 17px; }
.onda i { width: 2px; border-radius: 2px; background: var(--papel-gris); height: var(--h); }

/* Página derecha: la agenda reglada */
.hoja-agenda { padding-top: 6px; }
.renglon {
  display: grid; grid-template-columns: 62px 1fr; align-items: center;
  min-height: 56px; border-bottom: 1px solid var(--papel-2);
}
.renglon .hora {
  font-family: var(--libro); font-size: .76rem; font-weight: 500; color: var(--papel-gris);
  border-right: 2px solid rgba(245,158,11,.4); height: 100%;
  display: flex; align-items: center; padding-right: 12px;
}
.renglon .cupo { padding-left: 14px; }
.renglon .cupo .libre { font-family: var(--libro); font-size: .74rem; color: #A9AEBC; letter-spacing: .06em; }
.renglon .cupo .quien { font-weight: 700; font-size: .9rem; color: var(--papel-texto); display: flex; align-items: center; gap: 7px; }
.renglon .cupo .que { font-family: var(--libro); font-size: .69rem; color: var(--papel-gris); letter-spacing: .04em; margin-top: 1px; }

/* El estampado: cada cupo entra con el check dorado, uno tras otro. */
.renglon.estampa .cupo > * { animation: estampa .46s both cubic-bezier(.2,.8,.3,1); animation-delay: calc(1.5s + var(--i) * .3s); }
.visto {
  width: 15px; height: 15px; border-radius: 50%; background: var(--verde);
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.visto svg { width: 9px; height: 9px; color: #fff; }

@keyframes entra  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes estampa { from { opacity: 0; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Secciones de papel ──────────────────────────────────────────────── */
.papel {
  background: var(--papel); color: var(--papel-texto);
  position: relative;
}
.papel::before, .papel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--oro-filete); opacity: .55;
}
.papel::before { top: 0; } .papel::after { bottom: 0; }
section { padding: 96px 0; }
.cabecera-seccion { max-width: 660px; margin-bottom: 56px; }
.cabecera-seccion p { margin-top: 16px; font-size: 1.06rem; }
.papel .cabecera-seccion p { color: var(--papel-gris); }
.tapa  .cabecera-seccion p { color: var(--tinta-texto); }

/* ── Fichas de beneficio ─────────────────────────────────────────────── */
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 1px; background: var(--papel-2); border: 1px solid var(--papel-2); }
.ficha { background: var(--papel); padding: 34px 30px; transition: background .25s; }
.ficha:hover { background: #F6F3EC; }
.ficha .num { font-family: var(--libro); font-size: .68rem; letter-spacing: .18em; color: var(--oro-hondo); display: block; margin-bottom: 16px; }
.ficha h3 { margin-bottom: 11px; }
.ficha p { font-size: .96rem; color: var(--papel-gris); }

/* ── El recordatorio ─────────────────────────────────────────────────── */
.recordatorio-rejilla { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.plantilla {
  background: #FFF; border-radius: 13px; padding: 17px; max-width: 366px;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  color: var(--papel-texto);
}
.plantilla .de { font-weight: 700; font-size: .92rem; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.plantilla .de img { width: 22px; height: 22px; }
.plantilla p { font-size: .885rem; line-height: 1.56; }
.plantilla p + p { margin-top: 9px; }
.respuestas { margin-top: 13px; border-top: 1px solid #E8E8E8; display: grid; gap: 1px; }
.respuestas span {
  text-align: center; padding: 11px; color: #0A7CBF; font-weight: 600; font-size: .88rem;
  border-top: 1px solid #E8E8E8;
}
.respuestas span:first-child { border-top: none; }

.puntos { list-style: none; display: grid; gap: 22px; }
.puntos li { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; }
.puntos .marca { width: 22px; height: 22px; border-radius: 50%; background: rgba(245,158,11,.14); display: grid; place-items: center; margin-top: 2px; }
.puntos .marca svg { width: 11px; height: 11px; color: var(--oro); }
.puntos strong { display: block; font-weight: 700; margin-bottom: 4px; }
.puntos span.txt { color: var(--tinta-texto); font-size: .97rem; }

/* ── Planes ──────────────────────────────────────────────────────────── */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  background: #FBF9F5; border: 1px solid var(--papel-2); border-radius: 5px;
  padding: 36px 30px 32px; display: flex; flex-direction: column; position: relative;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -22px rgba(9,13,22,.4); }
.plan.recomendado { border-color: rgba(217,119,6,.55); box-shadow: 0 0 0 1px rgba(217,119,6,.3), 0 18px 40px -20px rgba(9,13,22,.35); }
.plan.recomendado::before { content: ''; position: absolute; inset: -1px -1px auto; height: 3px; background: var(--oro-filete); border-radius: 5px 5px 0 0; }
.cinta {
  position: absolute; top: -11px; left: 30px;
  background: var(--oro-filete); color: #1A1204;
  font-family: var(--libro); font-size: .63rem; font-weight: 600; letter-spacing: .13em;
  padding: 4px 12px; border-radius: 3px;
}
.plan h3 { margin-bottom: 6px; }
.plan .cupo-plan { font-family: var(--libro); font-size: .74rem; letter-spacing: .09em; color: var(--oro-hondo); text-transform: uppercase; margin-bottom: 24px; }
.plan .valor { font-family: var(--display); font-size: 2.5rem; font-weight: 600; font-variation-settings: 'opsz' 72; letter-spacing: -.02em; line-height: 1; }
.plan .periodo { font-family: var(--texto); font-size: .9rem; color: var(--papel-gris); font-weight: 400; }
.plan .iva { font-family: var(--libro); font-size: .7rem; color: var(--papel-gris); letter-spacing: .07em; margin: 8px 0 26px; }
.plan ul { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; flex: 1; }
.plan li { font-size: .93rem; color: var(--papel-gris); display: grid; grid-template-columns: 16px 1fr; gap: 11px; }
.plan li svg { width: 16px; height: 16px; color: var(--verde); margin-top: 4px; }

/* ── Ciclo de cobro (sí es una secuencia: los días importan) ─────────── */
.ciclo { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 0; border: 1px solid var(--tinta-3); }
.paso { padding: 30px 26px; border-right: 1px solid var(--tinta-3); position: relative; }
.paso:last-child { border-right: none; }
.paso .dia { font-family: var(--display); font-size: 2.6rem; font-weight: 600; font-variation-settings: 'opsz' 72; line-height: 1; color: var(--oro); }
.paso .dia small { font-family: var(--libro); font-size: .64rem; letter-spacing: .16em; display: block; color: var(--tinta-texto); margin-bottom: 8px; text-transform: uppercase; }
.paso h3 { font-size: 1.04rem; margin: 14px 0 8px; }
.paso p { font-size: .9rem; color: var(--tinta-texto); }
.paso.corte { background: rgba(245,158,11,.05); }
.paso.corte .dia { background: var(--oro-filete); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paso.tope .dia { color: #E06C4F; }

/* ── Registro ────────────────────────────────────────────────────────── */
.registro { max-width: 660px; margin: 0 auto; background: #FBF9F5; border: 1px solid var(--papel-2); border-radius: 5px; padding: 44px; }
.registro::before { content: ''; display: block; height: 3px; background: var(--oro-filete); margin: -44px -44px 34px; border-radius: 5px 5px 0 0; }
.campo { margin-bottom: 19px; }
.campo label { display: block; font-family: var(--libro); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; color: var(--papel-gris); margin-bottom: 8px; }
.campo input, .campo select {
  width: 100%; padding: 13px 15px; background: #FFF; color: var(--papel-texto);
  border: 1px solid var(--papel-2); border-radius: 4px; font-size: .97rem; font-family: var(--texto);
  transition: border-color .18s, box-shadow .18s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--oro-hondo); box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
.campo input::placeholder { color: #ADB1BE; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nota { font-size: .82rem; color: var(--papel-gris); margin-top: 7px; }
.promo-estado { font-family: var(--libro); font-size: .78rem; margin-top: 8px; min-height: 19px; letter-spacing: .03em; }
.promo-estado.si { color: #17803D; }
.promo-estado.no { color: #C2410C; }
.aviso { padding: 14px 17px; border-radius: 4px; font-size: .93rem; margin-bottom: 22px; display: none; }
.aviso.si { display: block; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #166534; }
.aviso.no { display: block; background: rgba(194,65,12,.1); border: 1px solid rgba(194,65,12,.35); color: #9A3412; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { padding: 64px 0 40px; border-top: 1px solid rgba(255,255,255,.07); }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
.pie p { color: var(--tinta-texto); font-size: .92rem; max-width: 340px; margin-top: 16px; }
.pie h4 { font-family: var(--libro); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; }
.pie ul { list-style: none; display: grid; gap: 11px; }
.pie a { color: var(--tinta-texto); text-decoration: none; font-size: .92rem; transition: color .2s; }
.pie a:hover { color: #F5F3EF; }
.pie-legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07);
  font-family: var(--libro); font-size: .73rem; color: #5D6577; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* ── Revelado al entrar en pantalla ──────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.revelar.visible { opacity: 1; transform: none; }

/* ── Adaptación ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .portada-rejilla, .recordatorio-rejilla { grid-template-columns: 1fr; gap: 46px; }
  .nav-links { display: none; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .paso { border-right: none; border-bottom: 1px solid var(--tinta-3); }
  .paso:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section, .portada { padding: 64px 0; }
  .libro { grid-template-columns: 1fr; }
  .libro::after { display: none; }
  .hoja { min-height: auto; }
  .hoja-chat { padding-bottom: 8px; }
  .par { grid-template-columns: 1fr; }
  .registro { padding: 28px; }
  .registro::before { margin: -28px -28px 24px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 32px; }
  .acciones .btn { width: 100%; }
}

/* Quien pide menos movimiento, no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .revelar { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}