/* ---------- Panel izquierdo ---------- */
.hero{position:relative;overflow:hidden;background:var(--left-bg);display:grid;grid-template-columns:minmax(330px,45%) 1fr}
.photo{position:absolute;top:0;right:0;bottom:0;width:62%;background:url('../img/foto-acceso.jpg') center 20%/cover no-repeat}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--left-bg) 0%,rgba(251,252,252,.75) 14%,rgba(251,252,252,0) 34%)}

.brand{position:relative;z-index:2;padding:clamp(28px,5vh,56px) 0 160px clamp(28px,5vw,88px);display:flex;flex-direction:column}
.logo{width:clamp(150px,13vw,215px);margin-left:clamp(30px,3.5vw,62px)}
.logo img{width:100%;height:auto;display:block}
h1{font-family:Montserrat,"Segoe UI",sans-serif;font-weight:800;color:var(--navy);font-size:clamp(46px,5vw,78px);letter-spacing:.04em;line-height:1;margin:18px 0 14px}
.tagline{font-family:Montserrat,sans-serif;font-weight:600;color:var(--teal);font-size:clamp(22px,2.2vw,34px);line-height:1.18;margin:0}
.rule{width:64px;height:3px;border-radius:2px;background:var(--sand);margin:22px 0}
.desc{color:var(--muted);font-size:clamp(15px,1.15vw,18px);line-height:1.5;max-width:31ch;margin:0}
.pillars{display:flex;gap:clamp(18px,2.4vw,40px);margin-top:36px;list-style:none;padding:0}
.pillars li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:14.5px;line-height:1.3;color:var(--ink);max-width:120px}
.ico{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px}
.ico svg{width:32px;height:32px}
.i1{background:#d7ede6}.i2{background:#dcebf4}.i3{background:#efe4d8}
.script{position:absolute;left:clamp(28px,5vw,88px);bottom:68px;z-index:3;font-family:Allura,"Brush Script MT",cursive;font-size:clamp(34px,3vw,46px);color:var(--navy);transform:rotate(-6deg);transform-origin:left bottom}
.script svg{display:block;margin-top:-4px}
.wave{position:absolute;left:0;right:0;width:100%;bottom:0;height:230px;z-index:2;pointer-events:none}
.motto{position:absolute;right:clamp(24px,6%,64px);bottom:40px;z-index:3;text-align:center;color:var(--teal-d)}
.motto .a{font-size:13px;letter-spacing:.32em;font-weight:700;padding-bottom:12px;border-bottom:1px solid rgba(31,100,97,.4)}
.motto .b{font-size:12px;letter-spacing:.32em;margin-top:12px;opacity:.8}

/* ---------- Panel derecho ---------- */
.side{position:relative;display:flex;flex-direction:column;padding:clamp(24px,4vh,40px) clamp(24px,3.4vw,52px)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.values{font-size:12px;letter-spacing:.28em;color:var(--muted);margin:0 auto}
.lang{position:relative}
.lang button{font:inherit;font-weight:700;font-size:15px;color:var(--navy);background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px}
.lang ul{position:absolute;right:0;top:110%;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(18,63,90,.12);display:none;min-width:120px;z-index:5}
.lang.open ul{display:block}
.lang li button{width:100%;font-weight:400;font-size:14px}
.lang li button:hover{background:var(--mint)}

.card{margin:clamp(28px,6vh,64px) auto 0;width:100%;max-width:500px;background:var(--card);border-radius:22px;box-shadow:0 18px 50px rgba(18,63,90,.08),0 2px 6px rgba(18,63,90,.04);padding:clamp(28px,5vh,56px) clamp(24px,3.4vw,46px) 34px}
.card h2{font-family:Montserrat,sans-serif;font-weight:700;color:var(--navy);font-size:clamp(28px,2.4vw,36px);text-align:center;margin:0}
.welcome{text-align:center;font-size:19px;margin:12px 0 4px}
.sub{text-align:center;color:var(--muted);font-size:17px;margin:0 0 clamp(26px,5vh,46px)}
label{display:block;font-size:17px;font-weight:700;margin:0 0 12px}
.field{position:relative;margin-bottom:26px}
.field svg.lead{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--muted);pointer-events:none}
.field input{width:100%;height:60px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:17px;padding:0 54px 0 56px;transition:border-color .2s, box-shadow .2s}
.field input::placeholder{color:#9aa6ae}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(46,127,124,.15)}
.field input[aria-invalid="true"]{border-color:#c0504d}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px;border-radius:8px;cursor:pointer;color:var(--muted)}
.eye svg{width:24px;height:24px;display:block}
.err{color:#b8443f;font-size:14px;margin:8px 0 0;min-height:0}
.btn{width:100%;height:64px;margin-top:10px;border:0;border-radius:14px;background:var(--teal);color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:21px;cursor:pointer;position:relative;box-shadow:0 10px 22px rgba(46,127,124,.28);transition:background .2s, transform .1s}
.btn:hover{background:var(--teal-d)}
.btn:active{transform:translateY(1px)}
.btn svg{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:26px;height:26px}
.btn[disabled]{opacity:.75;cursor:progress}
.forgot{display:block;text-align:center;margin-top:22px;color:var(--link);font-size:17px}
.status{text-align:center;font-size:15px;margin:14px 0 0;color:var(--teal-d);min-height:1.2em}
.divider{display:flex;align-items:center;gap:18px;margin-top:clamp(26px,5vh,48px);color:var(--muted);font-size:16px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.heart{display:block;margin:8px auto 0;width:22px;height:22px;color:var(--teal)}
.foot{margin-top:auto;padding-top:28px;align-self:flex-end;display:flex;align-items:center;gap:14px;color:#8aa6b6;font-size:12.5px;letter-spacing:.24em;line-height:1.7}
.foot svg{width:70px;height:80px}
:focus-visible{outline:3px solid rgba(46,127,124,.55);outline-offset:2px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.hero{grid-template-columns:1fr}.photo{width:55%}.motto{display:none}}
@media (max-width:920px){
  .page{grid-template-columns:1fr}
  .hero{min-height:auto}
  .brand{padding-bottom:150px}
  .photo{width:48%}
  .side{padding-top:28px}
}
@media (max-width:600px){
  .photo{position:relative;width:100%;height:300px;order:2}
  .photo::after{background:linear-gradient(180deg,var(--left-bg) 0%,rgba(251,252,252,0) 30%)}
  .hero{display:flex;flex-direction:column}
  .brand{padding:28px 22px 10px;align-items:center;text-align:center}
  .logo{margin-left:0}
  .rule{margin:18px auto}
  .pillars{justify-content:center}
  .script{position:relative;left:auto;bottom:auto;order:3;text-align:center;margin:-70px 0 40px;transform:rotate(-4deg);transform-origin:center}
  .script svg{margin:0 auto}
  .wave{height:140px}
  .values{display:none}
  .card{padding:30px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
[hidden]{display:none!important}