/* Estilos base adaptados del Welcome.vue (colores, tipografía y fondo de puntos) */
:root{
    --bg:#f3f4f6;
    --bg-dark:#0b1220;
    --card-bg:#ffffff;
    --card-bg-dark:#23232b;
    --text:#111827;
    --muted:#6b7280;
    --primary:#FF2D20; /* color rojo principal tomado del Welcome.vue */
    --shadow: 0 6px 28px rgba(0,0,0,0.08);
}

html,body{
    height:100%;
    margin:0;
    padding:0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* selección como en Welcome.vue */
::selection{ background: var(--primary); color: #fff; }

/* Fondo de puntos (igual que Welcome.vue) */
.main-bg{
    min-height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.04)'/%3E%3C/svg%3E");
    background-repeat:repeat;
    background-color:var(--bg);
}

/* Contenedor principal similar al Welcome.vue */
.central-container{
    max-width:1200px;
    width:100%;
    margin:40px auto;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
    border-radius:24px;
    box-shadow: 0 20px 60px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    padding:48px 42px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.header-block{ text-align:center; margin-bottom:32px; }
.profile-pic{
    width:130px; height:130px; border-radius:50%; object-fit:cover; margin-bottom:12px; border:5px solid var(--primary); background:#fff;
}
.header-block h1{
    margin:0 0 8px 0;
    font-size:2.6rem;
    color:var(--primary);
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}
.presentation{
    color:var(--muted);
    font-size:1rem;
    margin:0;
}

/* Grid - conservamos tamaño de cards pero visualmente más parecido */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(520px,1fr)); gap:36px; width:100%; max-width:1100px; }

.card{
    display:flex;
    align-items:flex-start;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
    border-radius:28px;
    box-shadow: 0 18px 40px rgba(16,9,32,0.08), 0 6px 18px rgba(12,8,20,0.06);
    padding:28px 26px;
    transition: transform .18s, box-shadow .18s, background .15s;
    min-height:170px;
    border: 1px solid rgba(15, 15, 15, 0.03);
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 30px 70px rgba(16,9,32,0.12); }

.icon-block{ width:96px; height:96px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#fafafa,#f2f2f6); border-radius:20px; margin-right:22px; flex-shrink:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.icon-block img{ width:56px; height:56px; }

.card-content{ flex:1; display:flex; flex-direction:column; gap:8px; }
.card-content h2{ margin:0; font-size:1.2rem; color:var(--primary); font-weight:800; letter-spacing:1px; }
.card-content p{ margin:0; color:var(--muted); font-size:1rem; }

/* Adjust embed containers to look like cards content */
.card iframe, .behold-embed, .behold-embed behold-widget, .tiktok-embed-wrapper blockquote.tiktok-embed{
    width:100%; height:360px; border-radius:14px; border:none; display:block; overflow:hidden; background:#0b0b0b;
}

/* CTA style (inspired by Wiki Geek) */
.cta-btn{
    display:inline-block; padding:10px 18px; border-radius:999px; background:linear-gradient(90deg,var(--primary),#ff6b5b); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 8px 30px rgba(255,45,32,0.12); border:0;
}

/* Responsive: mantener proporciones, cards apiladas en móvil */
@media (max-width:900px){
    .central-container{ padding:22px 16px; }
    .cards-grid{ grid-template-columns:1fr; gap:20px; }
    .card{ padding:18px 12px; min-height:140px; }
    .icon-block{ width:64px; height:64px; margin-right:14px; border-radius:16px; }
    .icon-block img{ width:40px; height:40px; }
    .card iframe, .behold-embed behold-widget, .tiktok-embed-wrapper blockquote.tiktok-embed{ height:240px; }
}

/* Dark mode: igual que Welcome.vue */
@media (prefers-color-scheme: dark){
    :root{ --bg: #0f1724; }
    body{ background: #0b1220; color:#e5e7eb; }
    .main-bg{ background-color:#0b1220; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E"); }
    .central-container{ background: rgba(24,25,31,0.95); box-shadow: none; }
    .card{ background: var(--card-bg-dark); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
    .icon-block{ background:#1f2937; }
    .card-content h2{ color:var(--primary); }
    .card-content p, .card-content a{ color:#d1d5db; }
}

/* Small helpers to keep visual parity with Welcome.vue */
.text-muted{ color:var(--muted); }
.center{ text-align:center; }

/* End of adapted styles */