/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}

html {
  overflow-x: hidden;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
  box-sizing: border-box;
}
*,*:before,*:after {
  box-sizing: inherit;
}

body {
  background-color: #dce8ff;
  font-family: "Open Sans", sans-serif;
}
/**glovales **/
.barra .contenedor {
  display: flex;
  flex-wrap: wrap; /* permite que bajen elementos */
  align-items: center;
  justify-content: space-between;
}

@media only screen and (min-width: 480px) {
  .contenedor {
    width: 95%;
  }
}

@media only screen and (min-width: 768px) {
  .contenedor {
    width: 90%;
  }
}

@media only screen and (min-width: 992px) {
  .contenedor {
    width: 90%;
  }
}

.seccion {
  padding: 30px 0;
}

.seccion p {
  font-size: 1.2em;
  text-align: center;
}

h2 {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
}

h2::after {
  content: '';
  margin: 0 auto;
  background-image: url(../img/separadores.png);
  height: 50px;
  width: 100px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

}

h3 {
  font-size: 1.5em;
  color: #da002b;
  font-family: 'PT Sans', sans-serif;
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;

}

.button {
  background-color: #da002b;
  padding: 10px 40px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  text-decoration: none;
  font-size: 1.2em;
  margin-top: 20px;
  display: inline-block;
  transition: all .3s ease;
  border: 2px solid #da002b;

}

.button.hollow {
  background-color: transparent;
  color: #da002b;
  border: 2px solid #da002b;
}

.button.hollow:hover {
  background-color: #da002b;
  color: #fff;
}

.button.trasparente {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.button.trasparente:hover {
  border: 2px solid #da002b;
  background-color: #da002b;
  color: #fff;
}


.button:hover {
  background-color: #a61414;
}

.button.hollow:hover {
  background-color: #da002b !important;
  color: #fff !important;
}

.button.trasparente:hover {
  border: 2px solid #da002b !important;
  background-color: #da002b !important;
  color: #fff !important;
}

/**header**/
div.hero {
  background-image: url(../img/cielonoche.png);
  height: 100vh;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;
  position: relative;
}
.logos-laterales {
  position: absolute;
  top: 20px;
  width: 100%;
  pointer-events: none;
}

.logo-izq {
  position: absolute;
  left: 20px;
  width: 180px;
}

.logo-der {
  position: absolute;
  right: 20px;
  width: 180px;
}
@media (max-width:768px) {
  .logo-izq {
    width: 120px;
    left: 20px;   /* más pegado */
  }

  .logo-der {
    width: 120px;
    right: 20px;  /* más pegado */
  }
}


@media (max-width:768px) {
  nav.redes-sociales {
    margin-top: 120px; /*  baja debajo de logos */
  }
}


div.contenido-header {
  padding-top: 80px;
}

@media only screen and (min-width:768px) {
  div.contenido-header {
    padding-top: 140px;
  }
}

nav.redes-sociales {
  text-align: center;
}

nav.redes-sociales a {
  display: inline-flex;          /* mejor que inline-block */
  justify-content: center;
  align-items: center;

  width: 60px;
  height: 60px;

  border-radius: 60%;
  background-color: transparent;
  color: #fff;

  transition: all 0.3s ease;
  
}

nav.redes-sociales a i {
  font-size: 2rem;
}
nav.redes-sociales a:hover {
  background-color: #da002b; /* rojo */
  transform: scale(1.1);
  color: #fff;
}
nav.redes-sociales a:last-child {
  margin-right: 0;
}
div.informacion-evento {
  text-align: center;
  color: #ffff;
}

@media only screen and (min-width:768px) {
  div.informacion-evento {
    width: 70%;
    margin: 0 auto;
    margin-top: 50px;
  }
  
}
div.informacion-evento p {
  margin: 0;
  display: inline;
  font-size: 15px;
  text-transform: uppercase;
}
div.informacion-evento p i {
  color: #da002b;
  font-size: 2rem;
}
div.informacion-evento .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p.slogan {
  text-transform: none!important;
}
p.slogan span {
  font-weight: bold;
}
h1.nombre-sitio {
  font-size: 4.5vw;
  text-transform: uppercase;
  font-family: "Boldonse", system-ui;
}
h1.nombre-sitio {
  background: linear-gradient(
    90deg,
    #0089e4,
    #2597f4,
    #4fafff,
    #f00e1c,
    #ec323d,
    #0089e4
  );

 background-size: 300%;

  background-clip: text;              /* 👈 estándar */
  -webkit-background-clip: text;      /* 👈 compatibilidad */

  color: transparent;                 /* 👈 estándar */
  -webkit-text-fill-color: transparent;

  animation: ola 5s linear infinite;
}

@keyframes ola {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 300%;
  }
}

p.slogan span {
  background: linear-gradient(90deg, #f00e1c, #ec323d, #f00e1c);
  background-size: 300%;

  background-clip: text;              /* 👈 estándar */
  -webkit-background-clip: text;      /* 👈 compatibilidad */

  color: transparent;                 /* 👈 estándar */
  -webkit-text-fill-color: transparent;

  animation: ola 10s linear infinite;
}


@media only screen and (min-width:768px) {
  h1.nombre-sitio {
    font-size: 4vw;
    margin: 0;
    line-height: 1;
  }
}

@media (max-width: 768px) {
  h1.nombre-sitio {
    font-size: 6.5vw;
  }
}

/* ══════════════════════════════════════
   BARRA — debajo del hero, sube al scroll
══════════════════════════════════════ */
div.barra {
  position: relative;
  z-index: 1000;
  background: linear-gradient(135deg, #03045e 0%, #0077b6 100%);
  border-bottom: 1px solid rgba(0,137,228,0.4);
  padding: 12px 0;
  transition: all 0.4s ease;
}

div.barra.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(3,4,94,0.97) 0%, rgba(0,119,182,0.97) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* ── NAVEGACION PC ── */
nav.navegacion-principal {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav.navegacion-principal a {
  font-family: "Oswald", sans-serif;
  color: rgba(255,255,255,0.9);
  font-size: 0.88em;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  white-space: nowrap;
}

nav.navegacion-principal a:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* quitar color rojo de inscripciones */
nav.navegacion-principal a:last-child {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.9);
  font-weight: 400;
}

nav.navegacion-principal a:last-child:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  box-shadow: none;
  transform: none;
}

nav.navegacion-principal a.nav-activo {
  background: rgba(218,0,43,0.25) !important;
  border-color: #da002b !important;
  color: #fff !important;
}

/* ── HAMBURGUESA ── */
div.menu-movil {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;
}

div.menu-movil:hover {
  background: rgba(255,255,255,0.1);
}

div.menu-movil span {
  height: 2px;
  background: #fff;
  display: block;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

div.menu-movil.activo span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
div.menu-movil.activo span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
div.menu-movil.activo span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MENU MOVIL ── */
@media (max-width: 767px) {
  div.menu-movil {
    display: flex;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
  }

  .barra .contenedor {
    position: relative;
    justify-content: center;
    padding: 4px 0;
  }

nav.navegacion-principal {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 300px;
    background: rgba(0, 30, 80, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 10000;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(0,137,228,0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-height: 80vh;
    overflow-y: auto;
  }

  nav.navegacion-principal.activo {
    display: flex;
    animation: menuEntrar 0.25s ease;
  }

  nav.navegacion-principal a {
    font-size: 0.88em;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.05);
  }

  nav.navegacion-principal a:hover,
  nav.navegacion-principal a.nav-activo {
    background: rgba(0,137,228,0.3) !important;
    border-color: rgba(0,137,228,0.5) !important;
    color: #fff !important;
  }

  @keyframes menuEntrar {
      from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
}

@media (min-width: 768px) {
  div.menu-movil {
    display: none !important;
  }
}
body.menu-abierto > *:not(.navegacion-principal):not(#menu-overlay) {
  filter: blur(4px);
}

body:not(.menu-abierto) > * {
  filter: none;
  transition: filter 0.3s;
}
body.menu-abierto .barra {
  filter: none !important;
}
#menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.25);

  z-index: 9997;
}

/* ── COMPENSAR BARRA EN PÁGINAS INTERIORES ── */
body.pagina-interior {
  padding-top: 0;
}



/* ---- flecha deslizar ---- */
div.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
}

p.scroll-texto {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75em !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 6px 0;
  display: block !important;
  color: rgba(255,255,255,0.6);
}

div.scroll-flechas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

div.scroll-flechas i {
  font-size: 0.9em;
  animation: bajar 1.5s ease infinite;
  color: rgba(255,255,255,0.6);
}

div.scroll-flechas i:nth-child(1) { animation-delay: 0s;    opacity: 0.3; }
div.scroll-flechas i:nth-child(2) { animation-delay: 0.2s;  opacity: 0.6; }
div.scroll-flechas i:nth-child(3) { animation-delay: 0.4s;  opacity: 1;   }

@keyframes bajar {
  0%   { transform: translateY(-4px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(4px);  opacity: 0; }
}

/* ---- enlace activo en la barra ---- */
nav.navegacion-principal a.nav-activo {
  background-color: #da002b !important;
  border-color: #da002b !important;
  color: #fff !important;
}
/* ── NOMBRE DEL SITIO — más pequeño en escritorio ── */
h1.nombre-sitio {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4vw;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #0089e4, #2597f4, #4fafff, #f00e1c, #ec323d, #0089e4);
  background-size: 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ola 5s linear infinite;
  margin: 0;
  line-height: 1;
}

@media (max-width: 768px) {
  h1.nombre-sitio {
    font-size: 7vw;
  }
}

.lema-txt {
  font-family: 'Righteous', cursive;
  font-size: 5.5em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: block;
  margin-top: 20px;
  line-height: 1.1;

  background: linear-gradient(
    90deg,
    #fe1100,
    #fe875d,
    #ffffff,
    #fe875d,
    #fe1100
  );
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: lema-brillo 6s linear infinite;

  /* delineado azul marino fino */
  -webkit-text-stroke: 0.1px #0a1628;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 0.1px #0a1628);
}

@keyframes lema-brillo {
  0%   { background-position: 0%; }
  100% { background-position: 400%; }
}

@keyframes lema-pulso {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.03); }
}

.versiculo-txt {
  font-family: 'Righteous', cursive;
  font-size: 1em;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  color: rgba(255,255,255,0.8);
  -webkit-text-fill-color: rgba(255,255,255,0.8);
  background: none;
  animation: none;

  /* contorno oscuro */
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);

}
.versiculo-txt::before,
.versiculo-txt::after {
  content: '';
  display: block;
  height: 1.5px;
  width: 35px;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .lema-txt {
    font-size: 3.8em;
    letter-spacing: 3px;
    font-weight: 900;
  }
  .versiculo-txt {
    font-size: 0.8em;
    letter-spacing: 2px;
  }
  .versiculo-txt::before,
  .versiculo-txt::after {
    width: 20px;
  }
}

/* ══════════════════════════════════════
   SECCIÓN INVITACIÓN
══════════════════════════════════════ */
.seccion-invitacion {
  background: linear-gradient(135deg, #03045e 0%, #0077b6 60%, #37375e 100%);
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* círculo decorativo de fondo */
.seccion-invitacion::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(254,17,0,0.08);
  pointer-events: none;
}
.seccion-invitacion::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(0,137,228,0.1);
  pointer-events: none;
}

.inv-contenido {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* tag superior */
.inv-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78em;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 16px;
}

/* título */
.inv-titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 2.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 24px;
  text-align: center;
}

/* quitar el ::after del h2 global */
.inv-titulo::after { display: none; }

/* texto */
.inv-texto {
  font-family: 'PT Sans', sans-serif;
  font-size: 1em;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 40px;
  text-align: center !important;
}

/* datos: fecha, lugar, lema */
.inv-datos {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.inv-dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.inv-dato i {
  font-size: 1.6em;
  color: #fe875d;
  margin-bottom: 4px;
}

.inv-dato-lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.inv-dato-val {
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

/* botón */
.inv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #da002b;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 50px;
  transition: all 0.3s ease;
  border: 2px solid #da002b;
}

.inv-btn:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(218,0,43,0.4);
}

/* responsive */
@media (max-width: 768px) {
  .seccion-invitacion { padding: 50px 16px; }
  .inv-titulo { font-size: 1.8em; }
  .inv-datos  { gap: 20px; }
  .inv-dato i { font-size: 1.3em; }
  .inv-dato-val { font-size: 0.9em; }
}
.inv-btn-deportivo {
  background: linear-gradient(135deg, #1a7a1a, #25d366);
  border-color: #1a7a1a;
  margin-top: 12px;
  font-size: 0.88em;
  padding: 12px 28px;
}

.inv-btn-deportivo:hover {
  background: transparent;
  border: 2px solid #25d366;
  color: #25d366;
  box-shadow: 0 8px 24px rgba(37,211,102,0.35);
}
@media (min-width: 768px) {
  nav.navegacion-principal {
    position: static !important;
    display: flex !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 4px !important;
    animation: none !important;
  }
}
@media (max-width: 480px) {
  #modal-equipo {
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  #modal-equipo-overlay {
    padding: 8px !important;
  }
}
/* ── BLUR FONDO MODAL EQUIPO ── */


body:not(.modal-abierto) > * {
  filter: none;
  transition: filter 0.3s;
}
/* ══════════════════════════════════════
   PROGRAMA
══════════════════════════════════════ */
section.programa {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.contenedor-video video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

div.contenedor-video { max-width: 100%; overflow-x: hidden; }

div.contenido-programa {
  position: relative;
  width: 100%;
  padding: 50px 0 60px;
}

/* ── CAJA DEL PROGRAMA ── */
div.programa-evento {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 28px 24px 32px;
  width: 90%;
  margin: 0 auto;
}
div.programa-evento h2 {
  color: #03045e;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.evento-tema {
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
@media (min-width: 768px) {
  div.programa-evento { width: 70%; }
}
@media (min-width: 992px) {
  div.programa-evento { width: 50%; }
}

/* título del programa */
div.programa-evento h2 {
  color: #fff;
  font-size: 1.4em;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
div.programa-evento h2::after { display: none; }

/* ── MENÚ DÍAS ── */
nav.menu-programa {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 2px solid rgba(218,0,43,0.5);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

nav.menu-programa a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(3,4,94,0.7); 
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  flex: 1;
  justify-content: center;
}

nav.menu-programa a i {
  color: rgba(3,4,94,0.5);
  font-size: 1em;
}

nav.menu-programa a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

nav.menu-programa a.activo {
  background: #da002b;
  color: #fff;
  border-radius: 6px;
}

nav.menu-programa a.activo i { color: #fff; }

/* ── LISTA DE EVENTOS ── */
.info-curso {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.info-curso .button {
  align-self: flex-end;
  margin-top: 16px;
  font-size: 0.85em;
  padding: 8px 20px;
}

/* ── TARJETA DE EVENTO ── */
div.detalle-evento {
  padding: 14px 0;
  border-bottom: 1px solid rgba(3,4,94,0.15);
}

div.detalle-evento:last-of-type { border-bottom: none; }

/* header del evento: tipo + hora */
.evento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.evento-tipo {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #da002b;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
}

.evento-hora {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85em;
  color: #03045e;
  letter-spacing: 1px;
}

.evento-hora i { color: #03045e; margin-right: 4px; }

/* tema */
.evento-tema {
  font-family: 'PT Sans', sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #03045e;
  margin: 6px 0 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.evento-tema i { color: #aacfdd; margin-top: 3px; flex-shrink: 0; }

/* expositor */
.evento-expositor {
  font-size: 0.88em;
  color: #03045e;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evento-expositor i { color: #03045e; flex-shrink: 0; }

.exp-rango {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #03045e;
  background: rgba(48, 57, 222, 0.15);
  padding: 1px 6px;
  border-radius: 3px;
}

/* moderador */
.evento-moderador {
  font-size: 0.82em;
  color: rgba(3,4,94,0.6);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evento-moderador i { color: rgba(3,4,94,0.4); }

/* ── RESPONSIVE CELULAR ── */
@media (max-width: 767px) {
  div.programa-evento {
    width: 92%;
    padding: 20px 16px 24px;
    border-radius: 12px;
  }

  nav.menu-programa a {
    font-size: 0.78em;
    padding: 5px 8px;
    letter-spacing: 0.5px;
  }

  nav.menu-programa a i { font-size: 0.9em; }

  .evento-tipo { font-size: 0.72em; }
  .evento-hora { font-size: 0.78em; }
  .evento-tema { font-size: 0.92em; }
  .evento-expositor { font-size: 0.82em; }
  .evento-moderador { font-size: 0.76em; }

  div.detalle-evento { padding: 10px 0; }
}



/* ══════════════════════════════════════
   SECCIÓN COMISIONES
══════════════════════════════════════ */
.seccion-comisiones {
  background: linear-gradient(135deg, #03045e 0%, #0077b6 60%, #37375e 100%);
  padding: 70px 20px;
  text-align: center;
  position: relative;
  margin-top: -1px;
  
}
.com-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78em;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: block;
  margin-bottom: 10px;
}

.com-titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 40px;
  letter-spacing: 2px;
}
.com-titulo::after { display: none; }

/* grid de cards */
.com-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  text-align: left;
}

/* card */
.com-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(3,4,94,0.08);
  border: 1px solid rgba(3,4,94,0.07);
  transition: transform 0.25s, box-shadow 0.25s;
}

.com-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(3,4,94,0.14);
}

/* header de la card */
.com-card-header {
  background: linear-gradient(135deg, #03045e, #0077b6);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.com-icono {
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.com-icono i {
  font-size: 1.2em;
  color: #fff;
}

.com-nombre {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

/* lista encargados */
.com-encargados {
  list-style: none;
  padding: 12px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.com-encargado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f4ff;
}

.com-encargado:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.com-enc-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88em;
  color: #37375e;
  font-weight: 600;
}

.com-enc-info i {
  color: #0077b6;
  font-size: 0.85em;
}

/* botón WhatsApp */
.com-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-size: 0.78em;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}

.com-wa-btn i { font-size: 1em; }

.com-wa-btn:hover {
  background: #128c4a;
  transform: scale(1.04);
}

.com-sin-enc {
  padding: 14px 16px;
  font-size: 0.85em;
  color: #9ca3af;
  font-style: italic;
}

/* responsive */
@media (max-width: 768px) {
  .seccion-comisiones { padding: 50px 14px; }
  .com-titulo { font-size: 1.6em; }
  .com-grid { grid-template-columns: 1fr; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .com-grid { grid-template-columns: repeat(2, 1fr); }
}
/**invitados**/

/**invitados**/
section.invitados {
  padding: 60px 20px;
  background: linear-gradient(135deg, #03045e 0%, #0077b6 60%, #37375e 100%);
  position: relative;
  overflow: hidden;
}

section.invitados::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(254,17,0,0.08);
  pointer-events: none;
}

section.invitados::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(0,137,228,0.1);
  pointer-events: none;
}

section.invitados h2 {
  color: #fff;
  position: relative;
  z-index: 1;
}


section.invitados .lista-invitados {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  section.invitados { padding: 40px 16px; }
}

ul.lista-invitados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 20px;
}

@media only screen and (min-width: 768px) {
  ul.lista-invitados {
    grid-template-columns: repeat(3, 1fr);
  }
}

ul.lista-invitados li {
  padding: 0;
}

div.invitado {
  position: relative;
  overflow: hidden;
}

div.invitado img {
  width: 100%;
  display: block;
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);  
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;  
}

div.invitado:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);  
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
}

div.invitado p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px 10px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.55);
  width: 100%;
  text-align: left;
  font-family: 'Oswald', sans-serif;
  color: #da002b;
  text-transform: uppercase;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;   
}

div.invitado:hover p {
  bottom: -80px;
  opacity: 0;
}
.contenedor {
  margin: 0 auto;
}

/**contados**/

.parallax::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
div.contador {
  position: relative;
  height: auto;
}

div.contador::before {
  background-image: url(../img/bg-resumen.jpg);
  content: '';
}

ul.resumen-evento {
  position: relative;
  padding: 80px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 20px;
}

@media only screen and (min-width: 768px) {
  ul.resumen-evento {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

ul.resumen-evento li {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  letter-spacing: 2px;
}

p.numero {
  color: #da002b;
  font-size: 4em;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  display: block;
  margin: 0 0 8px 0;
  line-height: 1;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/**tabla de precios**/
section.precios {
  padding: 60px 20px;
  background: linear-gradient(180deg, #03045e 0%, #0077b6 100%);
  position: relative;
}

section.precios::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(254,17,0,0.08);
  pointer-events: none;
}

section.precios::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(0,137,228,0.1);
  pointer-events: none;
}

section.precios h2 {
  color: #fff;
  position: relative;
  z-index: 1;
}


section.precios .contenedor,
section.precios .aviso-inscripcion,
section.precios ul.lista-precios {
  position: relative;
  z-index: 1;
}

section.precios div.aviso-inscripcion {
  background: rgba(255,255,255,0.1);
  border-left: 4px solid #da002b;
  color: #fff;
}

section.precios div.aviso-inscripcion i {
  color: #fe875d;
}

section.precios a.link-inscripcion {
  color: #fe875d;
}

@media (max-width: 768px) {
  section.precios { padding: 40px 16px; }
}

ul.lista-precios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 300px;      /* limita el ancho en celular */
  margin: 0 auto;        /* centra la lista */
}

@media only screen and (min-width: 768px) {
  ul.lista-precios {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;    /* ancho máximo en pc, más estrecho que el full */
  }
}

ul.lista-precios > li {
  padding: 10px;
}

div.tabla-precio {
  border: 1px solid #e1e1e1;
  background-color: #fff;
  padding: 30px;
  text-align: center;
  transition: all .3s ease;
}

div.tabla-precio:hover {
  transform: scale(1.05);
  border: 2px solid #03045e;
  box-shadow: 0px 0px 50px #666;
}

div.tabla-precio ul li {
  font-family: 'PT sans', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #868686;
  line-height: 26px;
}

div.tabla-precio ul li::before {
  font-family: 'FontAwesome';
  display: inline-block;
  vertical-align: top;
  padding: 0 5px;
  font-size: 20px;
  color: green;
  -webkit-font-smoothing: antialiased;
  content: '\f00c';
}

div.tabla-precio h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
}

div.tabla-precio p.numero {
  color: #03045e;
  margin: 20px 0;
}
/* aviso inscripcion */
div.aviso-inscripcion {
  background-color: #e8f0fe;
  border-left: 4px solid #03045e;
  padding: 14px 20px;
  margin-bottom: 25px;
  border-radius: 4px;
  color: #03045e;
  font-size: 0.95em;
  text-align: center;
}

div.aviso-inscripcion i {
  color: #da002b;
  margin-right: 8px;
}

a.link-inscripcion {
  color: #da002b;
  font-weight: bold;
  text-decoration: underline;
}

/* precio original tachado en index */
p.precio-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  text-align: center;
  margin: 5px 0 0 0;
}

/* badge descuento en index */
div.badge-descuento {
  background-color: #da002b;
  color: #fff;
  text-align: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
  margin: 8px auto;
  display: inline-block;
}

p.fecha-descuento {
  font-size: 0.78em;
  color: #666;
  text-align: center;
  margin: 4px 0 10px 0;
}

/* barra de cupos */
div.barra-cupos {
  width: 100%;
  height: 8px;
  background-color: #e1e1e1;
  border-radius: 10px;
  margin: 12px 0 6px 0;
  overflow: hidden;
}

div.barra-cupos-relleno {
  height: 100%;
  border-radius: 10px;
  transition: width .5s ease;
}

div.barra-cupos.cupo-alto  div.barra-cupos-relleno { background-color: #2e7d32; }
div.barra-cupos.cupo-medio div.barra-cupos-relleno { background-color: #f9a825; }
div.barra-cupos.cupo-bajo  div.barra-cupos-relleno { background-color: #da002b; }

/* texto cupos */
p.texto-cupos {
  font-size: 0.85em;
  text-align: center;
  margin-bottom: 12px;
}

p.texto-cupos.cupo-alto  { color: #2e7d32; }
p.texto-cupos.cupo-medio { color: #f9a825; }
p.texto-cupos.cupo-bajo  { color: #da002b; }

p.texto-cupos strong {
  font-size: 1.2em;
}

/*mapa*/

section.seccion-mapa {
  padding: 60px 20px;
  background: linear-gradient(180deg, #0077b6 0%, #0077b6 100%);
  position: relative;
}

section.seccion-mapa::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(254,17,0,0.08);
  pointer-events: none;
}

section.seccion-mapa::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(0,137,228,0.1);
  pointer-events: none;
}

section.seccion-mapa h2 {
  color: #fff;
  position: relative;
  z-index: 1;
}


section.seccion-mapa p.texto-mapa {
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 1;
}

section.seccion-mapa p.texto-mapa i {
  color: #fe875d;
}

section.seccion-mapa div.contenedor-mapa,
section.seccion-mapa div.lugares-alojamiento {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  section.seccion-mapa { padding: 40px 16px; }
}


p.texto-mapa {
  text-align: center !important;
  font-size: 1em !important;
  color: #03045e;
  margin-bottom: 15px;
  font-weight: bold;
}

p.texto-mapa i {
  color: #da002b;
  margin-right: 8px;
}

div.contenedor-mapa {
  position: relative;
  width: 100%;
  height: 400px;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  div.contenedor-mapa {
    height: 500px;
    width: 90%;
    margin: 0 auto;
  }
}

a.link-mapa {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

/* capa encima del mapa con mensaje */
div.overlay-mapa {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(3, 4, 94, 0.85);
  color: #fff;
  text-align: center;
  padding: 12px;
  transition: all .3s ease;
}

div.overlay-mapa i {
  color: #da002b;
  font-size: 1.4em;
  margin-right: 8px;
}

div.overlay-mapa p {
  display: inline;
  font-size: 1em !important;
  text-align: center !important;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

a.link-mapa:hover div.overlay-mapa {
  background-color: rgba(218, 0, 43, 0.9);
}
/* ── ALOJAMIENTOS ── */
.lugares-alojamiento {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.lugar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 28px;
  background: #da002b;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  transition: all .2s;
  min-width: 180px;
  text-align: center;
}
.lugar-item i { font-size: 1.6em; color: #fff; }
.lugar-item span { font-size: 1.1em; font-weight: 600; text-transform: uppercase; }
.lugar-item small { font-size: 0.75em; color: rgba(255,255,255,.6); }
.lugar-item:hover { background: #5e0303; transform: translateY(-2px); }
.lugar-item:hover i { color: #fff; }

.mapa-sin-ubicacion {
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.1em;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.mapa-sin-ubicacion i {
  display: block;
  font-size: 2.5em;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.4);
}

.mapa-sin-embed {
  width: 100%;
  height: 100%;
  background: rgba(3,4,94,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.6);
}

.mapa-sin-embed i {
  font-size: 3em;
}

.mapa-sin-embed p {
  font-size: 1em;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/*testimoniales*/
div.testimoniales {
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media only screen and (min-width: 768px) {
  div.testimoniales {
    grid-template-columns: repeat(3, 1fr);
  }
}

div.testimonial {
  padding: 10px;
}

blockquote {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  position: relative;
  margin: 0;
  padding-bottom: 20px;
  height: 100%;             /* hace que todos los cuadros tengan la misma altura */
  display: flex;
  flex-direction: column;
}

blockquote p {
  text-align: left !important;
  font-size: 1em !important;
  font-family: 'PT sans', sans-serif;
  padding: 0 20px 0 65px;
  flex: 1;                  /* empuja el footer hacia abajo */
}

blockquote p::before {
  content: '\201c';
  position: absolute;
  left: 13px;
  top: 8px;
  font-size: 8rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #da002b;
}

footer.info-testimonial {
  padding: 0 20px 10px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

footer.info-testimonial img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

footer.info-testimonial cite {
  color: #da002b;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  text-align: left;
}

footer.info-testimonial cite span {
  color: #000;
  display: block;
  text-transform: none;
  margin-top: 5px;
}

/*Newsletter*/
div.newsletter {
  position: relative;
  height: auto;
}

div.newsletter::before {
  background-image: url(../img/bg-newsletter.jpg);
  content: '';
}

div.newsletter .contenido {
  padding: 60px 20px;        /* antes era 100% — demasiado grande */
  color: #fff;
  text-align: center;
  position: relative;
}

div.newsletter .contenido p {
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);
  margin-bottom: 10px;
}

div.newsletter .contenido h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 7vw;
  font-family: 'PT Sans', sans-serif;   /* faltaba la coma */
  text-shadow: 3px 3px 10px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.8);
  margin-bottom: 30px;
  line-height: 1.1;
}

@media only screen and (max-width: 768px) {
  div.newsletter .contenido h3 {
    font-size: 10vw;       /* más grande y legible en celular */
  }
  div.newsletter .contenido {
    padding: 50px 15px;
  }
}

/*cuenta regresiva*/


/* ── CUENTA REGRESIVA FONDO AZUL ── */
section.seccion-cuenta-regresiva {
  background: linear-gradient(135deg, #03045e 0%, #0077b6 60%, #03045e 100%);
  position: relative;
  margin-top: -1px
}

section.seccion-cuenta-regresiva h2 {
  color: #fff;
  position: relative;
  z-index: 1;
}


/*cuenta regresiva*/
div.cuenta-regresiva ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 20px;
}

@media only screen and (max-width: 768px) {
  div.cuenta-regresiva ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

div.cuenta-regresiva ul li {
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  text-align: center;
  padding: 16px 10px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}

div.cuenta-regresiva ul li p.numero {
  color: #fff;
  font-size: 4em;
  margin: 0 0 6px 0;
  line-height: 1;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(254,135,93,0.9),
    0 0 30px rgba(218,0,43,0.6),
    0 0 60px rgba(218,0,43,0.3);
}

/*footer*/
footer.site-footer {
  background-color: #353535;
  padding: 40px 0 0 0;
  margin-top: 0;
}

footer.site-footer .contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}


footer.site-footer h3 {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 2px;
}
@media only screen and (max-width: 768px) {
  footer.site-footer .contenedor {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 0 20px 30px 20px;
  }

  div.menu h3 {
    margin-bottom: 0px;
  }

  div.menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  footer .redes-sociales {
    margin-top: 0 !important;
  }

  footer.site-footer h3 {
    margin-bottom: 10px;
  }

  footer .redes-sociales {
    gap: 10px;
  }

  div.menu {
    margin-top: 0;
  }
}
footer.site-footer h3 span {
  color: #da002b;
}

footer.site-footer p {
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.9em;
  line-height: 1.8;
}

/* noticias */
div.Ultimas-tweets ul li {
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2a2a3e;
}

div.Ultimas-tweets ul li:last-child {
  border-bottom: none;
}

/* redes sociales del footer */
footer .redes-sociales {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

footer .redes-sociales a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #353535;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  transition: all .3s ease;
  border: 1px solid #fff;
}

footer .redes-sociales a:hover {
  background-color: #da002b;
  border-color: #da002b;
  transform: scale(1.1);
}

/* copyright */
p.copyright {
  background-color: #0d0d1a;
  color: #666;
  text-align: center;
  padding: 20px;
  font-size: 0.85em;
  font-family: 'PT Sans', sans-serif;
  margin: 0;
  letter-spacing: 1px;
}

/*INTERNAS*/
/*REGISTRO*/

form.registro h3 {          
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0 0 0;
}

form.registro label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

h4 {
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid #da002b;
  padding-bottom: 10px;
  font-size: 1.2em;
  margin: 0 0 15px 0;
}

div.caja {
  background-color: white;
  border: 2px solid #e1e1e1;
  padding: 10px;
  margin: 10px 0;
}

/* campos del formulario */
div#datos-usuario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

@media only screen and (min-width: 768px) {
  div#datos-usuario {
    grid-template-columns: repeat(3, 1fr);
  }
}

div.campo {
  padding: 15px 20px;
}

div.campo label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

div.campo input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e1e1e1;
  font-size: 1em;
  font-family: 'PT Sans', sans-serif;
}

div.campo input:focus {
  outline: none;
  border-color: #03045e;
}

/* paquetes */
div#paquetes h3 {
  text-align: center;
  margin: 20px 0 15px 0;
}

div#paquetes .lista-precios {
  max-width: 100%;
}

div.paquetes .tabla-precio:hover {
  transform: none;
  box-shadow: none;
}

div.paquetes .tabla-precio input {
  width: 100px;
  margin: 10px auto 0 auto;
  display: block;
  padding: 5px;
  border: 1px solid #e1e1e1;
  text-align: center;
  font-size: 1em;
}

/* eventos / talleres */
div#eventos h3 {
  text-align: center;
  margin: 20px 0 10px 0;
}

.contenido-dia {
  padding: 20px;
  display: none;
}

/* el h4 va centrado arriba, fuera del grid */
.contenido-dia h4 {
  text-align: center;
  border-bottom: 2px solid #da002b;
  padding-bottom: 10px;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-size: 1.2em;
}

/* el grid se aplica al contenedor de los divs, NO al contenido-dia */
@media only screen and (min-width: 768px) {
  .contenido-dia {
    display: block;        /* el contenido-dia NO es grid */
  }

  /* solo los divs hijos directos van en columnas */
  .contenido-dia > div {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    padding: 0 10px;
  }
}

.contenido-dia > div p {
  text-align: left;
  font-weight: bold;
  color: #da002b;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-bottom: 10px;
}

.contenido-dia > div label {
  display: block;
  margin-bottom: 10px;
  font-weight: normal;
  cursor: pointer;
}

.contenido-dia > div input {
  margin-right: 10px;
  accent-color: #da002b;
}

.contenido-dia > div label time {
  color: #da002b;
  font-weight: bold;
  margin: 0 8px;
} 

/* resumen y pago */
div#resumen h3 {
  text-align: center;
  margin: 20px 0 10px 0;
}

div.resumen p {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  color: #03045e;
}

div.resumen div.caja {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media only screen and (min-width: 768px) {
  div.resumen div.caja {
    grid-template-columns: repeat(2, 1fr);
  }
}

div.extras div.orden {
  margin: 15px 0;
}

div.extras div.orden label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

div.extras div.orden input {
  width: 80px;
  padding: 5px;
  border: 1px solid #e1e1e1;
  margin-top: 8px;
  text-align: center;
  font-size: 1em;
}

div.extras div.order {
  margin: 15px 0;
}

div.extras div.order label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #333;
}

div.extras div.order select {
  width: 100%;
  padding: 8px;
  border: 1px solid #e1e1e1;
  font-size: 1em;
  font-family: 'PT Sans', sans-serif;
  margin-top: 8px;
}

div.resumen div.total {
  padding: 20px;
  border-left: 2px solid #e1e1e1;
}

div#lista-productos {
  margin: 10px 0;
  font-size: 0.9em;
  color: #666;
}

div#suma-total {
  font-size: 2em;
  font-weight: bold;
  color: #03045e;
  margin: 10px 0 20px 0;
  text-align: center;
}

div.resumen input[type="button"],
div.resumen input[type="submit"] {
  display: block;
  margin: 15px auto;
  cursor: pointer;
}

#lista-productos {
  background-color: #e1e1e1;
  padding: 20px;
  display: none;
}

/* error general del formulario */
#error {
  clear: both;
  padding: 15px 20px;
  text-align: center;
  display: none;
  background-color: #fff5f5;
  border: 1px solid #da002b;
  color: #da002b;
  font-weight: bold;
  margin: 10px 20px;
  border-radius: 4px;
}

/* texto informativo paquetes */
p.texto-paquete {
  text-align: center;
  color: #666;
  margin-bottom: 15px;
  font-style: italic;
}

/* paquete seleccionable con radio */
.paquete-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: normal !important;
  justify-content: center;
  margin-bottom: 10px;
}

.paquete-label input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #da002b;
  cursor: pointer;
  flex-shrink: 0;
}

/* resalta la tabla cuando el radio esta seleccionado */
.tabla-precio:has(input[type="radio"]:checked) {
  border: 2px solid #da002b;
  box-shadow: 0 0 20px rgba(218, 0, 43, 0.3);
  transform: scale(1.03);
}

/*para registro bb se aumento*/
/* aviso qr */
div.aviso-qr {
  background-color: #e8f4fd;
  border-left: 4px solid #0089e4;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  color: #03045e;
  font-size: 0.95em;
}

div.aviso-qr i {
  color: #0089e4;
  margin-right: 8px;
}

/* requerido */
span.requerido { color: #da002b; }

/* select en campos */
div.campo select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e1e1e1;
  font-size: 1em;
  font-family: 'PT Sans', sans-serif;
  background-color: #fff;
}

div.campo select:focus {
  outline: none;
  border-color: #03045e;
}

/* precio original tachado */
p.precio-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  text-align: center;
  margin: 5px 0 0 0;
}

/* badge de descuento */
div.badge-descuento {
  background-color: #da002b;
  color: #fff;
  text-align: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
  margin: 8px auto;
  display: inline-block;
}

p.fecha-descuento {
  font-size: 0.78em;
  color: #666;
  text-align: center;
  margin: 4px 0;
}

p.cupos-disponibles {
  font-size: 0.82em;
  color: #03045e;
  text-align: center;
  font-weight: bold;
  margin: 6px 0;
}

/* paquete agotado */
div.tabla-precio.agotado {
  opacity: 0.5;
  pointer-events: none;
}

p.texto-agotado {
  color: #da002b;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* lista de beneficios */
ul.lista-beneficios li {
  color: #868686;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: left;
}

ul.lista-beneficios li::before {
  font-family: 'FontAwesome';
  content: '\f00c';
  color: green;
  margin-right: 8px;
  font-size: 14px;
}

/* grid de productos */
div.grid-productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 15px;
}

@media only screen and (min-width: 600px) {
  div.grid-productos { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 992px) {
  div.grid-productos { grid-template-columns: repeat(3, 1fr); }
}

div.card-producto {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  overflow: hidden;
  transition: all .3s ease;
}

div.card-producto:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

div.producto-imagen img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

div.producto-sin-imagen {
  width: 100%;
  height: 180px;
  background-color: #f0f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  color: #03045e;
}

div.producto-info {
  padding: 15px;
}

div.producto-info h4 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  color: #03045e;
  margin-bottom: 8px;
  border-bottom: none;
  padding-bottom: 0;
}

p.producto-precio {
  font-size: 1.3em;
  font-weight: bold;
  color: #da002b;
  margin: 5px 0;
  text-align: left !important;
}

p.producto-cupos {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 10px;
  text-align: left !important;
}

div.producto-cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

div.producto-cantidad input {
  width: 70px;
  padding: 6px;
  border: 1px solid #e1e1e1;
  text-align: center;
  font-size: 1em;
}

div.producto-talla {
  margin-top: 10px;
}

div.producto-talla select {
  width: 100%;
  padding: 6px;
  border: 1px solid #e1e1e1;
  font-size: 0.9em;
}

/* seccion regalo */
div.seccion-regalo {
  margin-top: 20px;
}

/* seccion qr */
div.seccion-qr {
  background: #fff;
  border: 2px solid #03045e;
  border-radius: 12px;
  padding: 30px;
  margin-top: 30px;
  text-align: center;
}

div.qr-contenido {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 20px;
}

@media only screen and (min-width: 768px) {
  div.qr-contenido { grid-template-columns: 1fr 1fr; }
}

div.qr-imagen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

img.qr-imagen {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: 3px solid #03045e;
  border-radius: 8px;
}

div.qr-subir {
  text-align: left;
}

p.qr-instruccion {
  color: #03045e;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: left !important;
  font-size: 1em !important;
}

p.qr-instruccion i {
  color: #da002b;
  margin-right: 8px;
}

/* mensajes de subida */
div.mensaje-exito {
  background-color: #e8f5e9;
  border: 1px solid #2e7d32;
  color: #2e7d32;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 10px;
  font-weight: bold;
}

div.mensaje-error {
  background-color: #fff5f5;
  border: 1px solid #da002b;
  color: #da002b;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 10px;
  font-weight: bold;
}

/* campo error */
span.campo-error {
  color: #da002b;
  font-size: 0.8em;
  display: none;
  margin-top: 4px;
}

/* seccion productos titulo */
div.seccion-productos {
  margin-top: 30px;
}

div.seccion-productos h3 {
  text-align: center;
  margin-bottom: 5px;
}
/* ============================================================
   ESTILOS ADICIONALES PARA VALIDACIONES Y ESTADOS DE INSCRIPCION
   Agregar al final de tu archivo CSS existente (registro.css o main.css)
   ============================================================ */

/* ---- Botón calcular deshabilitado ---- */
#btn-calcular:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* para que el title (tooltip) funcione */
}

/* ---- Aviso inscrito ya existente ---- */
div.aviso-inscrito-existente {
  background-color: #fff8e1;
  border: 2px solid #f59e0b;
  border-left: 6px solid #f59e0b;
  border-radius: 8px;
  padding: 20px 25px;
  margin: 20px 0;
  display: none;
}

div.aviso-inscrito-existente > i {
  font-size: 1.5em;
  color: #f59e0b;
  margin-right: 10px;
}

div.aviso-inscrito-existente strong {
  font-size: 1.1em;
  color: #92400e;
  display: block;
  margin-bottom: 8px;
}

div.aviso-inscrito-existente p {
  color: #78350f;
  margin: 6px 0;
  font-size: 0.95em;
}

.aviso-no-continuar {
  font-weight: bold;
  color: #da002b !important;
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid #f59e0b;
}

/* Estado confirmado */
span.estado-confirmado {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #16a34a;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
}

/* Estado pendiente */
span.estado-pendiente {
  background-color: #fef9c3;
  color: #713f12;
  border: 1px solid #ca8a04;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
}

.aviso-pendiente-msg {
  font-style: italic;
  color: #92400e !important;
}

.aviso-confirmado-msg {
  font-style: italic;
  color: #166534 !important;
}

/* ---- Mensaje de registro exitoso final ---- */
div.mensaje-registro-exitoso {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border: 2px solid #2e7d32;
  border-radius: 16px;
  padding: 50px 40px;
  text-align: center;
  margin: 30px auto;
  max-width: 600px;
  animation: fadeInUp 0.5s ease;
}

div.mre-icono {
  font-size: 4em;
  color: #2e7d32;
  margin-bottom: 20px;
}

div.mensaje-registro-exitoso h3 {
  color: #1b5e20;
  font-size: 1.6em;
  margin-bottom: 15px;
  text-transform: none;
  border-bottom: none;
}

div.mensaje-registro-exitoso p {
  color: #33691e;
  font-size: 1em;
  margin: 8px 0;
  line-height: 1.6;
}

div.mre-nota {
  background-color: #fff;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 12px 20px;
  margin-top: 20px;
  color: #2e7d32;
  font-size: 0.9em;
}

div.mre-nota i {
  margin-right: 8px;
  color: #388e3c;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Errores de talla en productos ---- */
.card-producto .campo-error.error-talla {
  margin-top: 5px;
  font-size: 0.8em;
}

/* ---- Campos con error (borde rojo) ---- */
div.campo input.campo-invalido,
div.campo select.campo-invalido {
  border-color: #da002b;
  background-color: #fff5f5;
}

/* ---- campo-error visible ---- */
span.campo-error {
  color: #da002b;
  font-size: 0.82em;
  display: none;
  margin-top: 4px;
  padding-left: 4px;
}
/*hasta aqui es registro bb*/
/* buscador de estado */
div.buscador-estado {
  background-color: #f8faff;
  border: 2px solid #03045e;
}

div.buscador-estado h4 {
  color: #03045e;
}

div.card-resultado-estado {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-left: 4px solid #03045e;
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

div.card-resultado-estado p {
  margin: 8px 0;
  font-size: 0.95em;
  text-align: left !important;
  color: #333;
}

div.card-resultado-estado p i {
  color: #da002b;
  margin-right: 8px;
  width: 16px;
}

/* hint calcular */
#hint-calcular {
  font-size: 0.82em;
  color: #999;
  text-align: center;
  margin-top: 8px;
}

/* grid campos datos personales */
div.grid-campos {
  display: grid;
  grid-template-columns: 1fr;  /* celular: 1 columna */
  gap: 5px;
}

@media only screen and (min-width: 600px) {
  div.grid-campos {
    grid-template-columns: repeat(2, 1fr);  /* tablet: 2 columnas */
  }
}

@media only screen and (min-width: 992px) {
  div.grid-campos {
    grid-template-columns: repeat(3, 1fr);  /* pc: 3 columnas */
  }
}

/* en celular quita el span 2 del ministerio */
@media only screen and (max-width: 599px) {
  div.grid-campos .campo[style*="span 2"],
  div.grid-campos .campo[style*="grid-column"] {
    grid-column: span 1 !important;
  }
}

/* seccion-form espaciado */
div.seccion-form {
  margin-bottom: 30px;
}
/* ============================================================
   ESTILOS ADICIONALES PARA VALIDACIONES Y ESTADOS DE INSCRIPCION
   Agregar al final de tu archivo CSS existente (registro.css o main.css)
   ============================================================ */

/* ---- Botón calcular deshabilitado ---- */
#btn-calcular:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* para que el title (tooltip) funcione */
}

/* ---- Aviso inscrito ya existente ---- */
div.aviso-inscrito-existente {
  background-color: #fff8e1;
  border: 2px solid #f59e0b;
  border-left: 6px solid #f59e0b;
  border-radius: 8px;
  padding: 20px 25px;
  margin: 20px 0;
  display: none;
}

div.aviso-inscrito-existente > i {
  font-size: 1.5em;
  color: #f59e0b;
  margin-right: 10px;
}

div.aviso-inscrito-existente strong {
  font-size: 1.1em;
  color: #92400e;
  display: block;
  margin-bottom: 8px;
}

div.aviso-inscrito-existente p {
  color: #78350f;
  margin: 6px 0;
  font-size: 0.95em;
}

.aviso-no-continuar {
  font-weight: bold;
  color: #da002b !important;
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid #f59e0b;
}

/* Estado confirmado */
span.estado-confirmado {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #16a34a;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
}

/* Estado pendiente */
span.estado-pendiente {
  background-color: #fef9c3;
  color: #713f12;
  border: 1px solid #ca8a04;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
}

.aviso-pendiente-msg {
  font-style: italic;
  color: #92400e !important;
}

.aviso-confirmado-msg {
  font-style: italic;
  color: #166534 !important;
}

/* ---- Mensaje de registro exitoso final ---- */
div.mensaje-registro-exitoso {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border: 2px solid #2e7d32;
  border-radius: 16px;
  padding: 50px 40px;
  text-align: center;
  margin: 30px auto;
  max-width: 600px;
  animation: fadeInUp 0.5s ease;
}

div.mre-icono {
  font-size: 4em;
  color: #2e7d32;
  margin-bottom: 20px;
}

div.mensaje-registro-exitoso h3 {
  color: #1b5e20;
  font-size: 1.6em;
  margin-bottom: 15px;
  text-transform: none;
  border-bottom: none;
}

div.mensaje-registro-exitoso p {
  color: #33691e;
  font-size: 1em;
  margin: 8px 0;
  line-height: 1.6;
}

div.mre-nota {
  background-color: #fff;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 12px 20px;
  margin-top: 20px;
  color: #2e7d32;
  font-size: 0.9em;
}

div.mre-nota i {
  margin-right: 8px;
  color: #388e3c;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Errores de talla en productos ---- */
.card-producto .campo-error.error-talla {
  margin-top: 5px;
  font-size: 0.8em;
}

/* ---- Campos con error (borde rojo) ---- */
div.campo input.campo-invalido,
div.campo select.campo-invalido {
  border-color: #da002b;
  background-color: #fff5f5;
}

/* ---- campo-error visible ---- */
span.campo-error {
  color: #da002b;
  font-size: 0.82em;
  display: none;
  margin-top: 4px;
  padding-left: 4px;
}

/* ============================================================
   BLOQUE RESUMEN COMPLETO
   ============================================================ */

div.resumen-completo {
  padding: 25px;
  margin-bottom: 30px;
}

div.resumen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 20px;
}

@media only screen and (min-width: 768px) {
  div.resumen-grid {
    grid-template-columns: 1fr 1fr;
  }
}



h5.resumen-subtitulo {
  font-size: 0.95em;
  text-transform: uppercase;
  color: #da002b;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 6px;
  margin: 0 0 12px 0;
  font-family: 'PT Sans', sans-serif;
}

h5.resumen-subtitulo i {
  margin-right: 6px;
}

table.tabla-resumen {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

table.tabla-resumen tr {
  border-bottom: 1px solid #f0f0f0;
}

table.tabla-resumen td {
  padding: 7px 5px;
  vertical-align: top;
  color: #333;
}

table.tabla-resumen td.lbl {
  font-weight: bold;
  color: #666;
  width: 45%;
  padding-right: 10px;
  white-space: nowrap;
}

/* total destacado */
div.resumen-total-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #03045e;
  color: #fff;
  border-radius: 8px;
  padding: 15px 20px;
  margin-top: 20px;
}

span.resumen-total-lbl {
  font-weight: bold;
  font-size: 0.9em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

span.resumen-total-num {
  font-size: 1.8em;
  font-weight: bold;
  color: #fff;
}

/* botones de accion del resumen */
div.resumen-acciones {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px solid #e1e1e1;
}

div.resumen-acciones .button {
  min-width: 200px;
}

div.resumen-acciones .button.hollow {
  background: transparent;
  border: 2px solid #03045e;
  color: #03045e;
}

div.resumen-acciones .button.hollow:hover {
  background: #03045e;
  color: #fff;
}

/* campo derivado (solo lectura) */
input.campo-derivado {
  background-color: #f5f7ff !important;
  color: #03045e !important;
  font-weight: bold;
  cursor: default;
}

/* span req */
span.req { color: #da002b; }

/* campo ancho - ocupa 2 columnas solo en tablet/pc */
@media only screen and (min-width: 600px) {
  div.campo.campo-ancho {
    grid-column: span 2;
  }
}

/* aviso regalo fijo */
div.aviso-regalo {
  background-color: #f0f7ff;
  border: 1px solid #0089e4;
  border-left: 4px solid #0089e4;
  border-radius: 8px;
  padding: 14px 20px;
  color: #03045e;
  font-size: 0.95em;
  text-align: center;
  margin: 10px 20px;
}

div.aviso-regalo i {
  color: #0089e4;
  margin-right: 8px;
  font-size: 1.2em;
}

div.aviso-regalo strong {
  color: #da002b;
}
/* ── GÉNERO Y MEDIDAS EN REGISTRO ── */
.genero-opciones {
  display: flex;
  gap: 16px;
  margin: 8px 0 10px 0;
}

.genero-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: bold;
  padding: 6px 14px;
  border: 2px solid #e1e1e1;
  border-radius: 20px;
  transition: all .2s;
}

.genero-opt:has(input:checked) {
  border-color: #03045e;
  background: #03045e;
  color: #fff;
}

.genero-opt input { display: none; }

.genero-opt .fa-mars  { color: #4f90d4; }
.genero-opt .fa-venus { color: #e879a0; }

.genero-opt:has(input:checked) .fa-mars,
.genero-opt:has(input:checked) .fa-venus { color: #fff; }

/* tabla de medidas */
.tabla-medidas-wrap {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e1e1e1;
}

.tabla-medidas {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tabla-medidas thead tr {
  background: #03045e;
  color: #fff;
}

.tabla-medidas thead th {
  padding: 6px 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .5px;
}

.tabla-medidas tbody td {
  padding: 5px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  transition: all .2s;
}

.tabla-medidas tbody tr:last-child td {
  border-bottom: none;
}
/*conferencia.html*/

/* ==========================================
   PAGINA DE CONFERENCIAS
   ========================================== */

section.seccion-conferencias {
  padding: 20px 0 40px 0;
}

/* bloque de cada dia */
div.dia-conferencia {
  margin-bottom: 40px;
}

/* titulo del dia - viernes, sabado, domingo */
h3.titulo-dia {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4em;
  text-transform: uppercase;
  color: #fff;
  background-color: #03045e;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-left: 5px solid #da002b;
}

h3.titulo-dia i {
  color: #da002b;
  margin-right: 10px;
}

/* contenedor de tarjetas del dia */
div.lista-conferencias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media only screen and (min-width: 768px) {
  div.lista-conferencias {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* tarjeta individual de cada conferencia */
div.tarjeta-conferencia {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  overflow: hidden;
  transition: all .3s ease;
}

div.tarjeta-conferencia:hover {
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

/* tarjeta con material no disponible */
div.tarjeta-conferencia.proximamente {
  opacity: 0.75;
}

/* parte superior con foto y datos */
div.info-conferencia {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-bottom: 2px solid #f0f0f0;
}

/* foto circular del expositor */
div.foto-expositor {
  flex-shrink: 0;
}

div.foto-expositor img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #da002b;
}

/* datos: hora, tema, expositor, descripcion */
div.datos-conferencia {
  flex: 1;
}

span.hora-conf {
  display: inline-block;
  background-color: #03045e;
  color: #fff;
  font-size: 0.8em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  font-family: 'Oswald', sans-serif;
}

span.hora-conf i {
  margin-right: 5px;
  color: #4fafff;
}

h4.tema-conf {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  color: #03045e;
  text-transform: uppercase;
  margin: 5px 0;
  border-bottom: none;
  padding-bottom: 0;
}

p.expositor-conf {
  color: #da002b;
  font-weight: bold;
  font-size: 0.9em;
  margin: 5px 0;
  text-transform: uppercase;
}

p.expositor-conf i {
  margin-right: 6px;
}

p.descripcion-conf {
  color: #666;
  font-size: 0.85em;
  line-height: 1.5;
  margin: 8px 0 0 0;
  text-align: left !important;
  font-size: 0.85em !important;
}

/* seccion de materiales */
div.materiales {
  padding: 15px 20px 20px 20px;
}

p.titulo-materiales {
  font-family: 'Oswald', sans-serif;
  font-size: 0.9em !important;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold !important;
  text-align: left !important;
}

p.titulo-materiales i {
  color: #da002b;
  margin-right: 8px;
}

div.lista-materiales {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* cada fila de material descargable */
a.material-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition: all .2s ease;
  background-color: #fafafa;
}

a.material-item:hover {
  background-color: #f0f4ff;
  border-color: #03045e;
  transform: translateX(3px);
}

/* icono del tipo de archivo con colores */
div.icono-material {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  flex-shrink: 0;
}

div.icono-material.pdf {
  background-color: #fff0f0;
  color: #e53935;
}

div.icono-material.ppt {
  background-color: #fff3e0;
  color: #e65100;
}

div.icono-material.img {
  background-color: #e8f5e9;
  color: #2e7d32;
}

div.icono-material.zip {
  background-color: #f3e5f5;
  color: #6a1b9a;
}

div.icono-material.video {
  background-color: #ffebee;
  color: #c62828;
}

/* texto con nombre y tipo */
div.info-material {
  flex: 1;
}

span.nombre-material {
  display: block;
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
}

span.tipo-material {
  display: block;
  font-size: 0.78em;
  color: #888;
  margin-top: 2px;
}

/* icono de descarga o ver al final */
i.icono-accion {
  color: #03045e;
  font-size: 1em;
  flex-shrink: 0;
}

a.material-item:hover i.icono-accion {
  color: #da002b;
}

/* mensaje cuando no hay material aun */
div.sin-material {
  text-align: center;
  padding: 20px;
  color: #999;
  border: 2px dashed #e1e1e1;
  border-radius: 6px;
}

div.sin-material i {
  font-size: 2em;
  color: #ccc;
  display: block;
  margin-bottom: 8px;
}

div.sin-material p {
  font-size: 0.9em !important;
  color: #999 !important;
  margin: 0;
  text-align: center !important;
}

/* ── SECCION PREGUNTAS ── */
div.seccion-preguntas {
  border-top: 2px dashed #e1e1e1;
  padding: 16px 20px 20px;
  background: #f8faff;
}

div.preguntas-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.92em;
  text-transform: uppercase;
  color: #03045e;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

div.preguntas-header i { color: #da002b; font-size: 1.1em; }

/* form */
.form-pregunta { display: flex; flex-direction: column; gap: 8px; }

.pregunta-campos { display: flex; flex-direction: column; gap: 8px; }

input.pregunta-nombre,
textarea.pregunta-texto {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e1e1e1;
  border-radius: 8px;
  font-family: 'PT Sans', sans-serif;
  font-size: 0.9em;
  color: #333;
  outline: none;
  transition: border-color .18s;
  background: #fff;
  resize: vertical;
}

input.pregunta-nombre:focus,
textarea.pregunta-texto:focus {
  border-color: #03045e;
}

.pregunta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pregunta-contador {
  font-size: 0.75em;
  color: #999;
}

button.btn-enviar-pregunta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: #03045e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .5px;
}

button.btn-enviar-pregunta:hover {
  background: #da002b;
  transform: translateY(-1px);
}

button.btn-enviar-pregunta:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* mensaje de respuesta */
.pregunta-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pregunta-msg-ok {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}

.pregunta-msg-error {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* preguntas cerradas */
div.preguntas-cerradas {
  text-align: center;
  padding: 16px;
  color: #999;
  background: #f0f0f0;
  border-radius: 8px;
  border: 1px dashed #ccc;
}

div.preguntas-cerradas i {
  font-size: 1.4em;
  display: block;
  margin-bottom: 6px;
  color: #bbb;
}

div.preguntas-cerradas p {
  font-size: 0.85em !important;
  color: #999 !important;
  margin: 0;
}

/* badge tipo de evento */
span.tipo-evento-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-family: 'Oswald', sans-serif;
}

span.tipo-evento-badge.tipo-conferencia { background: #e0f2fe; color: #03045e; }
span.tipo-evento-badge.tipo-predica     { background: #fee2e2; color: #c62828; }
span.tipo-evento-badge.tipo-taller      { background: #fff3e0; color: #e65100; }
span.tipo-evento-badge.tipo-vigilia     { background: #f3e5f5; color: #6a1b9a; }

/* ── VER PREGUNTAS ── */
.ver-preguntas-wrap {
  padding: 12px 20px 16px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
}

.btn-ver-preguntas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: transparent;
  border: 2px solid #03045e;
  border-radius: 20px;
  color: #03045e;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}

.btn-ver-preguntas:hover {
  background: #03045e;
  color: #fff;
}

.btn-ver-preguntas i { color: #da002b; }
.btn-ver-preguntas:hover i { color: #fff; }
/*hasta aqui va el diseño de la conferencia*/

/* ==========================================
   CALENDARIO DE EVENTOS
   ========================================== */
/* ==========================================
   CALENDARIO DE EVENTOS
   ========================================== */

div.calendario {
  padding: 20px 0;
}

/* bloque de cada dia */
div.dia-calendario {
  margin-bottom: 50px;
}

/* cabecera del dia */
h3.titulo-fecha {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #03045e, #0077b6);
  padding: 14px 24px;
  margin-bottom: 20px;
  border-left: 6px solid #da002b;
  letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(3, 4, 94, 0.3);
}

h3.titulo-fecha i {
  color: #da002b;
  margin-right: 10px;
}

/* grid de tarjetas - 3 en pc, 2 en tablet, 1 en celular */
div.lista-eventos-dia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media only screen and (min-width: 600px) {
  div.lista-eventos-dia {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  div.lista-eventos-dia {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   TARJETA BASE - fondo transparente con
   borde de color segun tipo de evento
   ========================================== */
div.tarjeta-evento {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #03045e;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: all .3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

div.tarjeta-evento:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* colores del borde superior segun tipo */
div.tarjeta-evento.tipo-conferencia { border-top-color: #03045e; }
div.tarjeta-evento.tipo-taller      { border-top-color: #da002b; }
div.tarjeta-evento.tipo-vigilia     { border-top-color: #6a1b9a; }
div.tarjeta-evento.tipo-paseo       { border-top-color: #2e7d32; }
div.tarjeta-evento.tipo-carrera     { border-top-color: #e65100; }
div.tarjeta-evento.tipo-clausura    { border-top-color: #b8860b; }

/* ==========================================
   CABECERA DE LA TARJETA
   fondo de color segun tipo
   ========================================== */
div.tarjeta-cabecera {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

div.tarjeta-evento.tipo-conferencia div.tarjeta-cabecera { background: linear-gradient(135deg, #03045e, #0077b6); }
div.tarjeta-evento.tipo-taller      div.tarjeta-cabecera { background: linear-gradient(135deg, #da002b, #ff4d6d); }
div.tarjeta-evento.tipo-vigilia     div.tarjeta-cabecera { background: linear-gradient(135deg, #6a1b9a, #9c27b0); }
div.tarjeta-evento.tipo-paseo       div.tarjeta-cabecera { background: linear-gradient(135deg, #2e7d32, #43a047); }
div.tarjeta-evento.tipo-carrera     div.tarjeta-cabecera { background: linear-gradient(135deg, #e65100, #ff7043); }
div.tarjeta-evento.tipo-clausura    div.tarjeta-cabecera { background: linear-gradient(135deg, #b8860b, #f0a500); }

/* hora en la cabecera */
span.hora-bloque {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

span.hora-bloque i {
  color: rgba(255,255,255,0.7);
  margin-right: 5px;
}

/* badge del tipo */
span.tipo-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
}

/* ==========================================
   ICONO GRANDE DEL TIPO DE EVENTO
   ========================================== */
div.tarjeta-icono {
  text-align: center;
  padding: 20px 16px 10px 16px;
  font-size: 2.5em;
}

div.tarjeta-evento.tipo-conferencia div.tarjeta-icono { color: #03045e; }
div.tarjeta-evento.tipo-taller      div.tarjeta-icono { color: #da002b; }
div.tarjeta-evento.tipo-vigilia     div.tarjeta-icono { color: #6a1b9a; }
div.tarjeta-evento.tipo-paseo       div.tarjeta-icono { color: #2e7d32; }
div.tarjeta-evento.tipo-carrera     div.tarjeta-icono { color: #e65100; }
div.tarjeta-evento.tipo-clausura    div.tarjeta-icono { color: #b8860b; }

/* ==========================================
   CUERPO DE LA TARJETA
   ========================================== */
div.tarjeta-cuerpo {
  padding: 10px 16px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* tema */
h4.evento-tema {
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  color: #1a1a2e;
  text-transform: uppercase;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
  line-height: 1.3;
  text-align: center;
}

/* separador */
div.separador-evento {
  height: 2px;
  background: linear-gradient(90deg, transparent, #da002b, transparent);
  margin: 2px 0;
}

/* detalles: moderador, alabanza, expositor */
div.evento-detalles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

div.evento-detalle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background-color: rgba(3, 4, 94, 0.05);
  border-radius: 6px;
  border-left: 3px solid #da002b;
}

div.evento-detalle > i {
  color: #da002b;
  font-size: 0.9em;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

span.detalle-etiqueta {
  display: block;
  font-size: 0.68em;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 1px;
  line-height: 1;
}

span.detalle-valor {
  display: block;
  font-size: 0.85em;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
}

/* error de base de datos */
p.error-bd {
  background-color: #fff5f5;
  border: 1px solid #da002b;
  color: #da002b;
  padding: 15px 20px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center !important;
}
  /* colores nuevos tipos */
div.tarjeta-evento.tipo-predica        { border-top-color: #c62828; }
div.tarjeta-evento.tipo-concurso       { border-top-color: #f9a825; }
div.tarjeta-evento.tipo-deportivo      { border-top-color: #1565c0; }
div.tarjeta-evento.tipo-premiacion     { border-top-color: #6d4c41; }
div.tarjeta-evento.tipo-paseo-tours   { border-top-color: #00695c; }

div.tarjeta-evento.tipo-predica       div.tarjeta-cabecera { background: linear-gradient(135deg, #c62828, #ef5350); }
div.tarjeta-evento.tipo-concurso      div.tarjeta-cabecera { background: linear-gradient(135deg, #f9a825, #ffca28); }
div.tarjeta-evento.tipo-deportivo     div.tarjeta-cabecera { background: linear-gradient(135deg, #1565c0, #1e88e5); }
div.tarjeta-evento.tipo-premiacion    div.tarjeta-cabecera { background: linear-gradient(135deg, #6d4c41, #a1887f); }
div.tarjeta-evento.tipo-paseo-tours  div.tarjeta-cabecera { background: linear-gradient(135deg, #00695c, #26a69a); }

div.tarjeta-evento.tipo-predica       div.tarjeta-icono { color: #c62828; }
div.tarjeta-evento.tipo-concurso      div.tarjeta-icono { color: #f9a825; }
div.tarjeta-evento.tipo-deportivo     div.tarjeta-icono { color: #1565c0; }
div.tarjeta-evento.tipo-premiacion    div.tarjeta-icono { color: #6d4c41; }
div.tarjeta-evento.tipo-paseo-tours div.tarjeta-icono { color: #00695c; }

/*hasta aqui es calendario.php*/

/* ==========================================
   INVITADOS / EXPOSITORES
   ========================================== */

.grid-invitados {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 20px 0;
}

@media only screen and (min-width: 600px) {
  .grid-invitados {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  .grid-invitados {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* TARJETA */
div.card-invitado {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #da002b;
}

div.card-invitado:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(3, 4, 94, 0.18);
}

/* FOTO - altura fija en lugar de aspect-ratio */
div.card-foto-wrap {
  position: relative;
  width: 100%;
  height: 260px;          /* ← CAMBIO: altura fija en lugar de aspect-ratio */
  overflow: hidden;
  background: linear-gradient(135deg, #03045e, #0077b6);
  flex-shrink: 0;          /* ← evita que se comprima */
}

img.card-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* ← CAMBIO: centra en la parte superior (caras) */
  display: block;
  filter: grayscale(30%);
  transition: filter .4s ease, transform .4s ease;
}

div.card-invitado:hover img.card-foto {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* PLACEHOLDER SIN IMAGEN */
div.card-foto-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #03045e, #0077b6);
  font-size: 5em;
  color: rgba(255, 255, 255, 0.3);
}

/* BADGE DE RANGO SOBRE LA FOTO */
span.card-rango-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(218, 0, 43, 0.92);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.25);
}

/* CUERPO */
div.card-cuerpo {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* NOMBRE */
h3.card-nombre {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15em;
  text-transform: uppercase;
  color: #03045e;
  margin: 0;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* SEPARADOR */
div.card-separador {
  height: 2px;
  background: linear-gradient(90deg, #da002b, transparent);
  border-radius: 2px;
}

/* DESCRIPCION */
p.card-descripcion {
  font-size: 0.88em;
  color: #555;
  line-height: 1.6;
  margin: 0;
  text-align: left;       /* ← corrige el centrado global de .seccion p */
}

/* SIN DATOS */
p.sin-datos {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 40px 0;
  grid-column: 1 / -1;
}

.lista-invitados{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    padding:0;
    list-style:none;
}

.invitado{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    height:420px;
    background:#000;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.invitado img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}

.invitado:hover img{
    transform:scale(1.05);
}

.invitado p{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    margin:0;
    padding:18px;
    background:rgba(0,0,0,.55);
    color:#ff0033;
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* CELULAR */
@media (max-width: 600px){
    .lista-invitados{
        grid-template-columns:1fr;
        gap:20px;
    }

    .invitado{
        height:380px;
    }

    .invitado p{
        font-size:16px;
        padding:14px;
    }
}
/* ==========================================
   TIPO DE INSCRIPCION
   ========================================== */

p.subtitulo-inscripcion {
  text-align: center;
  color: #555;
  font-size: 1.1em !important;
  margin-bottom: 40px;
}

.grid-inscripcion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 10px 0 40px 0;
}

@media only screen and (min-width: 768px) {
  .grid-inscripcion {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* TARJETA BASE */
div.card-inscripcion {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 5px solid #da002b;
  transition: transform .3s ease, box-shadow .3s ease;
}

div.card-inscripcion:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(3, 4, 94, 0.15);
}

div.card-qr      { border-top-color: #03045e; }
div.card-efectivo { border-top-color: #2e7d32; }

/* ICONO GRANDE */
div.card-ins-icono {
  text-align: center;
  font-size: 3em;
}

div.card-qr      div.card-ins-icono { color: #03045e; }
div.card-efectivo div.card-ins-icono { color: #2e7d32; }

/* TITULO */
h3.card-ins-titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  letter-spacing: 1px;
}

div.card-qr       h3.card-ins-titulo { color: #03045e; }
div.card-efectivo h3.card-ins-titulo { color: #2e7d32; }

/* SEPARADOR */
div.card-ins-separador {
  height: 2px;
  background: linear-gradient(90deg, transparent, #da002b, transparent);
}

/* DESCRIPCION */
p.card-ins-descripcion {
  font-size: 0.95em !important;
  color: #555;
  line-height: 1.7;
  text-align: left !important;
  margin: 0;
}

/* PASOS QR */
ul.card-ins-pasos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ul.card-ins-pasos li {
  font-size: 0.9em;
  color: #444;
  display: flex;
  align-items: center;
  gap: 10px;
}

ul.card-ins-pasos li i {
  color: #03045e;
  font-size: 1.1em;
  flex-shrink: 0;
}

/* BOTON IR AL REGISTRO */
a.card-ins-boton {
  text-align: center;
  margin-top: auto;
}

a.card-ins-boton i {
  margin-right: 8px;
}

/* GRUPO DE LIDERES */
div.lideres-grupo {
  background-color: #f8f9ff;
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 4px solid #2e7d32;
}

h4.lideres-titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  text-transform: uppercase;
  color: #2e7d32;
  margin: 0 0 12px 0;
  letter-spacing: 1px;
  border-bottom: none;
  padding-bottom: 0;
}

h4.lideres-titulo i {
  margin-right: 8px;
}

/* LISTA DE LIDERES */
ul.lista-lideres {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

li.lider-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8f5e9;
}

div.lider-info {
  display: flex;
  flex-direction: column;
}

span.lider-nombre {
  font-weight: bold;
  font-size: 0.88em;
  color: #1a1a2e;
}

span.lider-zona {
  font-size: 0.78em;
  color: #888;
  margin-top: 2px;
}

/* BOTON WHATSAPP */
a.boton-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #25d366;
  color: #fff;
  font-size: 0.82em;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color .3s ease, transform .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

a.boton-whatsapp:hover {
  background-color: #1da851;
  transform: scale(1.05);
}

a.boton-whatsapp i {
  font-size: 1.1em;
}

/* AVISO EFECTIVO */
div.aviso-efectivo {
  background-color: #fff8e1;
  border: 1px solid #f9a825;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85em;
  color: #795548;
  font-weight: bold;
  text-align: center;
}

div.aviso-efectivo i {
  color: #f9a825;
  margin-right: 8px;
}
/* boton login lider */
div.bloque-login-lider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

div.separador-login {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2e7d32, transparent);
  margin-bottom: 5px;
}

p.texto-login-lider {
  font-size: 0.88em !important;
  color: #555;
  text-align: center !important;
  margin: 0;
}

p.texto-login-lider i {
  color: #2e7d32;
  margin-right: 6px;
}

a.button-login-lider {
  background-color: #03045e;
  border-color: #03045e;
  padding: 10px 30px;
  font-size: 1em;
  width: 100%;
  text-align: center;
  display: block;
}

a.button-login-lider:hover {
  background-color: #0077b6;
  border-color: #0077b6;
}

a.button-login-lider i {
  margin-right: 8px;
}

p.aviso-solo-lider {
  font-size: 0.78em !important;
  color: #999;
  text-align: center !important;
  margin: 0;
  font-style: italic;
}

p.aviso-solo-lider i {
  color: #f9a825;
  margin-right: 5px;
}
/*hasta aqui es la parte de los tipo_inscripcion.php*/
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 2px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}