:root {
  /* Colores base */
  --bg: #0b1220;          /* fondo principal */
  --surface: #0f1a30;     /* tarjetas / secciones */
  --surface-2: #132042;   /* hover / destacados */
  --surface-3: #2E448A;

  /* Texto */
  --text: #e9eefc;        /* texto principal */
  --muted: #b7c3e6;       /* texto secundario */
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;

  /* Marca La Esperanza */
  --primary: #36c2ff;     /* azul tecnológico */
  --secondary: #7c5cff;   /* violeta moderno */

  /* Estados */
  --success: #22c55e;     /* correcto / garantía */
  --warning: #f59e0b;     /* advertencia */
  --danger: #ef4444;      /* error */

  /* Extras */
  --border: rgba(255,255,255,0.12);
  --radius: 16px;
  --casiBlanco: #f5f7fb;   /* casi blanco */
  --surface-dark: #132042;   /* oscuro azulado noche */
  --surface-mid: #1B2A57;    /* medio azulado corporativo*/
  --surface-light: #EEF2FF;  /* claro azulado elegante */
  --accent: #38B6FF;         /* acento azul acción / botón*/

  /* Superficies (fondos) */
  --surface-dark: #132042;   /* fondo principal */
  --surface-mid:  #1B2A57;   /* formularios / secciones */
  --surface-light:#EEF2FF;   /* tarjetas claras */

  /* Acentos */
  --accent-primary: #38B6FF; /* botones */
  --accent-warning: #F5C542;/* circulo iconos */

  /* Texto */
  --text-dark:  #132042; /* h2 */
  --text-mid:   #1B2A57; /* h3 */
  --text-body:  #4B5563; /* párrafos */
  --text-light: #EAEAF0; /* texto sobre fondos oscuros */
}

/* Globales */
html, body {
    font-size: 62.5%;
    box-sizing: border-box; /* hack para box model */
    min-height: 100%;
    scroll-snap-type:y mandatory;
}
/** Scroll Snap **/
.titulo,
.contenedor,
.solicitar,
.footer {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

*, *:before, *:after {
  box-sizing: inherit;
}
body {
     font-family: "Inter", system-ui, -apple-system, "segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.6rem;  /*16px; pero 1rem = 10px*/
   background: none; /* quitamos el background aqui */
   position: relative;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to top, var(--surface), var(--surface-3));
    background-attachment: fixed;
    
}

/* Tipografia */
h1{
    font-size: 3.8rem;
    
}
h2 {
    font-size: 2.8rem;
    
}
h3 {
    font-size: 1.8rem;
    
}
h1, h2, h3 {
    text-align: center;
}
/* Titulo principal */
.titulo {
    text-align: center;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 3.8rem;
    font-weight: 900;
    color: var(--text-primary);;
}
.titulo span{
    display: block;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    color: var(--accent-warning);
}
.reseña {
    text-align: center;
    font-weight: 500;
    color: var(--accent-primary);
}
header{
  position: relative;
  z-index: 2;
  padding: 2rem 0 2.2rem;
}


/* Globales part 2 */
.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}
.boton {
    background-color: var(--primary);
    color: var(--text);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: .7rem;
    width: 90%;
    text-align: center;
    border: none;
}
@media (min-width: 768px) {
    .boton {
        width: auto;
    }
}
.boton:hover {
    cursor: pointer;
}
.sombra {
   box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
  -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
  -moz-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
   background-color: var(--surface-light);
   padding: 2rem;
   border-radius: 1rem;
}

/* Utilidades */
.w-sm-100 {
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }
}
.flex {
    display: flex;
}
.alinear-derecha {
    justify-content: flex-end;
}
/* Navegación Principal */
.nav-bg {
     background-color: var(--bg);
}
.navegacion-principal {
    
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;
        justify-content: space-between;
    }
}
.navegacion-principal a {
    display: block;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 2rem;
    padding: 1rem;
}
.navegacion-principal a:hover{
    background-color: var(--surface-2);
    color: var(--accent-warning);
}

/* hero o Imagen Principal */
.hero1 {
    background-image: url(../img/hero1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 410px;
    position: relative;
    margin-bottom: 2rem;
}
.hero1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(19 32 66 / 65%);
}
@media (max-width: 768px) {
    .hero1 {
        height: auto;
        min-height: 360px;
        padding: 3.5rem 0 4rem;
    }
}
.contenido-hero1 {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contenido-hero1 h2,
.contenido-hero1 p {
    color: var(--text);
}
.contenido-hero1 p {
    color: var(--text-secondary);
}

/* Servicios */
@media (min-width: 768px) {
    .servicios {
       display: grid;
       grid-template-columns: repeat(3, 1fr); /* fr = es una fraccion por cada columna */
       column-gap: 1rem;
    }
}
/* .subtitulo {
    color: var(--surface-dark);
} */
.servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.servicio h3 {
    color: var(--surface-mid);
}
.servicio p {
    line-height: 2;
    color: var(--text-body);
    text-align: center;
}
.servicio .iconos {
    height: 15rem;
    width: 15rem;
    background-color: var(--accent-warning);
    border-radius: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* solicitar diagnostico */
.solicitar {
    text-align: center;
}
/* H2 del formulario */
.solicitar h2{
  color: var(--accent-warning)
}

/* Texto debajo del H2 */
.solicitar > p{
  color: rgba(241, 245, 249, 0.88); /* casi blanco, muy legible */
}

.formulario{
    background-color: var(--surface-mid);
    width: min( 60rem, 100%); /* Utilizar el valor mas pequeño */
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem;
}
.formulario fieldset {
    border: none;
}
.formulario legend {
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--accent);
}
@media (min-width: 768px) {
    .contenedor-campos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        column-gap: 1rem;
    }
    .campo:nth-child(3),
    .campo:nth-child(5),
    .campo:nth-child(6),
    .campo:nth-child(7) {
        grid-column: 1 / 3;
    }
}

.campo {
    margin-bottom: 1.6rem;
}
.campo label {
    color: var(--text-light);
    font-weight: 600;
    margin: 0 0 .5rem 0;
    display: block;
    padding: 0;
}
.campo textarea {
    height: 20rem;
}
.input-text {
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}
.tipo-equipo {
    grid-column: 1 / -1;    /* ocupa todo el ancho del grid */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    margin: 2rem 0;
    width: 100%;
}
.tipo-equipo label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}
.tipo-equipo label:first-child{
    justify-self: start;
}
.tipo-equipo label:last-child {
    justify-self: end;
}
.tipo-equipo input[type="radio"] {
    transform: scale(1.15);
    accent-color: var(--accent);
}

.footer {
    text-align: center;
    color: var(--text-secondary);
}
/* Móvil (iPhone): 1 columna + radios sin empujes */
@media (max-width: 480px){
  .contenedor-campos{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .campo, .campo-full{
    grid-column: auto;
  }

  .tipo-equipo{
    justify-content: flex-start;
    gap: 2rem;
  }

  .tipo-equipo label:first-child,
  .tipo-equipo label:last-child{
    justify-self: center;
  }
}

/* Oculto SOLO al inicio */
#seccionFormulario {
  display: none;
}

/* Cuando se active, se muestra */
#seccionFormulario.activo {
  display: block;
}


/** ocultar barra de navegación **/
.navegacion-principal{
    display: none;
}


.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 9999;
  width:  58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: block;
}

.whatsapp-float:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.32);
  filter: brightness(1.05);
}
.whatsapp-float:active {
    transform: translateY(-1px) scale(.98);
}
@media (max-width: 480px){
  .whatsapp-float {
    right: 14px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
  }
  .whatsapp-icon {
    width: 50px;
    height: 50px;
  }
}

.whatsapp-qr{
  position: fixed;
  left: 10px;
  bottom: 20px;
  transform: none;
  z-index: 9998;
  padding: 0px;
  background: transparent;
}
.whatsapp-qr__title{
  margin: 0 0 3px;
  font-weight: 800;
  font-size: .95rem;
}
.qr-wrapper{
  position: relative;
  width: 140px;
  height: 140px;
}
.qr-img{
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 8px;
  border-radius: 10px;
  box-sizing: border-box;
}
.qr-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  padding: 2px;
  background: #fff;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.whatsapp-qr__hint{
  margin-top:  3px;
  font-size: .8rem;
  opacity: .85;
}
@media (max-width: 900px){
  .whatsapp-qr{ display: none; }
}

/* oculto*/
.whatsapp-qr__title,
.whatsapp-qr__hint{
  display: none;
}

/* === PRUEBA QR TRANSPARENTE === */
/*.whatsapp-qr{
  background: transparent;
  box-shadow: none;
  opacity: .7;
}

.qr-img{
  background: transparent;
  padding: 0;
}

.whatsapp-qr__title,
.whatsapp-qr__hint{
  display: none;
}*/

@media (max-width: 768px){
  html, body{
    scroll-snap-type: none;
  }
}
/* === FIX ANDROID / SAMSUNG HEADER-HERO === */

.hero1{
  margin-top: 0;
}

header + .nav-bg + .hero1,
header + .hero1{
  margin-top: .5rem;
}

@media (max-width: 768px){
  .hero1{
    height: auto;
    min-height: 360px;
    padding: 3.5rem 0 4rem;
  }
}
.input-error{
    outline: 2px solid #ef4444;
    box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}

.campo-email {
  display: none;
}

/* ===== ALERTAS DEL FORMULARIO ===== */
.formulario .error,
.formulario .correcto{
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-radius: .8rem;
  font-weight: 700;
  text-align: center;
  font-size: 1.5rem;
}

.formulario .error{
  background: rgba(239, 68, 68, .18);
  border: 1px solid rgba(239, 68, 68, .55);
  color: #fecaca; /* rojo claro */
}

.formulario .correcto{
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .55);
  color: #bbf7d0; /* verde claro */
}

/* ===== LABELS A LA IZQUIERDA ===== */
.formulario label{
  text-align: left;
  width: 100%;
}

/* ===== FIX ANDROID (campos centrados) ===== */
@media (max-width: 768px){
  .formulario{
    width: 100%;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .contenedor-campos{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .campo,
  .campo label,
  .input-text,
  textarea{
    margin-left: auto;
    margin-right: auto;
  }
}