@font-face{font-family:'Lora';src:url(/fonts/Lora.ttf) format('truetype');font-weight:400 700;font-style:normal;font-display:swap;}
    @font-face{font-family:'Lora';src:url(/fonts/Lora-Italic.ttf) format('truetype');font-weight:400 700;font-style:italic;font-display:swap;}
    :root{
      --bg:#f7f2e9;
      --bg-alt:#fffdf9;
      --primary:#6b4a2e;
      --primary-dark:#4f3520;
      --text:#2b2118;
      --muted:#6f6256;
      --accent:#dcb46f;
      --noche:#0d1530;
      --noche-2:#2b3a63;
      --crema:#f6ecd9;
      --card:#ffffff;
      --shadow:0 10px 25px rgba(0,0,0,.07);
      --radius:18px;
      --max-width:1100px;
    }

    *{box-sizing:border-box;margin:0;padding:0;}

    body{
      font-family:'Inter',system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }

    img{max-width:100%;display:block;}

    a{text-decoration:none;color:inherit;}

    .page{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    header{
      background:linear-gradient(135deg,var(--noche) 0%,var(--noche-2) 100%);
      color:#fff;
      padding:18px 20px;
      position:sticky;
      top:0;
      z-index:20;
    }

    .nav{
      max-width:var(--max-width);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .nav-logo{
      display:flex;
      align-items:center;
    }
    .nav-logo img{
      height:38px;
      width:auto;
    }

    .nav-cta a{
      padding:9px 18px;
      background:var(--accent);
      color:#1f130a;
      border-radius:999px;
      font-size:.9rem;
      font-weight:600;
      box-shadow:0 6px 15px rgba(0,0,0,.25);
      transition:.2s;
      white-space:nowrap;
    }
    .nav-cta a:hover{transform:translateY(-1px);background:#f5ca8f;}

    main{flex:1;}

    /* HERO */
    .hero{
      padding:40px 20px 50px;
      background:radial-gradient(circle at top,#fdf8f3 0,var(--bg-alt) 55%,var(--bg) 100%);
    }
    .hero-inner{
      max-width:var(--max-width);
      margin:0 auto;
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
      gap:30px;
      align-items:center;
    }

    .hero-kicker{
      font-size:.85rem;
      letter-spacing:.15em;
      text-transform:uppercase;
      color:#e1c09a;
      font-weight:700;
      margin-bottom:10px;
    }

    .hero-title{
      font-family:'Lora',Georgia,serif;
      font-size:2.3rem;
      line-height:1.15;
      margin-bottom:14px;
    }
    .hero-title span{
      color:var(--accent);
    }

    .hero-sub{
      color:var(--muted);
      font-size:.98rem;
      margin-bottom:18px;
    }

    .hero-bullets{
      list-style:none;
      margin-bottom:24px;
    }
    .hero-bullets li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-bottom:6px;
      font-size:.94rem;
    }
    .hero-badge{
      font-size:.78rem;
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:rgba(255,255,255,.08);
      border-radius:999px;
      padding:4px 11px;
      margin-bottom:10px;
    }

    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }

    .btn-main{
      padding:11px 24px;
      border-radius:999px;
      border:none;
      background:var(--primary);
      color:#fff;
      font-weight:700;
      font-size:.95rem;
      cursor:pointer;
      box-shadow:0 12px 25px rgba(0,0,0,.25);
      transition:.22s;
    }
    .btn-main:hover{background:var(--primary-dark);transform:translateY(-1px);}
    .btn-ghost{
      padding:9px 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.4);
      color:#f5eee3;
      font-size:.85rem;
      cursor:pointer;
      background:transparent;
      backdrop-filter:blur(4px);
      transition:.2s;
    }
    .btn-ghost:hover{background:rgba(255,255,255,.12);}

    .hero-note{
      font-size:1rem;
      color:#be6511;
      margin-top:8px;
    }

    .hero-right{
      position:relative;
    }
    .mockup-card{
      background:var(--card);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .mockup-tag{
      position:absolute;
      top:14px;
      left:14px;
      background:#f4e2c2;
      color:#5a4228;
      font-size:.75rem;
      padding:4px 10px;
      border-radius:999px;
      font-weight:600;
    }
    .mockup-book{
      display:flex;
      gap:14px;
      align-items:flex-start;
      margin-top:14px;
    }
    .mockup-book-cover{
      width:110px;
      height:150px;
      border-radius:10px;
      margin-top: 15px;
      background:linear-gradient(145deg,#28313b 0%,#42372c 40%,#c99863 100%);
      position:relative;
      box-shadow:0 12px 26px rgba(0,0,0,.45);
    }

    .mockup-book-cover::before{
      content:"Caminando\ncon el\nNazareno";
      white-space:pre;
      position:absolute;
      inset:16px 10px auto 12px;
      font-family:'Lora',Georgia,serif;
      font-size:.75rem;
      color:#f9f2e5;
      line-height:1.25;
    }
    .mockup-book-info{
      font-size:.98rem;
      color:var(--muted);
      padding-left: 6%;
    }
    .mockup-book-info strong{color:var(--text);}
    .mockup-stats{
      margin-top:12px;
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .pill{
      font-size:.75rem;
      padding:4px 9px;
      border-radius:999px;
      background:#f2ece4;
    }

    /* Sections */
    section{
      padding:40px 20px;
    }
    .section-inner{
      max-width:var(--max-width);
      margin:0 auto;
    }
    .section-title{
      font-family:'Lora',Georgia,serif;
      font-size:1.7rem;
      margin-bottom:12px;
      text-align:center;
    }
    .section-sub{
      text-align:center;
      font-size:1.10rem;
      color:var(--muted);
      max-width:650px;
      margin:0 auto 30px;
    }

    .grid-2{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:24px;
    }

    .card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:20px 18px;
    }

    .card h3{
      font-size:1.05rem;
      margin-bottom:6px;
      font-family:'Lora',Georgia,serif;
    }
    .card p{
      font-size:.9rem;
      color:var(--muted);
    }
    .card ul{
      margin-top:10px;
      padding-left:18px;
      font-size:.9rem;
      color:var(--muted);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:.75rem;
      padding:3px 8px;
      border-radius:999px;
      background:#efe0cb;
      color:#5c4120;
      margin-bottom:6px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .benefits-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
      margin-top:10px;
    }
    .benefit{
      font-size:.99rem;
      color:var(--muted);
    }
    .benefit strong{color:var(--text);display:block;margin-bottom:2px;}

    .chapters{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      font-size:.88rem;
    }
    .chapters span{
      background:#f2ece4;
      border-radius:999px;
      padding:6px 11px;
    }

    .price-box{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px 18px;
      text-align:center;
      max-width:460px;
      margin:0 auto;
    }
    .price-box small{
      font-size:.8rem;
      color:var(--muted);
      text-decoration:line-through;
    }
    .price-main{
      font-size:2rem;
      font-weight:700;
      color:var(--primary-dark);
      margin:4px 0 2px;
    }
    .price-note{
      font-size:.85rem;
      color:var(--muted);
    }

    .testimonials{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      font-size:.85rem;
    }
    .testimonial-card{
      background:var(--card);
      border-radius:var(--radius);
      padding:14px 14px 16px;
      box-shadow:var(--shadow);
    }
    .testimonial-card p{
      color:var(--muted);
      margin-bottom:8px;
    }
    .testimonial-name{
      font-weight:600;
      font-size:.84rem;
      color:var(--text);
    }

    .guarantee{
      background:#f2ece4;
      border-radius:var(--radius);
      padding:18px;
      font-size:.99rem;
      color:var(--muted);
    }
    .guarantee strong{color:var(--text);}

    .cta-final{
      text-align:center;
      margin-top:32px;
    }
    .cta-final p{
      font-size:.99rem;
      color:var(--muted);
      margin-bottom:10px;
    }

    footer{
      padding:36px 20px 28px;
      text-align:center;
      font-size:.78rem;
      color:#b8b6cc;
      background:linear-gradient(var(--noche),var(--noche-2));
    }
    footer .foot-logo{margin:0 auto 10px;height:48px;width:auto;}
    footer .foot-lema{font-family:'Lora',Georgia,serif;font-style:italic;font-size:1rem;color:var(--accent);margin-bottom:8px;}

    /* Responsive */
    @media (max-width:900px){
      .hero-inner{grid-template-columns:1fr;}
      .hero-right{order:-1;}
      .grid-2,
      .benefits-list,
      .chapters,
      .testimonials{
        grid-template-columns:1fr;
      }
    }
    @media (max-width:600px){
      .hero{padding-top:28px;}
      .hero-title{font-size:1.9rem;}
      .hero-inner{gap:22px;}
      .nav-cta a{font-size:.8rem;padding:7px 13px;}
    }