/* ========================================
   1. VARIABLES DE COLOR
   ======================================== */
   :root {
    /* Colores principales (ajusta según tus necesidades) */
    --color-primary: #ec008c;       
    --color-primary2: #f33eaa;  
    --color-secondary: #a0c3a3;  
    --color-heading: #00a79d;     
    --color-text: #333333;       
    --color-primary-dark: #38b7af;
    --color-primary-light: #f435a7;
    
    /* Colores neutros */
    --color-bg: #ffffff;
    --color-text: #333333;
    --color-dark: #1a1a1a;
    --color-light: #f9f9f9;
    
    /* Otros acentos */
    --color-accent: #00a79d;
    --color-accent-dark: #c69a0b;

      /* Fondo con gradiente*/
        --color-bg-gradient-start: #f0fff8;
        --color-bg-gradient-end: #e1f2e6;
  }
  
  /* ========================================
     2. ESTILOS GENERALES
     ======================================== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    background: linear-gradient(
        180deg,
        var(--color-bg-gradient-start) 0%,
        var(--color-bg-gradient-end) 100%
      );
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
  }
  /* =========================
   Sección Hero (300px alto)
   ========================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 150px;        /* Altura fija */
    overflow: hidden;     /* Recorta la imagen que sobrepase */
  }
  .hero-bg {
    width: 100%;
    height: 100%;
  }
  /* Imagen */
  .hero-img {
    width: 100%;          /* Ocupa todo el ancho */
    height: 100%;         /* Coincide con los  xxpx del contenedor */
    object-fit: cover;    /* Cubre el contenedor sin deformar */
  }
  
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: var(--color-primary-dark);
  }
  @font-face {
    font-family: 'Montserrat'; /* Nombre con el que la usarás */
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'LobsterTwo'; /* Nombre con el que la usarás */
    src: url('../fonts/LobsterTwo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  /* ========================================
     3. ENCABEZADOS Y TEXTOS
     ======================================== */
  h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", serif; 
    margin-bottom: 0.5rem;
    color: var(--color-dark);
  }
  
  h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
  }
  p {
    margin-bottom: 1rem;
  }
  
  /* ========================================
     4. BOTONES
     ======================================== */
  .btn-primary {
    background-color: var(--color-bg-gradient-end);
    color: var(--color-text);
    border: 1px solid var(--color-primary-dark);
    transition: background-color 0.3s ease;
    padding: 0.6rem 1.2rem;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  
  .btn-primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-dark);
  }
  
  .btn-accent {
    background-color: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent-dark);
    transition: background-color 0.3s ease;
    padding: 0.6rem 1.2rem;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  
  .btn-accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
  }
  
  /* ========================================
     5. NAVBAR
     ======================================== */
  .navbar {
    position: fixed;
    top: 5px;
    
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7) !important;
    padding: 3rem;

    z-index: 10;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  /* Estado cuando se hace scroll (clase "scrolled") */
.navbar.scrolled {
    position: fixed;   /* Se vuelve fijo en la parte superior */
    background-color: #ffffff;  /* Fondo blanco */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
    
  .navbar-nav .nav-link {
    color: var(--color-text);
    font-weight: 500;
    margin-right: 1rem;
    transition: color 0.3s ease;
  }
  .navbar.scrolled .nav-link {
    color: var(--color-text); /* Texto oscuro cuando el fondo es blanco */
  }
  .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    transition: width 0.3s ease;
  }
  .navbar-nav .nav-link:hover {
    color: var(--color-primary-dark);
  }
  
  /* Si necesitas navbar fijo:
     .navbar {
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 999;
     }
     y añadir padding-top en el contenido:
     body {
       padding-top: 70px;
     }
  */
  
  /* ========================================
     6. CARRUSEL
     ======================================== */
  #carousel-section {
    margin-top: 0; 
    position: relative; 
    width: 100%;
  }
  
  .carousel {
    position: relative;
  }
  
  .carousel .carousel-inner {
    max-height: 600px; /* Límite de altura */
    overflow: hidden;
  }
  
  .carousel-item img {
    width: 100%;
    object-fit: cover; 
    min-height: 400px; 
    max-height: 600px;
  }
  
  /* Indicadores */
  .carousel-indicators [data-bs-target] {
    background-color: var(--color-primary);
  }
  
  /* Leyendas del carrusel */
  .carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 5%;
    right: 5%;
    
    border-radius: 0.5rem;
    padding: 1rem;
  }
  
  .carousel-caption h1,
  .carousel-caption p {
    color: #fff;
    margin-bottom: 0.5rem;
  }
  
  .carousel-caption h1 {
    font-size: 2.5rem;
  }
  .carousel-caption button {
    margin-top: 0.5rem;
  }
  
  /* Controles */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: var(--color-primary-dark);
    border-radius: 10%;
    padding: 10px;
  }
  
  /* ========================================
     7. SECCIONES VARIAS
     ======================================== */
  /* Sección de servicios, por ejemplo */
  #services {
    padding: 40px 0;
    background-color: var(--color-light);
  }
  
  #services .card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  #services .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  
  #services .card-img-top {
    height: 180px;
    object-fit: cover;
  }
  
  #services .card-body {
    padding: 20px;
  }
  
  /* ========================================
     8. FOOTER
     ======================================== */
  footer {
    background-color: var(--color-dark);
    color: #f8f9fa;
    padding: 30px 0;
    margin-top: 2rem;
    text-align: center;
  }
  
  footer h5 {
    font-size: 1.2rem;
    color: #f8f9fa;
    margin-bottom: 20px;
  }
  
  footer a {
    color: #f8f9fa;
    transition: color 0.3s ease;
  }
  
  footer a:hover {
    color: var(--color-primary-light);
  }
  
  footer .fab {
    color: #f8f9fa;
    transition: color 0.3s ease;
    margin: 0 0.5rem;
  }
  
  footer .fab:hover {
    color: var(--color-primary-light);
  }
  /* ========== Secciones de Contraste ========== */

/* Fondo claro (Secciones 3, 5) */
.section-light {
    background-color: #f9f9f9; /* O blanco #fff, si prefieres */
    padding: 60px 20px;
  }
  
  /* Fondo oscuro (Secciones 4, 6) */
  .section-dark {
    background-color: #2f2f2f; /* Tonos oscuros */
    color: #fff; /* Asegura texto blanco */
    padding: 60px 20px;
  }
  .section-dark h2, h3, h4 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff; /* Asegura texto blanco */
  }
  .section-light h2, h3, h4 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #000; /* Asegura texto blanco */
  }
  /* Contenedor centrado */
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* ========== SECCIÓN 3: Artículos ========== */
  .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .article-card {
    background-color: #fff;  /* Tarjeta en blanco */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    color: #333;             /* Texto oscuro */
    transition: box-shadow 0.3s;
  }
  .article-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  .article-card h3 {
    margin: 1rem;
    font-size: 1.25rem;
    color: #2f2f2f;
  }
  .article-card p {
    margin: 0 1rem 1rem 1rem;
    line-height: 1.5;
  }
  .btn-read-more {
    display: inline-block;
    margin: 0 1rem 1rem 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-heading); 
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
  }
  .article-card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  
  /* ========== SECCIÓN 4: ¿Quiénes somos? ========== */
  /* (Está en .section-dark, con texto blanco por defecto) */
  #about-us p {
    margin-top: 1rem;
    line-height: 1.6;
  }
  
  /* ========== SECCIÓN 5: Servicios ========== */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .service-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    transition: box-shadow 0.3s;
  }
  .service-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  .service-card h3 {
    font-size: medium;
    width: 100%;
    background: linear-gradient(61deg, var(--color-primary), var(--color-primary2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    margin-bottom: 0px;
  }

  .service-card p {
    margin: 3rem 2rem 3rem 2rem;
    color: #666;
  }
  .btn-service {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-heading); 
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  .btn-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  .service-card:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  }
  
  /* ========== SECCIÓN 6: Testimonios ========== */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .testimonial-card {
    background-color: #151515; /* un gris más claro que #2f2f2f */
    border-radius: 8px;
    padding: 1rem;
    font-style: italic;
    transition: background-color 0.3s;
  }
  .testimonial-card p {
    margin-bottom: 0.5rem;
    color: #fff;
  }
  .testimonial-card cite {
    display: block;
    text-align: right;
    font-style: normal;
    color: #ccc;
    opacity: 0.8;
  }
  .testimonial-card:hover {
    background-color: var(--color-primary);
  }
  

  /* Sección con imagen de fondo */
.section-about-us {
    position: relative;
    /* Ruta de tu imagen de fondo (ajusta la ruta según tu proyecto) */
    background: url("../images/Somos.jpg") no-repeat center center;
    background-size: cover;
    color: #fff; /* Texto blanco por defecto */
  }
  
  /* Capa superpuesta para oscurecer la imagen y resaltar el texto */
  .section-about-us .about-overlay {
    background-color: rgba(0, 0, 0, 0.4); 
    padding: 160px 40px; /* Espacio interno para la sección */
  }
  
  /* Contenedor centrado */
  .section-about-us .container {
    max-width: 1200px;
    height: 200px;
    margin: 0 auto;
  }
  
  /* Ajustes de título y párrafo (opcional) */
  .section-about-us h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff; /* Asegura texto blanco */
  }
  .section-about-us p {
    line-height: 1.6;
    font-size: 1rem;
    max-width: 800px;
    margin-bottom: 0; /* Ajusta según tu preferencia */
  }
  .testimonials-section h1, h2, h3, h4 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
  }
  /* Sección de Testimonios con fondo oscuro */
  .testimonials-section {
    background-color: #2f2f2f; /* Fondo oscuro */
    color: #fff;              /* Texto en blanco */
    padding: 60px 20px;
  }
  
  /* Contenedor principal */
  .testimonials-section .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Título */
  .testimonials-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  /* Grid para los testimonios */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  

  
  /* Imagen del autor redondeada */
  .testimonial-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%; /* Hace la imagen circular */
    margin-bottom: 1rem;
    border: 2px solid #fff; /* Borde blanco para resaltar */
  }
  
  /* Texto del testimonio */
  .testimonial-card p {
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }
  
  /* Nombre del autor */
  .testimonial-card cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;  /* Evita que <cite> aparezca en cursiva */
    color: #ccc;
  }
  

  
/* Layout para la sección de Escritura Asistida */
.escritura-asistida-layout {
    display: flex;
    flex-wrap: wrap;        /* Para adaptarse en móviles */
    align-items: flex-start; /* Alinea al inicio verticalmente */
    gap: 2rem;             /* Espacio entre columnas */
  }
  
  /* Disposición en dos columnas */
  .curaduria-layout {
    display: flex;
    flex-wrap: wrap;        /* Para adaptarse en móviles */
    align-items: flex-start; /* Alinea al inicio verticalmente */
    gap: 2rem;             /* Espacio entre columnas */
  }
  
  /* Columna de texto alineado a la derecha */
  .texto-derecha {
    flex: 1 1 48%;          /* Ocupa 50% del ancho, ajustable */
    text-align: right;      /* Alineación del texto a la derecha */
  }
  .texto-derecha ul {
    list-style-position: inside; /* Hace que el bullet se dibuje dentro del contenedor */
    text-align: right;          /* Alinea el texto y el bullet a la derecha */
    padding-right: 0;           /* Asegúrate de no tener padding innecesario */
    margin-right: 1.5rem;       /* Ajusta si quieres un pequeño espacio desde el borde */
  }
  .texto-izquierda {
    flex: 1 1 48%;          /* Ocupa 50% del ancho, ajustable */
    text-align: left;      /* Alineación del texto a la derecha */
  }  
  /* Columna de imagen */
  .imagen-derecha {
    flex: 1 1 48%;          /* Ocupa 50% del ancho, ajustable */
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;     /* Centra verticalmente si es necesario */
  }
  .imagen-izquierda {
    flex: 1 1 48%;          /* Ocupa 50% del ancho, ajustable */
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;     /* Centra verticalmente si es necesario */
  }
  
  .imagen-derecha img {
    max-width: 100%;        /* Escala la imagen sin exceder el contenedor */
    height: auto;
    border-radius: 6px;     /* Opcional, para esquinas redondeadas */
  }
  .imagen-izquierda img {
    max-width: 100%;        /* Escala la imagen sin exceder el contenedor */
    height: auto;
    border-radius: 6px;     /* Opcional, para esquinas redondeadas */
  }
  
/* Hero para secciones “¿Quiénes somos?” y “¿Porqué Ambrosioo?” */
.hero-about {
    position: relative;
    width: 100%;
    height: 80vh; /* Ocupa el 80% de la ventana (ajusta a tu gusto) */
    background: url("../images/hero-about.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Capa superpuesta en color oscuro */
  .hero-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* oscurece la imagen */
    color: #fff;
    text-align: center;
    padding: 2rem;
    width: 100%;
    max-width: 800px; /* para limitar la anchura del texto */
    margin: 0 auto;
    border-radius: 8px; /* opcional */
  }
  
  /* Texto grande */
  .hero-overlay h1 {
    font-size: 3rem; 
    margin-bottom: 1rem;
  }
  
  .hero-overlay p {
    font-size: 1.4rem;
    line-height: 1.4;
  }
  
  /* Sección de contenido */
  .about-content {
    background-color: #fff; /* Fondo claro */
    color: #333;
    padding: 2rem 1rem;
  }
  
  .about-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .about-content p {
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  #info {
    background: linear-gradient(to right, #f0dbe7, #d3eee9);
    padding: 15rem 0; /* Ajuste de espaciado superior e inferior */
  }

  #info h2 {
      color: #000000; /* Color oscuro para el título */
      font-size: 2.5rem; /* Tamaño de fuente mayor */
      font-weight: bold; /* Asegura que el título sea prominente */
      margin-bottom: 1rem; /* Espaciado debajo del título */
      text-align: center;
  }

  #info p {
      color: #020202; /* Texto  para el párrafo */
      font-size: 1.5rem; /* Tamaño de fuente cómodo para lectura */
      max-width: 70%; /* Controla el ancho del párrafo */
      margin: 0 auto; /* Centra el texto */
      line-height: 1.8; /* Mayor interlineado para facilitar la lectura */
      text-align: center;
  }

  #infoDark {
    background: linear-gradient(to right, #ba0a6e, #08a589);
    padding: 15rem 0; /* Ajuste de espaciado superior e inferior */
  }

  #infoDark h2 {
      color: #f0f0f0; /* Color oscuro para el título */
      font-size: 2.5rem; /* Tamaño de fuente mayor */
      font-weight: bold; /* Asegura que el título sea prominente */
      margin-bottom: 1rem; /* Espaciado debajo del título */
      text-align: center;
  }

  #infoDark p {
      color: #f0f0f0; /* Texto  para el párrafo */
      font-size: 1.5rem; /* Tamaño de fuente cómodo para lectura */
      max-width: 70%; /* Controla el ancho del párrafo */
      margin: 0 auto; /* Centra el texto */
      line-height: 1.8; /* Mayor interlineado para facilitar la lectura */
      text-align: center;
  }

 /* Modal Overlay - Fondo oscuro */
.custom-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Fondo oscuro */
  display: none; /* Inicialmente oculto */
  z-index: 1000; /* Aseguramos que el overlay esté debajo de la modal */
}

/* Mostrar overlay cuando la modal está activa */
.custom-modal-overlay.active {
  display: block;
}

/* Modal personalizada */
.custom-modal {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050; /* Modal debe estar por encima del overlay */
}

/* Mostrar modal cuando tiene la clase 'active' */
.custom-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Estilo general de la modal */
.custom-modal .close-modal {
  cursor: pointer;
}

/* Botones de la modal */
.btn-secondary {
  background-color: var(--color-heading)
}



.promo-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure cards have same height */
}
.promo-card:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.promo-card h3 {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
  background: none; /* Override service-card h3 background */
  padding: 0;
  text-align: left;
}
.promo-card ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  flex-grow: 1; /* Allow list to take available space */
}
.promo-card .price {
  margin-top: auto; /* Push price and button to bottom */
  text-align: right;
}
.promo-card .price .regular-price {
  text-decoration: line-through;
  color: #6c757d;
  font-size: 0.9rem;
  display: block;
}
.promo-card .price .promo-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-primary);
  display: block;
}
.promo-card .price .promo-price-small {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-primary);
  display: block;
}
.promo-card .btn-promo {
  display: block;
  width: 100%;
  margin-top: 1rem;
  background-color: var(--color-primary2);
  color: #fff;
  border-color: var(--color-heading);
}
.promo-card .btn-promo:hover {
  background-color: var(--color-primary);
}

.promo-card .btn-promor {
  display: block;
  width: 100%;
  margin-top: 1rem;
  background-color: var(--color-heading);
  color: #fff;
  border-color: var(--color-primary2);
}
.promo-card .btn-promor:hover {
  background-color: var(--color-heading);
} 
.section-divider {
  border-top: 2px solid var(--color-primary);
  margin: 3rem 0;
}
  /* Ajustes responsivos */
  @media (max-width: 768px) {
    .hero-about {
      height: 60vh; /* Disminuye un poco en pantallas pequeñas */
    }
    .hero-overlay h1 {
      font-size: 2rem;
    }
    .hero-overlay p {
      font-size: 1.2rem;
    }

    .texto-derecha, .imagen-derecha {
      flex: 1 1 100%;
      text-align: center;  /* O mantén 'right' si lo deseas */
    }
    .imagen-derecha {
      margin-top: 1rem;
    }

    .testimonials-grid {
      grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    h2 {
      font-size: 1.8rem;
    }

    .articles-grid, .services-grid, .testimonials-grid {
      grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
    }

    .carousel .carousel-inner {
      max-height: 400px;
    }
    .carousel-item img {
      min-height: 250px;
    }
    .carousel-caption {
      bottom: 10%;
      padding: 0.5rem;
    }
    .carousel-caption h1 {
      font-size: 1.5rem;
    }

    #services {
      padding: 20px 0;
    }
  }