/* Estilos exclusivos de la página principal (home). El editor (editar-pdf.html)
   sigue usando solo styles.css: aquí no tocamos nada de eso, solo añadimos
   lo necesario para una página de contenido normal, con scroll. */
html, body{ height:auto; overflow:auto; }
body{ background:var(--paper); }

.home{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Cabecera ---------- */
.home-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
  max-width:1100px; margin:0 auto;
}
.home-header .brand{ text-decoration:none; display:flex; flex-direction:column; }
.home-nav{ display:flex; align-items:center; gap:18px; }
.home-nav a{ color:var(--ink-soft); text-decoration:none; font-size:13.5px; font-weight:500; }
.home-nav a:hover{ color:var(--ink); }
.home-nav .btn{ text-decoration:none; }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  text-align:center;
}
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px, 5vw, 50px);
  line-height:1.12;
  margin:0 0 16px;
  color:var(--ink);
}
.hero h1 .accent{ color:var(--accent); }
.hero p{
  font-size:17px; line-height:1.6; color:var(--ink-soft);
  max-width:560px; margin:0 auto 28px;
}
.hero-cta-row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  font-size:16px; font-weight:600;
  padding:14px 28px; border-radius:var(--radius);
  text-decoration:none;
  transition:filter .12s ease, transform .12s ease;
}
.hero-cta:hover{ filter:brightness(1.06); }
.hero-cta svg{ width:18px; height:18px; }
/* Formularios usa el acento propio de ese modo dentro del editor
   (--form-accent, azul) para que ya desde la home se note la diferencia
   entre los dos caminos: Editor (naranja) y Formularios (azul). */
.hero-cta-alt{
  background:var(--form-accent); color:var(--form-accent-ink);
}
.hero-trust{
  margin-top:16px; font-size:12.5px; color:var(--ink-soft);
}

/* ---------- Anuncios laterales (multiplex vertical) ----------
   El contenido mide 1100px como máximo y va centrado, así que el margen
   libre a cada lado empieza en 50% - 550px. Se deja un hueco de 240px para
   el anuncio (bastante para un multiplex en modo Vertical, que es una lista
   en una sola columna, no la cuadrícula ancha) más un margen de separación.
   Solo se muestra si la ventana es lo bastante ancha como para que quepan
   los dos + el contenido sin apretarse (>=1680px). */
.ad-rail{
  display:none;
  position:fixed;
  top:140px;
  width:240px;
  z-index:5;
}
.ad-rail-left{ left:calc(50% - 834px); }
.ad-rail-right{ left:calc(50% + 594px); }
.ad-rail .ad-label{
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; margin:0 0 6px;
}
@media (min-width: 1680px){
  .ad-rail{ display:block; }
}

/* ---------- Cómo funciona ---------- */
.section{ padding:48px 0; }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{
  font-family:var(--display); font-weight:600; font-size:28px;
  margin:0 0 8px; color:var(--ink);
}
.section-head p{ color:var(--ink-soft); font-size:14.5px; margin:0; }

.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.step{
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:24px 20px; text-align:center;
}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:14px; margin-bottom:14px;
}
.step h3{ font-size:16px; margin:0 0 8px; color:var(--ink); }
.step p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.5; }

/* ---------- Funciones (grid de tarjetas) ---------- */
.features{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.feature{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:18px;
}
.feature .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:var(--panel); color:var(--accent); margin-bottom:10px;
}
.feature .icon svg{ width:18px; height:18px; }
.feature h3{ font-size:14.5px; margin:0 0 5px; color:var(--ink); }
.feature p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5; }

/* ---------- Anuncios multiplex (uno junto al otro en pantallas anchas) ---------- */
.multiplex-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width: 760px){
  .multiplex-row{ grid-template-columns:1fr; }
}

/* ---------- Tarjetas de herramientas ---------- */
.tools-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.tool-card{
  display:block; text-decoration:none;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:20px; transition:border-color .12s ease;
}
.tool-card:hover{ border-color:var(--accent); }
.tool-card .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:var(--panel); color:var(--accent); margin-bottom:12px;
}
.tool-card .icon svg{ width:20px; height:20px; }
.tool-card h3{ font-size:15.5px; margin:0 0 6px; color:var(--ink); }
.tool-card p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5; }

/* ---------- Privacidad ---------- */
.privacy-box{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:26px;
}
.privacy-box .icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  background:var(--panel); color:var(--focus);
  display:flex; align-items:center; justify-content:center;
}
.privacy-box .icon svg{ width:22px; height:22px; }
.privacy-box h2{ font-family:var(--display); font-size:20px; margin:0 0 8px; color:var(--ink); }
.privacy-box p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 10px; }
.privacy-box a{ color:var(--focus); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item h3{ font-size:15px; margin:0 0 8px; color:var(--ink); }
.faq-item p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.6; }

/* ---------- CTA final ---------- */
.cta-final{
  text-align:center; padding:56px 0 64px;
}
.cta-final h2{
  font-family:var(--display); font-weight:600; font-size:26px;
  margin:0 0 20px; color:var(--ink);
}

/* ---------- Footer ---------- */
.home-footer{
  border-top:1px solid var(--line);
  padding:24px 0 40px;
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--ink-soft);
}
.home-footer a{ color:var(--ink-soft); text-decoration:none; }
.home-footer a:hover{ color:var(--ink); text-decoration:underline; }
.home-footer .footer-links{ display:flex; gap:16px; }

/* ---------- Ventana emergente con anuncio ---------- */
.promo-backdrop{
  position:fixed; inset:0; background:rgba(15,14,12,0.55);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:20px;
}
.promo-backdrop.show{ display:flex; }
.promo-card{
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  width:min(420px, 100%);
  padding:16px;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.promo-close{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:50%;
  border:none; background:var(--panel); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.promo-close:hover{ color:var(--ink); }
.promo-card .ad-label{
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 8px;
}

@media (max-width: 760px){
  .steps{ grid-template-columns:1fr; }
  .hero{ padding:44px 0 40px; }
  .privacy-box{ flex-direction:column; }
  .home-header{ flex-wrap:wrap; gap:10px 16px; padding:16px 0; }
  .home-nav{ flex-wrap:wrap; gap:6px 14px; }
}