*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#0a0f1c;
    color:white;
}

/* HERO */

.hero{
    height:400px;

    background-image:url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=1200');

    background-size:cover;
    background-position:center;

    position:relative;
}

.overlay{
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.6);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;
}

.overlay h1{
    font-size:60px;
    color:white;
    margin-bottom:15px;
}

.overlay p{
    max-width:700px;
    font-size:20px;
    color:#d7d7d7;
}

/* MENU */

nav{
    background:#111827;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:20px;

    padding:18px;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;

    transition:0.3s;
}

nav a:hover{
    color:#00c2ff;
}

/* CONTENIDO */

main{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

    padding:40px;
}

.card{
    background:#161f31;

    padding:25px;

    border-radius:15px;

    box-shadow:0 0 20px rgba(0,194,255,0.15);

    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card h2{
    color:#00c2ff;

    margin-bottom:15px;
}

.card p{
    color:#d0d0d0;

    line-height:1.6;
}

button{
    margin-top:20px;

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#00c2ff;

    color:black;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

button:hover{
    opacity:0.8;
}

/* RESPONSIVE */

@media(max-width:768px){

    .overlay h1{
        font-size:40px;
    }

    .overlay p{
        font-size:16px;
    }

    main{
        padding:20px;
    }

}
.training-image{

width:100%;

margin-top:20px;

border-radius:10px;

}

.atis-box{

background:#0d1726;

padding:15px;

border-radius:10px;

margin-top:15px;

line-height:1.8;

}

.audio-player{

width:100%;

margin-top:20px;

}
.tips-list{

margin-top:20px;

padding-left:20px;

line-height:2;

color:#d7d7d7;

}
.article-card{

line-height:1.9;

}

.article-card h2{

margin-top:30px;

}

.article-card p{

margin-top:15px;

color:#d7d7d7;

}
/* IFR Y VFR FULL WIDTH */

main{

display:flex !important;

flex-direction:column !important;

align-items:center !important;

gap:25px;

}

.card{

width:100% !important;

max-width:1000px !important;

}

/* VOR TRAINER */

#vorCanvas{

width:100% !important;

max-width:500px !important;

height:auto !important;

display:block;

margin:auto;

}

#pipevlogs-hi-sim{

width:100%;

}
/* VOR TRAINER FIX */

#vorWrapper{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-top:20px;

}

#vorCanvas{

width:100%;

max-width:420px;

height:auto;

background:black;

border-radius:50%;

border:6px solid #111827;

display:block;

}

/* RESET SOLO PARA EL VOR */

#vorCanvas,
#vorCanvas *{

font-family:Arial !important;

line-height:normal !important;

letter-spacing:normal !important;

}
.footer{
background:#06101f;
margin-top:60px;
padding-top:50px;
color:white;
}

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
padding:0 25px 40px;
}

.footer-section h2,
.footer-section h3{
margin-bottom:20px;
color:#35b7ff;
}

.footer-section p{
font-size:18px;
line-height:1.7;
color:#d1d5db;
}

.footer-section a{
display:block;
margin-bottom:12px;
color:#e5e7eb;
text-decoration:none;
font-size:18px;
transition:.2s;
}

.footer-section a:hover{
color:#35b7ff;
transform:translateX(3px);
}

.footer-bottom{
border-top:1px solid #1f2937;
text-align:center;
padding:20px;
font-size:16px;
color:#9ca3af;
}
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {

  h1 {
    font-size: 42px !important;
  }

  h2 {
    font-size: 30px !important;
  }

  p {
    font-size: 18px !important;
    line-height: 1.6;
  }

  .card {
    padding: 20px !important;
    margin: 15px !important;
  }

  button {
    width: 100%;
  }

}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.card,
.container,
section,
div {
  max-width: 100%;
}

img {
  max-width: 100% !important;
  height: auto;
  display: block;
}

table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

iframe {
  max-width: 100%;
}

@media (max-width: 768px) {

  body {
    padding: 0;
    margin: 0;
  }

  .card {
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 18px !important;
  }

  h1 {
    font-size: 34px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  p,
  li,
  a,
  button {
    font-size: 16px !important;
  }

  button {
    width: 100%;
  }

}
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .card {
    width: 95% !important;
    margin: 10px auto !important;
    padding: 18px !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  table {
    width: 100%;
    overflow-x: auto;
    display: block;
  }

  h1 {
    font-size: 34px !important;
  }

  h2 {
    font-size: 26px !important;
  }

}
.ad-container{
margin:25px auto;
text-align:center;
max-width:100%;
overflow:hidden;
}
/* Espacio para que los anuncios de Monetag no tapen el contenido */
body {
    padding-top: 80px !important; 
}

/* Si usas un menú fijo arriba, ajusta también el contenedor principal */
.container, main {
    margin-top: 10px;
}
.support-card{

background:linear-gradient(145deg,#07162b,#0b2447);

border:1px solid rgba(53,183,255,0.2);

padding:35px;

border-radius:22px;

margin-top:40px;

text-align:center;

}

.support-card h2{

color:#35b7ff;

font-size:38px;

margin-bottom:20px;

}

.support-card p{

color:#d1d5db;

font-size:20px;

line-height:1.8;

margin-top:15px;

}

#supportAdsBtn{

padding:16px 30px;

background:#35b7ff;

border:none;

border-radius:14px;

font-size:20px;

font-weight:bold;

cursor:pointer;

color:black;

transition:0.3s;

}

#supportAdsBtn:hover{

transform:scale(1.05);

}
.footer-support{

margin-top:40px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,0.1);

text-align:center;

color:#9ca3af;

font-size:16px;

line-height:1.8;

max-width:900px;

margin-left:auto;

margin-right:auto;

}
/* ===== ANUNCIOS PIPEVLOGS AVIATION ===== */

.ad-section{
    margin:40px auto;
    text-align:center;
    width:100%;
}

.ad-label{
    color:#9ca3af;
    font-size:12px;
    margin-bottom:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.ad-box{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border-radius:16px;
    padding:10px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    max-width:100%;
}

/* Banner grande desktop */
.desktop-banner{
    display:flex;
}

/* Ocultar banner grande en celular */
@media(max-width:768px){

    .desktop-banner{
        display:none;
    }

    .ad-box{
        padding:5px;
    }
}
/* ===== ADS PIPEVLOGS AVIATION ===== */

.ad-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:35px auto;
    overflow:hidden;
}

.ad-box{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:16px;
    padding:12px;
    text-align:center;
    max-width:100%;
}

.ad-label{
    color:#9ca3af;
    font-size:12px;
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.desktop728{
    display:flex;
    justify-content:center;
}

@media(max-width:768px){

    .desktop728{
        display:none;
    }

}
/* ===== FOOTER PIPEVLOGS AVIATION ===== */

.site-footer{
    margin-top:60px;
    background:#081120;
    border-top:1px solid rgba(255,255,255,0.05);
    padding:40px 20px;
    text-align:center;
}

.site-footer h3{
    color:#35b7ff;
    font-size:28px;
    margin-bottom:15px;
}

.site-footer p{
    color:#9ca3af;
    max-width:850px;
    margin:10px auto;
    line-height:1.7;
    font-size:16px;
}

.footer-ad{
    margin-top:30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.footer-copy{
    margin-top:30px;
    color:#6b7280;
    font-size:14px;
}
/* ===== PIPEVLOGS FOOTER ===== */

.site-footer{
    margin-top:60px;
    background:#081120;
    border-top:1px solid rgba(255,255,255,0.08);
    padding:40px 20px;
    text-align:center;
}

.site-footer h3{
    color:#35b7ff;
    font-size:28px;
    margin-bottom:15px;
}

.site-footer p{
    color:#9ca3af;
    max-width:850px;
    margin:12px auto;
    line-height:1.7;
    font-size:15px;
}

.footer-ad{
    margin-top:30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.footer-copy{
    margin-top:30px;
    color:#6b7280;
    font-size:14px;
}
/* ===== HERO PREMIUM ===== */

.hero-subtitle{
    max-width:700px;
    margin:20px auto;
    line-height:1.7;
    font-size:18px;
    color:#d1d5db;
}

.hero-buttons{
    margin-top:30px;
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.secondary-btn{
    background:transparent;
    border:1px solid #35b7ff;
    color:#35b7ff;
}

.secondary-btn:hover{
    background:#35b7ff;
    color:#081120;
}

.hero-domain{
    margin-top:25px;
    color:#35b7ff;
    font-size:15px;
    opacity:0.9;
}