@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    font-family:Inter,Arial,sans-serif;
    color:#eee;
    background:
        linear-gradient(180deg,rgba(5,8,14,.72),rgba(5,8,14,.97)),
        url('/assets/hero-art.jpg') center/cover fixed no-repeat;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 0%,rgba(198,151,62,.13),transparent 38%),
        radial-gradient(circle at 100% 100%,rgba(198,151,62,.07),transparent 35%);
}

a{
    color:inherit;
    text-decoration:none;
}

.lf-nav{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:16px 5%;
    background:rgba(5,8,14,.86);
    border-bottom:1px solid rgba(198,151,62,.25);
    backdrop-filter:blur(14px);
}

.lf-brand{
    font-family:Cinzel,serif;
    font-size:23px;
    font-weight:700;
    letter-spacing:3px;
    color:#d9b36a;
    white-space:nowrap;
}

.lf-menu{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.lf-menu a{
    padding:9px 13px;
    border-radius:7px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    color:#d7d7d7;
    transition:.2s;
}

.lf-menu a:hover,
.lf-menu a.active{
    color:#e5bd70;
    background:rgba(198,151,62,.10);
}

.lf-main{
    width:min(1200px,92%);
    margin:0 auto;
    padding:65px 0 80px;
}

.lf-title{
    text-align:center;
    margin-bottom:45px;
}

.lf-title h1{
    margin:0 0 10px;
    font-family:Cinzel,serif;
    font-size:42px;
    letter-spacing:5px;
    color:#e0b969;
}

.lf-title p{
    margin:0;
    color:#aeb0b5;
    letter-spacing:2px;
    font-size:12px;
}

.lf-card{
    background:linear-gradient(145deg,rgba(16,20,29,.94),rgba(8,11,17,.94));
    border:1px solid rgba(198,151,62,.24);
    border-radius:12px;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
}

.lf-card-head{
    padding:23px 26px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.lf-card-head h2{
    margin:0;
    font-family:Cinzel,serif;
    font-size:19px;
    letter-spacing:2px;
    color:#dfb867;
}

.lf-card-body{
    padding:26px;
}

.lf-gold{
    color:#dfb867;
}

.lf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 22px;
    border:1px solid rgba(198,151,62,.65);
    border-radius:7px;
    background:linear-gradient(180deg,#c99c4e,#9e7029);
    color:#090b10;
    font-weight:800;
    letter-spacing:1px;
    font-size:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.lf-btn:hover{
    filter:brightness(1.1);
}

.lf-muted{
    color:#969aa3;
}

.lf-footer{
    padding:30px 5%;
    text-align:center;
    color:#737780;
    font-size:11px;
    letter-spacing:1px;
    border-top:1px solid rgba(198,151,62,.14);
}

@media(max-width:800px){
    .lf-nav{
        align-items:flex-start;
        flex-direction:column;
    }

    .lf-menu{
        width:100%;
        justify-content:flex-start;
    }

    .lf-main{
        padding-top:40px;
    }

    .lf-title h1{
        font-size:30px;
    }
}

/* =========================================
   L2FRIENDLY - NAVEGACION SUPERIOR
   ========================================= */

.topbar{
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 42px;
    box-sizing:border-box;

    background:rgba(7,7,7,.94);
    border-bottom:1px solid rgba(216,180,90,.25);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 5px 25px rgba(0,0,0,.35);
}

.topbar .brand{
    color:#d8b45a;
    font-family:Cinzel,serif;
    font-size:24px;
    font-weight:800;
    letter-spacing:3px;
    white-space:nowrap;
    text-decoration:none;
}

.topbar nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
}

.topbar nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:0 17px;

    box-sizing:border-box;
    border:1px solid transparent;
    border-radius:5px;

    color:#d0d0d0;
    background:transparent;

    font-family:Inter,Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    line-height:1;
    text-decoration:none;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.topbar nav a:hover{
    color:#e3c46c;
    background:rgba(216,180,90,.08);
    border-color:rgba(216,180,90,.30);
    box-shadow:0 0 15px rgba(216,180,90,.08);
}

.topbar nav a.active{
    color:#111;
    background:linear-gradient(135deg,#b88a2b,#e1c36b);
    border-color:#e1c36b;
    box-shadow:0 0 18px rgba(216,180,90,.20);
}

.topbar nav a.active:hover{
    color:#111;
    background:linear-gradient(135deg,#c69a36,#e8cc76);
    transform:translateY(-1px);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:900px){

    .topbar{
        padding:12px 18px;
        flex-direction:column;
        gap:10px;
    }

    .topbar nav{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
    }

    .topbar nav a{
        min-height:34px;
        padding:0 11px;
        font-size:11px;
    }
}

@media(max-width:600px){

    .topbar .brand{
        font-size:20px;
    }

    .topbar nav{
        gap:4px;
    }

    .topbar nav a{
        padding:0 8px;
        font-size:10px;
        letter-spacing:.5px;
    }
}

/* =========================================================
   L2FRIENDLY - NAV FINAL UNIFICADA
   SOLO VISUAL - MAXIMA PRIORIDAD
   ========================================================= */

nav.lf-nav,
.lf-nav {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 42px !important;
}

nav.lf-nav .lf-brand,
.lf-nav .lf-brand {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #dfb867 !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

nav.lf-nav .lf-menu,
.lf-nav .lf-menu {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav.lf-nav .lf-menu > a,
.lf-nav .lf-menu > a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(223,184,103,.30) !important;
    border-radius: 4px !important;

    background: rgba(255,255,255,.025) !important;

    color: #bfc1c7 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.1px !important;
    line-height: 38px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    transform: none !important;
}

nav.lf-nav .lf-menu > a:hover,
.lf-nav .lf-menu > a:hover {
    color: #dfb867 !important;
    border-color: rgba(223,184,103,.65) !important;
    background: rgba(223,184,103,.07) !important;
    box-shadow: 0 0 12px rgba(223,184,103,.10) !important;
}

nav.lf-nav .lf-menu > a.active,
.lf-nav .lf-menu > a.active {
    color: #17130d !important;
    border-color: #dfb867 !important;
    background: linear-gradient(180deg,#dfb867 0%,#a8792d 100%) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.30) !important;
}

nav.lf-nav .lf-menu > a.active:hover,
.lf-nav .lf-menu > a.active:hover {
    color: #17130d !important;
    border-color: #efd080 !important;
    background: linear-gradient(180deg,#efd080 0%,#c8953d 100%) !important;
}

/* Movil */
@media (max-width: 900px) {
    nav.lf-nav,
    .lf-nav {
        height: auto !important;
        min-height: 72px !important;
        padding: 0 20px !important;
    }

    nav.lf-nav .lf-menu > a,
    .lf-nav .lf-menu > a {
        width: auto !important;
        min-width: 105px !important;
        max-width: none !important;
        padding: 0 10px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 700px) {
    nav.lf-nav,
    .lf-nav {
        height: auto !important;
        padding: 16px !important;
        flex-direction: column !important;
    }

    nav.lf-nav .lf-brand,
    .lf-nav .lf-brand {
        height: auto !important;
    }

    nav.lf-nav .lf-menu,
    .lf-nav .lf-menu {
        width: 100% !important;
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}


/* Ajuste visual: CARACTERÍSTICAS */
.lf-menu a[href="/caracteristicas.html"] {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}


/* =========================================================
   L2FRIENDLY - BARRA SUPERIOR FINAL UNIFICADA
   MISMA VISUAL EN LAS 5 PAGINAS
   ========================================================= */

.lf-nav {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 42px !important;
    margin: 0 !important;

    position: relative !important;
}

.lf-brand {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;

    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: Cinzel, Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}

.lf-menu {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;

    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.lf-menu > a {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    font-family: Cinzel, Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .7px !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border-radius: 7px !important;
}

/* CARACTERÍSTICAS necesita un poco más de espacio */
.lf-menu > a[href="/caracteristicas.html"] {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}

/* El activo es idéntico en todas las páginas */
.lf-menu > a.active {
    font-weight: 800 !important;
}

/* Evita que headers antiguos cambien la altura de la barra */
header.topbar,
header.top {
    margin: 0 !important;
}

/* Móvil */
@media (max-width: 900px) {
    .lf-nav {
        height: auto !important;
        min-height: 72px !important;
        padding: 12px 18px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .lf-brand {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    .lf-menu {
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .lf-menu > a {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 11px !important;
    }

    .lf-menu > a[href="/caracteristicas.html"] {
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
    }
}


/* =========================================================
   L2FRIENDLY
   NAVEGACION OFICIAL FINAL
   BASADA EN EL DISEÑO DE DONACIONES
   ========================================================= */

header.topbar {
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    box-sizing: border-box !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    z-index: 1000 !important;

    background: rgba(7,10,17,.88) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;

    backdrop-filter: blur(12px) !important;
}


/* -------------------------
   BARRA
   ------------------------- */

header.topbar .lf-nav {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 0 42px !important;

    gap: 0 !important;
}


/* -------------------------
   LOGO
   ------------------------- */

header.topbar .lf-brand {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;

    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #dfb867 !important;

    font-family: Cinzel, Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}


/* -------------------------
   MENU
   ------------------------- */

header.topbar .lf-menu {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 8px !important;
}


/* -------------------------
   BOTONES
   ------------------------- */

header.topbar .lf-menu > a {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    border: 1px solid rgba(223,184,103,.30) !important;
    border-radius: 4px !important;

    background: rgba(255,255,255,.025) !important;
    color: #bfc1c7 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;

    letter-spacing: 1.1px !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition: all .2s ease !important;
}


/* -------------------------
   CARACTERISTICAS
   ------------------------- */

header.topbar .lf-menu > a[href="/caracteristicas.html"] {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}


/* -------------------------
   HOVER
   ------------------------- */

header.topbar .lf-menu > a:hover {
    color: #dfb867 !important;
    border-color: rgba(223,184,103,.65) !important;
    background: rgba(223,184,103,.07) !important;
    box-shadow: 0 0 12px rgba(223,184,103,.10) !important;
}


/* -------------------------
   ACTIVO
   ------------------------- */

header.topbar .lf-menu > a.active {
    color: #17130d !important;
    border-color: #dfb867 !important;

    background:
        linear-gradient(
            180deg,
            #dfb867 0%,
            #a8792d 100%
        ) !important;

    box-shadow: 0 3px 12px rgba(0,0,0,.30) !important;
}


header.topbar .lf-menu > a.active:hover {
    color: #17130d !important;
    border-color: #efd080 !important;

    background:
        linear-gradient(
            180deg,
            #efd080 0%,
            #c8953d 100%
        ) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    header.topbar {
        height: auto !important;
        min-height: 72px !important;
        max-height: none !important;
    }

    header.topbar .lf-nav {
        height: auto !important;
        min-height: 72px !important;
        max-height: none !important;

        padding: 12px 18px !important;

        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    header.topbar .lf-brand {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;

        height: 48px !important;
        min-height: 48px !important;
    }

    header.topbar .lf-menu {
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;

        justify-content: center !important;
        flex-wrap: wrap !important;

        gap: 6px !important;
    }

    header.topbar .lf-menu > a {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        font-size: 11px !important;
    }

    header.topbar .lf-menu > a[href="/caracteristicas.html"] {
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
    }
}


/* =========================================================
   L2FRIENDLY - EVENTOS PREMIUM
   ========================================================= */

.lf-events {
  width: 100%;
  max-width: 1280px;
  margin: 70px auto 80px;
  padding: 0 28px;
  box-sizing: border-box;
}

.lf-events-head {
  text-align: center;
  margin-bottom: 42px;
}

.lf-section-kicker {
  display: block;
  margin-bottom: 10px;
  color: #dfb867;
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.lf-events-head h2 {
  margin: 0;
  color: #f1dfb2;
  font-family: Cinzel, Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 5px;
}

.lf-events-head p {
  margin: 14px auto 0;
  max-width: 650px;
  color: #9ea3ad;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.lf-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.lf-event-card {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  padding: 34px 30px;
  box-sizing: border-box;
  border: 1px solid rgba(223,184,103,.20);
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 10%, rgba(223,184,103,.10), transparent 34%),
    linear-gradient(145deg, rgba(16,19,27,.98), rgba(7,9,14,.98));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.lf-event-card:hover {
  transform: translateY(-6px);
  border-color: rgba(223,184,103,.55);
  box-shadow: 0 22px 60px rgba(0,0,0,.40);
}

.lf-event-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dfb867, transparent);
}

.lf-event-icon {
  margin-bottom: 22px;
  font-size: 38px;
  line-height: 1;
}

.lf-event-content {
  position: relative;
  z-index: 1;
}

.lf-event-label {
  display: block;
  margin-bottom: 9px;
  color: #b18b4c;
  font-family: Inter, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.lf-event-content h3 {
  margin: 0 0 12px;
  color: #dfb867;
  font-family: Cinzel, Georgia, serif;
  font-size: 30px;
  letter-spacing: 2px;
}

.lf-event-content h4 {
  margin: 0 0 20px;
  color: #eee7d7;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .8px;
}

.lf-event-content p {
  margin: 0 0 17px;
  color: #aeb2ba;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.8;
}

.lf-event-content .lf-event-highlight {
  color: #d8c49b;
  font-weight: 600;
}

.lf-event-content > strong {
  display: block;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid rgba(223,184,103,.15);
  color: #dfb867;
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1.3px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1050px) {
  .lf-events-grid {
    grid-template-columns: 1fr;
  }

  .lf-event-card {
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .lf-events {
    margin-top: 45px;
    padding: 0 16px;
  }

  .lf-events-head h2 {
    font-size: 32px;
    letter-spacing: 3px;
  }

  .lf-event-card {
    padding: 28px 23px;
  }

  .lf-event-content h3 {
    font-size: 26px;
  }
}