:root { --rojo:#ef3f43; --verde:#78b95b; --azul:#2f86ee; --fondo:#05070a; --panel:#121820; --panel2:#0d1219; --texto:#f5f7fb; --muted:#aab4c2; --borde:rgba(255,255,255,.12); --sombra:0 24px 80px rgba(0,0,0,.42); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--texto); background: radial-gradient(circle at 15% 15%, rgba(239,63,67,.20), transparent 25%), radial-gradient(circle at 88% 8%, rgba(47,134,238,.20), transparent 24%), radial-gradient(circle at 62% 95%, rgba(120,185,91,.12), transparent 20%), var(--fondo); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.6; }
button, input, select { font: inherit; }
img { max-width: 100%; }
.contenedor { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.barra { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; }
.marca { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; letter-spacing: -.7px; }
.marca img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; }
.marca span::first-letter { color: var(--rojo); }
.menu { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.boton { border: 1px solid var(--borde); background: rgba(255,255,255,.055); color: var(--texto); border-radius: 14px; padding: 11px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.boton:hover { background: rgba(255,255,255,.09); }
.boton.principal { background: linear-gradient(135deg, var(--rojo), #bd202b); border-color: rgba(255,255,255,.14); box-shadow: 0 16px 38px rgba(239,63,67,.22); }
.boton.verde { background: linear-gradient(135deg, var(--verde), #2d8b50); border-color: rgba(120,185,91,.3); }
.etiqueta { display: inline-flex; color: #ffb0b2; border: 1px solid rgba(239,63,67,.35); background: rgba(239,63,67,.10); border-radius: 999px; padding: 8px 12px; }
.gradiente-texto { color: var(--rojo); }
.grid { display: grid; gap: 18px; }
.grid.dos { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.tres { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid var(--borde); border-radius: 22px; padding: 22px; box-shadow: 0 18px 42px rgba(0,0,0,.20); }
.card.destacado { border-color: rgba(47,134,238,.34); background: linear-gradient(180deg, rgba(47,134,238,.12), rgba(21,25,32,.78)); }
.icono { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.07); margin-bottom: 14px; }
.formulario { display: grid; gap: 12px; }
.campo { display: grid; gap: 6px; }
.campo label { color: #dce4ee; font-size: 14px; }
.campo input, .campo select { width: 100%; background: rgba(255,255,255,.06); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; outline: none; }
.campo input[type="color"] { height: 48px; padding: 5px; }
.campo input:disabled { opacity: .7; cursor: not-allowed; }
.campo input:focus, .campo select:focus { border-color: rgba(47,134,238,.75); box-shadow: 0 0 0 4px rgba(47,134,238,.12); }
.alerta { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(255,255,255,.06); color: var(--muted); }
.oculto { display: none !important; }
.pie { padding: 36px 0; color: var(--muted); text-align: center; }
.tabla { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 18px; }
.tabla th, .tabla td { border-bottom: 1px solid var(--borde); padding: 12px; text-align: left; color: var(--muted); }
.tabla th { color: var(--texto); background: rgba(255,255,255,.04); }

.inicio-minimal { overflow-x: hidden; }
.login-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.login-barra { width: min(1440px, calc(100% - 72px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 30px 0 12px; }
.login-nav { display: flex; gap: 22px; align-items: center; color: var(--muted); }
.login-nav a:hover { color: var(--texto); }
.login-main { width: min(1440px, calc(100% - 72px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 470px; gap: 56px; align-items: center; padding: 30px 0 54px; }
.login-hero h1 { font-size: clamp(48px, 6vw, 84px); line-height: .98; margin: 18px 0; letter-spacing: -3px; max-width: 760px; }
.login-hero p { font-size: 19px; max-width: 620px; }
.login-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 38px 0 28px; }
.login-beneficios article { border: 1px solid var(--borde); background: rgba(255,255,255,.045); border-radius: 18px; padding: 18px; }
.login-beneficios strong { display: block; margin: 8px 0 5px; }
.login-beneficios small { color: var(--muted); line-height: 1.45; }
.login-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(420px, 100%); margin: 22px auto 0; transform: rotate(-1deg); }
.login-collage .pieza { min-height: 120px; border-radius: 24px; border: 1px solid var(--borde); background: linear-gradient(135deg, rgba(239,63,67,.28), rgba(47,134,238,.18)), rgba(255,255,255,.05); box-shadow: var(--sombra); }
.login-collage .pieza:nth-child(2) { transform: translateY(-22px); background: linear-gradient(135deg, rgba(120,185,91,.28), rgba(47,134,238,.18)), rgba(255,255,255,.05); }
.login-collage .pieza:nth-child(3) { transform: translateY(-4px); background: linear-gradient(135deg, rgba(47,134,238,.32), rgba(239,63,67,.14)), rgba(255,255,255,.05); }
.login-collage .pieza:nth-child(4) { transform: translateY(-28px); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,185,91,.18)), rgba(255,255,255,.05); }
.login-panel { border: 1px solid var(--borde); border-radius: 30px; padding: 30px; background: rgba(14,19,27,.86); box-shadow: var(--sombra); backdrop-filter: blur(22px); }
.login-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 1px solid var(--borde); padding: 6px; border-radius: 18px; margin-bottom: 20px; }
.login-tabs button { border: 0; color: var(--muted); background: transparent; border-radius: 13px; padding: 10px; cursor: pointer; }
.login-tabs button.activo { background: rgba(239,63,67,.18); color: var(--texto); }
.login-vista { display: none; }
.login-vista.activo { display: grid; gap: 16px; }
.login-vista h2 { margin: 0; font-size: 30px; }
.planes-publicos { display: grid; gap: 10px; }
.plan-mini { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--borde); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.045); }
.plan-mini strong { display: block; }
.plan-mini small { color: var(--muted); }
.login-pie { border-top: 1px solid var(--borde); padding: 22px 0; color: var(--muted); }
.login-pie .contenedor { display: flex; justify-content: space-between; gap: 16px; }

.panel-app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.memoria-app { background: rgba(5,7,10,.18); }
.lateral { border-right: 1px solid var(--borde); background: rgba(8,10,14,.76); padding: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral-memories { backdrop-filter: blur(18px); }
.marca-app { margin-bottom: 28px; }
.marca-app img { width: 42px; height: 42px; }
.nav { display: grid; gap: 8px; }
.nav button, .nav a { width: 100%; text-align: left; border: 1px solid transparent; padding: 12px 14px; border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 12px; }
.nav button.activo, .nav a.activo, .nav button:hover, .nav a:hover { background: rgba(255,255,255,.075); color: var(--texto); border-color: var(--borde); }
.nav button.activo { background: linear-gradient(135deg, var(--rojo), #b81f28); box-shadow: 0 12px 34px rgba(239,63,67,.18); }
.nav .ico { width: 22px; text-align: center; font-size: 18px; line-height: 1; }
.nav-separador { height: 1px; background: var(--borde); margin: 10px 0; }
.nav-desplegable .flecha { margin-left: auto; color: var(--muted); }
.lista-albumes { display: grid; gap: 5px; padding-left: 8px; margin: -2px 0 6px 24px; }
.lista-albumes button { padding: 9px 10px; font-size: 14px; border-radius: 12px; }
.lista-albumes .total { margin-left: auto; opacity: .7; }
.principal-app { padding: 26px; }
.principal-memories { min-width: 0; }
.cabecera-memories { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 28px; position: sticky; top: 0; z-index: 15; padding: 4px 0 14px; backdrop-filter: blur(18px); }
.buscador-global { flex: 1; max-width: 860px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--borde); background: rgba(255,255,255,.045); border-radius: 18px; padding: 11px 14px; }
.buscador-global input { flex: 1; background: transparent; border: 0; color: var(--texto); outline: 0; min-width: 80px; }
.buscador-global button { border: 0; background: rgba(255,255,255,.08); color: var(--texto); border-radius: 12px; padding: 8px 11px; cursor: pointer; }
.perfil-area { position: relative; }
.perfil-boton { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); background: rgba(255,255,255,.05); color: var(--texto); border-radius: 999px; padding: 7px 10px 7px 7px; cursor: pointer; }
.avatar-usuario { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, var(--rojo), var(--azul)); font-weight: 800; overflow: hidden; background-size: cover; background-position: center; }
.avatar-usuario.grande { width: 74px; height: 74px; font-size: 28px; }
.perfil-texto { display: grid; text-align: left; }
.perfil-texto small { color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.menu-perfil { position: absolute; top: calc(100% + 10px); right: 0; width: 250px; background: rgba(16,20,27,.98); border: 1px solid var(--borde); border-radius: 18px; padding: 10px; box-shadow: var(--sombra); z-index: 20; }
.menu-perfil button { width: 100%; text-align: left; background: transparent; border: 0; color: var(--texto); padding: 11px 12px; border-radius: 12px; cursor: pointer; }
.menu-perfil button:hover { background: rgba(255,255,255,.08); }
.titulo-seccion { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.titulo-seccion.compacto h1 { font-size: clamp(28px, 4vw, 46px); }
.titulo-seccion h1 { font-size: clamp(30px, 4vw, 52px); margin: 0 0 4px; letter-spacing: -1.8px; }
.titulo-seccion p { margin: 0; }
.etiqueta-mini { border: 1px solid rgba(120,185,91,.35); background: rgba(120,185,91,.12); color: #b8f0a9; padding: 8px 12px; border-radius: 999px; font-size: 14px; }
.galeria-tiempo { display: grid; gap: 26px; }
.grupo-fecha { display: grid; gap: 12px; }
.grupo-fecha h2 { font-size: 23px; margin: 0; }
.grupo-fecha h2 small { color: var(--muted); font-size: 14px; font-weight: 500; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.foto { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: 20px; overflow: hidden; min-height: 185px; box-shadow: 0 12px 32px rgba(0,0,0,.2); cursor: zoom-in; }
.foto img, .foto video { width: 100%; height: 200px; object-fit: cover; display: block; background: #0c0e12; }
.foto:hover .acciones { opacity: 1; transform: translateY(0); }
.foto .acciones { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: .16s ease; }
.foto .acciones button { background: rgba(0,0,0,.58); color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; backdrop-filter: blur(12px); }
.foto .acciones button:hover { background: rgba(255,255,255,.16); }
.foto .marca-video { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.vacio-grande { min-height: 260px; display: grid; place-items: center; color: var(--muted); text-align: center; border-style: dashed; }
.zona-drop.drag-activo { outline: 2px dashed var(--azul); outline-offset: 8px; border-radius: 24px; }
.boton-flotante { position: fixed; right: 28px; bottom: 28px; z-index: 30; width: 64px; height: 64px; border-radius: 999px; border: 0; background: linear-gradient(135deg, var(--rojo), var(--azul)); color: #fff; font-size: 36px; line-height: 1; cursor: pointer; box-shadow: 0 18px 54px rgba(47,134,238,.28); }
.menu-contextual { position: fixed; z-index: 70; width: 260px; background: rgba(15,18,24,.98); border: 1px solid var(--borde); border-radius: 18px; padding: 8px; box-shadow: var(--sombra); }
.menu-contextual button { width: 100%; text-align: left; background: transparent; color: var(--texto); border: 0; border-radius: 12px; padding: 11px 12px; cursor: pointer; }
.menu-contextual button:hover { background: rgba(255,255,255,.08); }
.menu-contextual .peligro { color: #ff8c8f; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.78); display: grid; place-items: center; padding: 24px; }
.modal-contenido { position: relative; width: min(1120px, 96vw); max-height: 92vh; overflow: auto; background: rgba(16,20,27,.98); border: 1px solid var(--borde); border-radius: 26px; box-shadow: var(--sombra); }
.modal-chico { width: min(430px, 94vw); padding: 26px; }
.modal-cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.visor { padding: 0; background: rgba(0,0,0,.92); }
.visor-contenido { width: 100vw; height: 100vh; display: grid; grid-template-rows: auto 1fr; background: #030507; }
.visor-barra { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 22px; border-bottom: 1px solid var(--borde); background: rgba(9,12,17,.92); backdrop-filter: blur(18px); }
.visor-barra small { display: block; color: var(--muted); margin-top: 2px; }
.visor-acciones { display: flex; gap: 8px; align-items: center; }
.visor-acciones button { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(255,255,255,.07); color: var(--texto); cursor: pointer; }
.visor-acciones button:hover { background: rgba(255,255,255,.12); }
.visor-acciones .cerrar { background: rgba(239,63,67,.20); }
.visor-cuerpo { min-height: 0; display: grid; grid-template-columns: 1fr auto; }
.modal-media { min-height: 0; display: grid; place-items: center; background: rgba(0,0,0,.34); overflow: hidden; }
.modal-media img, .modal-media video { max-width: 100%; max-height: calc(100vh - 74px); object-fit: contain; }
.modal-detalles { width: 360px; max-width: 38vw; padding: 28px; border-left: 1px solid var(--borde); background: rgba(12,16,23,.96); overflow-y: auto; }
.modal-detalles dl { display: grid; gap: 12px; margin: 0; }
.modal-detalles dt { color: var(--muted); font-size: 13px; }
.modal-detalles dd { margin: 2px 0 0; word-break: break-word; }
.cuenta-card { display: grid; gap: 18px; max-width: 560px; }
.perfil-previo { display: flex; align-items: center; gap: 16px; }
.perfil-previo p { margin: 2px 0 0; }
.ajustes-grid { align-items: start; }
.bloque-titulo { margin-top: 30px; }
.metrica { background: rgba(255,255,255,.06); border: 1px solid var(--borde); border-radius: 20px; padding: 16px; }
.metrica strong { display: block; font-size: 24px; margin-top: 4px; }
.panel-subidas { position: fixed; right: 26px; bottom: 104px; width: min(420px, calc(100vw - 52px)); max-height: 60vh; overflow: auto; z-index: 45; background: rgba(14,18,25,.98); border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); padding: 14px; }
.panel-subidas header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panel-subidas header button { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(255,255,255,.06); color: var(--texto); cursor: pointer; }
.subida-resumen { color: var(--muted); margin-bottom: 10px; }
.lista-subidas { display: grid; gap: 10px; }
.subida-item { border: 1px solid var(--borde); border-radius: 16px; padding: 10px; background: rgba(255,255,255,.045); display: grid; gap: 7px; }
.subida-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subida-item small { color: var(--muted); }
.subida-item progress, .tarea-card progress { width: 100%; height: 8px; accent-color: var(--azul); }
.subida-item.correcto small { color: #b8f0a9; }
.subida-item.error small { color: #ff9ca0; }
.mapa-recuerdos { display: grid; gap: 18px; }
.mapa-lienzo { min-height: 520px; border: 1px solid var(--borde); border-radius: 28px; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 45%, rgba(47,134,238,.28), transparent 18%), radial-gradient(circle at 68% 48%, rgba(120,185,91,.24), transparent 17%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.mapa-lienzo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; }
.punto-mapa { position: absolute; width: 20px; height: 20px; border-radius: 999px; border: 3px solid #fff; background: var(--rojo); box-shadow: 0 0 0 10px rgba(239,63,67,.18), 0 12px 28px rgba(0,0,0,.35); transform: translate(-50%, -50%); cursor: pointer; }
.mapa-item small { display: block; color: var(--muted); margin-top: 6px; }
.personas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.persona-card { text-align: center; display: grid; justify-items: center; gap: 10px; }
.persona-card h3, .persona-card p { margin: 0; }
.herramientas-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.herramienta { text-align: left; cursor: pointer; color: var(--texto); }
.herramienta span { font-size: 26px; display: block; margin-bottom: 10px; color: var(--azul); }
.herramienta strong { display: block; margin-bottom: 6px; }
.herramienta small { color: var(--muted); line-height: 1.45; }
.tareas-lista { display: grid; gap: 12px; margin-top: 18px; }
.tarea-card { border: 1px solid var(--borde); border-radius: 18px; background: rgba(255,255,255,.045); padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; align-items: center; }
.tarea-card small { color: var(--muted); display: block; margin-top: 4px; }
.tarea-card progress, .tarea-card > small { grid-column: 1 / -1; }
.estado-tarea { border-radius: 999px; padding: 6px 10px; font-size: 12px; background: rgba(255,255,255,.08); color: var(--muted); }
.estado-tarea.completada { color: #b8f0a9; background: rgba(120,185,91,.13); }
.estado-tarea.ejecutando { color: #9fc5ff; background: rgba(47,134,238,.16); }
.estado-tarea.fallida { color: #ff9ca0; background: rgba(239,63,67,.16); }

@media (max-width: 1150px) {
  .login-main { grid-template-columns: 1fr; }
  .login-panel { max-width: 620px; }
  .login-beneficios { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .panel-app { grid-template-columns: 1fr; }
  .lateral { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--borde); }
  .nav-memories { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nav-separador, .lista-albumes { grid-column: 1 / -1; }
  .cabecera-memories { position: relative; flex-direction: column; align-items: stretch; }
  .perfil-area { align-self: flex-end; }
  .visor-cuerpo { grid-template-columns: 1fr; }
  .modal-detalles { max-width: none; width: auto; max-height: 40vh; border-left: 0; border-top: 1px solid var(--borde); }
}
@media (max-width: 850px) {
  .grid.tres, .grid.dos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .foto img, .foto video { height: 150px; }
  .perfil-texto { display: none; }
  .login-barra, .login-main { width: min(100% - 34px, 100%); }
  .login-nav { display: none; }
  .login-beneficios { grid-template-columns: 1fr; }
  .login-hero h1 { font-size: 44px; }
  .login-panel { padding: 20px; }
  .visor-barra { height: auto; flex-direction: column; align-items: stretch; }
  .visor-acciones { flex-wrap: wrap; }
  .modal-media img, .modal-media video { max-height: 70vh; }
}

body.inicio-nuevo-login { min-height: 100vh; overflow-x: hidden; background: #05080d; color: #f6f7fb; }
.inicio-nuevo-login .inicio-fondo { min-height: 100vh; margin: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 5% 8%, rgba(239,63,67,.24), transparent 24%), radial-gradient(circle at 92% 8%, rgba(47,134,238,.22), transparent 25%), radial-gradient(circle at 50% 90%, rgba(120,185,91,.09), transparent 22%), linear-gradient(135deg, #0d1219 0%, #070b10 44%, #0a1018 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 30px 100px rgba(0,0,0,.42); }
.inicio-superior { width: min(1760px, calc(100% - 120px)); margin: 0 auto; padding: 58px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.inicio-marca { display: inline-flex; align-items: center; gap: 14px; color: #fff; }
.inicio-marca .marca-icono { width: 66px; height: 54px; color: #ff4148; display: grid; place-items: center; filter: drop-shadow(0 14px 28px rgba(239,63,67,.2)); }
.inicio-marca svg { width: 62px; height: 62px; }
.inicio-marca strong { font-size: clamp(28px, 2.2vw, 40px); letter-spacing: -.9px; }
.inicio-marca strong span { color: #ff4148; }
.inicio-idioma { min-width: 160px; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; color: #f6f7fb; background: rgba(255,255,255,.045); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.inicio-idioma select { color: #f6f7fb; background: transparent; border: 0; outline: none; appearance: none; cursor: pointer; padding-right: 14px; }
.inicio-contenido { width: min(1760px, calc(100% - 120px)); min-height: calc(100vh - 155px); margin: 0 auto; display: grid; grid-template-columns: minmax(360px, 560px) minmax(420px, 1fr) minmax(380px, 520px); align-items: center; gap: clamp(34px, 4vw, 80px); padding: 28px 0 62px; }
.inicio-copy { align-self: center; }
.inicio-etiqueta { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 17px; margin-bottom: 22px; border-radius: 10px; color: #ff544f; background: rgba(255,255,255,.035); border: 1px solid rgba(239,63,67,.33); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.inicio-copy h1 { margin: 0; max-width: 650px; font-size: clamp(46px, 4.2vw, 75px); line-height: 1.13; letter-spacing: -2.5px; text-wrap: balance; }
.inicio-copy h1 span { display: block; color: #ff4a55; text-shadow: 0 18px 48px rgba(239,63,67,.18); }
.inicio-copy p { max-width: 610px; margin: 22px 0 32px; color: #c9cdd6; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.62; }
.inicio-beneficios { display: grid; gap: 13px; }
.inicio-beneficios article { min-height: 110px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.beneficio-icono { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.beneficio-icono.rojo { color: #ff5158; background: rgba(239,63,67,.16); }
.beneficio-icono.verde { color: #58d66b; background: rgba(120,185,91,.14); }
.beneficio-icono.azul { color: #4291ff; background: rgba(47,134,238,.15); }
.inicio-beneficios strong { display: block; margin-bottom: 6px; color: #fff; font-size: 18px; }
.inicio-beneficios small { color: #b6bdc9; font-size: 15px; line-height: 1.45; }
.inicio-escena { position: relative; height: min(650px, 62vw); min-height: 520px; display: grid; place-items: center; align-self: center; }
.orbitas { position: absolute; width: min(560px, 82%); aspect-ratio: 1.55; border: 1px solid rgba(239,63,67,.28); border-radius: 50%; transform: rotate(-11deg); box-shadow: 0 0 0 1px rgba(47,134,238,.11), inset 0 0 80px rgba(47,134,238,.04); }
.orbitas::before, .orbitas::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(47,134,238,.24); inset: 18%; transform: rotate(31deg); }
.orbitas::after { border-color: rgba(120,185,91,.18); inset: 31%; transform: rotate(-20deg); }
.nube-central { position: relative; z-index: 3; width: 210px; height: 146px; color: #ff5d69; display: grid; place-items: center; border-radius: 999px; background: radial-gradient(circle at 42% 35%, rgba(255,255,255,.9), rgba(47,134,238,.15) 46%, rgba(239,63,67,.18) 72%, rgba(0,0,0,.18)); box-shadow: 0 0 80px rgba(47,134,238,.28), 0 28px 70px rgba(0,0,0,.44); }
.nube-central svg { width: 144px; height: 100px; filter: drop-shadow(0 0 18px rgba(255,90,99,.38)); }
.burbuja { position: absolute; z-index: 4; width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; font-size: 34px; font-weight: 900; backdrop-filter: blur(12px); box-shadow: 0 18px 46px rgba(0,0,0,.32); }
.burbuja.b1 { left: 22%; top: 49%; color: #64df72; background: rgba(70,150,80,.22); }
.burbuja.b2 { right: 16%; top: 54%; color: #4a97ff; background: rgba(47,134,238,.20); }
.foto-flotante { position: absolute; z-index: 2; width: 210px; height: 128px; border-radius: 16px; border: 1px solid rgba(255,255,255,.24); background-size: cover; background-position: center; box-shadow: 0 20px 54px rgba(0,0,0,.42); overflow: hidden; }
.foto-flotante::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)); }
.foto-flotante.f1 { left: 52%; top: 0; width: 300px; height: 160px; transform: rotate(-8deg); background-image: linear-gradient(135deg, rgba(239,63,67,.08), rgba(47,134,238,.08)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='330'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%239aa9b6'/%3E%3Cstop offset='.45' stop-color='%232b3541'/%3E%3Cstop offset='1' stop-color='%23d3a45f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23g)' width='600' height='330'/%3E%3Ccircle cx='210' cy='116' r='38' fill='%23efd2b1'/%3E%3Ccircle cx='295' cy='112' r='38' fill='%23f0c39d'/%3E%3Ccircle cx='380' cy='120' r='38' fill='%23e3b687'/%3E%3Cpath d='M90 260c75-80 140-70 215-5 70-60 135-65 230 10v65H90z' fill='%23131a22' opacity='.75'/%3E%3C/svg%3E"); }
.foto-flotante.f2 { left: 24%; top: 26%; width: 225px; height: 132px; transform: rotate(-15deg); background-image: linear-gradient(135deg, rgba(47,134,238,.08), rgba(120,185,91,.07)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='290'%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%238aaed6'/%3E%3Cstop offset='.55' stop-color='%23466b86'/%3E%3Cstop offset='1' stop-color='%2321252a'/%3E%3C/linearGradient%3E%3Crect width='500' height='290' fill='url(%23a)'/%3E%3Cpath d='M0 210 140 92l78 82 70-55 210 112v59H0z' fill='%23222528' opacity='.9'/%3E%3Cpath d='M0 238c100-28 213-12 307-20 88-7 136-12 193 14v58H0z' fill='%236f8ca2' opacity='.6'/%3E%3C/svg%3E"); }
.foto-flotante.f3 { right: 6%; top: 34%; width: 180px; height: 118px; transform: rotate(9deg); background-image: linear-gradient(135deg, rgba(239,63,67,.08), rgba(255,255,255,.04)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='270'%3E%3Crect width='420' height='270' fill='%23262127'/%3E%3Ccircle cx='210' cy='90' r='45' fill='%23e5b88a'/%3E%3Cpath d='M130 205c35-70 130-80 170 0v65H130z' fill='%23754d3d'/%3E%3Crect x='45' y='172' width='330' height='25' rx='12' fill='%23e4b963'/%3E%3Ccircle cx='125' cy='145' r='12' fill='%23ffd47c'/%3E%3Ccircle cx='174' cy='132' r='12' fill='%23ffd47c'/%3E%3Ccircle cx='254' cy='138' r='12' fill='%23ffd47c'/%3E%3C/svg%3E"); }
.foto-flotante.f4 { left: 15%; bottom: 18%; width: 150px; height: 120px; transform: rotate(4deg); background-image: linear-gradient(135deg, rgba(239,63,67,.08), rgba(0,0,0,.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='260'%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23f5b66a'/%3E%3Cstop offset='1' stop-color='%23202e3d'/%3E%3C/linearGradient%3E%3Crect fill='url(%23s)' width='330' height='260'/%3E%3Ccircle cx='262' cy='62' r='34' fill='%23ffd58d'/%3E%3Cpath d='M0 178c65-30 120-18 185-13 70 5 105-24 145-14v109H0z' fill='%23302b2d' opacity='.85'/%3E%3Ccircle cx='135' cy='130' r='23' fill='%23141b22'/%3E%3Ccircle cx='184' cy='126' r='24' fill='%23141b22'/%3E%3C/svg%3E"); }
.foto-flotante.f5 { left: 33%; bottom: 2%; width: 210px; height: 122px; transform: rotate(-9deg); background-image: linear-gradient(135deg, rgba(47,134,238,.08), rgba(255,255,255,.02)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='270'%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%238ed3ff'/%3E%3Cstop offset='.5' stop-color='%23cb714a'/%3E%3Cstop offset='1' stop-color='%23264b67'/%3E%3C/linearGradient%3E%3Crect fill='url(%23c)' width='450' height='270'/%3E%3Cpath d='M0 198 72 130l60 45 55-75 83 69 58-37 122 68v70H0z' fill='%23f1d2a2' opacity='.85'/%3E%3Cpath d='M0 220c105-18 180-10 258-18 82-9 126-10 192 4v64H0z' fill='%232c6f8e' opacity='.65'/%3E%3C/svg%3E"); }
.foto-flotante.f6 { right: 4%; bottom: 0; width: 240px; height: 148px; transform: rotate(7deg); background-image: linear-gradient(135deg, rgba(120,185,91,.08), rgba(47,134,238,.06)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23a2bed2'/%3E%3Cstop offset='1' stop-color='%231c242d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='520' height='320' fill='url(%23d)'/%3E%3Ccircle cx='185' cy='118' r='34' fill='%23e6bb94'/%3E%3Ccircle cx='263' cy='118' r='34' fill='%23ecc29c'/%3E%3Ccircle cx='340' cy='118' r='34' fill='%23d8a77d'/%3E%3Cpath d='M90 265c70-90 150-80 223-18 65-52 124-50 176 18v55H90z' fill='%2321272d' opacity='.8'/%3E%3C/svg%3E"); }
.leyenda-escena { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; margin: 0; color: #c4cbd6; font-size: 20px; }
.leyenda-escena::before { content: "◇"; margin-right: 8px; color: #aab4c2; }
.inicio-panel { width: 100%; max-width: 500px; justify-self: end; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); box-shadow: 0 38px 100px rgba(0,0,0,.38); backdrop-filter: blur(24px); padding: clamp(26px, 3.2vw, 38px); }
.inicio-panel .login-vista.activo { display: grid; gap: 18px; }
.panel-encabezado { text-align: center; margin-bottom: 8px; }
.panel-encabezado h2 { margin: 0 0 10px; font-size: clamp(28px, 2vw, 34px); letter-spacing: -.6px; }
.panel-encabezado p { margin: 0; color: #aeb7c4; }
.formulario-login { gap: 16px; }
.campo-login { position: relative; display: flex; align-items: center; min-height: 58px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,9,15,.38); border-radius: 11px; color: #8e98a7; overflow: hidden; }
.campo-login:focus-within { border-color: rgba(239,63,67,.62); box-shadow: 0 0 0 4px rgba(239,63,67,.08); }
.campo-login > span { width: 52px; text-align: center; color: #9aa4b3; font-size: 22px; }
.campo-login input { flex: 1; min-width: 0; height: 58px; border: 0; outline: 0; background: transparent; color: #fff; padding: 0 16px 0 0; font-size: 17px; }
.campo-login input::placeholder { color: #8f98a6; }
.ver-password { width: 46px; height: 46px; margin-right: 6px; border: 0; background: transparent; color: #9aa4b3; cursor: pointer; }
.login-opciones { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #aab4c2; font-size: 15px; }
.login-opciones label { display: inline-flex; align-items: center; gap: 8px; }
.login-opciones input { width: 22px; height: 22px; accent-color: #ef3f43; }
.login-opciones button { border: 0; background: transparent; color: #ff4a50; cursor: pointer; }
.boton-login { width: 100%; min-height: 60px; border-radius: 10px; font-size: 17px; font-weight: 700; }
.separador-login { position: relative; display: grid; place-items: center; height: 34px; color: #a3acb9; }
.separador-login::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.separador-login span { position: relative; padding: 0 18px; background: rgba(12,17,24,.88); }
.crear-cuenta { width: 100%; min-height: 52px; border-color: rgba(239,63,67,.65); color: #ff4d54; background: rgba(239,63,67,.035); border-radius: 10px; font-weight: 700; }
.social-login { display: grid; gap: 16px; text-align: center; color: #aeb7c4; }
.social-login small { color: #aeb7c4; }
.social-login > div { display: flex; justify-content: center; gap: 36px; }
.social-login button { width: 64px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: 28px; font-weight: 900; cursor: pointer; }
.social-login button:nth-child(1) { color: #4285f4; }
.social-login button:nth-child(2) { color: #fff; }
.social-login button:nth-child(3) { color: #2f86ee; }
.ver-planes { width: 100%; color: #93c0ff; background: rgba(47,134,238,.05); border-color: rgba(47,134,238,.25); }
.nota-seguridad { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); color: #9aa4b3; }
.nota-seguridad p { margin: 0; max-width: 310px; color: #9aa4b3; line-height: 1.45; }
.planes-login { display: grid; gap: 12px; }
.planes-login article { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.045); }
.planes-login strong { color: #fff; }
.planes-login span { color: #ff4a55; font-weight: 800; }
.planes-login small { grid-column: 1 / -1; color: #aab4c2; }
@media (max-width: 1400px) {
  .inicio-superior, .inicio-contenido { width: min(100% - 70px, 100%); }
  .inicio-contenido { grid-template-columns: minmax(340px, 500px) minmax(360px, 1fr) minmax(360px, 470px); gap: 34px; }
  .foto-flotante.f1 { width: 250px; }
  .foto-flotante.f6 { width: 210px; }
}
@media (max-width: 1180px) {
  .inicio-contenido { grid-template-columns: 1fr minmax(360px, 500px); }
  .inicio-escena { order: 3; grid-column: 1 / -1; height: 520px; min-height: 480px; }
  .inicio-panel { justify-self: stretch; max-width: none; }
}
@media (max-width: 850px) {
  .inicio-nuevo-login .inicio-fondo { margin: 0; border-radius: 0; }
  .inicio-superior, .inicio-contenido { width: min(100% - 34px, 100%); }
  .inicio-superior { padding-top: 28px; }
  .inicio-marca strong { font-size: 25px; }
  .inicio-marca .marca-icono { width: 48px; height: 48px; }
  .inicio-idioma { min-width: 126px; }
  .inicio-contenido { grid-template-columns: 1fr; padding-bottom: 34px; }
  .inicio-copy h1 { font-size: 44px; }
  .inicio-beneficios article { grid-template-columns: 58px 1fr; }
  .beneficio-icono { width: 48px; height: 48px; font-size: 27px; }
  .inicio-escena { display: none; }
  .inicio-panel { padding: 22px; }
  .social-login > div { gap: 14px; }
}