/* Identidad original Biblioteca ECO */
[hidden]{display:none!important}

:root{
  --eco-orange:#ff6a00;
  --eco-gold:#ffb500;
  --eco-brown:#613216;
  --eco-paper:#fffaf5;
}

body{background:var(--eco-paper);color:#342219}

.eco-login-shell{
  display:grid;
  grid-template-columns:minmax(0,55%) minmax(0,45%);
  min-height:100vh;
}

.eco-login-hero{
  background:linear-gradient(132deg,#fff1e0,#ffe3c1 66%,#ffcf98);
  position:relative;
  overflow:hidden;
  color:var(--eco-brown);
}

.eco-login-hero:after{
  content:"";
  position:absolute;
  right:-175px;
  bottom:-240px;
  width:480px;
  height:480px;
  border:58px solid #fff2e380;
  border-radius:50%;
  pointer-events:none;
}

.eco-hero-inner{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  padding:clamp(26px,5vw,75px);
  z-index:1;
}

.eco-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  z-index:3;
}

.eco-brand{
  display:flex;
  gap:11px;
  align-items:center;
  text-decoration:none;
  color:var(--eco-brown);
}

.eco-brandmark{
  font-size:38px;
  letter-spacing:-.12em;
  font-weight:800;
  color:var(--eco-orange);
  line-height:1;
}

.eco-brandmark span{color:var(--eco-gold)}

.eco-brandname{font-size:14px;line-height:1.35}
.eco-brandname strong{display:block}
.eco-brandname small{font-size:10px;color:#956d51}

.eco-catalog-link{
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  color:#a94d00;
  border:1px solid #e5b890;
  padding:10px 13px;
  border-radius:100px;
  white-space:nowrap;
}

.eco-hero-content{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0 20px;
  z-index:2;
}

.eco-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
  color:#d25b00;
  margin:0 0 16px;
}

.eco-hero-content h1{
  font-size:clamp(37px,4.3vw,72px);
  line-height:1.13;
  letter-spacing:-.05em;
  max-width:650px;
  margin:0 0 16px;
  font-weight:800;
}

.eco-hero-content h1 em{
  color:#e96500;
  font-style:normal;
}

.eco-hero-lead{
  font-size:14px;
  line-height:1.85;
  max-width:550px;
  color:#875d40;
  margin:0 0 20px;
}

/* Ilustracion original del libro ECO */
.hero-art{
  height:280px;
  position:relative;
  max-width:490px;
  width:100%;
  margin:8px auto 0;
  z-index:2;
}

.art-circle{
  width:236px;
  height:236px;
  background:#ffb75d;
  border-radius:50%;
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:inset -25px -24px 50px #ff9c3690;
}

.art-book{
  position:absolute;
  width:157px;
  height:207px;
  background:#fffdf7;
  border:1px solid #ffefda;
  border-radius:7px 13px 13px 7px;
  left:50%;
  top:23px;
  transform:translateX(-50%) rotate(10deg);
  box-shadow:11px 12px 0 #e68425,15px 18px 23px #a44f2450;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.art-book:before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  border-left:2px solid #ffe7c7;
}

.art-book .art-brand{
  font-size:24px;
  font-weight:800;
  color:#ff7100;
  letter-spacing:-2px;
}

.art-book .art-line{
  width:69px;
  height:4px;
  border-radius:9px;
  background:#ffd4ae;
  margin-top:17px;
}

.art-book .art-line.short{width:44px;margin-top:7px}

.art-star{
  position:absolute;
  left:13%;
  top:20%;
  font-size:45px;
  color:#ef8d16;
  transform:rotate(-15deg);
}

.hero-badge{
  position:absolute;
  right:8%;
  bottom:14px;
  background:white;
  padding:12px 15px;
  border-radius:13px;
  box-shadow:0 12px 32px #6a2f1318;
  font-size:10px;
  font-weight:700;
  color:#a45319;
  transform:rotate(-5deg);
}

.eco-hero-bottom{
  font-size:10px;
  color:#a67c5c;
  margin:12px 0 0;
}

/* Tarjeta de acceso */
.eco-login-side{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffaf7;
  padding:30px 25px;
}

.eco-side-inner{width:min(100%,440px)}

.eco-access-card{
  background:#fff;
  border:1px solid #f0dfd1;
  border-radius:23px;
  box-shadow:0 20px 50px #61321612;
  padding:clamp(23px,3vw,37px);
}

.eco-status-chip{
  display:inline-block;
  background:#fff1e4;
  color:#c85a06;
  border-radius:100px;
  padding:7px 11px;
  font-size:10px;
  letter-spacing:.035em;
  font-weight:800;
}

.eco-access-card>h2{
  font-size:25px;
  letter-spacing:-.04em;
  line-height:1.25;
  color:var(--eco-brown);
  margin:18px 0 8px;
}

.eco-subtitle{
  font-size:12px;
  color:#967a65;
  line-height:1.7;
  margin:0 0 17px;
}

.eco-access-card .notice{
  font-size:11px;
  line-height:1.6;
  padding:11px 13px;
  margin-bottom:15px;
}

.eco-access-card .panel{
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  border:0;
}

.eco-access-card .panel h2{font-size:17px;margin:12px 0}
.eco-access-card .panel p{font-size:12px;line-height:1.8}
.eco-access-card .button.primary{background:var(--eco-orange)}
.eco-access-card .button.secondary{
  background:#fff1e4;
  border-color:#f4d9c2;
  color:#a14d0b;
}
.eco-access-card .button{width:100%;min-height:46px}
.eco-access-card .resources{grid-template-columns:1fr}
.eco-access-card .account-grid{grid-template-columns:1fr}

.eco-side-footer{
  font-size:10px;
  color:#a9998b;
  text-align:center;
  margin:20px 0 0;
}

@media(max-width:840px){
  .eco-login-shell{grid-template-columns:1fr}
  .eco-hero-inner{min-height:0;padding:24px 23px 30px}
  .eco-hero-content{padding:45px 0 0}
  .eco-hero-content h1{font-size:clamp(34px,7vw,55px)}
  .hero-art{height:225px;max-width:360px}
  .art-circle{width:195px;height:195px}
  .art-book{width:132px;height:177px}
  .hero-badge{right:0;bottom:5px}
  .eco-login-side{padding:30px 18px 45px}
  .eco-hero-bottom{display:none}
}

@media(max-width:430px){
  .eco-hero-top{align-items:flex-start}
  .eco-brandmark{font-size:30px}
  .eco-brandname{font-size:12px}
  .eco-catalog-link{font-size:10px;padding:8px 10px}
  .eco-hero-content{padding-top:35px}
  .eco-hero-content h1{font-size:35px}
  .eco-hero-lead{font-size:12px}
  .hero-art{height:190px}
  .art-circle{width:165px;height:165px}
  .art-book{width:110px;height:150px}
  .art-book .art-brand{font-size:20px}
  .art-star{font-size:30px}
  .hero-badge{font-size:9px;padding:9px 10px}
  .eco-access-card{padding:23px 20px}
}