/************************************************************
  1. CONFIGURACIÓN GLOBAL
*************************************************************/

/* Reinicio básico de box-sizing para un mejor control de tamaños */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* Estilos globales del body */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f4efe9, #e8dfd1); /* */
  color: #4c4c4c; /* */
  /* Especifica las propiedades a animar */
  transition: background-color 0.3s ease, color 0.3s ease; /* */
}

/* Modo alto contraste (si se activa vía JS o toggle en el body) */
body.high-contrast {
  background: black; /* */
  color: yellow; /* */
}

/************************************************************
  2. ENCABEZADO (HEADER) Y MENÚ DE NAVEGACIÓN
*************************************************************/

/* Header (sticky, minimal o con menú) */
header {
  background: rgba(253, 250, 243, 0.9); /* */
  padding: 15px 20px; /* */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* */
  display: flex; /* */
  align-items: center; /* */
  position: sticky; /* Permanece fijo al hacer scroll */ /* */
  top: 0; /* */
  z-index: 1000; /* */
}

header img {
  height: 50px; /* */
  margin-right: 15px; /* */
}

/* Enlaces del header */
header a {
  text-decoration: none; /* */
  color: #5a4a42; /* */
  font-weight: 600; /* */
  display: flex; /* */
  align-items: center; /* */
  font-size: 1.2rem; /* */
  transition: color 0.3s ease; /* */
}

header a:hover {
  color: #a48774; /* */
}

/* Menú principal (dentro de <nav>) */
nav {
  flex-grow: 1; /* */
}

nav ul {
  display: flex; /* */
  list-style: none; /* */
  margin: 0; /* */
  padding: 0; /* */
  justify-content: space-around; /* */
}

nav ul li a {
  text-decoration: none; /* */
  color: #4c4c4c; /* */
  padding: 10px 15px; /* */
  border-radius: 5px; /* */
  transition: background-color 0.3s ease, transform 0.2s ease; /* */
}

nav ul li a:hover,
nav ul li a:focus {
  background-color: #a48774; /* */
  color: #fff; /* */
  transform: scale(1.1); /* */
  outline: none; /* */
}

/************************************************************
  3. BOTONES REUTILIZABLES
*************************************************************/

.btn {
  display: inline-block; /* */
  padding: 12px 25px; /* */
  background: linear-gradient(135deg, #826a5c, #5a4a42); /* */
  color: #fff; /* */
  border-radius: 8px; /* */
  text-decoration: none; /* */
  font-weight: 600; /* */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* */
}

.btn:hover,
.btn:focus {
  transform: translateY(-3px); /* */
  box-shadow: 0 5px 15px rgba(90, 74, 66, 0.3); /* */
  outline: none; /* */
}

/* Nuevo botón secundario para la redesign */
.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color: #826a5c; /* Color de acento existente */
  border: 2px solid #826a5c; /* Borde con color de acento */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-top: auto; /* Ayuda a alinear en flex containers */
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #826a5c;
  color: #fff;
  outline: none;
}


/************************************************************
  4. PÁGINA DE INICIO (INDEX.HTML) -> SECCIÓN "HERO" (Original)
  Estos estilos son para la clase .hero original.
  La página de inicio rediseñada usa .hero-redesigned.
*************************************************************/

.hero {
  text-align: center; /* */
  padding: 60px 20px; /* */
  position: relative; /* */
  overflow: hidden; /* Oculta contenido que se desborde */ /* */
}

.hero img {
  width: 100%; /* */
  height: auto; /* */
  max-height: 500px; /* */
  object-fit: cover; /* */
  border-radius: 12px; /* */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* */
}

.hero h1 {
  font-size: 3rem; /* */
  color: #826a5c; /* */
  animation: fadeIn 1s ease-in-out; /* */
  margin-top: 20px; /* */
}

.hero p {
  font-size: 1.2rem; /* */
  color: #5a4a42; /* */
  animation: fadeIn 1.5s ease-in-out; /* */
  margin-bottom: 20px; /* */
}


/************************************************************
  4.1. PÁGINA DE INICIO REDISEÑADA (INDEX.HTML)
*************************************************************/

/* HERO SECTION REDESIGNED */
.hero-redesigned {
    display: flex;
    align-items: center;
    padding: 60px 20px;
    background-color: #fdfaf3; /* Complementa el gradiente del body */
    gap: 40px;
    min-height: 70vh;
}

.hero-redesigned-content {
    flex: 1;
    text-align: left;
    animation: fadeIn 1s ease-in-out; /* Reutiliza animación existente */
}

.hero-redesigned-content h1 {
    font-size: 3.2rem;
    color: #826a5c; /* Color existente */
    margin-bottom: 20px;
}

.hero-redesigned-content p {
    font-size: 1.3rem;
    color: #5a4a42; /* Color existente */
    margin-bottom: 30px;
    max-width: 600px;
}

.hero-redesigned .hero-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 15px;
}

.hero-redesigned-image {
    flex: 1;
    text-align: center;
}

.hero-redesigned-image img {
    max-width: 100%;
    height: auto;
    max-height: 450px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

/* CORE VALUES SECTION */
.core-values {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff; /* Contraste con el fondo del body */
}

.core-values h2 {
    font-size: 2.5rem;
    color: #826a5c; /* Color existente */
    margin-bottom: 40px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    /* max-width y margin auto se manejan por .container si se usa en el HTML */
}

.value-item {
    padding: 25px;
    background-color: #fdfaf3; /* Fondo claro para items */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.value-item i { /* Estilo para iconos Font Awesome */
    font-size: 2.5rem;
    color: #a48774; /* Color de acento de hover original */
    margin-bottom: 15px;
}

.value-item h3 {
    font-size: 1.5rem;
    color: #5a4a42; /* Color existente */
    margin-bottom: 10px;
}

.value-item p {
    font-size: 1rem;
    color: #4c4c4c; /* Color existente */
    line-height: 1.6;
}

/* FEATURED SERVICES SECTION */
.featured-services {
    padding: 60px 20px;
    text-align: center;
    /* Usa el fondo por defecto del body: linear-gradient(135deg, #f4efe9, #e8dfd1) */
}

.featured-services h2 {
    font-size: 2.5rem;
    color: #826a5c; /* Color existente */
    margin-bottom: 40px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px; /* Espacio antes del botón "Explorar todos" */
    /* max-width y margin auto se manejan por .container si se usa en el HTML */
}

.featured-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.featured-item img {
    width: 100%;
    height: 200px; /* Altura fija para uniformidad */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.featured-item h3 {
    font-size: 1.6rem;
    color: #4c4c4c; /* Color existente */
    margin-bottom: 10px;
}

.featured-item p {
    font-size: 1rem;
    color: #5a4a42; /* Color existente */
    margin-bottom: 20px;
    flex-grow: 1;
}

.view-all-services-link {
    margin-top: 30px;
}


/************************************************************
  5. PÁGINA ABOUT.HTML -> SECCIÓN "ABOUT-SECTION" (Original)
*************************************************************/

.about-section {
  text-align: center; /* */
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 40px auto; /* */
  background: #fff; /* */
  border-radius: 12px; /* */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* */
  animation: fadeIn 1s ease-in-out; /* */
  position: relative; /* */
  overflow: hidden; /* */
}

.about-section img { /* Estilos para la imagen original en about.html */
  width: 250px; /* */
  height: auto; /* */
  border-radius: 50%; /* */
  margin: 20px 0; /* */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* */
  position: relative; /* */
  z-index: 2; /* */
}

.about-section h1 {
  font-size: 2.8rem; /* */
  color: #826a5c; /* */
  margin-bottom: 20px; /* */
}

.about-section p {
  font-size: 1.2rem; /* */
  line-height: 1.8; /* */
  color: #5a4a42; /* */
  text-align: justify; /* */
  padding: 0 20px; /* */
  margin-bottom: 15px; /* */
}

/* Elementos decorativos originales de .about-section */ /* */
.about-section::before,
.about-section::after {
  content: ""; /* */
  position: absolute; /* */
  width: 200px; /* */
  height: 200px; /* */
  background: rgba(130, 106, 92, 0.3); /* */
  border-radius: 50%; /* */
  z-index: 1; /* */
}

.about-section::before {
  top: -50px; /* */
  left: -50px; /* */
}
.about-section::after {
  bottom: -50px; /* */
  right: -50px; /* */
}

/************************************************************
  5.1. PÁGINA ABOUT.HTML REDISEÑADA
*************************************************************/

.about-layout-redesigned {
    display: flex;
    flex-direction: row; 
    gap: 40px; 
    align-items: flex-start; 
    text-align: left; 
}

.about-image-column {
    flex: 0 0 300px; 
    text-align: center; 
    margin-top: 10px; 
}

.about-image-column img { /* Estilos para la imagen en la columna rediseñada */
    width: 100%; 
    max-width: 250px; /* Coincide con el tamaño original de .about-section img */
    height: auto;
    border-radius: 50%; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
    margin: 0 auto; 
}

.about-text-column {
    flex: 2; 
}

.about-text-column h1 { /* Hereda la mayoría de .about-section h1 */
    text-align: left; 
    margin-top: 0; 
}

.about-text-column p { /* Hereda la mayoría de .about-section p */
    text-align: justify; 
    padding: 0; 
    font-size: 1.1rem; 
    line-height: 1.7;  
}

.about-quote {
    margin: 30px 0;
    padding: 20px 20px 20px 35px; 
    background-color: #fdfaf3; 
    border-left: 4px solid #a48774; 
    position: relative; 
}

.about-quote p {
    margin: 0;
    font-size: 1.15rem;
    color: #5a4a42;
    line-height: 1.6;
    text-align: left; 
}

.about-quote p em {
    font-style: italic;
}

.about-quote::before { /* Icono de cita opcional */
    content: "\f10d"; 
    font-family: "Font Awesome 6 Free", "FontAwesome"; 
    font-weight: 900; 
    font-size: 1.2rem; 
    color: #a48774; 
    position: absolute;
    left: 10px; 
    top: 20px;  
}

.about-text-column .btn {
    margin-top: 25px; 
    display: inline-block; 
}


/************************************************************
  6. PÁGINA SERVICES.HTML
*************************************************************/

/* Estilos generales para el main de services.html */
main.container { /* Asumiendo que main tiene la clase .container en services.html */ /* */
  padding-top: 50px; /* */
  padding-bottom: 50px; /* */
  padding-left: 20px; /* */
  padding-right: 20px; /* */
  max-width: 1200px; /* */
  margin: 0 auto; /* */
  text-align: center; /* */
}

.services h1 { /* Título dentro de la sección .services */ /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/* Contenedor que lista todos los servicios en cuadrícula */ /* */
.service-list {
  display: grid; /* */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* */
  gap: 30px; /* */
}

/* Tarjeta individual de cada servicio */ /* */
.service-item {
  background-color: #fff; /* */
  padding: 25px; /* */
  border-radius: 12px; /* */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* */
  text-align: center; /* */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* */
}

.service-item:hover {
  transform: translateY(-5px); /* */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* */
  cursor: pointer;  /* */
}

.service-item img {
  width: 100%; /* */
  height: auto; /* */
  border-radius: 12px; /* */
  margin-bottom: 15px; /* */
}

.service-item h2 {
  font-size: 1.8rem; /* */
  color: #4c4c4c; /* */
  margin-bottom: 10px; /* */
}

/* === Estilos específicos para la sección .hero de services.html === */ /* */
main.container > section.hero { 
  padding: 10px 0; /* Específico para el hero de services.html */ /* */
}
main.container > section.hero h1 {
  margin-top: 5px; /* */
  font-size: 2.2rem; /* Diferente al .hero h1 genérico */ /* */
  color: #826a5c; /* */
}
main.container > section.hero p {
  font-size: 1rem; /* Diferente al .hero p genérico */ /* */
  margin-bottom: 5px; /* */
  color: #5a4a42; /* */
}

/* === Estilos para Slick Carousel (flechas) === */ /* */
.slick-prev, 
.slick-next {
  font-size: 24px !important; /* */
  color: #fff !important; /* */
  background: rgba(0, 0, 0, 0.5) !important; /* */
  border-radius: 50% !important; /* */
  width: 50px !important; /* */
  height: 50px !important; /* */
  display: flex !important; /* */
  align-items: center !important; /* */
  justify-content: center !important; /* */
  z-index: 1000 !important; /* */
  border: none; /* */
  padding: 0; /* */
}

.slick-prev:hover, 
.slick-next:hover {
  background: rgba(255, 255, 255, 0.8) !important; /* */
  color: #000 !important; /* */
}


/************************************************************
  7. PÁGINA BLOG.HTML -> SECCIÓN "BLOG-CONTAINER"
*************************************************************/

.blog-container {
  padding: 50px 20px; /* */
  max-width: 900px; /* */
  margin: 40px auto;  /* */
  background: #fff; /* */
  border-radius: 12px; /* */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* */
  text-align: center; /* */
  position: relative; /* */
  overflow: hidden; /* */
}

/* Título del blog */ /* */
.blog-title {
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 20px; /* */
  animation: fadeIn 1s ease-in-out; /* */
}

/* Lista de posts en cuadrícula */ /* */
.blog-list {
  display: grid; /* */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* */
  gap: 30px; /* */
  padding: 20px; /* */
}

/* Artículo individual del blog */ /* */
.blog-item {
  background: #fff; /* */
  padding: 20px; /* */
  border-radius: 12px; /* */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* */
  text-align: left; /* */
}

.blog-item:hover {
  transform: translateY(-5px); /* */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* */
}

.blog-item img {
  width: 100%; /* */
  height: auto; /* */
  border-radius: 8px; /* */
}

.blog-item h2 {
  font-size: 1.8rem; /* */
  color: #333; /* */
  margin: 15px 0; /* */
}

.blog-item p {
  font-size: 1rem; /* */
  color: #555; /* */
  margin: 0 0 15px 0; /* */
}

/************************************************************
  8. PÁGINA CONTACT.HTML -> SECCIÓN "CONTACT-CONTAINER"
*************************************************************/

.contact-container {
  padding: 40px 20px; /* */
  max-width: 900px; /* */
  margin: 40px auto; /* */
  background: #fff; /* */
  border-radius: 12px; /* */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* */
}

/* Título de la sección de contacto */ /* */
.contact-container h1 {
  text-align: center; /* */
  font-size: 2.5rem; /* */
  color: #826a5c; /* */
  margin-bottom: 20px; /* */
}

/* Información de contacto (teléfono, email, dirección) */ /* */
.contact-info {
  text-align: center; /* */
  font-size: 1.2rem; /* */
  color: #5a4a42; /* */
  margin-bottom: 30px; /* */
}

.contact-info a {
  color: #007bff; /* */
  text-decoration: none; /* */
  font-weight: 600; /* */
}

.contact-info a:hover {
  text-decoration: underline; /* */
}

/* Formulario de contacto */ /* */
.contact-form {
  display: flex; /* */
  flex-direction: column; /* */
  gap: 15px; /* */
}

.contact-form label {
  font-weight: 600; /* */
}

.contact-form input,
.contact-form textarea {
  width: 100%; /* */
  padding: 10px; /* */
  font-size: 1rem; /* */
  border: 1px solid #ccc; /* */
  border-radius: 8px; /* */
  transition: border-color 0.3s; /* */
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #826a5c; /* */
  outline: none; /* */
}

.contact-form button {
  padding: 12px; /* */
  background: #826a5c; /* */
  color: white; /* */
  border: none; /* */
  font-size: 1rem; /* */
  border-radius: 8px; /* */
  cursor: pointer; /* */
  transition: background 0.3s; /* */
}

.contact-form button:hover {
  background: #5a4a42; /* */
}

/* Contenedor del mapa */ /* */
.map-container {
  margin-top: 30px; /* */
  border-radius: 12px; /* */
  overflow: hidden; /* */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* */
}

.map-container iframe {
  width: 100%; /* */
  height: 300px; /* */
  border: 0; /* */
}

/************************************************************
  9. PÁGINA FACIALES.HTML -> SECCIÓN "FACIALES-CONTAINER"
*************************************************************/

.faciales-container { /* Este .container es una clase específica, no el genérico */ /* */
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* Centra el contenedor */ /* */
  text-align: center; /* Centra el h1 si no tiene su propio text-align */ /* */
}

.faciales-container h1 {
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
  /* text-align: center; Ya está en el contenedor padre */
}

/************************************************************
  10. PÁGINA HIDROTERAPIAS.HTML -> SECCIÓN "HIDROTERAPIAS-CONTAINER"
*************************************************************/

.hidroterapias-container {
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* */
}

.hidroterapias-container h1 {
  text-align: center; /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/************************************************************
  11. PÁGINA MASAJES.HTML -> SECCIÓN "MASAJES-CONTAINER"
*************************************************************/

.masajes-container {
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* */
}

.masajes-container h1 {
  text-align: center; /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/************************************************************
  12. PÁGINA SPA.HTML -> SECCIÓN "SPA-CONTAINER"
*************************************************************/

.spa-container {
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* */
}

.spa-container h1 {
  text-align: center; /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/************************************************************
  13. PÁGINA YOGA.HTML -> SECCIÓN "YOGA-CONTAINER"
*************************************************************/

.yoga-container {
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* */
}

.yoga-container h1 {
  text-align: center; /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/************************************************************
  14. PÁGINA TERAPIAS.HTML -> SECCIÓN "TERAPIAS-CONTAINER"
*************************************************************/

.terapias-container {
  padding: 50px 20px; /* */
  max-width: 1000px; /* */
  margin: 0 auto; /* */
}

.terapias-container h1 {
  text-align: center; /* */
  font-size: 3rem; /* */
  color: #826a5c; /* */
  margin-bottom: 40px; /* */
}

/************************************************************
  15. PIE DE PÁGINA (FOOTER)
*************************************************************/

footer {
  text-align: center; /* */
  padding: 20px; /* */
  background: #5a4a42; /* */
  color: #fff; /* */
  margin-top: 40px; /* */
}

/* Contenedor para el contenido del footer, para mejor control de layout */
footer .footer-content {
    max-width: 1100px; /* Alineado con .container si se usa */
    margin: 0 auto;
    padding: 0 20px; /* Padding para no pegar a los bordes en pantallas pequeñas */
    display: flex;
    flex-direction: column; /* Por defecto apilado */
    align-items: center;
    gap: 10px; /* Espacio entre el párrafo y el enlace si se apilan */
}

footer .footer-content p {
    margin: 0; /* Quitar margen por defecto del párrafo */
}

/* Enlace de Política de Privacidad en el footer */
footer .privacy-link { /* Usar la clase definida en el HTML rediseñado */
  color: white;
  font-weight: bold;
  text-decoration: none;
}
footer .privacy-link:hover {
  text-decoration: underline;
}


/************************************************************
  16. ANIMACIONES GLOBALES
*************************************************************/

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/************************************************************
  17. AJUSTES RESPONSIVOS
*************************************************************/
/* Definición general de .container */
/* Usado en HTML para envolver secciones y controlar el ancho máximo y centrado. */
.container {
    max-width: 1100px; /* */
    margin: 0 auto; /* */
    padding: 0 1rem; /* */
}


/* Pantallas Grandes a Medianas (Tablets en horizontal, portátiles pequeños) */
@media screen and (max-width: 992px) {
    /* INDEX.HTML REDESIGN */
    .hero-redesigned {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
        min-height: auto;
    }
    .hero-redesigned-content {
        text-align: center;
        order: 2; /* Texto debajo de la imagen en móvil */
    }
    .hero-redesigned-image {
        order: 1; /* Imagen arriba */
        margin-bottom: 30px;
    }
    .hero-redesigned .hero-buttons {
        justify-content: center; /* Centrar botones en móvil */
    }
    .hero-redesigned-content h1 {
        font-size: 2.8rem;
    }
    .hero-redesigned-content p {
        font-size: 1.2rem;
    }
}

/* Pantallas Medianas (Tablets en vertical) */
@media screen and (max-width: 820px) {
    /* ABOUT.HTML REDESIGN */
    .about-layout-redesigned {
        flex-direction: column; /* Stack columns */
        align-items: center; /* Center items when stacked */
    }

    .about-image-column {
        flex-basis: auto; /* Reset flex-basis for stacked layout */
        width: auto; 
        margin-bottom: 30px; /* Space between stacked image and text */
    }

    .about-image-column img {
         max-width: 200px; 
    }

    .about-text-column h1 {
        text-align: center; /* Center heading on mobile */
    }
    
    .about-text-column p {
        /* text-align: left; /* Alternative for mobile if justify looks odd */
    }

    .about-quote {
        margin-left: 0; /* Full width for stacked layout */
        margin-right: 0;
    }
}


/* Pantallas de Tablets y Móviles Grandes */
@media screen and (max-width: 768px) {
  header {
    flex-direction: row; /* */
    justify-content: space-between; /* */
    align-items: center; /* */
    padding: 10px 15px; /* */
  }

  header img {
    height: 40px; /* */
    margin: 0; /* */
  }

  /* Ajustes generales en la sección hero (original) */
  section.hero { /* Usamos section.hero para ser más específicos que solo .hero */ /* */
    padding: 40px 10px; /* */
  }

  section.hero h1 {
    font-size: 2.5rem; /* */
  }

  section.hero p {
    font-size: 1rem; /* */
  }

  .btn { /* Ajuste de padding para .btn en pantallas pequeñas */
    padding: 10px 20px; /* */
  }
  
  .container { /* Ajuste de padding para .container en pantallas pequeñas */
      padding: 0 0.8rem; /* */
  }

  /* INDEX.HTML REDESIGN - Continuación de ajustes */
  .hero-redesigned-content h1 { 
      font-size: 2.5rem; 
  }
  .hero-redesigned-content p {
      font-size: 1.1rem;
  }

  .core-values h2,
  .featured-services h2 {
      font-size: 2.2rem;
  }

  .values-grid, .featured-grid {
      grid-template-columns: 1fr; /* Apilar items */
  }
  
  /* FOOTER */
  footer .footer-content {
      text-align: center; /* Asegura que el texto esté centrado si el flex container se apila */
  }


  /* === MENÚ HAMBURGUESA FUNCIONAL Y RESPONSIVE === */
  nav { /* Contenedor del menú y el botón toggle */
    position: relative; /* Para posicionar el ul absoluto respecto a nav */ /* */
  }

  .menu-toggle {
    display: block; /* Se muestra en pantallas pequeñas */ /* */
    font-size: 2rem; /* Tamaño del icono hamburguesa */ /* */
    cursor: pointer; /* */
    margin-left: auto; /* Lo empuja a la derecha si hay espacio */ /* */
    padding: 0.5rem; /* */
    background: none; /* */
    border: none; /* */
    color: #5a4a42; /* Color del icono */ /* */
  }

  .menu-toggle:focus {
    outline: 3px solid #a48774; /* Para accesibilidad */ /* */
  }

  nav ul {
    display: none; /* Oculto por defecto */ /* */
    position: absolute; /* */
    top: 100%; /* Debajo del header */ /* */
    left: 0; /* */
    width: 100%; /* Ocupa todo el ancho */ /* */
    background-color: #fdfaf3; /* Color de fondo del desplegable */ /* */
    flex-direction: column; /* */
    padding: 1rem; /* */
    border-radius: 0 0 6px 6px; /* Bordes redondeados abajo */ /* */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* */
    transition: all 0.3s ease-in-out; /* Animación suave */ /* */
    z-index: 999; /* */
  }

  nav ul.show {
    display: flex; /* Se muestra cuando tiene la clase .show */ /* */
  }

  nav ul li {
    width: 100%; /* Cada elemento ocupa todo el ancho */ /* */
    text-align: center; /* Texto centrado */ /* */
    margin: 0.5rem 0; /* Espacio entre elementos */ /* */
  }

  nav ul li a {
    display: block; /* Para que el padding y el área clicable ocupen todo el li */ /* */
    padding: 10px; /* Padding interno */ /* */
  }
}

/* Para pantallas de smartphones (más pequeños) */
@media screen and (max-width: 480px) {
  header a { /* Enlaces del header en general, no los del nav ul */ /* */
    font-size: 1rem; /* */
  }

  /* Ajustes para .hero original si aún se usa */
  section.hero h1 {
    font-size: 2rem; /* */
  }

  section.hero p {
    font-size: 0.9rem; /* */
  }

  /* INDEX.HTML REDESIGN - Ajustes adicionales para móviles pequeños */
  .hero-redesigned-content h1 {
      font-size: 2rem;
  }
  .hero-redesigned-content p {
      font-size: 1rem;
  }
  .hero-redesigned .hero-buttons .btn { /* Botones del hero rediseñado a ancho completo */
      width: 100%;
      margin-left: 0; /* Resetear gap si es necesario */
      margin-right: 0; /* Resetear gap si es necesario */
      margin-bottom: 10px; /* Espacio si se apilan */
  }
  .hero-redesigned .hero-buttons .btn:last-child {
      margin-bottom: 0;
  }


  .core-values h2,
  .featured-services h2 {
      font-size: 2rem;
  }
  .value-item h3, .featured-item h3 {
      font-size: 1.4rem;
  }
}

/* FOOTER - Media query para el layout en pantallas más grandes */
@media (min-width: 769px) { 
    footer .footer-content {
        flex-direction: row; /* Lado a lado */
        justify-content: space-between; /* Empuja items a los extremos */
        align-items: center; /* Centra verticalmente si tienen alturas diferentes */
    }
}