:root{
  --bg1:#FFF6E5;
  --bg2:#E8F7FF;
  --card:#FFFFFF;
  --accent:#FF8A00;    /* naranja alegre */
  --accent2:#4CAF50;   /* verde amable */
  --accent3:#5B8DEF;   /* azul cornflower */
  --text:#2C2A29;
  --muted:#6b6966;
  --shadow:0 10px 24px rgba(0,0,0,.12);
}

/* Reset suave y tipografía amigable */
*{
  margin:0; padding:0; box-sizing:border-box;
  font-family: 'Comic Sans MS', 'Comic Neue', 'Baloo 2', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing: .2px;
}

/* Fondo con patrón suave tipo “confeti” */
body{
  width:100%; min-height:100vh;
  display:flex; justify-content:center; align-items:center;
  background: 
    radial-gradient(12px 12px at 20% 15%, rgba(255,224,138,.35) 20%, transparent 21%) repeat,
    radial-gradient(10px 10px at 70% 80%, rgba(152,206,255,.35) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-size: 160px 160px, 180px 180px, cover;
  color:var(--text);
  padding:16px;
}

/* Tarjeta principal más “redondita” y con sombra suave */
.container{
  width:min(920px, 95vw);
  min-height:520px;
  display:flex; position:relative;
  background-color:var(--card);
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 3px solid rgba(0,0,0,.05);
}

/* Área de formularios */
.container-form{ width:100%; overflow:hidden; }
.container-form form{
  height:100%;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:14px; padding:24px;
}

/* Título grande y divertido */
.container-form h2{
  font-size: 34px;
  margin-bottom: 10px;
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* Iconitos/redes (si los usas) */
.social-networks{ display:flex; gap:12px; margin-bottom:10px; }
.social-networks ion-icon{
  border:2px solid #ffd7a3;
  border-radius:12px; padding:10px; cursor:pointer;
  background:#fff5e8; transition: transform .08s ease, box-shadow .15s ease;
  box-shadow:0 3px 0 #f3c489;
}
.social-networks ion-icon:active{ transform: translateY(1px); box-shadow:0 1px 0 #f3c489; }

/* Texto auxiliar */
.container-form span{
  font-size: 13px; color: var(--muted); margin-bottom: 4px;
}

/* Inputs estilo “pastilla” */
.container-input{
  width:min(360px, 90%);
  height:48px; margin-bottom: 6px;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background-color:#FFF7EA;
  border:2px solid #FFD7A3;
  border-radius:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.container-input input{
  border:none; outline:none; width:100%; height:100%;
  background:transparent; font-size:16px; color:var(--text);
}
.container-input:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,138,0,.15);
}

/* Links */
.container-form a{
  color: var(--accent3);
  font-size: 14px;
  margin-top: 2px;
  text-decoration: none;
}
.container-form a:hover{ text-decoration: underline; }

/* Botones grandes y con “rebote” */
.button, .button1{
  width: 220px; height: 48px; font-size: 16px;
  border:none; border-radius:16px; cursor:pointer; margin-top:8px;
  color:white; font-weight:700;
  box-shadow:0 4px 0 rgba(0,0,0,.12);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.button{ background-color: var(--accent2); }
.button1{ background-color: var(--accent3); }
.button:active, .button1:active{ transform: translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.12); }

/* Animación formularios (mantengo tu lógica) */
.registrarse{ transform: translateX(-100%); }
.container.toggle .iniciar-sesion{ transform: translateX(100%); }
.container.toggle .registrarse{ transform: translateX(0); }

/* Panel “Welcome” ahora tipo gradiente alegre */
.container-welcome{
  position:absolute; width:50%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transform: translateX(100%);
  background: linear-gradient(180deg, var(--accent2), #7ad37f);
  transition: transform .5s ease-in-out, border-radius .5s ease-in-out, background .4s ease;
  overflow:hidden; border-radius: 50% 0 0 50%;
}
.container.toggle .container-welcome{
  transform: translateX(0);
  border-radius: 0 50% 50% 0;
  background: linear-gradient(180deg, var(--accent3), #8fb4ff);
}

/* Contenido del welcome con carita feliz opcional */
.container-welcome .welcome{
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:16px; padding: 0 40px; color:white;
  text-align:center;
}
.container-welcome h3{
  font-size: 42px; margin:0; text-shadow:0 2px 0 rgba(0,0,0,.08);
}
.container-welcome p{ font-size:15px; max-width:360px; }

/* Botón en el panel welcome (borde blanco) */
.container-welcome button{
  border: 3px solid #fff;
  background-color: rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
}

/* Transiciones de los textos del welcome */
.welcome-iniciar-sesion{ transform: translateX(100%); }
.container.toggle .welcome-iniciar-sesion{ transform: translateX(0); }
.container.toggle .welcome-registrarse{ transform: translateX(-100%); }

/* Accesibilidad: foco visible para teclado */
:focus-visible{
  outline: 3px dashed #000; outline-offset: 3px;
}
.btnburgos
{

  text-align: center;
  padding: 20px;
}

/* Responsive */
@media (max-width: 860px){
  .container{ min-height: 620px; }
  .container-welcome{ display:none; } /* En móvil ocultamos el panel decorativo */
  .container-form form{ padding: 28px 16px; }
  .container-form h2{ font-size: 30px; }
  .button, .button1{ width: 240px; }
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}