/* Hero editorial con la imagen proporcionada y texto HTML. */
header{position:absolute!important;top:0;left:0;background:linear-gradient(180deg,rgba(250,247,242,.98),rgba(250,247,242,.87))!important;backdrop-filter:none!important}
header>div{max-width:1440px!important;height:92px!important}.brand-logo{width:84px;height:68px}
.loec-hero{position:relative;min-height:800px;height: min(960px,100svh);overflow:hidden;background:#ede6da;isolation:isolate}
.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(251,245,233,.91) 0%,rgba(251,245,233,.77) 23%,rgba(251,245,233,.12) 46%,transparent 70%)}
.hero-composition{width:100%;max-width:1440px;height:100%;min-height:800px;margin:auto;padding:145px 64px 40px;display:grid;grid-template-columns:1fr 1fr;gap:12%}
.hero-before{max-width:430px;padding-top:30px}.hero-kicker{font-size:10px;line-height:1.7;letter-spacing:.18em;font-weight:700;color:#675440;max-width:280px;margin:0 0 35px}.hero-stage{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;color:#5e5140;margin-bottom:16px}
.hero-before h1{font-family:'Playfair Display',serif;color:#172735;font-size:clamp(52px,5.3vw,78px);font-weight:500;letter-spacing:-.05em;line-height:1.04;margin:0 0 24px}.hero-before h1 em{font-weight:400;color:#80613d}.hero-description{font-size:14px;line-height:1.85;color:#38424b;max-width:315px}.hero-handwritten{font-family:Caveat,cursive;font-size:32px;line-height:1.12;color:#705a41;margin-top:26px;transform:rotate(-4deg)}.hero-handwritten span{margin-left:22px}
.hero-after{align-self:end;margin-bottom:30px;max-width:390px;padding:25px 20px 0 0;color:#102535}.hero-after .hero-stage{color:#726047}.hero-after h2{font-family:'Playfair Display',serif;font-size:clamp(34px,3.3vw,49px);letter-spacing:-.035em;line-height:1.14;margin:0 0 16px;font-weight:500}.hero-after h2 em{font-weight:400;color:#80613d}.hero-after .hero-description{font-size:13px;max-width:310px}.hero-benefits{list-style:none;padding:0;margin:19px 0;display:grid;gap:10px;font-size:12px;font-weight:500}.hero-benefits li{display:flex;align-items:center;gap:10px}.hero-benefits li:before{content:'✓';width:19px;height:19px;border:1px solid #a78b60;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#76603b;flex-shrink:0}.hero-signoff{font-family:Newsreader,serif;border-top:1px solid #a98e6555;padding-top:13px;max-width:285px;font-size:17px;line-height:1.4}.hero-signoff span{font-style:italic}
@media(min-width:1600px){.hero-composition{padding-top:175px}.hero-after{margin-bottom:80px}}
@media(min-width:768px) and (max-width:1100px){header nav{gap:12px!important;font-size:11px!important}header .inline-flex{font-size:11px!important;padding:12px!important}.hero-composition{padding:130px 32px 35px;gap:8%}.hero-before h1{font-size:58px}.hero-after{padding-right:0;margin-bottom:38px}.hero-after h2{font-size:38px}.hero-after .hero-description{max-width:260px}.hero-background{object-position:55% center}}
@media(max-width:767px){header>div{height:76px!important}.brand-logo{height:58px;width:68px}.loec-hero{height:auto;min-height:0}.hero-background{height:560px;object-position:28% center}.hero-wash{background:linear-gradient(180deg,rgba(250,247,242,.10),rgba(250,247,242,.12) 390px,#f4eee3 560px),linear-gradient(90deg,rgba(251,245,233,.91),rgba(251,245,233,.56) 68%,rgba(251,245,233,.05));}.hero-composition{display:block;min-height:0;padding:111px 25px 35px}.hero-before{padding-top:0;max-width:340px}.hero-kicker{font-size:9px;max-width:245px;margin-bottom:24px}.hero-stage{font-size:9px;margin-bottom:12px}.hero-before h1{font-size:clamp(48px,12vw,68px);margin-bottom:18px}.hero-description{font-size:13px;line-height:1.7;max-width:270px}.hero-handwritten{font-size:27px;margin-top:18px;margin-bottom:0}.hero-after{margin:38px 0 0;max-width:none;padding:28px 0 0;border-top:1px solid #ac90634a}.hero-after h2{font-size:36px}.hero-after h2 br{display:none}.hero-after h2 br:after{content:' '}.hero-after h2 em{display:block}.hero-after .hero-description{max-width:340px}.hero-benefits{font-size:12px}.hero-signoff{max-width:none}.hero-after h2{max-width:340px}}
@media(prefers-reduced-motion:reduce){.hero-handwritten{transform:none}}

/* Logo transparente sobre el marfil, conservando la altura del header. */
.header-brand{position:relative;width:124px;height:80px;overflow:hidden;flex-shrink:0;background:transparent;border-radius:0}
.header-brand .brand-logo{position:absolute;width:96px;height:96px;max-width:none;left:50%;top:-10px;transform:translateX(-50%);object-fit:contain;border-radius:0}
.institution-logo{width:100px;height:100px;object-fit:contain;border-radius:0;background:transparent}
@media(max-width:767px){
  .header-brand{width:100px;height:68px}
  .header-brand .brand-logo{width:82px;height:82px;top:-8px}
  .loec-hero{padding-top:76px;background:#f7f2e9}
  .hero-background{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center;z-index:auto}
  .hero-wash{display:none}
  .hero-composition{padding:28px 25px 34px}
  .hero-kicker{max-width:none;margin-bottom:20px;font-size:9px}
  .hero-before{max-width:none}
  .hero-before h1{font-size:clamp(42px,11vw,54px);line-height:1.08;max-width:350px}
  .hero-before h1 br{display:none}
  .hero-before h1 em{display:block}
  .hero-description,.hero-after .hero-description{font-size:15px;line-height:1.75;max-width:none}
  .hero-handwritten{font-size:27px;margin-top:20px}
  .hero-after{margin-top:30px;padding-top:25px}
  .hero-after h2{font-size:34px;max-width:none}
  .hero-benefits{font-size:14px;line-height:1.5;gap:13px}
}
@media(max-width:359px){
  header>div{padding-left:10px!important;padding-right:10px!important;gap:6px!important}
  .header-brand{width:92px}
  header .inline-flex{padding:11px 9px!important;font-size:10px!important}
  #menu-toggle{min-width:36px}
  .hero-composition{padding-left:21px;padding-right:21px}
}

/* Fotografía vertical exclusiva para celular; el escritorio conserva su imagen. */
.hero-picture{display:contents}
@media(max-width:767px){
  .loec-hero{--mobile-photo-height:clamp(640px,165vw,820px)}
  .hero-background{position:absolute;top:76px;left:0;width:100%;height:var(--mobile-photo-height);aspect-ratio:auto;object-fit:cover;object-position:43% center;z-index:-3}
  .hero-wash{display:block;top:76px;bottom:auto;height:var(--mobile-photo-height);background:linear-gradient(180deg,rgba(250,247,242,.86) 0%,rgba(250,247,242,.75) 28%,rgba(250,247,242,.2) 47%,transparent 59%,transparent 85%,rgba(247,242,233,.3) 100%);z-index:-2}
  .hero-composition{padding:0}
  .hero-before{position:relative;min-height:var(--mobile-photo-height);padding:28px 25px 120px}
  .hero-kicker{margin-bottom:16px;max-width:290px}
  .hero-before .hero-stage{font-size:8px;margin-bottom:10px}
  .hero-before h1{font-size:clamp(40px,10.8vw,52px);max-width:355px;margin-bottom:16px}
  .hero-before .hero-description{max-width:325px;font-size:14px;line-height:1.7}
  .hero-handwritten{position:absolute;right:25px;bottom:27px;margin:0;font-size:26px;color:#493924;text-shadow:0 1px 5px #faf7f2}
  .hero-after{margin:0;padding:32px 25px 34px;background:#f7f2e9;border-top:1px solid #ac90634a}
}