/* Estilos generales */
body {
    margin: 0; padding: 0;
    background-image: url('./media/_fondo1.jpg'); /* Fondo vertical por defecto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    color: #ffffff !important;
}

/* Fondo para cuando el celular se pone horizontal o en PC */
@media (orientation: landscape) {
    body { background-image: url('./media/_fondo3.jpg'); }
}

/* Centra el bloque completo en la página */
.header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    align-items: center;
}

/* Este es el contenedor que define el ancho del logo y los textos */
.header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 80%;      /* Ajusta este % para que el logo tenga el tamaño deseado */
    max-width: 900px; /* Evita que el logo se haga gigante en monitores de PC */
	text-shadow: 1px 1px 2px #000;
}

/* Alinea los textos a los extremos del ancho del logo */
.header-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: white;
    font-family: Arial, sans-serif; /* O la que estés usando */
    margin-bottom: 5px; /* Espacio pequeño entre texto y logo */
}

.header-bottom {
    display: flex !important;
    flex-direction: row !important; /* Alinea en fila */
    justify-content: center !important; /* Centra el grupo en el medio */
    align-items: center !important; /* Alinea verticalmente los textos con el logo */
    gap: 30px; /* Espacio entre el texto y el logo */
    width: 100%;
    padding: 20px 0;
}

.header-bottom tit2 {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap; /* Evita que la fecha se parta en dos renglones */
}

.main-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* El logo ahora se acopla al ancho definido arriba */
.responsive-logo1 { max-width: 70%; height: auto; display: block; }
.responsive-logo2 { max-width: 25%; height: auto; display: block; }
.responsive-logo-bottom { max-width: 40% !important; height: auto; display: block; }

/* Ajuste para celulares: En pantallas chicas usamos casi todo el ancho */
@media (max-width: 768px) {
    .header-content { width: 95%; }
    .header-bottom { gap: 15px; }
    .header-bottom tit2 { font-size: 18px; }
    .responsive-logo-bottom { max-width: 40% !important; }
}

.centered {
    float: none !important;
    margin: 0 auto !important;
}

.video-section {
    padding-top: 10px;    /* El espacio que querías arriba */
    padding-bottom: 5px; /* Espacio abajo antes del nombre */
    clear: both;          /* Evita interferencias de capas anteriores */
}

video { max-width: 100% !important; height: auto; } /* object-fit: contain; */
.videogrande { max-width: 100% !important; height: auto !important; border-radius: 10px !important; object-fit: cover; border: 4px solid #f00; }
.xxxpreview { max-width:640px; max-height:400px; text-align: center; justify-content: center; margin: auto; }

p { color: #ffffff !important; }
a         {  }
a:link    { color: blue; background-color: transparent; text-decoration: none; }
a:visited { color: blue; background-color: transparent; text-decoration: none; }
a:hover   { color: red; background-color: transparent; text-decoration: none; }
a:active  { color: blue; background-color: transparent; text-decoration: none; }

div.static { position: static; border: 4px solid #000; background-color: #000; } /* #430098 */

tit1 { display: block; color: #fff; font-size: max(4vw, 28px); font-weight: bold; }
tit2 { display: block; color: #fff; font-size: max(2.4vw, 16px); font-weight: bold; }

faq1 { color: blue; display: block; font-size: 18px; margin-top: 6px; margin-left: 0; margin-right: 0; font-weight: bold; }
faq2 { color: black; display: block; font-size: 14px; margin-top: 8px; margin-left: 0; margin-right: 0; font-weight: bold; }
faq3 { color: #888; display: block; font-size: 13px; margin-top: 4px; margin-left: 0; margin-right: 0; font-weight: normal; }
nombre { background-color: #c00; border: 4px solid #c00; color: #fff; font-size: 16px; font-weight: bold; }

.pp-button { padding: 0 1.7em; font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.875em; line-height: 2.7; /* background: #009ee3; */
	background: #00aa20; border-radius: 0.2857142857142857em; color: #fff; cursor: pointer; border: 0; }
.responsive { width: 100%; max-width: 800px; height: auto; }
.responsive2 { width: 75%; max-width: 600px; height: auto; }
.formulario { background-color: #fff; color: #000; text-align: center; font-size: 18px; border-radius: 10px; display: inline-block; padding: 10px 15px;}
.boton { background-color: #fff; color: #000; text-align: center; font-size: 18px; border-radius: 10px; display: inline-block; padding: 10px 15px;}
input::placeholder { color: red; font-size: 1.2em; font-style: italic; }