:root{
  --turquesa:#09a6b6; --turquesa-2:#0b8fa0; --turquesa-suave:#e6f6f8; --marino:#0f4c75;
  --tinta:#1e293b; --texto:#334155; --gris:#64748b; --gris-2:#94a3b8; --borde:#e2e8f0; --borde-2:#cbd5e1;
  --fondo:#f1f5f9;
  --ok:#047857; --ok-fondo:#ecfdf5; --ok-borde:#a7f3d0;
  --mal:#b91c1c; --mal-fondo:#fef2f2; --mal-borde:#fecaca;
  --info:#0e7490; --info-fondo:#ecfeff; --info-borde:#a5f3fc;
  --alerta-fondo:#fffbeb; --alerta-borde:#fde68a;
  --sombra:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--turquesa-2);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
.oculto{display:none!important}

.acceso{min-height:100vh;display:grid;grid-template-columns:minmax(380px,44%) 1fr}
.marca{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(155deg,#e9f8fa 0%,#d7f1f4 45%,#c6e9ee 100%);padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between}
.marca::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;bottom:-160px;background:radial-gradient(circle,rgba(9,166,182,.22),rgba(9,166,182,0) 65%)}
.marca::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:-120px;top:120px;background:radial-gradient(circle,rgba(15,76,117,.10),rgba(15,76,117,0) 70%)}
.marca>*{position:relative;z-index:1}
.logo-panel{display:block;width:232px;height:auto}
.marca h1{font-size:34px;line-height:1.2;color:var(--tinta);font-weight:700;margin:0 0 14px;letter-spacing:-.02em;max-width:440px}
.marca p.lema{font-size:16px;line-height:1.6;color:var(--gris);margin:0 0 30px;max-width:420px}
.ventajas{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ventajas li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--texto);line-height:1.45}
.ventajas .ico{flex:none;width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(9,166,182,.15);display:grid;place-items:center;color:var(--turquesa)}
.ventajas strong{display:block;color:var(--tinta);font-weight:600}
.pie-marca{font-size:12px;color:var(--gris)}
.lado-form{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:84px 24px 48px;position:relative;min-width:0}
.barra-idioma{position:absolute;top:24px;right:28px}
.idioma{display:inline-flex;background:#fff;border:1px solid var(--borde);border-radius:999px;padding:3px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.idioma a{font-size:12px;font-weight:600;color:var(--gris);padding:5px 12px;border-radius:999px;letter-spacing:.04em}
.idioma a.activo{background:var(--turquesa-suave);color:var(--turquesa-2)}
.idioma a:hover{text-decoration:none}

.tarjeta{width:100%;max-width:420px;background:#fff;border:1px solid var(--borde);border-radius:18px;box-shadow:var(--sombra);padding:36px 36px 30px}
.tarjeta.ancha{max-width:760px}
.logo-acceso{display:none;height:auto}
.cab-tarjeta{margin-bottom:24px;text-align:center}
.cab-tarjeta h2{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--tinta);letter-spacing:-.02em}
.cab-tarjeta p{margin:0;color:var(--gris);font-size:14.5px;line-height:1.5}

.campo{margin-bottom:16px}
.campo>label{display:block;font-size:13px;font-weight:600;color:var(--texto);margin-bottom:6px}
.entrada{position:relative}
.entrada svg.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gris-2);pointer-events:none}
.entrada .ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--gris-2);padding:8px;cursor:pointer;display:grid;place-items:center;width:auto;height:auto;box-shadow:none}
.entrada .ojo:hover{color:var(--gris)}
.acceso input[type=text],.acceso input[type=email],.acceso input[type=password],.acceso select{width:100%;height:48px;border:1px solid var(--borde-2);border-radius:10px;background:#fff;font:inherit;font-size:16px;color:var(--tinta);padding:0 14px;margin:0;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.entrada.con-ic input{padding-left:42px}
.entrada.con-ojo input{padding-right:46px}
.acceso input::placeholder{color:var(--gris-2)}
.acceso input:focus,.acceso select:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(9,166,182,.14)}
.acceso select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.acceso select option:disabled{color:var(--gris-2)}
.campo.error input,.campo.error select{border-color:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.12)}
.nota-error{display:flex;gap:6px;align-items:center;color:var(--mal);font-size:12.5px;margin-top:6px}
.campo .nota-error,.captcha .nota-error{display:none}
.campo.error .nota-error,.captcha.error .nota-error{display:flex}
.campo.ok input{border-color:#34d399}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.linea-opciones{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 20px;font-size:14px;flex-wrap:wrap}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--texto);line-height:1.5;cursor:pointer;position:relative}
.casilla input{position:absolute;opacity:0;width:20px;height:20px;margin:0;left:0;top:1px}
.casilla .caja{flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--borde-2);border-radius:6px;background:#fff;display:grid;place-items:center;transition:.15s}
.casilla input:checked+.caja{background:var(--turquesa);border-color:var(--turquesa)}
.casilla input:checked+.caja::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.casilla input:focus-visible+.caja{box-shadow:0 0 0 4px rgba(9,166,182,.2)}
.casilla.error .caja{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.casilla .opc{color:var(--gris-2)}
.grupo-casillas{display:grid;gap:10px;margin-bottom:6px}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;border-radius:10px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .05s,box-shadow .15s,filter .15s;text-decoration:none;padding:0 18px}
.boton:hover{text-decoration:none}
.boton.primario{background:linear-gradient(135deg,var(--turquesa),var(--turquesa-2));color:#fff;box-shadow:0 6px 16px rgba(9,166,182,.28)}
.boton.primario:hover{filter:brightness(1.05);box-shadow:0 8px 20px rgba(9,166,182,.34)}
.boton.secundario{background:#fff;color:var(--texto);border:1px solid var(--borde-2)}
.boton.secundario:hover{background:#f8fafc}
.boton[disabled]{opacity:.65;cursor:default;box-shadow:none;filter:none}
.boton .girando{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.separador{display:flex;align-items:center;gap:12px;color:var(--gris-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:22px 0}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--borde)}
.google{display:flex;justify-content:center;min-height:44px}
.pie-tarjeta{margin-top:22px;text-align:center;font-size:14px;color:var(--gris)}
.volver{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--gris);margin-bottom:14px;font-weight:500;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.volver:hover{color:var(--tinta);text-decoration:none}
.acciones{display:grid;gap:10px}

.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:13px 14px;font-size:14px;line-height:1.5;margin-bottom:20px;border:1px solid;text-align:left}
.aviso .ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.aviso strong{display:block;font-weight:600;margin-bottom:2px}
.aviso.error{background:var(--mal-fondo);border-color:var(--mal-borde);color:#7f1d1d}
.aviso.error .ico{background:#fee2e2;color:var(--mal)}
.aviso.exito{background:var(--ok-fondo);border-color:var(--ok-borde);color:#064e3b}
.aviso.exito .ico{background:#d1fae5;color:var(--ok)}
.aviso.info{background:var(--info-fondo);border-color:var(--info-borde);color:#164e63}
.aviso.info .ico{background:#cffafe;color:var(--info)}
.aviso.alerta{background:var(--alerta-fondo);border-color:var(--alerta-borde);color:#78350f}
.aviso.alerta .ico{background:#fef3c7;color:#b45309}
.aviso.compacto{font-size:13px;padding:10px 12px;margin:0 0 18px}

.requisitos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.req{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:4px 9px 4px 7px;border-radius:999px;background:#f1f5f9;color:var(--gris);border:1px solid var(--borde);transition:.15s}
.req::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gris-2)}
.req.ok{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok-borde)}
.req.ok::before{width:10px;height:6px;border-radius:0;background:none;border:2px solid var(--ok);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-2px)}
.medidor{height:4px;border-radius:4px;background:var(--borde);margin-top:10px;overflow:hidden}
.medidor i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#f59e0b,#10b981);transition:width .2s}

.bloque{padding-top:20px;margin-top:6px;border-top:1px solid var(--borde)}
.bloque:first-of-type{border-top:0;padding-top:0;margin-top:0}
.bloque h3{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turquesa-2);margin:0 0 14px}
.bloque h3 .n{width:22px;height:22px;border-radius:50%;background:var(--turquesa-suave);color:var(--turquesa-2);display:grid;place-items:center;font-size:11px;letter-spacing:0}
.declaracion{border:1px solid var(--borde);border-radius:12px;padding:14px;background:#f8fafc;margin-bottom:12px}
.declaracion .casilla{font-size:13.5px}
.declaracion.error{border-color:var(--mal-borde);background:var(--mal-fondo)}
.captcha{margin:18px 0 20px;min-height:78px}
.captcha.error .g-recaptcha>div{outline:2px solid #f87171;outline-offset:2px;border-radius:3px}

.buscador{position:relative}
.buscador-lista{position:absolute;left:0;right:0;top:52px;background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra);padding:6px;z-index:5;max-height:240px;overflow:auto;display:none;-webkit-overflow-scrolling:touch}
.buscador-lista .opcion{padding:9px 12px;border-radius:8px;font-size:14.5px;color:var(--tinta);cursor:pointer}
.buscador-lista .opcion:hover,.buscador-lista .opcion.act{background:var(--turquesa-suave);color:var(--turquesa-2)}
.buscador-lista mark{background:none;color:var(--turquesa-2);font-weight:600}
.buscador-lista .vacio{padding:9px 12px;font-size:13.5px;color:var(--gris-2)}

.velo{position:fixed;inset:0;background:rgba(15,23,42,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.velo.on{display:flex}
.modal{width:100%;max-width:420px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.25);padding:30px 28px 24px;text-align:center;animation:entra .2s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.98)}}
.icono-grande{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.icono-grande.info{background:var(--turquesa-suave);color:var(--turquesa-2)}
.icono-grande.ok{background:#d1fae5;color:var(--ok)}
.icono-grande.mal{background:#fee2e2;color:var(--mal)}
.modal h3{margin:0 0 8px;font-size:19px;color:var(--tinta);font-weight:700}
.modal p{margin:0 0 20px;color:var(--gris);font-size:14.5px;line-height:1.6}
.email-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:#f1f5f9;border:1px solid var(--borde);border-radius:999px;padding:5px 12px;font-size:13.5px;color:var(--tinta);font-weight:500;margin:-6px 0 20px;word-break:break-all}
.nota{font-size:12.5px;color:var(--gris-2);margin-top:14px;line-height:1.5}

.estado{text-align:center;padding:12px 4px 4px}
.estado .icono-grande{width:76px;height:76px;margin-bottom:20px}
.estado .icono-grande.ok{box-shadow:0 0 0 10px #ecfdf5}
.estado .icono-grande.mal{box-shadow:0 0 0 10px #fef2f2}
.estado .icono-grande.info{box-shadow:0 0 0 10px #f2fbfc}
.estado h2{font-size:22px;color:var(--tinta);margin:0 0 10px;letter-spacing:-.01em}
.estado p{color:var(--gris);font-size:15px;line-height:1.6;margin:0 0 22px;word-break:break-word}
.progreso{height:4px;background:var(--borde);border-radius:4px;overflow:hidden;margin:4px 0 10px}
.progreso i{display:block;height:100%;width:100%;background:var(--turquesa);transform-origin:left;animation:vacia linear forwards}
@keyframes vacia{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.cuenta{font-size:13px;color:var(--gris-2);margin-bottom:18px}
.pasos{display:grid;gap:10px;text-align:left;background:#f8fafc;border:1px solid var(--borde);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.pasos div{display:flex;gap:10px;font-size:14px;color:var(--texto);line-height:1.45}
.pasos b{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--borde);display:grid;place-items:center;font-size:12px;color:var(--turquesa-2)}

.cuenta-google{display:flex;align-items:center;gap:12px;border:1px solid var(--borde);background:#f8fafc;border-radius:12px;padding:12px 14px;margin-bottom:22px;text-align:left}
.cuenta-google .av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--marino);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;text-transform:uppercase}
.cuenta-google small{display:block;color:var(--gris);font-size:12px}
.cuenta-google b{color:var(--tinta);font-weight:600;font-size:14.5px;word-break:break-all}
.cuenta-google .g{margin-left:auto;flex:none}

.cookies{position:fixed;left:24px;bottom:24px;max-width:380px;background:#fff;border:1px solid var(--borde);border-radius:14px;box-shadow:var(--sombra);padding:16px 16px 14px;display:none;grid-template-columns:32px 1fr;gap:4px 12px;align-items:start;font-size:13px;line-height:1.5;color:var(--gris);z-index:20}
.cookies.on{display:grid}
.cookies p{margin:0}
.cookies .ico{width:32px;height:32px;border-radius:10px;background:var(--turquesa-suave);color:var(--turquesa-2);display:grid;place-items:center}
.cookies .boton{grid-column:2;justify-self:start;margin-top:6px;height:34px;padding:0 16px;width:auto;font-size:13px}

@supports (-webkit-touch-callout: none) {
  body{position:relative;height:auto;min-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .acceso input,.acceso select,.acceso button{font-size:16px!important}
  .buscador-lista{max-height:150px}
  .g-recaptcha{transform:scale(0.95);transform-origin:left top}
}
body.keyboard-open{height:auto;position:static}
body.keyboard-open .register-container{transform:none}
body.keyboard-open .lado-form{padding-bottom:80px}

@media (max-width:900px){
  .acceso{grid-template-columns:1fr}
  .marca{display:none}
  .lado-form{justify-content:flex-start;padding:16px 16px 96px}
  .barra-idioma{top:30px;right:30px;z-index:2}
  .idioma a{padding:4px 10px;font-size:11.5px}
  .tarjeta{padding:26px 20px 22px;border-radius:16px}
  .logo-acceso{display:block;width:196px;max-width:66%;margin:34px auto 22px}
  .estado .logo-acceso{width:176px;margin:34px auto 26px}
  .cab-tarjeta{margin-bottom:20px}
  .cab-tarjeta h2{font-size:22px}
  .estado .icono-grande{width:60px;height:60px;margin-bottom:16px;box-shadow:0 0 0 7px #f2fbfc}
  .estado .icono-grande svg{width:26px;height:26px}
  .estado h2{font-size:20px}
  .fila{grid-template-columns:1fr}
  .cookies{left:10px;right:10px;bottom:10px;max-width:none;grid-template-columns:1fr auto;align-items:center;padding:10px 10px 10px 14px;font-size:12px;line-height:1.4;gap:10px}
  .cookies .ico{display:none}
  .cookies .boton{grid-column:auto;margin:0}
  .modal{padding:26px 20px 20px}
}
@media (max-width:360px){
  .g-recaptcha{transform:scale(0.9);transform-origin:left top}
  .tarjeta{padding:24px 16px 20px}
}
