:root {
  /* TIPOGRAFÍA: Open Sans para todo (Mejor legibilidad y SEO) */
  --default-font: "Open Sans", system-ui, -apple-system, sans-serif;
  --heading-font: "Open Sans", sans-serif;
  --nav-font: "Open Sans", sans-serif;

  /* PALETA DE COLORES NUTRICLOUD */
  --background-color: #ffffff;
  --surface-color: #ffffff;
  
  /* Textos generales (Gris Oscuro) */
  --default-color: #536172; 
  
  /* Azul Corporativo (#4272B8) - Títulos, Menú, Acentos */
  --heading-color: #4272B8; 
  --accent-color: #4272B8;
  --nav-bg-color: #4272B8; 
  
  /* Contrastes */
  --nav-text-color: #ffffff; 
  --contrast-color: #ffffff;
  --bg-soft-blue: #AFC1D0;

  --nav-how-work: #D5DEE6;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header (Estructura en dos filas)
--------------------------------------------------------------*/
.header {
  background-color: var(--background-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.header-top {
  margin-top: 5px;
  margin-bottom: 5px;
}


.header-bottom {
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Contenedor para apilar elementos (Flex Column) */
.stack-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px; /* Espacio entre el teléfono y el mail */
}

/* Ajustes de los enlaces de contacto */
.stack-info a {
  display: flex;
  align-items: center;
  color: var(--default-color);
  font-size: 13px; /* Un poco más pequeño para que quepa bien */
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.stack-info i {
  color: var(--accent-color);
  margin-right: 8px;
  font-size: 16px;
  width: 20px; /* Ancho fijo para que el texto se alinee verticalmente perfecto */
  text-align: center;
}

/* Ajustes Redes Sociales (Alineadas a la derecha) */
.social-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alineados a la derecha */
  gap: 2px;
}

.social-stack a {
  display: flex;
  align-items: center;
  color: var(--default-color);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.social-stack i {
  color: var(--accent-color);
  margin-right: 6px;
  font-size: 16px;
}



/* Fila Inferior: Menú de Navegación Azul */
.header-nav {
  background-color: var(--nav-bg-color);
  padding: 0;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: center; /* Centramos el menú como en tu referencia */
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a {
    color: var(--nav-text-color);
    font-size: 15px;
    padding: 18px 25px;
    font-family: var(--nav-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu li:hover>a {
    background-color: rgba(0, 0, 0, 0.1); /* Oscurece un poco al pasar el mouse */
    color: #fff;
  }
}

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
  color: var(--heading-color);
  font-size: 28px;
  cursor: pointer;
  line-height: 0;
  transition: 0.5s;
  position: absolute; /* Ajuste para móvil */
  right: 15px;
  top: 30px; 
}

/*--------------------------------------------------------------
# Hero Section (Inicio)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hero Section (Imagen de Fondo + Texto encima)
--------------------------------------------------------------*/
#hero {
  width: 100%;
  min-height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
  /* Aquí cargamos tu imagen de fondo */
  background: url("../img/main.png") top center no-repeat;
  background-size: cover; /* Ajusta la imagen para cubrir todo sin deformarse */
  position: relative;
  padding: 0;
  display: flex;
  align-items: center; /* Centra el texto verticalmente */
}

/* Capa blanca semitransparente para que el texto se lea bien sobre la foto */
#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05); /* Blanco al 75% de opacidad */
  z-index: 1;
}

/* Aseguramos que el contenido esté POR ENCIMA de la capa blanca */
#hero .container {
  position: relative;
  z-index: 2;
}

/* Ajustes de tipografía (Mantenemos tu SEO y estilo) */
.hero .seo-h1 {
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--default-color);
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.hero .visual-headline {
  font-size: 4rem; /* Grande e impactante */
  font-weight: 800;
  color: var(--heading-color);
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero .seo-h2 {
  font-size: 1.5rem;
  color: var(--default-color);
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1.5;
  max-width: 700px; /* Evita que el texto sea demasiado ancho y difícil de leer */
}

/* Botón WhatsApp */
.btn-nutri {
  display: inline-block;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.8); /* Fondo semi-blanco para resaltar */
  border-radius: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-nutri:hover {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 15px rgba(66, 114, 184, 0.4);
}

/* Responsive para móvil */
@media (max-width: 768px) {
  #hero {
    min-height: 60vh; /* Un poco más corto en móvil */
    text-align: center; /* Centramos todo en móvil */
  }
  
  .hero .visual-headline {
    font-size: 2.8rem;
  }
  
  .hero .seo-h2 {
    font-size: 1.2rem;
  }
  
  /* Centramos el contenedor del H2 en móvil */
  .hero .seo-h2 {
    margin-left: auto;
    margin-right: auto;
  }
}

/*--------------------------------------------------------------
# Sección Enfoque (Texto Introductorio)
--------------------------------------------------------------*/
.enfoque-section {
  padding: 60px 0 0 0;
  background: #fff;
}

.enfoque-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000; /* Título negro fuerte como en la imagen */
  text-align: center;
  margin-bottom: 30px;
}

/* Pregunta azul destacada */
.enfoque-question {
  color: var(--accent-color); /* Tu azul #4272B8 */
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* Texto general */
.enfoque-text {
  color: var(--default-color);
  margin-bottom: 20px;
  line-height: 1.8;
  text-align: justify; /* <--- AÑADIDO: Texto alineado a ambos márgenes */
}


/*--------------------------------------------------------------
# Sección Sobre Mí (Tarjeta Flotante)
--------------------------------------------------------------*/
.profile-section {
  background-color: var(--bg-soft-blue); /* El nuevo color #AFC1D0 */
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La tarjeta blanca contenedora */
.profile-card {
  background: #fff;
  border-radius: 8px; /* Bordes redondeados sutiles */
  overflow: hidden; /* Para que la imagen respete el borde */
  box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra suave para que "flote" */
  padding: 0;
}

.profile-img-col {
  padding: 0; /* Sin espacios para que la foto toque los bordes */
  min-height: 100%;
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-content {
  padding: 40px; /* Espacio interno del texto */
}

.profile-content p {
  text-align: justify; /* <--- AÑADIDO: Texto alineado a ambos márgenes */
  margin-bottom: 15px; /* Asegura separación entre párrafos */
}


.profile-name {
  color: var(--default-color); /* "Soy Luis Miguel" en gris oscuro */
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.profile-role {
  color: var(--heading-color); /* "Nutricionista-Dietista" en Azul */
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

@media (max-width: 991px) {
  .profile-card {
    text-align: center; /* En móvil centramos */
  }
  .profile-img {
    height: 300px; /* Altura controlada en móvil */
  }
}

/*--------------------------------------------------------------
# Sección Servicios (Tarjetas Azules)
--------------------------------------------------------------*/
.services-section {
  background-color: #fff; /* Fondo limpio para que destaquen las tarjetas */
}

.section-title h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--default-color); /* Título en gris oscuro/negro */
  margin-bottom: 50px;
  text-align: center;
  position: relative;
}

/* La tarjeta azul corporativa */
.service-card {
  background-color: var(--accent-color); /* Tu azul #4272B8 */
  color: #fff; /* Texto blanco */
  padding: 40px;
  border-radius: 8px; /* Bordes redondeados suaves */
  height: 100%; /* Para que ambas tarjetas midan lo mismo de alto */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(66, 114, 184, 0.2);
}

.service-card:hover {
  transform: translateY(-5px); /* Pequeño salto al pasar el mouse */
  box-shadow: 0 10px 25px rgba(66, 114, 184, 0.4);
}

/* Cabecera de la tarjeta (Título + Icono) */
.service-header {
  display: flex;
  justify-content: space-between; /* Título a la izq, Icono a la der */
  align-items: flex-start;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Línea separadora sutil */
  padding-bottom: 20px;
}

.service-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.service-icon {
  font-size: 3rem; /* Icono grande */
  color: #fff;
  opacity: 0.9;
  margin-left: 15px;
}

/* Texto del cuerpo justificado */
.service-card p {
  color: rgba(255, 255, 255, 0.95); /* Blanco casi puro */
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify; /* <--- Petición cumplida */
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Sección Cómo Trabajamos (Timeline Corregido)
--------------------------------------------------------------*/
.how-it-works-section {
  padding: 80px 0;
  background-color: #fff;
}

/* TÍTULO NEGRO */
#como-trabajamos .section-title h2 {
  color: #000000 !important; /* Forzamos el negro puro */
}

/* --- Estructura Timeline --- */
.timeline-wrapper {
  position: relative;
  /* Eliminamos padding del wrapper, lo controlamos en el step */
}

/* La línea vertical (Más gruesa y visible) */
.timeline-wrapper::before {
  content: '';
  position: absolute;
  left: 29px; /* Posición exacta para cruzar el centro de los círculos */
  top: 0;
  bottom: 0;
  width: 3px; /* Más gruesa */
  background: #dbe1e6; /* Gris visible pero sutil */
  z-index: 0;
}

/* Cada paso (Contenedor) */
.timeline-step {
  position: relative;
  padding-left: 80px; /* Espacio para el círculo y la línea */
  margin-bottom: 50px;
}

/* El Círculo del Tick */
.timeline-step .timeline-marker {
  position: absolute;
  left: 10px; /* Alineado a la izquierda */
  top: 0;
  width: 40px; /* Un pelín más grandes */
  height: 40px;
  border-radius: 50%;
  background: #e9ecef; /* Gris apagado por defecto */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 1; /* Por encima de la línea */
  border: 4px solid #fff; /* Borde blanco grueso para "cortar" la línea visualmente */
  transition: all 0.4s ease-out;
}

/* Estado Activo */
.timeline-step.active .timeline-marker {
  background-color: var(--accent-color); /* Se pone AZUL */
  border-color: var(--accent-color);     /* Borde también azul si quieres, o blanco */
  transform: scale(1.2);                 /* Efecto "pop" un poco más grande */
  box-shadow: 0 0 0 5px rgba(66, 114, 184, 0.2);
}

/* Contenido de texto */
.timeline-content {
  background: #D5DEE6;
  padding: 25px;
  border-radius: 8px;
  position: relative;
  border: 1px solid #edf2f4; /* Borde muy sutil */
}

.timeline-content h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000; /* Títulos de los pasos en negro */
}

.timeline-content p {
  font-size: 0.95rem;
  color: var(--default-color);
  text-align: justify;
  margin-bottom: 0;
}

.text-highlight {
  color: var(--accent-color); /* Azul corporativo */
  font-weight: 700;
  cursor: default; /* El cursor se queda normal, no sale la manita */
}

/* Flecha conectora (Solo PC) */
@media (min-width: 992px) {
  .arrow-connector {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #D5DEE6; /* Mismo color que la caja */
    z-index: 10;
  }
}

/* Caja Derecha (Planificación) */
.plan-card {
  background-color: var(--default-color);
  color: #fff;
  padding: 40px;
  border-radius: 8px;
  height: 100%;
  position: sticky;
  top: 100px;
}

.plan-card h3 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.2;
}

.plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-list li {
  margin-bottom: 25px;
  padding-left: 20px;
  position: relative;
}

/* Bullet points personalizados */
.plan-list li::before {
  content: "•";
  color: #fff; /* Bullet blanco */
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

.plan-list strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: #fff;
}

.plan-list span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  text-align: justify;
}

/*--------------------------------------------------------------
# Sección Tarifas
--------------------------------------------------------------*/
.pricing-section {
  background-color: var(--accent-color); /* Fondo Azul Corporativo */
  padding-bottom: 80px;
  position: relative; /* Para posicionar la imagen arriba si fuera necesario */
}

/* La franja de imagen de frutas */
.pricing-decoration {
  width: 100%;
  height: 100px; /* Ajusta la altura según tu foto */
  background-image: url('../img/fruta3.png'); /* <--- AQUÍ PONES TU RUTA DE IMAGEN */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 60px; /* Espacio entre la foto y el título */
  /* Si no tienes la foto aún, se verá un espacio vacío o puedes poner un color temporal */
}

.pricing-section .section-title h2 {
  color: #fff !important; /* Título "Tarifas" en blanco */
  margin-bottom: 50px;
}

/* Tarjetas de Precio */
.price-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 4px; /* Bordes ligeramente redondeados pero rectos como en la foto */
  text-align: center;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  border: 4px solid #fff; /* Doble borde sutil si se quiere, o simple */
}

.price-card:hover {
  transform: translateY(-10px); /* Efecto elevación */
}

/* El Precio */
.price-tag {
  margin-bottom: 30px;
}

.price-amount {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

.price-period {
  font-size: 1.2rem;
  color: #6c757d;
  font-weight: 400;
}

/* Texto de oferta (Card 3) */
.promo-text {
  color: var(--accent-color);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 5px;
  display: block;
}

/* Las cajitas grises de servicios */
.price-feature-box {
  background-color: #f1f5f9; /* Gris muy clarito */
  color: #333;
  padding: 15px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 0.95rem;
}


/*--------------------------------------------------------------
# Decoración Banners (Base + Variantes)
--------------------------------------------------------------*/
/* 1. CLASE BASE (Lo que comparten todas) */
.decoration-banner {
  width: 100%;
  height: 100px; /* Ajusta la altura si tus imágenes son más altas */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}

/* 2. CLASES ESPECÍFICAS (Solo cambia la imagen) */

/* Imagen para el final de "Nutricionista Online" */
.bg-intro-fruit {
  background-image: url('../img/fruta1.png');
}

/* Imagen para el inicio de "Servicios" */
.bg-services-fruit {
  background-image: url('../img/fruta2.png');
}

/* Imagen para el inicio de "Tarifas" */
.bg-pricing-fruit {
  background-image: url('../img/fruta3.png');
}


/* 3. ESPACIADOS (Para separar del texto) */
.spacing-top {
  margin-bottom: 60px; /* Para cuando la imagen va ARRIBA del contenido */
}

.spacing-bottom {
  margin-top: 60px; /* Para cuando la imagen va ABAJO del contenido */
}


/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}