/* Paleta adaptada al logo facilitado;
   colores de texto oscurecidos para legibilidad. */
:root{--paper:#f8fafb;
  --ink:#08294b;
  --muted:#465d70;
  --teal:#006a70;
  --mint:#dbf5f2;
  --line:#c8d8df;
  --white:#fff;
  --width:1120px}

*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:inherit;
  text-underline-offset:5px}
a:hover{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--teal);
  outline-offset:5px}
.wrap{width:min(var(--width),calc(100% - 40px));
  margin-inline:auto}
.preview{text-align:center;
  background:var(--ink);
  color:white;
  padding:9px 20px;
  font-size:.8125rem;
  letter-spacing:.03em}
.header{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:10px;
  border-bottom:1px solid var(--line)}
.brand{display:block;
  flex:0 1 270px;
  min-width:0}
.brand img{display:block;
  width:100%;
  height:auto}
.header-cta{flex-shrink:0;
  display:inline-flex;
  align-items:center;
  min-height:44px}
.header-cta{font-size:.875rem;
  font-weight:bold;
  text-decoration:none}
.header-cta span{margin-left:6px}
.hero{padding-block:40px 48px}
.eyebrow{text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:700;
  margin:0 0 22px}
.draft-label{font-size:.8125rem;
  color:var(--muted);
  margin:0 0 16px}
.draft-label:before{content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--teal);
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2{text-wrap:balance}
h1,h2,h3{line-height:1.08;
  letter-spacing:-.045em}
h1{font-size:clamp(2.25rem,5.4vw,4.5rem);
  max-width:1000px;
  margin:0 0 28px;
  font-weight:700}
em{font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--teal)}
.lead{max-width:660px;
  font-size:1.1rem;
  color:var(--muted);
  margin-bottom:28px}
.signup{max-width:700px}
.field-label{font-size:.875rem;
  font-weight:700;
  margin-bottom:8px}
fieldset{border:0;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0}
input,button{font:inherit;
  min-height:56px;
  border-radius:3px}
input{min-width:0;
  width:100%;
  border:1px solid #7e9692;
  background:white;
  padding:12px 16px;
  color:var(--ink)}
input:disabled{opacity:1;
  -webkit-text-fill-color:var(--muted)}
input::placeholder{color:var(--muted);
  opacity:1}
button{border:1px solid var(--teal);
  background:var(--teal);
  color:white;
  padding:13px 19px;
  font-size:.875rem;
  font-weight:bold;
  line-height:1.4}
button:disabled{opacity:1;
  cursor:not-allowed}
.form-note,.microcopy{font-size:.8125rem;
  color:var(--muted);
  margin:10px 0}
.microcopy{margin-top:6px}
.text-link{font-size:.875rem;
  font-weight:bold}
.explore{display:inline-block;
  margin-top:30px}
.idea{background:#eaf1f6;
  padding-block:56px}
.editorial{display:grid;
  gap:12px}
h2{font-size:clamp(2rem,4vw,3rem);
  margin:0 0 24px}
h3{font-size:1.6rem;
  margin:16px 0}
.editorial p:not(.eyebrow):not(.draft-label){max-width:660px;
  color:var(--muted)}
.section{padding-block:56px}
.categories{display:grid;
  gap:30px;
  margin-top:32px}
.categories article{border-top:1px solid var(--line);
  padding-top:20px}
.number{font-size:.8rem;
  color:var(--teal)}
.categories p{color:var(--muted);
  margin-bottom:0}
.product{border-top:1px solid var(--line);
  display:grid;
  gap:20px}
.product-copy{border-left:2px solid var(--teal);padding-left:24px;color:var(--muted)}
.product-copy p:first-child{margin-top:0}
.product-signoff{font-weight:700;color:var(--ink)}

.closing{background:var(--mint);
  padding-block:56px}
.closing-inner{max-width:var(--width)}
.closing h2{max-width:760px}
.footer{display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 32px;
  padding-block:28px;
  font-size:.8125rem;
  color:var(--muted)}
.footer nav{display:flex;
  gap:22px}
.footer nav a{display:inline-flex;
  align-items:center;
  min-height:44px}
.pending-contact{width:100%}
.document{max-width:760px;
  padding-block:56px 80px}
.document h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.document h2{font-size:1.4rem;
  margin-top:36px}
.notice{border-left:3px solid var(--teal);
  padding:18px;
  background:#eaf1f6}
.document .text-link{display:inline-block;
  margin-top:30px}
.sr-only,.skip-link:not(:focus){position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}
.skip-link:focus{position:fixed;
  top:10px;
  left:10px;
  background:white;
  padding:12px;
  z-index:10}

@media(min-width:640px){.wrap{width:min(var(--width),calc(100% - 80px))}
.header{padding-block:12px}
.brand{flex-basis:300px}
.hero{padding-block:52px 56px}
fieldset{flex-direction:row}
input{flex:1}
button{flex-shrink:0}
.categories{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px}
.section,.idea,.closing{padding-block:80px}
.editorial{grid-template-columns:1fr 2fr;
  gap:40px}
.product{grid-template-columns:1fr 1fr;
  gap:56px}
}

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


@media(max-width:359px){.header{gap:12px}
.header-cta{font-size:.8125rem}
.header-cta span{display:none}
}


/* Impresión: legibilidad independiente de la opción de imprimir fondos. */
@media print {
  @page { margin: 16mm; }
  body { background: white; color: #08294b; }
  .wrap { width: 100%; }
  .preview {
    background: white;
    color: #465d70;
    border-bottom: 1px solid #c8d8df;
  }
  .hero, .section, .idea, .closing { padding-block: 24px; }
  .idea, .closing { background: white; }
  .header, .signup, .categories article, .product-copy, .footer {
    break-inside: avoid;
  }
  h1, h2, h3, .eyebrow { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  button, button:disabled {
    background: white;
    color: #006a70;
    -webkit-text-fill-color: #006a70;
    border: 1px solid #006a70;
  }
  .editorial, .product { display: block; }
  .product-copy { margin-top: 24px; }
  .footer { gap: 12px 32px; }
}

/* El titular aprobado es más largo: ancho y escala propios, sin cambiar la identidad. */
.hero h1 { max-width: 1050px; font-size: clamp(2rem, 4.5vw, 3.75rem); }
.hero h1 em { display: block; margin-top: .12em; }
.hero-intro { max-width: 700px; margin-bottom: 28px; }
.hero-intro .lead { max-width: none; margin-block: 0 16px; }
@media (min-width: 640px) and (max-width: 767px) {
  .categories { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; gap: 24px; }
}

/* Kit: presentación de DeFinanzate; estados controlados por el script oficial. */
.signup .field-label{display:block;margin-top:0}
.signup .formkit-fields{display:flex;flex-direction:column;gap:10px}
.signup .formkit-field{min-width:0;flex:1}
.signup .formkit-submit{position:relative;cursor:pointer}
.signup .formkit-submit:disabled{cursor:wait}
.signup .formkit-alert{padding:14px 16px;border:1px solid var(--teal);border-radius:3px;list-style:none;margin:12px 0;overflow-wrap:anywhere}
.signup .formkit-alert:empty{display:none}
.signup .formkit-alert-error{color:#8b2519;background:#fff0ec;border-color:#ad3929}
.signup .formkit-alert-success{color:var(--ink);background:var(--mint)}
.signup .formkit-alert-success:focus{outline:3px solid var(--teal);outline-offset:3px}
.signup .formkit-powered-by-convertkit{font-size:.75rem;color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.signup .formkit-spinner{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:5px}
.signup .formkit-spinner > span{width:8px;height:8px;border-radius:50%;background:currentColor}
.signup .formkit-submit[data-active] .formkit-spinner{display:flex}
.signup .formkit-submit[data-active] > span:last-child{opacity:0}
@media(min-width:640px){.signup .formkit-fields{flex-direction:row;align-items:flex-end}}