/* Acceso (crear cuenta, entrar, recuperar): la estética del brandbook, la de Mister Care OS.
   Oscuro y cálido, 70% negro · 22% aire · 8% oro. Las letras se sirven desde /fuentes (la CSP no deja traerlas de afuera). */
@font-face{font-family:"EB Garamond";src:url(/fuentes/garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fuentes/garamond-italica.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:Outfit;src:url(/fuentes/outfit.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Lato;src:url(/fuentes/lato-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(/fuentes/lato-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/fuentes/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --fondo:#0A0908; --sup:#181614; --sup2:#1E1B18; --linea:#26231F; --linea2:#302C27;
  --gold:#C79D55; --acento:#E5BC74; --glow:#C79D5533; --champagne:#D8C29B; --texto:#F4F0E8; --smoke:#8A857D;
  --activo:#3D3120; --pos:#6FA173; --neg:#C2665F; --meli:#7C9CB5;
  --serif:"EB Garamond",Georgia,serif; --titulo:Outfit,Inter,system-ui,sans-serif;
  --cuerpo:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ui:Inter,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--texto);font:15px/1.5 var(--cuerpo);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.oculto{display:none!important}

/* marca: el nombre en Garamond con el rombo dorado */
.marca{display:inline-flex;align-items:center;gap:11px;font:500 19px var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#F7F3EB;text-decoration:none}
.marca .rombo{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 14px var(--glow);flex:none}

.acceso{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}

/* ---------------------------------------------------------------- lado oscuro: la escena */
.acc-lado{position:relative;overflow:hidden;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:radial-gradient(90% 70% at 30% 18%,#2A1D10 0%,#100C08 60%,#070605 100%);border-right:1px solid var(--linea)}
.acc-lado::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.35}
.acc-anillos{position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;pointer-events:none;
  border:1px solid #C79D551C;box-shadow:0 0 0 60px #C79D5505,0 0 0 61px #C79D5514}
.acc-eyebrow{font:700 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.acc-lado h1{font:500 italic clamp(40px,4.4vw,58px)/1.04 var(--serif);color:#FFF4E2;letter-spacing:-.01em;max-width:11ch;margin:0 0 18px}
.acc-lado p{max-width:42ch;color:var(--champagne);margin:0;font-size:16px}
/* el recorrido en video (datos de ejemplo) */
.acc-video{margin:0;position:relative;z-index:1;max-width:560px}
.acc-video video{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;border:1px solid #3A342B;background:#100C08;
  box-shadow:0 30px 60px #000A,0 0 0 6px #C79D550D}
.acc-video figcaption,.acc-video-cel .lbl{font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.acc-video figcaption{margin-top:12px}
.acc-video-marco{position:relative}
.acc-ctrl{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.acc-boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;min-width:40px;padding:0 16px 0 12px;border-radius:999px;cursor:pointer;
  border:1px solid #C79D5566;background:#0E0C0AE6;color:#F4F0E8;font:700 13px var(--ui);letter-spacing:.02em;box-shadow:0 10px 30px #0008;transition:background .18s,border-color .18s}
.acc-boton:hover{border-color:var(--gold);background:#1A1612F2}
.acc-pausa{padding:0;width:40px}
.acc-pausa .ic{width:12px;height:14px;border-left:4px solid var(--gold);border-right:4px solid var(--gold)}
.acc-pausa.parado .ic{width:0;height:0;border-left:13px solid var(--gold);border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.acc-video video{cursor:pointer}
.acc-sonido .ic{width:18px;height:18px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center/contain no-repeat}
.acc-credito{display:inline-block;margin-top:8px;font-size:11px;color:#5F5A52}
.acc-video-cel{display:none;margin:30px 0 0}
.acc-video-cel button{all:unset;box-sizing:border-box;display:block;width:100%;position:relative;cursor:pointer;border-radius:12px;overflow:hidden;border:1px solid #3A342B}
.acc-video-cel img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;opacity:.85}
.acc-video-cel .play{position:absolute;left:50%;top:44%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:linear-gradient(180deg,#D4AC66,var(--gold));box-shadow:0 10px 30px #0009}
.acc-video-cel .play::after{content:"";position:absolute;left:23px;top:18px;border-left:16px solid #151210;border-top:11px solid transparent;border-bottom:11px solid transparent}
.acc-video-cel .lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;text-align:center;color:#E6DCCB;background:linear-gradient(transparent,#0A0908E6)}
.acc-video-cel button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.acc-video-cel video{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;background:#100C08}
.acc-hecho{font:700 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:#6F685E}

/* ---------------------------------------------------------------- el formulario */
.acc-form{display:grid;place-items:center;padding:40px 24px}
.acc-caja{width:100%;max-width:400px}
.acc-cel{display:none}
.acc-tabs{display:flex;gap:4px;background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:4px;margin:0 0 30px}
.acc-tabs button{flex:1;border:0;background:transparent;border-radius:9px;padding:10px;font:600 14px var(--ui);color:var(--smoke);cursor:pointer;transition:background .18s,color .18s}
.acc-tabs button:hover{color:var(--texto)}
.acc-tabs button.si{background:linear-gradient(90deg,var(--activo),#2B2620);color:var(--acento);box-shadow:inset 0 0 0 1px #C79D5540}
.acc-caja h2{font:600 28px/1.15 var(--titulo);letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
.acc-caja .sub{color:var(--smoke);margin:0 0 26px;font-size:15px}

.campo{display:block;margin:0 0 16px}
.campo>span{display:block;font:700 10.5px var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);margin:0 0 8px}
.campo input{width:100%;height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--linea2);background:var(--sup2);font-size:16px;color:var(--texto);outline:none;
  transition:border-color .18s,box-shadow .18s}
.campo input::placeholder{color:#5F5A52}
.campo input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--glow)}
.acc-sub{display:block;margin:7px 2px 0;font-size:13px;color:var(--suave,#9A948A);overflow-wrap:anywhere}
.acc-sub b{color:var(--champagne,var(--texto));font-weight:600}
.acc-sub.oculto{display:none}
.campo input[readonly]{color:var(--champagne);border-style:dashed}
.ver-clave{position:relative}
.ver-clave input{padding-right:84px}
.ver-clave button{position:absolute;right:6px;bottom:6px;height:36px;border:0;background:transparent;color:var(--smoke);font:600 12.5px var(--ui);padding:0 10px;border-radius:8px;cursor:pointer}
.ver-clave button:hover{color:var(--acento);background:#ffffff08}
.nota{color:var(--smoke);font-size:13px;margin:-4px 0 18px}

.btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#D4AC66,var(--gold));color:#151210;font:700 15px var(--ui);letter-spacing:.01em;
  box-shadow:0 8px 24px #C79D5526,inset 0 1px 0 #ffffff40;transition:filter .18s,transform .18s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;pointer-events:none}

.error{background:color-mix(in srgb,var(--neg) 10%,var(--sup));border:1px solid color-mix(in srgb,var(--neg) 45%,transparent);color:#E8A49D;border-radius:10px;padding:11px 14px;font-size:14px;margin:0 0 16px}
.aviso{border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55}
.aviso.ok{background:color-mix(in srgb,var(--pos) 10%,var(--sup));border:1px solid color-mix(in srgb,var(--pos) 40%,transparent);color:#BFD9C1}

.legal-acepta{margin:16px 0 0;text-align:center;font-size:12.5px}
.legal-acepta a{color:var(--champagne)}
.acc-links{margin:22px 0 0;text-align:center;font-size:14px}
.acc-links a{color:var(--champagne);text-decoration:none;font-weight:700;padding:8px;display:inline-block}
.acc-links a:hover{color:var(--acento)}
.acc-pie{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--linea);text-align:center;font-size:12px;color:#6F685E}
.acc-pie a{color:#8A857D;text-decoration:none}
.acc-pie a:hover{color:var(--champagne)}

@media (max-width:900px){
  .acceso{grid-template-columns:minmax(0,1fr)}
  .acc-lado{display:none}
  body{background:radial-gradient(120% 50% at 50% 0%,#1F160D 0%,var(--fondo) 70%) no-repeat,var(--fondo)}
  .acc-form{place-items:start center;padding:28px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .acc-cel{display:flex;margin:0 0 30px}
  .acc-video-cel{display:block}
  .acc-caja h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}