:root{
  --ink:#1b1817; --muted:#6e6662; --rose:#b75f60; --rose-dark:#98484b;
  --rose-soft:#f5dfda; --cream:#fffaf6; --paper:#fff; --line:#eadbd4;
  --shadow:0 14px 40px rgba(86,49,38,.10); --radius:22px;
  --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);background:var(--cream);line-height:1.5}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,250,246,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(234,219,212,.8)}
.nav-wrap{height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand img{width:156px;height:auto;object-fit:contain}.main-nav{display:flex;align-items:center;gap:25px;font-size:14px}
.main-nav>a:not(.btn){padding:10px 0}.main-nav>a:not(.btn):hover{color:var(--rose)}
.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,var(--rose),#c97872);color:white;border:0;border-radius:999px;padding:15px 24px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(183,95,96,.23);transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(183,95,96,.3)}
.btn-small{padding:11px 18px}.btn-outline{background:transparent;color:var(--rose-dark);border:1px solid #d79892;box-shadow:none}
.hero{position:relative;overflow:hidden;padding:68px 0 56px;background:
 radial-gradient(circle at 10% 20%,rgba(238,207,197,.78),transparent 36%),
 radial-gradient(circle at 88% 10%,rgba(225,231,205,.50),transparent 30%),
 linear-gradient(120deg,#fffaf6,#f9eee8)}
.hero:after{content:"";position:absolute;inset:auto -10% -36% auto;width:50%;aspect-ratio:1;background:radial-gradient(circle,rgba(212,225,194,.5),transparent 68%);filter:blur(8px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:48px}
.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:800;color:#755d56;margin-bottom:14px}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.03;margin:0}
h1{font-size:clamp(48px,5vw,78px);max-width:700px}h2{font-size:clamp(38px,4vw,58px)}
.hero-copy .lead{font-size:22px;line-height:1.35;margin:24px 0 14px;color:#38302d}.hero-copy p:not(.lead){font-size:17px;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-visual{position:relative;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:white;min-height:410px}
.hero-visual img{width:100%;height:100%;object-fit:cover;min-height:410px}
.benefits{background:white;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr)}.benefit{display:flex;align-items:center;gap:14px;padding:24px 20px;min-height:92px}
.benefit+.benefit{border-left:1px solid var(--line)}.benefit .icon,.round-icon,.mini-icon{display:grid;place-items:center;flex:0 0 auto;color:var(--rose-dark);background:var(--rose-soft);border-radius:16px}
.benefit .icon{width:50px;height:50px;font-size:27px}.benefit strong,.benefit span{display:block}.benefit span{color:var(--muted);font-size:14px}
.section{padding:88px 0}.section-head{text-align:center;max-width:820px;margin:0 auto 42px}.section-head p{font-size:18px;color:var(--muted);margin:16px auto 0}
.product-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}.product-card{background:white;border:1px solid #f0e6e1;border-radius:18px;overflow:hidden;box-shadow:0 9px 24px rgba(80,45,30,.07)}
.product-card img{width:100%;height:170px;object-fit:cover}.product-card div{padding:16px}.product-card h3{font-family:var(--serif);font-size:22px;margin:0 0 8px;line-height:1.05}.product-card p{font-size:14px;color:var(--muted);margin:0}
.tinted{background:linear-gradient(180deg,#fff6f2,#f9ebe6 52%,#fffaf6)}
.business-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.business-card{background:white;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.business-card>img{width:100%;height:135px;object-fit:cover}.business-body{display:flex;gap:12px;align-items:flex-start;padding:16px}
.mini-icon{width:42px;height:42px;border-radius:50%;font-size:20px}.business-body h3{font-family:var(--serif);font-size:20px;line-height:1.1;margin:2px 0 7px}.business-body p{margin:0;color:var(--muted);font-size:14px}
.why{background:white}.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.why-grid article{padding:28px;border:1px solid var(--line);border-radius:20px;background:#fffdfb}
.round-icon{width:56px;height:56px;font-size:26px;margin-bottom:18px}.why-grid h3{font-family:var(--serif);font-size:24px;line-height:1.08;margin:0 0 10px}.why-grid p{margin:0;color:var(--muted)}
.displays{background:#fffaf6}.display-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.display-grid figure{margin:0;border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.display-grid img{width:100%;height:270px;object-fit:cover}.display-grid figcaption{position:absolute;left:16px;right:16px;bottom:14px;background:rgba(255,255,255,.93);padding:11px 16px;border-radius:999px;text-align:center;font-family:var(--serif);font-size:18px}
.lead-section{padding:90px 0;background:
 radial-gradient(circle at 12% 78%,rgba(255,255,255,.75),transparent 26%),
 linear-gradient(120deg,#f8deda,#f3ebe6 50%,#f8e3df)}
.lead-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;align-items:start}.lead-copy h2{font-size:clamp(42px,4vw,62px)}.lead-copy p{font-size:18px;color:#5e524e}
.subtle-note{margin-top:24px;padding:16px;border-left:3px solid var(--rose);background:rgba(255,255,255,.38);color:#665855;font-size:14px}
.lead-form{background:rgba(255,255,255,.9);padding:28px;border-radius:24px;box-shadow:var(--shadow);position:relative}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form label span,.lead-form legend{font-size:13px;font-weight:750;color:#443b38}.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=tel]{width:100%;margin-top:7px;height:48px;border:1px solid #dccdc6;border-radius:10px;padding:0 14px;font:inherit;background:white;outline:none}
.lead-form input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(183,95,96,.12)}fieldset{border:0;padding:0;margin:22px 0 14px}legend{margin-bottom:12px}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.checks label,.privacy-check{display:flex;align-items:flex-start;gap:9px;font-size:14px}.checks input,.privacy-check input{accent-color:var(--rose);width:17px;height:17px;margin-top:2px}
.privacy-check a{text-decoration:underline}.submit-btn{width:100%;margin-top:18px}.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important}
.form-error{color:#9d3338;font-weight:650;font-size:14px;min-height:0;margin-top:10px}
.footer{padding:34px 0;background:#181514;color:#eee}.footer-grid{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:28px}.footer-logo{width:175px;filter:none;background:white;border-radius:12px;padding:8px}
.footer p{margin:0;color:#cfc4bf;font-size:14px}.footer-links{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#e8dfdb}
.success-shell{min-height:100vh;display:grid;place-items:center;padding:40px;background:linear-gradient(140deg,#fff8f4,#f1d8d3)}
.success-card{width:min(620px,100%);background:white;border-radius:28px;padding:48px;text-align:center;box-shadow:var(--shadow)}.success-card img{width:180px;margin:0 auto 25px}.success-card h1{font-size:48px}.success-card p{color:var(--muted);font-size:18px}
.legal{padding:60px 0 100px;background:white}.legal .container{max-width:850px}.legal h1{font-size:54px;margin-bottom:28px}.legal h2{font-size:28px;margin:34px 0 10px}.legal p,.legal li{color:#554b47}
@media(max-width:1020px){
  .main-nav{position:absolute;left:0;right:0;top:84px;display:none;flex-direction:column;align-items:stretch;background:#fffaf6;padding:18px 24px 24px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px rgba(0,0,0,.08)}
  .main-nav.open{display:flex}.menu-toggle{display:block}.hero-grid,.lead-grid{grid-template-columns:1fr}.hero-copy{order:1}.hero-visual{order:2}
  .product-grid{grid-template-columns:repeat(4,1fr)}.business-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .container{width:min(100% - 28px,1180px)}.nav-wrap{height:72px}.brand img{width:128px}.main-nav{top:72px}
  .hero{padding:38px 0 34px}.hero-grid{gap:28px}h1{font-size:46px}.hero-copy .lead{font-size:19px}.hero-copy p:not(.lead){font-size:16px}
  .hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-visual,.hero-visual img{min-height:285px}.hero-visual img{height:285px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}.benefit{padding:18px 12px}.benefit:nth-child(3){border-left:0;border-top:1px solid var(--line)}.benefit:nth-child(4){border-top:1px solid var(--line)}
  .section{padding:62px 0}.section-head{margin-bottom:30px}.section-head h2{font-size:38px}.section-head p{font-size:16px}
  .product-grid{grid-template-columns:1fr}.product-card{display:grid;grid-template-columns:126px 1fr;min-height:126px}.product-card img{height:100%;min-height:126px}
  .product-card h3{font-size:21px}.business-grid{grid-template-columns:1fr}.business-card{display:grid;grid-template-columns:125px 1fr}.business-card>img{height:100%;min-height:138px}
  .why-grid{grid-template-columns:1fr 1fr;gap:12px}.why-grid article{padding:19px}.why-grid h3{font-size:20px}.why-grid p{font-size:14px}
  .display-grid{grid-template-columns:1fr}.display-grid img{height:220px}.lead-section{padding:62px 0}.lead-grid{gap:28px}.lead-copy h2{font-size:42px}
  .lead-form{padding:20px 16px}.form-grid{grid-template-columns:1fr}.checks{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center}.footer-links{justify-content:center}
}
@media(max-width:420px){
  h1{font-size:40px}.benefit{gap:9px}.benefit .icon{width:43px;height:43px;font-size:22px}.benefit strong{font-size:14px}.benefit span{font-size:12px}
  .why-grid{grid-template-columns:1fr}.product-card{grid-template-columns:112px 1fr}.business-card{grid-template-columns:108px 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}



/* ===== OKLY official identity — V3.1 ===== */
.site-header .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.site-header .brand img{
  display:block;
  width:auto;
  height:54px;
  max-width:170px;
  object-fit:contain;
}

.brand-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:-0.09em;
  line-height:1;
  margin:0 .06em;
  white-space:nowrap;
}
.brand-inline .brand-inline-img{
  display:block !important;
  width:auto !important;
  height:.78em !important;
  max-width:1.72em !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
}
.brand-inline-small .brand-inline-img{
  height:.72em !important;
  max-width:1.58em !important;
}
h1 .brand-inline .brand-inline-img,
h2 .brand-inline .brand-inline-img{
  height:.82em !important;
  max-width:1.82em !important;
}
.eyebrow-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.28em;
  flex-wrap:wrap;
}
.hero-copy .eyebrow-brand{
  justify-content:flex-start;
}
.nav-brand-link{
  display:flex !important;
  align-items:center;
  gap:.22em;
}
.nav-brand-link .brand-inline{
  margin:0;
}
.nav-brand-link .brand-inline .brand-inline-img{
  height:1.08em !important;
  max-width:2.08em !important;
}

.footer-logo{
  display:block;
  width:auto !important;
  height:64px !important;
  max-width:190px !important;
  object-fit:contain !important;
  filter:none !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
.success-card > img{
  width:auto !important;
  height:86px !important;
  max-width:220px !important;
  object-fit:contain !important;
  margin:0 auto 25px;
}

@media(max-width:1020px){
  .site-header .brand img{
    height:50px;
    max-width:158px;
  }
}
@media(max-width:700px){
  .site-header .brand img{
    height:44px;
    max-width:138px;
  }
  .brand-inline .brand-inline-img{
    height:.74em !important;
    max-width:1.64em !important;
  }
  .brand-inline-small .brand-inline-img{
    height:.68em !important;
    max-width:1.50em !important;
  }
  h1 .brand-inline .brand-inline-img,
  h2 .brand-inline .brand-inline-img{
    height:.78em !important;
    max-width:1.74em !important;
  }
  .footer-logo{
    height:56px !important;
    max-width:170px !important;
  }
}


/* ===== HERO PC / MOBILE SEPARADOS — V4.0 ===== */
.hero-title-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.hero-title-block h1{
  margin:0;
}
.hero-title-logo{
  display:block;
  width:auto;
  height:78px;
  max-width:230px;
  object-fit:contain;
  margin:0;
}
.hero-visual picture{
  display:block;
  width:100%;
  height:100%;
}
.hero-visual picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PC: aprovechar el formato horizontal y reducir altura innecesaria */
@media(min-width:1100px){
  .hero{
    padding:64px 0 58px;
  }
  .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:64px;
    align-items:center;
  }
  .hero-copy{
    max-width:650px;
  }
  .hero-copy h1{
    font-size:clamp(62px,5.2vw,84px);
    line-height:.98;
    letter-spacing:-.025em;
  }
  .hero-title-logo{
    height:82px;
    max-width:240px;
  }
  .hero-copy .lead{
    margin:28px 0 14px;
    max-width:610px;
    font-size:22px;
    line-height:1.35;
  }
  .hero-copy p:not(.lead){
    max-width:610px;
    font-size:17px;
    line-height:1.55;
  }
  .hero-actions{
    margin-top:28px;
  }
  .hero-visual{
    min-height:0;
    aspect-ratio:16/9;
    border-radius:30px;
  }
  .hero-visual img{
    min-height:0;
    height:100%;
    object-position:center center;
  }
}

/* Tablet */
@media(min-width:701px) and (max-width:1099px){
  .hero-title-logo{
    height:68px;
    max-width:205px;
  }
  .hero-visual{
    aspect-ratio:16/9;
    min-height:0;
  }
  .hero-visual img{
    min-height:0;
    height:100%;
  }
}

/* Mobile: arte distinto y lectura vertical */
@media(max-width:700px){
  .hero-title-block{
    gap:9px;
  }
  .hero-title-logo{
    height:58px;
    max-width:175px;
  }
  .hero-visual{
    aspect-ratio:4/5;
    min-height:0;
    border-radius:24px;
  }
  .hero-visual picture,
  .hero-visual img{
    height:100%;
    min-height:0;
  }
  .hero-visual img{
    object-fit:cover;
    object-position:center center;
  }
}


/* ===== V5 Desktop adaptation inspired by reference ===== */
:root{
  --okly-navy:#1b2a63;
  --okly-teal:#28c0d1;
  --okly-coral:#dc8ea0;
  --okly-coral-dark:#ce748c;
  --okly-soft:#fdf5f5;
}
.site-header{
  background:rgba(255,251,248,.96);
  border-bottom:1px solid #efe4de;
}
.main-nav>a:not(.btn){
  color:#27232d;
  font-weight:500;
}
.main-nav>.btn{
  background:var(--okly-coral);
  color:#fff;
  box-shadow:none;
  padding:14px 22px;
}
.main-nav>.btn:hover{background:var(--okly-coral-dark);transform:none}
.hero{
  background:linear-gradient(90deg,#fcf2f1 0%,#fff7f4 46%,#fbf7ee 100%);
  padding-top:56px;
}
.hero-copy .eyebrow{color:#7c6663;letter-spacing:.20em}
.hero-copy h1{color:var(--okly-navy)}
.hero-title-logo{height:88px;max-width:260px}
.hero-copy .lead{
  color:var(--okly-navy);
  font-weight:700;
  font-size:24px;
  max-width:640px;
}
.hero-copy p:not(.lead){
  color:#3d4868;
  font-size:17px;
  max-width:650px;
}
.hero-actions{gap:18px}
.hero-actions .btn{
  min-height:64px;
  padding:0 34px;
  border-radius:999px;
  font-size:16px;
}
.btn-hero-primary{
  background:var(--okly-teal);
  box-shadow:none;
  color:#fff;
}
.btn-hero-primary:hover{background:#18b1c2;transform:none;box-shadow:none}
.btn-hero-secondary{
  background:#fff;
  color:var(--okly-coral-dark);
  border:2px solid #edbcc6;
  box-shadow:none;
}
.btn-hero-secondary:hover{background:#fff5f7;transform:none;box-shadow:none}
.hero-visual{
  background:rgba(255,255,255,.55);
  box-shadow:0 18px 40px rgba(139,88,78,.12);
}
.benefits{
  background:#fff;
  border-top:0;
  border-bottom:1px solid #f0e4df;
}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:26px 0 30px;
}
.benefit-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:10px 6px;
}
.benefit-card img{
  width:68px;
  height:68px;
  flex:0 0 68px;
}
.benefit-card strong{
  display:block;
  color:var(--okly-navy);
  font-size:18px;
  line-height:1.15;
  margin:2px 0 8px;
}
.benefit-card span{
  display:block;
  color:#5b6180;
  font-size:14px;
  line-height:1.45;
}
@media(min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:56px;align-items:center}
  .hero-copy h1{font-size:clamp(70px,5.3vw,96px);line-height:.92;letter-spacing:-.03em}
  .hero-title-logo{height:102px;max-width:285px}
  .hero-copy .lead{margin:22px 0 12px}
  .hero-visual{aspect-ratio:1.48/1;border-radius:34px}
  .hero-visual img{object-position:center center}
}
@media(max-width:1099px){
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-card{padding:8px 0}
}
@media(max-width:700px){
  .hero{padding-top:38px}
  .hero-copy .lead{font-size:20px}
  .hero-copy p:not(.lead){font-size:16px}
  .hero-actions .btn{min-height:58px;padding:0 24px}
  .benefits-grid{grid-template-columns:1fr;gap:10px;padding:16px 0 22px}
  .benefit-card img{width:58px;height:58px;flex-basis:58px}
  .benefit-card strong{font-size:17px}
  .benefit-card span{font-size:14px}
}


/* ===== V5.1 Hero full-width carousel style for desktop ===== */
@media(min-width:1100px){
  .hero{
    position:relative;
    overflow:hidden;
    padding:0;
    min-height:720px;
    background:none !important;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg,
        rgba(252,242,241,.98) 0%,
        rgba(252,242,241,.96) 19%,
        rgba(252,242,241,.88) 34%,
        rgba(255,247,244,.54) 48%,
        rgba(255,247,244,.12) 58%,
        rgba(255,247,244,0) 68%),
      url('images/hero-okly-desktop.webp');
    background-size:cover, cover;
    background-position:left top, right center;
    background-repeat:no-repeat;
    z-index:0;
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:1px;
    background:#f1e5e0;
    z-index:1;
  }
  .hero .container{
    position:relative;
    z-index:2;
  }
  .hero-grid{
    grid-template-columns:1fr;
    min-height:720px;
    align-items:center;
    gap:0;
  }
  .hero-copy{
    width:min(620px,54vw);
    max-width:620px;
    padding:118px 0 88px;
  }
  .hero-title-block{gap:14px}
  .hero-copy h1{
    font-size:clamp(74px,5.7vw,102px);
    line-height:.91;
    letter-spacing:-.036em;
  }
  .hero-title-logo{
    height:116px;
    max-width:320px;
  }
  .hero-copy .lead{
    font-size:25px;
    line-height:1.25;
    margin:18px 0 14px;
    max-width:580px;
  }
  .hero-copy p:not(.lead){
    font-size:18px;
    line-height:1.52;
    max-width:575px;
    color:#4d5875;
  }
  .hero-actions{
    margin-top:28px;
    gap:18px;
    flex-wrap:wrap;
  }
  .hero-actions .btn{
    min-height:66px;
    padding:0 34px;
    font-size:16px;
  }
  .hero-visual{
    display:none !important;
  }
  .benefits{
    background:#fff;
  }
}

@media(min-width:701px) and (max-width:1099px){
  .hero{
    background:linear-gradient(90deg,#fcf2f1 0%,#fff7f4 46%,#fbf7ee 100%);
  }
}


/* ===== V5.2 Líneas de productos: organización tipo mockup ===== */
#lineas{
  background:#fff;
}
#lineas .section-head{
  max-width:920px;
  margin-bottom:34px;
}
#lineas .section-head .eyebrow{
  margin-bottom:10px;
}
#lineas .section-head h2{
  font-size:clamp(38px,3.2vw,52px);
  line-height:1.06;
}
#lineas .section-head p{
  margin-top:10px;
  font-size:17px;
  line-height:1.45;
  color:#6c6764;
}

/* Desktop: seven cards in one clean, aligned row like the approved mockup */
@media(min-width:1100px){
  #lineas{
    padding-top:76px;
    padding-bottom:82px;
  }
  #lineas .container{
    width:min(1440px,calc(100% - 48px));
  }
  #lineas .product-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
  #lineas .product-card{
    display:flex;
    flex-direction:column;
    height:100%;
    min-width:0;
    overflow:hidden;
    border:1px solid #f0e7e2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 6px 20px rgba(69,44,37,.06);
  }
  #lineas .product-card img{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:0;
    flex:0 0 auto;
  }
  #lineas .product-card > div{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:14px 14px 17px;
    text-align:left;
  }
  #lineas .product-card h3{
    margin:0 0 10px;
    min-height:2.1em;
    font-family:var(--serif);
    font-size:20px;
    line-height:1.05;
    font-weight:600;
    color:#26211f;
    letter-spacing:-.015em;
  }
  #lineas .product-card p{
    margin:0;
    font-size:14px;
    line-height:1.48;
    color:#6c6662;
  }
}

/* Tablet: ordered two-column / three-column presentation */
@media(min-width:701px) and (max-width:1099px){
  #lineas .product-grid{
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  #lineas .product-card{
    display:flex;
    flex-direction:column;
    border-radius:16px;
  }
  #lineas .product-card img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
  }
  #lineas .product-card > div{
    padding:16px;
  }
  #lineas .product-card h3{
    min-height:auto;
    margin-bottom:8px;
  }
}

/* Mobile: image + text side by side, easier to scan */
@media(max-width:700px){
  #lineas{
    padding-top:56px;
  }
  #lineas .section-head{
    text-align:left;
    margin-left:0;
    margin-right:0;
  }
  #lineas .section-head h2{
    font-size:36px;
  }
  #lineas .product-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  #lineas .product-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    min-height:120px;
    border-radius:15px;
  }
  #lineas .product-card img{
    width:112px;
    height:100%;
    min-height:120px;
    aspect-ratio:auto;
    object-fit:cover;
  }
  #lineas .product-card > div{
    padding:15px 14px;
  }
  #lineas .product-card h3{
    min-height:0;
    font-size:20px;
    margin-bottom:7px;
  }
  #lineas .product-card p{
    font-size:14px;
    line-height:1.42;
  }
}


/* ===== V5.3 FONDOS — SOLO AMBIENTACIÓN, SIN CAMBIAR CONTENIDO NI LAYOUT ===== */

/* Fondo general más cálido y suave como el mockup de referencia */
body{
  background:
    radial-gradient(circle at 8% 12%, rgba(239,205,198,.18), transparent 28%),
    radial-gradient(circle at 94% 30%, rgba(222,229,200,.16), transparent 24%),
    #fffaf7;
}

/* Header: marfil muy suave, sin competir con el contenido */
.site-header{
  background:rgba(255,251,248,.96);
  border-bottom:1px solid rgba(231,214,206,.82);
}

/* Hero: mezcla crema, rosa empolvado y verde botánico muy sutil */
.hero{
  background:
    radial-gradient(circle at 10% 24%, rgba(239,202,195,.55), transparent 34%),
    radial-gradient(circle at 89% 14%, rgba(221,229,200,.48), transparent 29%),
    radial-gradient(circle at 72% 88%, rgba(249,228,219,.35), transparent 30%),
    linear-gradient(118deg,#fffaf6 0%,#fbefea 48%,#faf7ee 100%);
}

/* La franja de beneficios queda clara y limpia */
.benefits{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,252,250,.98));
  border-top:1px solid rgba(236,222,216,.68);
  border-bottom:1px solid rgba(236,222,216,.82);
}

/* Sección de líneas: blanca, con sombras botánicas muy tenues en los bordes */
#lineas{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 0% 8%, rgba(219,226,202,.20), transparent 26%),
    radial-gradient(ellipse at 100% 88%, rgba(238,209,199,.17), transparent 25%),
    linear-gradient(180deg,#fffefd 0%,#fffaf7 100%);
}
#lineas::before,
#lineas::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  filter:blur(12px);
  opacity:.45;
}
#lineas::before{
  width:240px;
  height:420px;
  left:-115px;
  top:70px;
  transform:rotate(-18deg);
  background:
    radial-gradient(ellipse at 62% 20%, rgba(177,191,145,.23) 0 18%, transparent 19%),
    radial-gradient(ellipse at 48% 42%, rgba(177,191,145,.18) 0 17%, transparent 18%),
    radial-gradient(ellipse at 64% 64%, rgba(177,191,145,.16) 0 16%, transparent 17%),
    radial-gradient(ellipse at 45% 84%, rgba(177,191,145,.13) 0 15%, transparent 16%);
}
#lineas::after{
  width:250px;
  height:380px;
  right:-125px;
  bottom:10px;
  transform:rotate(20deg);
  background:
    radial-gradient(ellipse at 42% 22%, rgba(225,173,165,.19) 0 18%, transparent 19%),
    radial-gradient(ellipse at 55% 45%, rgba(225,173,165,.15) 0 17%, transparent 18%),
    radial-gradient(ellipse at 38% 70%, rgba(225,173,165,.13) 0 16%, transparent 17%);
}

/* Bloque de tipos de negocio: rosa/crema muy sutil */
.tinted{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 7% 18%, rgba(244,215,209,.48), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(231,221,203,.34), transparent 26%),
    linear-gradient(180deg,#fff9f6 0%,#f9ebe7 51%,#fff9f6 100%);
}
.tinted::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(206,218,185,.16), transparent 24%),
    radial-gradient(ellipse at 84% 0%, rgba(229,187,177,.12), transparent 24%);
}

/* ¿Por qué funciona?: aire blanco cálido con halos rosas muy suaves */
.why{
  background:
    radial-gradient(circle at 10% 45%, rgba(239,209,203,.20), transparent 23%),
    radial-gradient(circle at 88% 45%, rgba(222,229,203,.17), transparent 25%),
    linear-gradient(180deg,#fffdfb 0%,#fff9f6 100%);
}

/* Así se vería: crema luminoso */
.displays{
  background:
    radial-gradient(circle at 50% 0%, rgba(245,224,215,.22), transparent 28%),
    linear-gradient(180deg,#fffaf6 0%,#fdf6f1 100%);
}

/* Formulario: fondo rosa sedoso, suave y premium */
.lead-section{
  background:
    radial-gradient(circle at 8% 25%, rgba(255,255,255,.68), transparent 26%),
    radial-gradient(circle at 92% 72%, rgba(245,213,205,.56), transparent 28%),
    radial-gradient(circle at 55% 0%, rgba(255,249,246,.62), transparent 32%),
    linear-gradient(120deg,#f6dad5 0%,#f4e7e2 49%,#f7deda 100%);
}

/* Mobile: mantener los fondos suaves y evitar manchas demasiado grandes */
@media(max-width:700px){
  body{
    background:
      radial-gradient(circle at 12% 9%, rgba(239,205,198,.14), transparent 22%),
      #fffaf7;
  }
  .hero{
    background:
      radial-gradient(circle at 10% 10%, rgba(239,202,195,.44), transparent 28%),
      radial-gradient(circle at 90% 25%, rgba(221,229,200,.34), transparent 24%),
      linear-gradient(180deg,#fff8f4 0%,#fbefea 100%);
  }
  #lineas::before,
  #lineas::after{
    opacity:.26;
    transform:scale(.72);
  }
  .tinted{
    background:
      radial-gradient(circle at 12% 12%, rgba(244,215,209,.38), transparent 25%),
      linear-gradient(180deg,#fff9f6 0%,#f9ebe7 56%,#fff9f6 100%);
  }
  .lead-section{
    background:
      radial-gradient(circle at 15% 8%, rgba(255,255,255,.56), transparent 24%),
      linear-gradient(180deg,#f7dfda 0%,#f4e5e0 52%,#f7ded8 100%);
  }
}


/* ================= OKLY FORM LOGOS A TEXTO V1 =================
   SOLO sección formulario:
   reemplaza visualmente los 2 logotipos inline de OKLY por texto.
   Usa la tipografía aprobada para títulos: DM Serif Display.
   No modifica el hero ni ninguna otra sección.
   ============================================================= */

.lead-section .brand-inline{
  display:inline !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  line-height:inherit !important;
  vertical-align:baseline !important;
}

.lead-section .brand-inline .brand-inline-img{
  display:none !important;
}

.lead-section .brand-inline::after{
  content:"OKLY";
  font-family:var(--font-okly-title, "DM Serif Display", Georgia, "Times New Roman", serif) !important;
  font-style:normal !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:inherit !important;
  white-space:nowrap !important;
}

/* El OKLY pequeño de “DISTRIBUYE BELLEZA, SÚMATE A ...” */
.lead-section .brand-inline-small::after{
  font-size:1em !important;
}

/* El OKLY grande dentro del título principal */
.lead-section h2 .brand-inline::after{
  font-size:1em !important;
}

/* ================= FIN OKLY FORM LOGOS A TEXTO V1 ================= */