/*
============================================================================
 * Estilos para el componente Hero de las páginas de categoría.
 * Define la apariencia del banner principal, texto, botones e imagen.
============================================================================
*/

/*
 * Sección Hero (Mobile-First)
 * Establece márgenes y paddings base para móvil, escalando para escritorio.
 */
.landing-hero {
    margin-bottom: 1.5rem; /* Valor por defecto para móvil */
    padding: 0;
    background-color: #f9f9f9; /* Confirmado que lo ves en móvil, debe verse en escritorio también */
    overflow: hidden;
}

@media (min-width: 768px) { /* Para tablets y escritorio */
.landing-hero {
    margin-bottom: 1rem; /* Ajuste para escritorio */
    }
}

/*
 * Contenido interno del Hero (Mobile-First)
 * Adapta la disposición de los elementos y paddings según el tamaño de pantalla.
 */
.landing-hero-content {
    display: flex;
    flex-direction: column; /* MOBILE-FIRST: Esto es el valor para móvil por defecto */
    align-items: center;   /* Centra los ítems apilados horizontalmente en móvil */
    justify-content: center; /* Centra el grupo de ítems verticalmente en móvil */
    gap: 0.05rem;           /* MOBILE-FIRST: Espacio entre elementos en móvil */
    padding: 1rem 1.5rem;  /* MOBILE-FIRST: Padding vertical y lateral consistente para móvil */
    margin-bottom: 0;
}

@media (min-width: 768px) { /* Este media query es para escritorio */
.landing-hero-content {
    flex-direction: row;     /* ESCRITORIO: Vuelve a disposición horizontal */
    flex-wrap: nowrap;       /* ESCRITORIO: Evita el salto de línea para diseño en fila */
    justify-content: space-between; /* ESCRITORIO: Espacio entre el texto y la imagen */
    gap: 0rem;               /* ESCRITORIO: Restaura el espacio original */
    padding: 0.5rem 12rem 1rem 15rem;    /* ESCRITORIO: Padding ajustado para escritorio */
  }
}

/*
 * Columnas del Hero (Mobile-First)
 * Ajusta la ocupación de espacio para móvil y escritorio.
 */
.hero-left,
.hero-right {
    flex: none; /* MOBILE-FIRST: Desactiva el crecimiento/encogimiento flexible en móvil por defecto */
    width: 100%; /* Opcional: Asegura que ocupen todo el ancho disponible en su columna apilada */
}
@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
.hero-left {
    flex: 1.2; /* ESCRITORIO: Asigna la proporción de espacio para el texto */
    }
.hero-right {
    flex: 1;   /* ESCRITORIO: Asigna la proporción de espacio para la imagen */
    }
}

/*
 * Título H1 del Hero (Mobile-First)
 * Ajusta el tamaño de fuente y margen inferior para móvil y escritorio.
 */
.hero-left h1 {
    font-size: 1.4rem; /* MOBILE-FIRST: Tamaño de H1 reducido para móvil */
   	margin-bottom: 0.1rem; /* El margen es el mismo en ambos, se mantiene aquí como base */
}
@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
.hero-left h1 {
	font-size: 2rem; /* ESCRITORIO: Restaura el tamaño de H1 para escritorio */
    }
}

/*
 * Párrafo del Hero (Mobile-First)
 * Ajusta el tamaño de fuente y margen inferior para móvil y escritorio.
 */
.hero-left p {
    font-size: 1rem;   /* MOBILE-FIRST: Tamaño de párrafo reducido para móvil */
   	color: #444;
   	margin-bottom: 1rem; /* MOBILE-FIRST: Margen inferior para móvil */
	line-height: 1.6;
}
@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
.hero-left p {
	font-size: 1.1rem; /* ESCRITORIO: Restaura el tamaño de párrafo para escritorio */
    margin-bottom: 2rem; /* ESCRITORIO: Restaura el margen inferior para escritorio */
    }
}

/*
 * Contenedor de la imagen del Hero (Mobile-First)
 * Centra la imagen y elimina márgenes/paddings inferiores.
 */
.hero-right {
    display: flex;
    justify-content: center; /* Centra el contenido a lo largo del eje principal (vertical en móvil, horizontal en escritorio) */
    align-items: center;   /* Centra el contenido a lo largo del eje cruzado (horizontal en móvil, vertical en escritorio) */
    margin-bottom: 0;      /* Elimina margen inferior */
    padding-bottom: 0;     /* Elimina padding inferior */
}
/* No se requiere @media para este, ya que funciona en ambas vistas. */


/*
 * Imagen del Hero (Mobile-First)
 * Adapta el tamaño, margen y ajuste de la imagen para móvil y escritorio.
 */
.hero-right .hero-image {
    width: 100%;
    max-width: 350px;      /* MOBILE-FIRST: Límite de ancho para la imagen en móvil */
    height: auto;
    display: block;
   	margin-top: 1rem;    /* MOBILE-FIRST: Espacio superior reducido */
    margin-bottom: 0rem;   /* MOBILE-FIRST: Eliminar margen inferior si no es necesario */
    margin-left: auto;     /* Centrado horizontal */
    margin-right: auto;    /* Centrado horizontal */
    object-fit: contain;
    padding: 0;            /* MOBILE-FIRST: Eliminar padding si no es visualmente necesario */
    background-color: #f9f9f9;
  	border-radius:10px;
}

@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
.hero-right .hero-image {
	max-width: 500px;  /* ESCRITORIO: Restaura el límite de ancho para escritorio */
    margin: 1rem auto; /* ESCRITORIO: Restaura el margen para escritorio */
    padding: 0rem;     /* ESCRITORIO: Restaura el padding a 0 */
  	border-radius:12px;
    }
}

/*
 * Contenedor de Botones del Hero (Mobile-First)
 * Dispone los botones flexiblemente, centrados en móvil.
 */
.hero-buttons {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 1rem;
  	margin-top: 1rem;       /* Se mantiene universal si no hay ajuste específico en móvil */
  	justify-content: center; /* MOBILE-FIRST: Centra los botones por defecto en móvil */
}

@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
.hero-buttons {
    justify-content: flex-start; /* ESCRITORIO: Alinea a la izquierda en escritorio */
    }
}

/*
 * Estilos individuales de los Botones del Hero (Mobile-First)
 * Ajusta anchos mínimos/máximos para los botones.
 */
.hero-buttons .button {
  	min-width: 120px; /* MOBILE-FIRST: Ligeramente más pequeño para móvil para dar flexibilidad */
  	max-width: 100%;  /* MOBILE-FIRST: Asegura que el botón no desborde en móvil */
  	text-align: center;
}

/*
 * Estilo para botón único en el Hero (Universal)
 * Permite que un solo botón se adapte a su contenido y no tenga max-width.
 */
.hero-buttons .button:only-child {
  	flex: unset;       /* Elimina el crecimiento flexible forzado */
  	width: fit-content; /* El ancho se ajusta al contenido */
  	max-width: none;   /* Elimina cualquier max-width para que pueda crecer con el contenido */
}