/* Landing pública · Sistema Comer Fácil (sistemacomerfacil.com).
   Rediseño del 15-10-2026 según la auditoría de ChatGPT, aprobado por el dueño: base clara y los mismos tokens,
   letra (Manrope) y componentes que la web de compradores (public/assets/compradores.css). Si cambia un token
   allí, cambiarlo aquí. Un solo bloque oscuro: la oferta, en verde profundo.
   Contrastes (sRGB): tinta 14,9 · tinta2 7,4 · verde 9,4 sobre #FAFAF6 · mandarina de texto #B44726 5,2 ·
   blanco sobre verde 10,0 · #D5E2D6 sobre verde 7,4. La mandarina #D95B32 solo en los arcos (gráfico). */
:root{
  color-scheme:light;
  --fondo:#FAFAF6; --sup:#FFFFFF; --tinta:#202820; --tinta2:#4A554C;
  --verde:#244B3A; --verde-h:#1B3A2C; --verde-s:#E8EFE7; --verde-t:#D5E2D6;
  --mand:#D95B32; --mand-texto:#B44726; --linea:#D9DFD6; --linea-f:#B9C3B6;
  --ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:16px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ transition:none!important } }
body{ margin:0; background:var(--fondo); color:var(--tinta); font:400 17px/1.6 var(--ui); -webkit-font-smoothing:antialiased }
img{ display:block; max-width:100%; height:auto }
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{ margin:0 }
h1,h2,h3,h4,h5{ font-family:var(--ui); color:var(--tinta); text-wrap:balance }
a{ color:var(--verde); text-underline-offset:.2em; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:6px }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 16px }
@media (min-width:768px){ .wrap{ padding:0 32px } }
.saltar{ position:absolute; left:8px; top:-60px; z-index:20; padding:10px 14px; border-radius:8px; background:var(--verde); color:#fff; font-weight:700 }
.saltar:focus{ top:8px }

/* Marca: los cuatro arcos + nombre, igual que en la web de compradores */
.marca{ display:inline-flex; align-items:center; gap:9px; min-height:44px; font-weight:800; font-size:16px; letter-spacing:-.01em;
  color:var(--tinta); text-decoration:none; white-space:nowrap }
.marca img{ width:24px; height:24px }

/* Botones: Manrope 700, caja normal, radio 8, 52 px */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border:1px solid transparent;
  border-radius:8px; font:700 16px/1.2 var(--ui); text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color .16s var(--ease), transform .12s var(--ease) }
.btn:active{ transform:scale(.98) }
.btn-p{ background:var(--verde); color:#fff }
.btn-p:hover{ background:var(--verde-h) }
.btn-claro{ background:var(--fondo); color:var(--verde) }
.btn-claro:hover{ background:#fff }
.btn-grande{ width:100%; min-height:58px; font-size:17px }

/* Secciones */
.sec{ padding:56px 0; border-top:1px solid var(--linea) }
@media (min-width:960px){ .sec{ padding:88px 0 } }
.sec-t{ font-weight:800; font-size:clamp(28px,2.6vw + 18px,44px); line-height:1.14; letter-spacing:-.025em; max-width:22ch }

/* Cabecera */
.cab{ background:var(--sup); border-bottom:1px solid var(--linea) }
.cab-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px }
.cab-nav{ display:flex; align-items:center; gap:8px }
.cab-acceso{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:8px; color:var(--tinta2);
  font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap }
.cab-acceso:hover{ background:var(--verde-s); color:var(--tinta) }
.cab-cta{ min-height:44px; padding:0 16px; font-size:15px }
@media (max-width:639px){ .cab-cta{ display:none } }
@media (max-width:359px){ .cab .marca{ font-size:15px } .cab-acceso{ padding:0 6px; font-size:14px } }

/* 1 · Hero */
.hero{ padding:32px 0 48px }
@media (min-width:960px){ .hero{ padding:64px 0 80px } }
.hero-in{ display:grid; gap:32px; align-items:center }
@media (min-width:960px){ .hero-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px } }
.hero h1{ font-weight:800; font-size:clamp(34px,4.2vw + 18px,64px); line-height:1.08; letter-spacing:-.03em; max-width:16ch }
.hero-sub{ margin-top:16px; color:var(--tinta2); font-size:18px; max-width:52ch }
.hero-acc{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px }
.enlace-sec{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-weight:700 }
.micro{ margin-top:14px; font-size:14.5px; color:var(--tinta2) }
@media (max-width:479px){ .hero-acc .btn-p{ width:100% } }
.hero-movil{ justify-self:center; width:min(100%,300px) }
@media (min-width:960px){ .hero-movil{ width:min(100%,340px); justify-self:end } }
.hero-movil img{ border-radius:18px; border:1px solid var(--linea); box-shadow:0 24px 50px -24px rgba(32,40,32,.45) }
figcaption{ margin-top:10px; font-size:13.5px; font-weight:600; color:var(--tinta2); text-align:center }

/* 2 · Transición */
.transicion{ padding:48px 0; background:var(--verde-s) }
@media (min-width:960px){ .transicion{ padding:72px 0 } }
.transicion h2{ font-weight:800; font-size:clamp(26px,2vw + 18px,38px); line-height:1.15; letter-spacing:-.022em }
.transicion p{ margin-top:12px; max-width:60ch; color:var(--tinta2); font-size:18px }

/* 3 · Método: el ciclo de la web de compradores */
.ciclo{ list-style:none; padding:0; margin-top:28px; display:grid }
@media (min-width:768px){ .ciclo{ grid-template-columns:repeat(4,1fr); gap:28px; margin-top:40px } }
.ciclo li{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--linea) }
@media (min-width:768px){ .ciclo li{ grid-template-columns:1fr; gap:12px; padding:22px 0 0; border-top:2px solid var(--linea) } }
.ciclo svg{ width:44px; height:44px; fill:none; stroke-width:2.6; stroke-linecap:round }
.ciclo path{ stroke:var(--linea-f) }
.ciclo path.on{ stroke:var(--mand) }
.ciclo h3{ font-weight:700; font-size:19px; line-height:1.3 }
.ciclo .n{ margin-right:8px; font-size:14px; font-weight:800; color:var(--mand-texto); font-variant-numeric:tabular-nums }
.ciclo p{ margin-top:4px; color:var(--tinta2); font-size:16px }

/* 4 · Qué incluye */
.prota{ margin-top:32px; display:grid; gap:24px; padding:24px 20px; border:1px solid var(--linea); border-radius:12px; background:var(--sup) }
@media (min-width:960px){ .prota{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; padding:40px; align-items:start } }
.prota h3{ font-weight:800; font-size:clamp(22px,1vw + 19px,28px); line-height:1.2; letter-spacing:-.02em }
.prota-txt > p{ margin-top:10px; color:var(--tinta2) }
.prota-img{ justify-self:center; width:min(100%,280px) }
.prota-img img{ border-radius:16px; border:1px solid var(--linea) }

.ejemplo{ margin-top:24px; padding:18px 16px; border-radius:12px; background:var(--fondo); border:1px solid var(--linea) }
@media (min-width:768px){ .ejemplo{ padding:22px 24px } }
.ejemplo h4{ font-weight:700; font-size:17px }
.dia{ margin-top:10px; display:grid }
.dia > div{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--linea) }
.dia > div:first-child{ border-top:0 }
.dia dt{ font-size:14.5px; font-weight:700; color:var(--tinta2) }
.dia dd{ font-size:16px }
.ejemplo .nota{ margin-top:12px; font-size:15px; color:var(--tinta2) }
.resto{ margin-top:12px; border-top:1px solid var(--linea) }
.resto summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; font-weight:700; color:var(--verde);
  cursor:pointer; list-style:none }
.resto summary::-webkit-details-marker{ display:none }
.chev{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .16s var(--ease) }
details[open] > summary .chev{ transform:rotate(180deg) }
.dias{ display:grid; gap:18px; padding:6px 0 4px }
@media (min-width:768px){ .dias{ grid-template-columns:1fr 1fr; gap:20px 28px } }
.dias h5{ font-weight:800; font-size:15.5px; color:var(--verde) }

.dos{ margin-top:16px; display:grid; gap:16px }
@media (min-width:768px){ .dos{ grid-template-columns:1fr 1fr; align-items:start } }
.recurso{ display:grid; gap:16px; align-content:start; padding:20px; border:1px solid var(--linea); border-radius:12px; background:var(--sup) }
.recurso img{ border-radius:8px; border:1px solid var(--linea) }
.recurso h3{ font-weight:700; font-size:19px; line-height:1.3 }
.recurso p{ margin-top:6px; color:var(--tinta2); font-size:16px }
.recurso-ebook{ grid-template-columns:96px 1fr; align-items:center }
.recurso-ebook img{ border:0; border-radius:3px; box-shadow:0 8px 18px -8px rgba(32,40,32,.55) }

.extras{ list-style:none; padding:0; margin-top:16px; border-top:1px solid var(--linea) }
.extras li{ display:grid; gap:2px 24px; padding:16px 4px; border-bottom:1px solid var(--linea) }
@media (min-width:768px){ .extras li{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:baseline } }
.extras h3{ font-weight:700; font-size:17px }
.extras p{ color:var(--tinta2); font-size:16px }

/* 5 · Para quién */
.quien-in{ display:grid; gap:20px }
@media (min-width:960px){ .quien-in{ grid-template-columns:1fr 1fr; gap:48px; align-items:start } }
.quien p{ font-size:18px }
.quien .limite{ margin-top:16px; padding:14px 16px; border-left:3px solid var(--linea-f); color:var(--tinta2); font-size:16px }

/* 6 · Oferta (bloque verde profundo) */
.oferta{ padding:56px 0; background:var(--verde); color:#fff }
@media (min-width:960px){ .oferta{ padding:88px 0 } }
.oferta :focus-visible{ outline-color:var(--fondo) }
.oferta a:not(.btn){ color:#fff }
.oferta-in{ display:grid; gap:32px }
@media (min-width:960px){ .oferta-in{ grid-template-columns:1.1fr .9fr; gap:64px; align-items:center } }
.oferta h2{ color:#fff; font-weight:800; font-size:clamp(28px,2.6vw + 18px,44px); line-height:1.12; letter-spacing:-.025em }
.precio{ margin-top:12px; font-weight:800; font-size:clamp(44px,3vw + 32px,64px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.precio span{ font-size:18px; font-weight:600; letter-spacing:0; color:var(--verde-t) }
.condicion{ margin-top:8px; color:var(--verde-t) }
.incluye-lista{ list-style:none; padding:0; margin-top:24px; display:grid; gap:10px }
.incluye-lista li{ position:relative; padding-left:30px; font-size:17px }
.incluye-lista li::before{ content:""; position:absolute; left:3px; top:.42em; width:14px; height:8px; border-left:2px solid #fff;
  border-bottom:2px solid #fff; transform:rotate(-45deg) }
.oferta-accion{ display:grid; gap:14px; padding:24px 20px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18) }
@media (min-width:768px){ .oferta-accion{ padding:32px } }
.oferta-accion p{ color:var(--verde-t); font-size:15.5px }
.oferta-accion b{ color:#fff }
.oferta-accion .pago{ text-align:center; font-size:14.5px; margin-top:-4px }

/* 7 · Preguntas frecuentes */
.faq-in{ display:grid; gap:24px }
@media (min-width:960px){ .faq-in{ grid-template-columns:1fr 1.6fr; gap:64px; align-items:start } }
.faq-lista{ border-top:1px solid var(--linea) }
.faq-lista details{ border-bottom:1px solid var(--linea) }
.faq-lista summary{ display:flex; align-items:center; min-height:56px; padding:10px 32px 10px 0; position:relative; font-weight:700; font-size:17px;
  cursor:pointer; list-style:none }
.faq-lista summary::-webkit-details-marker{ display:none }
.faq-lista summary::after{ content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde); transform:rotate(45deg); transition:transform .16s var(--ease) }
.faq-lista details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
.faq-lista details p{ padding:0 0 16px; color:var(--tinta2); max-width:62ch }

/* 8 · Sobre Angelo: lectura cómoda, sin paneles */
.autor-in{ max-width:calc(64ch + 64px) }
.autor h2{ font-weight:800; font-size:clamp(26px,2vw + 18px,38px); line-height:1.15; letter-spacing:-.022em; margin-bottom:20px }
/* Justificado a petición del dueño (15-10); con partición de palabras en español (lang="es") para que no queden
   huecos grandes entre palabras en el móvil. La firma va a la izquierda. */
.autor p{ max-width:64ch; margin-top:12px; color:var(--tinta2); font-size:17.5px; line-height:1.65;
  text-align:justify; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:6 3 3 }
.autor strong{ color:var(--tinta); font-weight:700 }
.autor .firma{ color:var(--tinta); font-weight:700; text-align:left }

/* 9 · Cierre */
.cierre{ padding:56px 0 64px; border-top:1px solid var(--linea); background:var(--verde-s); text-align:center }
.cierre-in{ display:grid; justify-items:center; gap:14px }
.cierre h2{ font-weight:800; font-size:clamp(28px,2.6vw + 18px,44px); line-height:1.12; letter-spacing:-.025em }
.cierre p{ color:var(--tinta2); max-width:48ch }
.cierre .btn{ margin-top:8px }

/* Pie */
.pie{ padding:32px 0 40px; border-top:1px solid var(--linea); background:var(--sup); font-size:15px; color:var(--tinta2) }
.pie-in{ display:grid; gap:8px }
.pie-legal{ display:flex; flex-wrap:wrap; gap:0 18px }
.pie-legal a{ display:inline-flex; align-items:center; min-height:44px; color:var(--tinta2) }
.pie-nota{ font-size:14px }

@media print{ .cab-nav,.saltar{ display:none!important } .oferta{ background:#fff; color:var(--tinta) } }