/* =======================================================================
   styles.css — El DISEÑO de BioVida (la "piel y ropa" del esqueleto HTML)
   Lee los comentarios: te explican qué hace cada bloque.
   ======================================================================= */


/* ---------- 1. VARIABLES DE COLOR ----------
   Definimos los colores UNA sola vez aquí y los reutilizamos en todo el
   sitio con var(--nombre). Si algún día quieres cambiar el azul, lo cambias
   en UN lugar y se actualiza toda la página. Esto es oro. */
:root {
  --primario:      #0A3A4A;  /* petróleo profundo (más serio, "ingeniería") */
  --primario-claro:#0D5C75;  /* azul medio, para detalles y degradados */
  --acento:        #12A37A;  /* verde esmeralda profundo (resalta sin brillar) */
  --acento-oscuro: #0C8062;  /* el mismo verde, más oscuro, para hovers */
  --texto:         #0B2027;  /* casi negro azulado (para leer) */
  --texto-suave:   #5A7079;  /* gris azulado (textos secundarios) */
  --fondo:         #F5F8F8;  /* blanco frío (fondo general) */
  --blanco:        #FFFFFF;
  --borde:         #E1EAEE;  /* líneas y bordes sutiles */
}


/* ---------- 2. REGLAS BASE (para toda la página) ---------- */

/* El '*' significa "TODOS los elementos". Esto quita los márgenes raros
   que los navegadores ponen por defecto, para partir de cero limpio. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* hace que los tamaños sean predecibles */
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background-color: var(--fondo);
  line-height: 1.6;  /* espacio entre líneas: hace el texto más legible */
}

/* Todas las secciones comparten el mismo respiro y ancho máximo,
   así el contenido no se pega a los bordes ni se estira demasiado
   en pantallas grandes. */
section {
  max-width: 1100px;      /* no más ancho que esto (se ve mejor) */
  margin: 0 auto;         /* centra el bloque horizontalmente */
  padding: 80px 24px;     /* aire arriba/abajo (80) y a los lados (24) */
}


/* ---------- 3. ENCABEZADO / BARRA SUPERIOR ---------- */
header {
  display: flex;                  /* pone logo y menú en una misma fila */
  justify-content: space-between; /* logo a la izquierda, menú a la derecha */
  align-items: center;            /* los alinea verticalmente al centro */
  padding: 20px 24px;
  background-color: var(--blanco);
  border-bottom: 1px solid var(--borde);
  position: sticky;               /* la barra se queda pegada arriba... */
  top: 0;                         /* ...al hacer scroll */
  z-index: 10;                    /* se mantiene por encima del contenido */
}

/* Logo: ícono a la izquierda + texto a la derecha */
.marca {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.marca-icono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;   /* que el ícono no se encoja */
}

/* El texto del logo apilado (nombre + descriptor) */
.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.marca-nombre {
  color: var(--primario);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.marca-descriptor {
  color: var(--acento-oscuro);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;         /* separación entre letras: se ve elegante */
  text-transform: uppercase;    /* MAYÚSCULAS para el descriptor */
}

nav a {
  color: var(--texto);
  text-decoration: none;   /* quita el subrayado azul feo de los enlaces */
  margin-left: 28px;
  font-weight: 500;
  transition: color 0.2s;  /* el cambio de color será suave, no brusco */
}

nav a:hover {              /* :hover = cuando pasas el mouse encima */
  color: var(--acento);
}


/* ---------- 4. SECCIÓN "HERO" (lo primero que se ve) ---------- */
/* HERO OSCURO de ancho completo. Rompemos el max-width de las demás
   secciones (max-width:none) para que el fondo cubra toda la pantalla.
   El texto interno sigue centrado gracias a los max-width de h2 y p. */
#inicio {
  max-width: none;
  text-align: center;
  padding-top: 120px;
  padding-bottom: 120px;
  /* Degradado diagonal del petróleo profundo a un tono aún más oscuro:
     da profundidad y se ve premium. */
  background: linear-gradient(135deg, var(--primario) 0%, #062430 100%);
  color: var(--blanco);
}

#inicio h2 {
  font-size: 2.9rem;
  color: var(--blanco);        /* blanco sobre el fondo oscuro */
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 1.2;
}

/* Resaltamos una palabra clave del título en verde menta (lo hace en el HTML
   quien quiera; si no, todo el título va en blanco). */
#inicio h2 .resalte {
  color: var(--acento);
}

#inicio p {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.82);  /* blanco un poco translúcido: se lee suave */
  max-width: 640px;
  margin: 0 auto 36px;
}

/* Contenedor de los dos botones del hero */
.hero-botones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;   /* si no caben, se acomodan en dos filas (celular) */
}

/* El botón principal (CTA = "llamada a la acción"). Usa el verde de acento
   para que destaque: es LA acción que queremos que el visitante haga.
   Ahora es una CLASE (.boton-principal) para reutilizarlo en varias partes. */
.boton-principal {
  display: inline-block;
  background-color: var(--acento);
  color: var(--blanco);
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 8px;         /* esquinas redondeadas */
  font-weight: 600;
  font-size: 1.05rem;
  transition: transform 0.15s, box-shadow 0.2s;
}

.boton-principal:hover {
  transform: translateY(-2px);           /* el botón "sube" un poquito */
  box-shadow: 0 8px 20px rgba(34,181,115,0.35); /* y proyecta sombra verde */
}

/* Botón secundario de WhatsApp: "outline" (contorno) blanco, porque va sobre
   el hero OSCURO. Es la opción secundaria; no compite con el botón verde. */
.boton-whatsapp {
  display: inline-block;
  background-color: transparent;
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 14px 34px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.boton-whatsapp:hover {
  background-color: var(--blanco);
  color: var(--primario);
  border-color: var(--blanco);
}


/* ---------- FRANJA DE CONFIANZA ----------
   La ponemos CLARA (fondo blanco), justo debajo del hero oscuro. Ese contraste
   oscuro→claro marca un ritmo visual limpio y hace que los datos resalten. */
.franja-confianza {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  background-color: var(--blanco);
  color: var(--texto);
  padding: 34px 24px;
  text-align: center;
  border-bottom: 1px solid var(--borde);
}

.franja-confianza div {
  display: flex;
  flex-direction: column;
}

.franja-confianza strong {
  font-size: 1.7rem;
  color: var(--primario);   /* el número en azul petróleo */
}

.franja-confianza span {
  font-size: 0.9rem;
  color: var(--texto-suave);
}


/* ---------- 5. TÍTULOS DE SECCIÓN ---------- */
section > h2 {
  font-size: 2rem;
  color: var(--primario);
  text-align: center;
  margin-bottom: 12px;
}


/* ---------- 6. SERVICIOS (rejilla de tarjetas) ---------- */
/* 'grid' arma una cuadrícula automática. auto-fit + minmax hace la MAGIA
   responsiva: en pantalla ancha caben 3-4 tarjetas por fila; en celular
   se apilan solas en 1 columna. No tienes que programar cada caso. */
/* minmax(300px, 1fr): con este mínimo, en escritorio caben exactamente 3
   columnas que se reparten TODO el ancho (auto-fit las estira). Así las 3
   tarjetas llenan la fila sin huecos y no parece que falte una. */
#servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;   /* las 3 tarjetas quedan de la misma altura */
}

#servicios > h2 {
  grid-column: 1 / -1;   /* el título ocupa todo el ancho de la rejilla */
}

/* Cada tarjeta de servicio */
#servicios article {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 32px 26px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#servicios article:hover {
  transform: translateY(-4px);   /* la tarjeta "flota" al pasar el mouse */
  box-shadow: 0 12px 28px rgba(13,92,117,0.12);
}

/* La barrita verde arriba de cada título de servicio (detalle de marca) */
#servicios article h3 {
  color: var(--primario);
  font-size: 1.2rem;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 3px solid var(--acento);
  display: inline-block;
}

#servicios article p {
  color: var(--texto-suave);
}

/* Lista "qué incluye" dentro de cada tarjeta de servicio */
#servicios article ul {
  list-style: none;        /* quitamos las viñetas grises por defecto */
  margin-top: 16px;
}

#servicios article li {
  position: relative;
  padding-left: 26px;      /* espacio para la palomita */
  margin-bottom: 8px;
  color: var(--texto);
  font-size: 0.95rem;
}

/* La palomita verde (✓) la dibujamos con ::before, sin imágenes */
#servicios article li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--acento);
  font-weight: 700;
}


/* ---------- 6b. EQUIPOS QUE ATENDEMOS ---------- */
.equipos-intro {
  text-align: center;
  color: var(--texto-suave);
  max-width: 640px;
  margin: 0 auto 40px;
}

.equipos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.equipo-item {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);  /* barrita verde a la izquierda */
  border-radius: 8px;
  padding: 20px 22px;
}

.equipo-item h3 {
  color: var(--primario);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.equipo-item p {
  color: var(--texto-suave);
  font-size: 0.95rem;
}


/* ---------- 7. NOSOTROS ---------- */
#nosotros {
  text-align: center;
  max-width: 760px;
}

#nosotros p {
  font-size: 1.15rem;
  color: var(--texto-suave);
  margin-top: 10px;
}


/* ---------- 8. CONTACTO ---------- */
#contacto {
  text-align: center;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  max-width: 940px;
  margin-top: 20px;
  margin-bottom: 60px;
}

#contacto > p {
  color: var(--texto-suave);
  margin-top: 8px;
}

/* Dos columnas: formulario (más ancho) + datos directos.
   fr = "fracción". 1.4fr y 1fr = la izquierda es un poco más ancha. */
.contacto-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  margin-top: 36px;
  text-align: left;
}

/* ----- El formulario ----- */
.formulario {
  display: flex;
  flex-direction: column;   /* apila los campos uno debajo de otro */
}

.formulario label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}

/* Estilo común para las 3 clases de campo */
.formulario input,
.formulario select,
.formulario textarea {
  font-family: inherit;      /* usa la misma tipografía del sitio */
  font-size: 1rem;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background-color: var(--fondo);
  color: var(--texto);
}

/* :focus = cuando el campo está seleccionado. Le damos borde verde
   para que el usuario vea claramente dónde está escribiendo. */
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--acento);
}

.formulario textarea {
  resize: vertical;          /* solo se puede estirar en vertical */
}

.formulario .boton-principal {
  color: var(--blanco);
  border: none;
  cursor: pointer;           /* el mouse se vuelve "manita" sobre el botón */
  margin-top: 4px;
}

/* ----- Datos de contacto directo ----- */
.contacto-datos {
  padding: 24px;
  background-color: var(--fondo);
  border-radius: 12px;
}

.contacto-datos h3 {
  color: var(--primario);
  margin-bottom: 14px;
}

.contacto-datos p {
  color: var(--texto-suave);
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.contacto-datos strong {
  color: var(--texto);
}

/* Los enlaces (teléfono y correo) en verde, para invitar a hacer clic */
#contacto a {
  color: var(--acento-oscuro);
  font-weight: 600;
}


/* ---------- 9. PIE DE PÁGINA ---------- */
footer {
  background-color: var(--primario);
  color: var(--blanco);
  text-align: center;
  padding: 30px 24px;
}


/* ---------- 10. AJUSTES PARA CELULAR ----------
   @media = "aplica estas reglas SOLO cuando la pantalla sea angosta"
   (celulares, menos de 640px de ancho). Así el sitio se adapta. */
@media (max-width: 640px) {
  #inicio h2 { font-size: 2rem; }   /* título más chico en celular */
  header { flex-direction: column; gap: 12px; }  /* logo y menú apilados */
  nav a { margin: 0 14px; }
  section { padding: 50px 20px; }
  /* En celular, el contacto pasa de 2 columnas a 1 (se apilan) */
  .contacto-cols { grid-template-columns: 1fr; gap: 28px; }
}