

  :root{
  --verde:#28A745;
  --azul:#1F3C88;
  --rojo:#E63946;
  --gris:#6c757d;
}

*{margin:0;padding:0;box-sizing:border-box;}

*,
*::before,
*::after{
  box-sizing: border-box;
}
body{
  font-family:'Poppins', sans-serif;
  /*font-family:'Montserrat',sans-serif;*/
  background:white;
  color:var(--gris);
  overflow-x:hidden;

  max-width:100%;
  overflow-x:hidden;
}



.emotional-copy{
  font-size:1.05rem;
  line-height:1.8;
  color:#444;
  max-width:700px;
  margin:auto;
  text-align:center;
}


/*******logo diseño arriba*****/
.top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1rem;
  position:relative;
}

/* LOGO */
.logo{
  height:100px;
  width:auto;
}

/* BOTÓN DARK */

/* 📱 MÓVIL */
@media (max-width:768px){
  .top-bar{
    justify-content:center;
  }

  .logo{
    height:120px;
  }

 
}









/* LOGO HERO SOLO MÓVIL */
.hero-logo-mobile{
  display:none;
  margin-bottom:1rem;
}

.hero-logo-mobile img{
  max-width:180px;
  width:100%;
  height:auto;
}

/* 📱 MÓVIL */
@media (max-width:768px){
  .hero-logo-mobile{
    display:flex;
    justify-content:center;
  }

  .hero{
    padding-top:3rem;
  }
}

/*****icono rojo** */
/*.hero-icon{
  font-size:2.4rem;
  margin-bottom:0.8rem;
  animation:pulse 3s infinite;
  
}

@keyframes pulse{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.1); opacity:0.9;}
}*/


.blood-drop{
  width:30px;
  height:30px;
  fill:#8b0000; /* carmesí */
}

.blood-drop{
  animation:pulse 3s ease-in-out infinite;
}

@keyframes pulse{
  0%,75%{transform:scale(1);}
  25%{transform:scale(1.08);}
}

/***TESTIMONIOS********** */

/* TESTIMONIOS SLIDER */
.testimonial-slider{
  width:100%;
  max-width:1200px;
  margin:2rem auto 0;
  overflow:hidden;
}

.testimonial-track{
  display:flex;
  gap:1.5rem;
  will-change: transform;
}

.testimonial-card{
  flex:0 0 100%;
  max-width:100%;
}

@media(min-width:1024px){
  .testimonial-card{
    flex:0 0 calc(33.333% - 1rem);
    max-width:calc(33.333% - 1rem);
  }
}


/* 🖥 PC: 3 visibles */
@media (min-width:1024px){
  .section{
    display:block;
  }
}



/*******DARK MODE**** */
.dark-btn{
  position:fixed;
  top:16px;
  right:16px;
  background:#28a745;
  color:white;
  border:none;
  padding:0.6rem 0.9rem;
  border-radius:50%;
  cursor:pointer;
  z-index:1000;
}

body.dark{
  background:#0f1f17;
  color:#e0f2e9;
}

body.dark header,
body.dark section{
  background:#132a20;
}

h1,h3{
  font-size:2.2rem;
  line-height:1.2;
  font-weight:800;
}

h2{
  font-size:1.6rem;
  margin-bottom:1rem;
}

p{
  font-size:1rem;
  line-height:1.6;
  color:#555;
}

/*header pc */

.header{
  position:sticky;
  top:0;
  z-index:999;
  background:white;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.header-container{
  max-width:1200px;
  margin:auto;
  padding:1rem 2rem;
  display:flex;
  align-items:center;
 /* justify-content:space-between;*/
 justify-content:flex-end;
}

.logo img{
  height:55px;
}



.nav{
  margin-left:auto;
  display:flex;
  gap:2rem;
  align-items:center;
}

.nav a{
  text-decoration:none;
  color:#1a1a1a;
  font-weight:600;
  position:relative;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  background:#28a745;
  transition:0.3s;
}

.nav a:hover::after{
  width:100%;
}

.nav-btn{
  background:linear-gradient(135deg,#28a745,#1f6fb2);
  color:white !important;
  padding:0.6rem 1.4rem;
  border-radius:30px;
}


.header-contact{
  display:flex;
  gap:0.6rem;
  align-items:center;
  font-weight:600;
  font-size:0.95rem;
}

.header-contact a{
  color:#1f6fb2;
  text-decoration:none;
}

.header-contact span{
  color:#ccc;
}

/* HEADER */

.header img{height:60px;}

/* HERO */

.hero{
  height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:linear-gradient(180deg,#28A74530,#fff);
}



.hero-image{
  max-width: 420px;
  margin: 0 auto 1.2rem;
 
}

.hero-image img{
  width:100%;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  padding-top: 80px;
}



.hero h1,
.hero h3{color:var(--azul);font-size:2.6rem;}
.hero p{margin-top:1rem;font-size:1.1rem;}

.hero-note{
  display:block;
  margin-top:1rem;
  font-size:0.85rem;
  opacity:0.9;
}

.drop{
  width:14px;height:14px;
  background:var(--rojo);
  border-radius:50%;
  margin-top:2rem;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  50%{transform:scale(1.6);}
}

@keyframes heroFade{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes slideUp{

  from{
    transform:translateY(30px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

/******************** */

/* LOGO HERO SOLO MÓVIL */
.hero-logo-mobile{
  display:none;
  margin-bottom:1rem;

}

.hero-logo-mobile img{
  max-width:200px;
  width:100%;
  height:auto;
  margin-top: -100px;   /* 👈 lo sube sin afectar el texto */
}

/* 📱 MÓVIL */
@media (max-width:768px){
  .hero-logo-mobile{
    display:flex;
    justify-content:center;
  }

  .hero{
    padding-top:3rem;
  }
}


.hero-logo-mobile{
  animation: fadeUp .8s ease both;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/*************************************/
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}


/* SECCIONES */
.section{
  padding:3.5rem 1.5rem;
}

.section + .section{
  margin-top:1.5rem;
}


.service-card{
  background:white;
  padding:2rem;
  border-radius:28px;
  margin-bottom:1.5rem;
  box-shadow:0 20px 45px rgba(0,0,0,0.08);
  text-align:center;
  transition:0.4s;
}

.service-card:hover{
  transform:translateY(-6px);
}


.service-card:hover{
  transform:translateY(-6px);
}

.icon{
  font-size:2.2rem;
  margin-bottom:0.8rem;
  display:inline-block;
}

.service-card h3{
  font-size:1.2rem;
  margin-bottom:0.5rem;
}

.service-card p{
  font-size:1rem;
  color:#555;
}

.service-card small{
  display:block;
  margin-top:0.6rem;
  color:#28a745;
  font-weight:600;
}

.service-card img{
  width:100%;
  border-radius:20px;
  margin-bottom:1rem;
}
.service-card h2{color:var(--azul);}

/* PROMO */
.promos{
  padding:3rem 1.5rem;
  background:linear-gradient(135deg,#28a745,#1e7e34);
  color:white;
}

.promo-card{
  background:white;
  color:#1a1a1a;
  padding:2rem;
  border-radius:24px;
  max-width:380px;
  margin:auto;
  position:relative;
  animation:float 4s ease-in-out infinite;
}


.badge,
.dot-red{
  background:#dc3545;
  color:white;
}

.badge{
  position:absolute;
  top:-10px;
  right:-10px;
  background:#dc3545;
  color:white;
  padding:0.4rem 0.8rem;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:700;
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}


/* CONFIANZA */
.trust{
  padding:3rem 1.5rem;
  display:grid;
  gap:1rem;
  font-weight:600;
}


/****** paquete medico***/

.download-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background:#f8f9fa;
  padding:1.5rem;
  border-radius:18px;
  text-decoration:none;
  color:#1a1a1a;
  transition:0.3s;
}

.download-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,0.1);
}

/*mapa*/
.map-section{
  padding:3rem 1.5rem;
}
.map-box iframe{
  width:100%;
  height:320px;
  border:0;
  border-radius:20px;
}





.btn-mapa{
  display:inline-block;
  margin-top:12px;
  padding:14px 20px;
  /**background:linear-gradient(135deg,#28a745,#1f8bd6);*/
  color:#fff;
  font-weight:600;
  border-radius:10px;
  text-decoration:none;
}

@media(max-width:768px){
  .btn-mapa{
    width:100%;
    text-align:center;
  }
}


/*******CONTACTO***** */
.contacto{
  padding:60px 20px;
}

.contacto h2{
  text-align:center;
  margin-bottom:10px;
}

.intro-contacto{
  text-align:center;
  color:#555;
  margin-bottom:40px;
}

.contacto{
  padding:5rem 2rem;
}

.contacto h2,
.contacto .intro-contacto{
  grid-column:1 / -1;
  text-align:center;
}

.contacto-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  max-width:1200px;
  margin:3rem auto 0;
}

/* 🖥 PC */
@media(min-width:1024px){
  .contacto-grid{
    grid-template-columns:1.1fr 0.9fr;
    align-items:flex-start;
  }
}


.contacto-info p{
  margin-bottom:14px;
}

.contacto-info a{
  color:#28a745;
  text-decoration:none;
  font-weight:600;
}


.contacto-mapa{
  width:100%;
  min-height:420px;
  border-radius:18px;
  overflow:hidden;
}

.contacto-mapa iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
}


/* 🖥 PC */
@media(min-width:1024px){
  .contacto-mapa{
    min-height:420px;
  }
}



/* ANIMACIONES */
.reveal{
  opacity:0;
  transform:translateY(60px) scale(0.98);
  transition:all 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.active{
  opacity:1;
  transform:none;
}



/*almohadilla*/
.mobile-nav{
  position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%);
  background:white;
  padding:0.6rem 1rem;
  border-radius:40px;
  display:flex;
  gap:1.2rem;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  z-index:998;
}

.mobile-nav a{
  text-decoration:none;
  font-weight:600;
  color:var(--azul);
  font-size:0.9rem;
}

@media(min-width:1024px){
  .mobile-nav{display:none;}
}

@media(min-width:768px){
  .hero{
    padding:7rem 3rem;
  }

  .hero h1,h3{
    font-size:3rem;
  }
}


@media (min-width:1024px){

.hero{
  padding:8rem 6rem 9rem;
  border-bottom-left-radius:80px;
  border-bottom-right-radius:80px;
}

.hero h1,h3{
  font-size:3.6rem;
  max-width:800px;
  margin:auto;
}

.hero p{
  font-size:1.25rem;
  max-width:720px;
  margin:1.5rem auto 2.5rem;
}

}


@media (min-width:1024px){

.services-grid{
  grid-template-columns:repeat(3,1fr);
  gap:2.2rem;
}

.service-card{
  text-align:left;
  padding:2.4rem;
}

.icon{
  font-size:2rem;
  margin-bottom:1rem;
}

}


@media (min-width:1024px){

.testimonials{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  align-items:start;
}

.testimonials h2{
  grid-column:1 / -1;
  text-align:center;
}

}


@media (min-width:1200px){

.section{
  max-width:1200px;
  margin:auto;
  padding:5rem 2rem;
}

}


@media (hover:hover){

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(0,0,0,0.12);
}

}


@media (min-width:1024px){
  .mobile-only{
    display:none !important;
  }
}

/*******CONCTATO**** */

.seo-copy{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

@media(min-width:1024px){
  .seo-copy{
    padding:5rem 2rem;
  }
}



/* WHATSAPP */
.whatsapp-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:linear-gradient(135deg,#28a745,#1f6fb2);
  padding:1rem;
  text-align:center;
  z-index:999;
}

.whatsapp-bar a{
  color:white;
  font-weight:700;
  text-decoration:none;
  font-size:1.1rem;
}

/******new** */
.whatsapp-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  text-align: center;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #28a745, #1e7e34);
  z-index: 9999;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .whatsapp-fixed {
    display: none;
  }
}

/***** */
.mobile-contact-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:linear-gradient(135deg,#28a745,#1f6fb2);
  z-index:999;
}

.mobile-contact-bar a{
  color:white;
  text-decoration:none;
  font-weight:700;
  padding:1rem 0;
  text-align:center;
  font-size:0.95rem;
  border-right:1px solid rgba(255,255,255,0.25);
}

.mobile-contact-bar a:last-child{
  border-right:none;
}




/*******footer diseño***/
.footer{
 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 34px;
  background: linear-gradient(90deg, var(--azul), #16306a);
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer a{
  
  color:#fff;
  font-weight:600;
  text-decoration:none;
}


/**********pc */

@media (max-width:1023px){
  .header{display:none;}
}

/* PC */
@media(min-width:1024px){
  .hero{height:70vh;}
  .section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;}
  .trust{grid-template-columns:repeat(4,1fr);text-align:center;}
  .whatsapp-bar{display:none;}
}


@media(min-width:1024px){
  .mobile-contact-bar{display:none;}
}



@media (min-width:1024px){
  .hero{
    padding-top:140px;
  }
}



@media (min-width:1024px){
  section.section{
    display:block !important;
  }
}

@media (min-width:1024px){
  .contacto-grid{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    align-items:stretch;
  }

  .contacto-mapa{
    min-height:460px;
  }

  .contacto-mapa iframe{
    width:100%;
    height:100%;
    min-height:460px;
  }
}


@media (min-width:1024px){
  .hero{
    padding-top:160px;
  }
}


@media (min-width:1024px){
  .header{
    transition: all 0.3s ease;
  }
}


/* 📱 FOOTER FIJO SOLO EN MÓVIL */
@media (max-width:1023px){
  .footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:34px;
   
    z-index:998;
  }

  .whatsapp-fixed{
    bottom:34px; /* deja espacio para el footer */
  }

  /* Espacio extra para que el contenido no quede tapado */
  body{
    padding-bottom:110px;
  }
}


