/* ============================================================
   Actia — estilos de las páginas públicas
   (registro.html, invitacion.html)

   Estas páginas son la primera impresión de la marca, así que usan
   Poppins para los titulares — la voz de marketing — mientras que el
   producto por dentro sigue con Manrope. El panel izquierdo cuenta qué
   es Actia; el derecho tiene el formulario.
   ============================================================ */

:root{
  --pub-naranja:      #FF6A06;
  --pub-naranja-hover:#E55500;
  --pub-naranja-soft: rgba(255,106,6,.12);
  --pub-ink:          #1A1A1A;
  --pub-ink-soft:     #2C2C2C;
  --pub-canvas:       #F6F6EF;
  --pub-lavanda:      #EAEEFF;
  --pub-borde:        #E2E2DC;
  --pub-texto-sec:    #666;
  --pub-texto-ter:    #8A8A8A;
  --pub-verde:        #1C9F5C;
  --pub-rojo:         #E10600;
  --font-marca:       'Poppins', sans-serif;
  --font-ui:          'Manrope', system-ui, sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--font-ui); color:var(--pub-ink);
  background:var(--pub-canvas); min-height:100vh;
}

/* ---------- Estructura de dos paneles ---------- */
.pub-split{display:flex; min-height:100vh;}
.pub-marca{
  flex:0 0 42%; background:var(--pub-ink); color:#fff;
  padding:48px 46px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
/* Halo naranja de fondo — da calidez sin competir con el texto */
.pub-marca::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,6,.22) 0%, rgba(255,106,6,0) 68%);
  top:-160px; right:-190px; pointer-events:none;
}
.pub-marca::after{
  content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,6,.10) 0%, rgba(255,106,6,0) 70%);
  bottom:-150px; left:-120px; pointer-events:none;
}
.pub-form{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px 32px; background:var(--pub-canvas);
}
.pub-form-inner{width:100%; max-width:410px;}

/* ---------- Marca ---------- */
.pub-logo{display:flex; align-items:center; gap:11px; position:relative; z-index:2;}
.pub-logo .mark path, .pub-logo .mark circle{
  fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;
}
.pub-logo-nombre{
  font-family:var(--font-marca); font-weight:800; font-size:25px;
  letter-spacing:-.6px; line-height:1;
}
.pub-logo-tag{
  font-size:10.5px; color:rgba(255,255,255,.5); letter-spacing:.14em;
  text-transform:uppercase; margin-top:3px;
}

.pub-pitch{position:relative; z-index:2; margin:auto 0;}
.pub-pitch h2{
  font-family:var(--font-marca); font-weight:800; font-size:31px; line-height:1.2;
  margin:0 0 14px; letter-spacing:-.5px;
}
.pub-pitch h2 em{color:var(--pub-naranja); font-style:normal;}
.pub-pitch p{
  font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); margin:0 0 26px; max-width:330px;
}
.pub-features{list-style:none; padding:0; margin:0;}
.pub-features li{
  font-size:13.5px; color:rgba(255,255,255,.85); padding:8px 0 8px 28px;
  position:relative; line-height:1.45;
}
.pub-features li::before{
  content:""; position:absolute; left:0; top:13px;
  width:14px; height:14px; border-radius:50%;
  background:var(--pub-naranja-soft); border:1.5px solid var(--pub-naranja);
}
.pub-features li::after{
  content:""; position:absolute; left:4.5px; top:17px;
  width:4px; height:7px; border:solid var(--pub-naranja);
  border-width:0 1.8px 1.8px 0; transform:rotate(45deg);
}
.pub-pie{
  position:relative; z-index:2; font-size:11.5px; color:rgba(255,255,255,.38); line-height:1.5;
}

/* ---------- Formulario ---------- */
.pub-form h1{
  font-family:var(--font-marca); font-weight:800; font-size:26px;
  margin:0 0 7px; letter-spacing:-.4px; line-height:1.22;
}
.pub-desc{font-size:14px; color:var(--pub-texto-sec); line-height:1.55; margin:0 0 24px;}

.pub-campo{margin-bottom:15px;}
.pub-campo label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px;}
.pub-campo label .opt{font-weight:400; color:var(--pub-texto-ter);}
.pub-campo input, .pub-campo select{
  width:100%; padding:12px 14px; border:1.5px solid var(--pub-borde); border-radius:10px;
  font-family:inherit; font-size:14.5px; background:var(--pub-lavanda); color:var(--pub-ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.pub-campo input:focus, .pub-campo select:focus{
  outline:none; border-color:var(--pub-naranja); background:#fff;
  box-shadow:0 0 0 3px var(--pub-naranja-soft);
}
.pub-campo input:disabled{background:#F1F1EC; color:#888; cursor:not-allowed;}
.pub-campo select{cursor:pointer;}
.pub-tel{display:flex; gap:8px;}
.pub-tel select{flex:0 0 138px; font-size:13.5px; padding:12px 8px;}

.pub-btn{
  width:100%; background:var(--pub-naranja); color:#fff; border:0; border-radius:10px;
  padding:14px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  transition:background .15s, transform .1s;
}
.pub-btn:hover{background:var(--pub-naranja-hover);}
.pub-btn:active{transform:scale(.99);}
.pub-btn:disabled{opacity:.5; cursor:not-allowed;}
.pub-btn-alt{
  background:#fff; color:var(--pub-ink); border:1.5px solid var(--pub-borde);
}
.pub-btn-alt:hover{background:#fff; border-color:#C9C9C2;}
.pub-btn-texto{
  background:none; border:0; color:var(--pub-naranja); font-family:inherit;
  font-size:13px; font-weight:700; cursor:pointer; padding:6px;
}
.pub-btn-texto:disabled{color:#AAA; cursor:not-allowed;}

.pub-nota{font-size:12px; color:var(--pub-texto-ter); text-align:center; margin-top:16px; line-height:1.55;}
.pub-nota a{color:var(--pub-naranja); font-weight:600;}

.pub-aviso{border-radius:10px; padding:13px 15px; font-size:13.5px; line-height:1.5; margin-bottom:16px; display:none;}
.pub-aviso.visible{display:block;}
.pub-aviso.error{background:#FDECEA; border:1.5px solid #F4B8B0; color:#8A2A20;}
.pub-aviso.ok{background:#E8F6EE; border:1.5px solid #A8DCC0; color:#0F6E3C;}

.pub-sep{display:flex; align-items:center; gap:12px; margin:20px 0; color:#AAA; font-size:12px;}
.pub-sep::before, .pub-sep::after{content:""; flex:1; height:1px; background:var(--pub-borde);}

.pub-google{display:flex; justify-content:center; min-height:44px;}
.pub-google-nota{font-size:11.5px; color:var(--pub-texto-ter); text-align:center; margin-top:10px; line-height:1.45;}

/* ---------- Estados de éxito / carga ---------- */
.pub-exito{text-align:center;}
.pub-exito-icono{
  width:58px; height:58px; border-radius:50%; background:#E8F6EE; color:var(--pub-verde);
  font-size:27px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.pub-cargando{text-align:center; color:var(--pub-texto-ter); font-size:14px; padding:36px 0;}

.pub-credenciales{
  background:#fff; border:1.5px solid var(--pub-borde); border-radius:12px;
  padding:17px 19px; text-align:left; margin:20px 0;
}
.pub-cred-fila{font-size:13.5px; padding:4px 0;}
.pub-cred-fila code{
  background:var(--pub-canvas); border:1px solid var(--pub-borde); padding:3px 9px;
  border-radius:6px; font-size:15px; font-weight:700; letter-spacing:.06em;
}

.pub-otp{
  text-align:center; font-size:29px; font-weight:800; letter-spacing:.5em;
  padding:16px 14px 16px 26px; font-variant-numeric:tabular-nums;
}

/* ---------- Móvil: el panel de marca se vuelve un encabezado ---------- */
@media (max-width:860px){
  .pub-split{flex-direction:column; min-height:auto;}
  .pub-marca{flex:none; padding:26px 24px 24px;}
  .pub-marca::before{width:300px; height:300px; top:-120px; right:-120px;}
  .pub-marca::after{display:none;}
  .pub-pitch{margin:22px 0 0;}
  .pub-pitch h2{font-size:23px; margin-bottom:10px;}
  .pub-pitch p{margin-bottom:0; max-width:none;}
  .pub-features, .pub-pie{display:none;}
  .pub-form{padding:32px 24px 44px;}
}