/*
 Theme Name:   UsarloBienEsVital
 Theme URI:    https://generatepress.com
 Description:  Tema para usarlo bien es vital, Child theme GeneratePress
 Author:       Conrado Flamini
 Author URI:   https://www.aemps.gob.es
 Template:     generatepress
 Version:      0.1
*/




*{padding:0px; margin:0px}

.rojo{color:#DC482B}
.mostaza {color:#f0c22e}
.beige{color:#f2dcbb}
.azul{color:#1e6884}


.back-rojo{background:#DC482B}
.back-mostaza {background:#f0c22e}
.back-beige{background:#f2dcbb}
.back-azul{background:#1e6884}



.one-container .site-content {
    padding: 0px;
}

.back-azul p,
.back-azul h2{
    color:#fff
}
*{font-family:field-gothic;}
:root {
      --brand: #1e6884;
      --dark: #2c2c2c;
      --beige: #f2dcbb;
      --mostaza:#f0c22e;
      --radius: 16px;
      --maxw: 100%;
      --gap: 2rem;
    }/*
    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--dark);
      line-height: 1.5;
    }*/
    section {
      padding: 4rem 1.5rem;
      text-align: center;
    }
    .container {
      max-width: var(--maxw);
      margin: 0 auto;
    }
    h1, h2, h3 {
      font-weight: 800;
      line-height: 1.2;
	  text-transform: uppercase;
    }
	
    h1 { font-size: 3.5rem; }
    h2 { font-size: 3rem;  }
	h3 {font-size: 1.8rem; }
    p { font-size: 1.5rem;
    line-height: 1.8rem;	}
    .h3-mostaza{font-size: 3rem;
				color:var(--mostaza)	}
	
	.aviso-legal h1{
		font-size:2rem;
	}	
	.aviso-legal h2{
		font-size:1.8rem;
	}	
	.back{
		text-align:right
	}
	   .aviso-legal p { font-size: 1rem;
    line-height: 1.2rem;	}
				
	.responsable{font-size: 2.5rem;
				color:var(--mostaza);
				margin-top:30px}
				
	.p-10{padding:10px}
	
	.fleming{
		max-width:500px;
		margin-bottom:30px}
    
	.max-w-1200{
	max-width:1200px}
	
	.d-flex-column{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	.btn-2,
	.btn {
      display: inline-block;
      background: var(--mostaza);
      color: #202020;
      padding: 0.9rem 1.6rem;
      border-radius: var(--radius);
      text-decoration: none;
      font-weight: 800;
      transition: background 0.2s ease;
    }
    .btn:hover { background: var(--brand);
		color:#fff	}

	.btn-2{margin-bottom:30px}
	 .btn-2:hover { background: #DC482B;
		color:#fff	}
		
		
	.btn-azul {
     
      background: var(--brand);
      color: #fff;
      padding: 0.9rem 1.6rem;
      border-radius: var(--radius);
      text-decoration: none;
      font-weight: 800;
      transition: background 0.2s ease;
    }
	  .btn-azul:hover { background: #DC482B;
		color:#fff	}		
    /* Hero (video) */
    .hero {
      background: var(--brand);
      color: white;
      padding: 0;
      overflow: hidden;
    }
    .hero video {
      width: 100%;
      height: auto;
      display: block;
    }
	hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }

    .sound-btn {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      background: rgba(0,0,0,0.6);
      border: none;
      color: white;
      padding: 0.6rem 1rem;
      border-radius: var(--radius);
      cursor: pointer;
      font-weight: 600;
    }

    .circle-izquierda {
    background: #DC482B;
    height: 2rem;
    width: 2rem;
    border-radius:50px 0px 0px 50px;
    margin-right:10px}

     .circle-derecha {
    background: white;
    height: 2rem;
    width: 2rem;
    border-radius:0px 50px 50px 0px;
    margin-left:10px}

    .d-flex{
        display:flex;
        justify-content: center;
        align-items: center;
    }
	
	#myVideo{margin-bottom:50px}
	
	
	.img-video{
			border-radius:100%; 
			width:180px;
			height:180px}
			
	.copyright-bar{display:none!important}	

	.logo-footer	{max-width:250px; display:flex;justify-content:center; }

	.logo-pran-footer{max-width:150px}

	.copywrite{font-size:10px; margin-bottom:0px}

	.footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
	}
	
	.footer-container {
    display: flex;
    width: 600px;
    align-content: center;
    justify-content: space-between;
    align-items: center;
	margin-bottom:25px;
	overflow:hidden;
	}

	.banner-pran{
		text-align:left;
		padding-right:20px
	}
	.banner-pran h2{
		line-height:2.5rem!important;
		margin-bottom:0px
	}
	p.max-w-1430{ max-width: 70%;}
    
	@media (max-width: 768px) {
      h1 { font-size: 1.6rem; }	
      h2 { font-size: 1.3rem; }
	  h3 { font-size: 1.1rem; }
      section { padding: 3rem 1rem; }
	  .fleming{width:250px}
	  .max-w-70 { max-width: 90%;}
	  .d-block {display:block}
	  .sound-btn { position: relative; top: 0px; right: 0px;}
	  p { font-size: 1rem; line-height: 1.2rem;}
	.max-w-1430{max-width:90%!important}
	.responsable{font-size: 1.2rem;}
	.h3-mostaza {font-size: 1.3rem;	}
	.banner-pran h2 { line-height: 1.4rem !important;font-size:1.8rem}
		.banner-pran{text-align:center; padding-right:0px}
	.footer-container {flex-direction:column; width:100%}
	.copywrite {font-size: 8px;}
	}
  
  .logo-pran-header {
    width: 200px;
}

	.main-navigation .main-nav ul li a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 0px;
}
  .has-inline-mobile-toggle .header-widget, .has-inline-mobile-toggle #site-navigation {
        flex-basis: 0%;
    }
	

@media (max-width: 768px) {
   
		.nav-float-right #site-navigation {
    margin-left: initial;
}
	 .inside-header {
        padding: 10px;

    }
	.logo-pran-header {
 
    margin-top: 5px;
}
}

	 h2.max-w-1430{max-width:70%}
  

@media (max-width: 1024px) {
	    .main-navigation .menu-toggle {
        display: none !important;
    }
    .main-navigation .main-nav {
        display: block !important;
    }
    .main-navigation ul {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
@media (max-width: 669px) {
    .has-inline-mobile-toggle .inside-header {
        flex-direction: column;
        text-align: center;
    }
}

.cc-message p {
	font-size:18px!important
}

.cc-floating .cc-message {

    margin-bottom: 0rem;
   
}
	/*Animaciones*/
	.box {
  
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
	/* Al entrar en pantalla */
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
/* === EFECTOS === */
/* Fade */
.fade-in.visible {
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Slide desde abajo */
.slide-up.visible {
  animation: slideUp 0.8s ease-out forwards;
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide desde derecha */
.slide-rigth.visible {
  animation: slideRigth 0.8s ease-out forwards;
}
@keyframes slideRigth {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0px); }
}
/* Bounce */
.bounce-in.visible {
  animation: bounceIn 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
/* Shake */
.shake-in.visible {
  animation: shakeIn 0.6s ease;
}
@keyframes shakeIn {
  0% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  40% { transform: translateX(-8px); }
  60% { transform: translateX(8px); }
  80% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
/* Zoom */
.zoom-in.visible {
  animation: zoomIn 0.8s ease-out forwards;
}
@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}