:root{
    --cream:#FBF4EC;
    --cream-deep:#F3E8D8;
    --ink:#23302A;
    --orange:#E8722C;
    --orange-deep:#C44D27;
    --sage:#7C8D71;
    --sage-pale:#E4E9DC;
    --white:#FFFFFF;
    --max:1140px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.12;
    letter-spacing:-0.01em;
  }
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  /* margin note signature element */
  .nota{
    font-family:'Caveat', cursive;
    color:var(--orange-deep);
    font-size:1.35rem;
    line-height:1.25;
    position:relative;
    transform:rotate(-1.2deg);
  }
  .nota::before{
    content:"";
    position:absolute;
    left:-14px; top:4px; bottom:4px;
    width:3px;
    background:var(--orange);
    border-radius:2px;
    opacity:.55;
  }

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,244,236,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(35,48,42,0.08);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
  .brand{font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; letter-spacing:-0.01em;}
  .brand span{color:var(--orange-deep);}
  .nav-cta{
    background:var(--orange); color:var(--white);
    padding:10px 20px; border-radius:100px;
    font-weight:600; font-size:0.92rem;
    transition:transform .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--orange-deep); transform:translateY(-1px);}

  /* HERO */
.page-header{
	height:0px;
	color:var(--white);
}
  .hero{
    padding:2px 0 6px;
    position:relative;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--sage-pale); color:var(--sage);
    font-size:0.82rem; font-weight:600; letter-spacing:.02em;
    padding:7px 16px; border-radius:100px;
    margin-bottom:22px;
  }
  .eyebrow::before{content:"●"; font-size:0.6rem; color:var(--orange);}
 
  .hero h1{
    font-size:clamp(2.1rem, 5.2vw, 3.6rem);
    max-width:820px;
    color:var(--ink);
  }
  .hero h1 em{
    font-style:italic; color:var(--orange-deep); font-weight:600;
  }
  .hero-sub{
    font-size:clamp(1.05rem, 2vw, 1.25rem);
    color:#52605A;
    max-width:560px;
    margin:22px 0 34px;
  }
  .cta-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
  .btn-primary{
    background:var(--orange); color:var(--white);
    padding:16px 30px; border-radius:100px;
    font-weight:700; font-size:1rem;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 8px 24px rgba(232,114,44,0.28);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(232,114,44,0.36);}
  .btn-secondary{
    color:var(--ink); font-weight:600; font-size:1rem;
    border-bottom:2px solid var(--orange);
    padding-bottom:2px;
  }
  .hero-foot{
    display:flex; gap:28px; flex-wrap:wrap;
    font-size:0.88rem; color:#6B776F;
  }
  .hero-foot div{display:flex; align-items:center; gap:8px;}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);}

  /* SECTION GENERIC */
  section{padding:68px 0;}
  .section-cream-deep{background:var(--cream-deep);}
  .section-ink{background:var(--ink); color:var(--cream);}
  .kicker{
    font-size:0.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--orange-deep); margin-bottom:14px; display:block;
  }
  .section-ink .kicker{color:var(--orange);}
  h2{font-size:clamp(1.7rem, 3.6vw, 2.5rem); max-width:680px;}

  /* STORY */
  .story{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;
  }
  .story-quote{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:clamp(1.3rem, 2.4vw, 1.7rem);
    color:var(--ink); line-height:1.4;
    border-left:3px solid var(--orange);
    padding-left:24px; margin-bottom:24px;
  }
  .story p{color:#46524C; font-size:1.02rem; margin-bottom:16px;}
  .story-side{
    background:var(--white); border-radius:20px; padding:32px;
    box-shadow:0 1px 0 rgba(0,0,0,0.04);
  }

  /* PROBLEM cards */
  .problem-grid > .e-con-inner{
    display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:18px !important; margin-top:36px !important;
  }
.problem-card{
    margin:0 !important;
}
  .problem-card{
    background:var(--white) !important; border-radius:18px !important; padding:26px 24px !important;
    border:1px solid rgba(35,48,42,0.06) !important;
  }
  .problem-card .ico{font-size:1.5rem; margin-bottom:12px; display:block;}
  .problem-card h3{font-family:'Inter'; font-weight:700; font-size:1.02rem; margin-bottom:6px;}
  .problem-card p{font-size:0.92rem; color:#5C6962;}

  /* SOLUTION */
 /* CONTENEDOR PRINCIPAL */
.solution > .e-con-inner{
    display:grid !important;
    grid-template-columns:0.85fr 1.15fr;
    gap:52px;
    align-items:center;
}

/* COLUMNA IZQUIERDA */
.solution-portrait{
    background:var(--sage-pale);
    border-radius:24px;
    aspect-ratio:4/5;
    position:relative;
    overflow:hidden;

    display:flex !important;
    justify-content:center;
    align-items:center;
}

/* TEXTO FOTO */
.solution-portrait .placeholder{
    text-align:center;
    color:var(--sage);
    padding:24px;
}

/* CARTELA */
.solution-portrait .badge-cap{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    background:rgba(251,244,236,.92);
    padding:14px 16px;
    border-radius:14px;
}

/* COLUMNA DERECHA */
.solution-text{
    display:flex !important;
    flex-direction:column;
}

.solution-text h2{
    margin-bottom:18px !important;
}

.solution-text p{
    color:#46524C !important;;
}

/* LISTA */
.solution-text > .pillar{
    display:flex !important;
    gap:14px!important;;
    margin-top:14px !important;;
}

/* FLECHA */
.solution-text .num{
    color:var(--orange) !important;;
    font-size:1.4rem !important;;
    margin-right:12px !important;;
}
  .solution-portrait .placeholder{
    text-align:center !important; color:var(--sage) !important; font-size:0.95rem !important; padding:24px!important;
  }
  .badge-cap{
    position:absolute; bottom:18px; left:18px; right:18px;
    background:rgba(251,244,236,0.92); backdrop-filter:blur(4px);
    border-radius:14px; padding:14px 16px;
    font-size:0.85rem; font-weight:600; color:var(--ink);
  }
  .solution-text h2{margin-bottom:18px !important;}
  .solution-text p{color:#46524C !important; margin-bottom:16px !important;}
  .pillars{display:grid !important; gap:14px !important; margin-top:24px !important;}
  .pillar{display:flex !important; gap:14px !important; align-items:flex-start !important;}
  .pillar .num{
    font-family:'Fraunces' !important; font-weight:600!important ; color:var(--orange) !important;
    font-size:1.4rem !important; line-height:1 !important; flex-shrink:0 !important; width:32px !important;
  }
  .pillar p{margin:0!important; font-size:0.96rem !important; color:#46524C !important;}
  .pillar strong{color:var(--ink) !important; display:block !important; font-size:1rem !important; margin-bottom:2px !important;}

  /* BENEFITS */
  .benefits-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;
  }
  .benefit-card{
    background:var(--ink); color:var(--cream);
    border-radius:20px; padding:28px 24px;
    position:relative; overflow:hidden;
  }
  .benefit-card::after{
    content:""; position:absolute; top:-30px; right:-30px;
    width:90px; height:90px; border-radius:50%;
    background:var(--orange); opacity:.15;
  }
  .benefit-card h3{
    font-family:'Fraunces'; font-weight:600; font-size:1.1rem; margin-bottom:8px;
    color:var(--white);
  }
  .benefit-card p{font-size:0.9rem; color:#C7D0C9;}
  .benefit-tag{
    display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:.04em;
    color:var(--orange); text-transform:uppercase; margin-bottom:10px;
  }

  /* SOCIAL PROOF */
  .proof-stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:40px 0 48px;
  }
  .stat{text-align:left;}
  .stat .num{font-family:'Fraunces'; font-weight:700; font-size:clamp(2.1rem,4vw,2.8rem); color:var(--orange-deep);}
  .stat .label{font-size:0.9rem; color:#5C6962; margin-top:4px;}
  .testimonial{
    background:var(--white); border-radius:20px; padding:34px;
    border-left:4px solid var(--sage);
    max-width:680px;
  }
  .testimonial p{font-family:'Fraunces'; font-style:italic; font-size:1.15rem; color:var(--ink); margin-bottom:14px;}
  .testimonial .author{font-family:'Inter'; font-weight:700; font-size:0.9rem; color:var(--sage);}

  /* OFFER */
  .offer-box{
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
    border-radius:28px; padding:48px 40px; color:var(--white);
    display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  }
  .offer-box h2{color:var(--white); margin-bottom:14px;}
  .offer-box p{color:rgba(255,255,255,0.92); margin-bottom:10px; font-size:1rem;}
  .offer-list{margin:18px 0; display:grid; gap:10px;}
  .offer-list div{display:flex; gap:10px; align-items:flex-start; font-size:0.95rem;}
  .scarcity-box{
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3);
    border-radius:18px; padding:26px; text-align:center;
  }
  .scarcity-box .big{font-family:'Fraunces'; font-weight:700; font-size:2.4rem; line-height:1;}
  .scarcity-box .small{font-size:0.85rem; margin-top:6px; color:rgba(255,255,255,0.85);}
  .scarcity-box .btn-white{
    display:inline-block; margin-top:18px; background:var(--white); color:var(--orange-deep);
    padding:14px 26px; border-radius:100px; font-weight:700; font-size:0.95rem; width:100%;
  }

  /* FINAL CTA */
  .final-cta{text-align:center; max-width:680px; margin:0 auto;}
  .final-cta h2{margin:0 auto 16px; }
  .final-cta p{color:#46524C; margin-bottom:30px; font-size:1.05rem;}
  .contact-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; text-align:left;
  }
  .contact-card{background:var(--white); border-radius:16px; padding:22px; border:1px solid rgba(35,48,42,0.06);}
  .contact-card .label{font-size:0.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--sage); font-weight:700; margin-bottom:6px;}
  .contact-card .value{font-weight:600; font-size:0.98rem;}

  footer{
    background:var(--ink); color:#A9B3A6; padding:32px 0; font-size:0.85rem;
    text-align:center;
  }

  /* RESPONSIVE */
  @media (max-width:880px){
    .story{grid-template-columns:1fr; gap:32px;}
    .solution{grid-template-columns:1fr; gap:32px;}
    .solution-portrait{aspect-ratio:16/9;}
    .problem-grid{grid-template-columns:1fr;}
    .benefits-grid{grid-template-columns:1fr 1fr;}
    .proof-stats{grid-template-columns:1fr;}
    .offer-box{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:540px){
    .benefits-grid{grid-template-columns:1fr;}
    section{padding:52px 0;}
    .hero{padding:48px 0 40px;}
    .nav-cta{padding:9px 14px; font-size:0.82rem;}
    .brand{font-size:1.05rem;}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

/* Tablet vertical y móvil */
/* Tablet y móvil */
@media (max-width:1024px){

    /* Ocultar la foto */
    .solution-portrait{
        display:none !important;
    }

    /* El contenedor interior ocupa todo el ancho */
    .solution > .e-con-inner{
        display:flex !important;
    }

    /* Columna de texto */
    .solution-text{
        width:100% !important;
        max-width:100% !important;
        flex:1 1 100% !important;
    }

    /* Los tres bloques inferiores uno debajo del otro */
    .solution-text .pillar{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        display:block !important;
    }
}

.testimonial{
    padding:30px;
    border-radius:30px;
    width:100%;
    box-sizing:border-box;
}

.testimonial .author{
    margin-top:20px;
    font-weight:600;
}

@media (max-width:767px){

    .testimonial{
        padding:24px;
        border-radius:24px;
    }

    .testimonial .author{
        font-size:18px;
        line-height:1.4;
    }

}