/*
===================================================================================
 * Estilos para el componente de Texto SEO expandible en las páginas de categoría.
 * Define la apariencia del texto y el botón "Ver más/menos".
===================================================================================
*/

/*
 * Bloque de texto SEO (Mobile-First)
 * Adapta márgenes, paddings y tamaño de fuente para móvil y escritorio.
 */
.category-seo-text {
  	max-width: 100ch;         /* Universal: El ancho máximo basado en caracteres es bueno para la legibilidad */
	margin: 1.5rem auto 2rem auto; /* MOBILE-FIRST: Márgenes verticales ajustados para móvil, centrado horizontal */
    padding: 0 1rem;          /* MOBILE-FIRST: Padding lateral ajustado para móvil */
  	font-size: 1rem;          /* MOBILE-FIRST: Tamaño de fuente para móvil */
  	line-height: 1.6;         /* Universal: Buena legibilidad, se mantiene */
  	color: #333;              /* Universal: Color de texto, se mantiene */
}

@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
    .category-seo-text {
        margin: 3rem auto 2.5rem auto; /* ESCRITORIO: Restaura márgenes para escritorio */
        padding: 0 1.5rem;            /* ESCRITORIO: Restaura padding lateral para escritorio */
        font-size: 1.1rem;            /* ESCRITORIO: Restaura tamaño de fuente para escritorio */
    }
}

/*
 * Contenedor principal del texto SEO expandible
 * Define la transición y la posición relativa para el pseudo-elemento.
 */
.seo-content {
    transition: max-height 0.7s ease-in-out; /* Transición suave para la expansión/colapso */
    position: relative; /* Necesario para posicionar el pseudo-elemento de gradiente */
}

/*
 * Estado colapsado del texto SEO
 * Define la altura máxima, desbordamiento y padding inferior cuando el texto está oculto.
 */
.seo-content-collapsible.collapsed {
    max-height: 90px; /* MOBILE-FIRST: Altura base colapsada para móvil.
                         Considerar ajustar este valor con 'rem' o 'em' si la base de fuente cambia,
                         o usar un valor calculado (ej. 'calc(5 * 1em + 20px)') para una cantidad específica de líneas.
                         Por ahora, mantenemos 90px ya que es el valor base que tenías. */
    overflow: hidden; /* Oculta el contenido que excede el max-height */
  	padding-bottom: 20px; /* MOBILE-FIRST: Menos aire para móvil, más compacto.
                             Ajustar si el gradiente es muy alto. */
}

/*
 * Efecto de gradiente para el estado colapsado (Pseudo-elemento ::after)
 * Crea el efecto de desvanecimiento del texto.
 */
.seo-content-collapsible.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* MOBILE-FIRST: Altura del gradiente más ajustada para móvil */
    background: linear-gradient(to bottom, rgba(255,255,255, 0) 15%, rgba(255,255,255, 0.7) 35%, #ffffff 70%);
    pointer-events: none; /* Permite hacer clic a través del gradiente */
}

/*
 * Estado expandido del texto SEO
 * Establece una altura máxima generosa cuando el texto está completamente visible.
 */
.seo-content-collapsible.expanded {
    max-height: 2000px; /* Valor suficientemente grande para la mayoría de los casos.
                           Considerar 'auto' si se puede animar (no en CSS directamente para height).
                           Mantener 2000px por la transición. */
}

/*
 * Oculta el gradiente cuando el texto está expandido.
 */
.seo-content-collapsible.expanded::after {
    content: none;
}

/* Media Query para escritorio/tablet: Ajustes para pantallas más grandes */
@media (min-width: 768px) {
    .seo-content-collapsible.collapsed {
        max-height: 90px; /* ESCRITORIO: Mantener o ajustar si necesitas más/menos líneas visibles */
        padding-bottom: 40px; /* ESCRITORIO: Restaura el padding inferior para escritorio */
    }

    .seo-content-collapsible.collapsed::after {
        height: 100px; /* ESCRITORIO: Restaura la altura del gradiente para escritorio */
    }
    /* max-height para .expanded no necesita cambios, 2000px sigue siendo un valor adecuado. */
}

/*
 * Contenedor del botón "Ver más / Ver menos" (Mobile-First)
 * Posiciona el botón y su margen superior.
 */
.seo-toggle-container {
    text-align: center;      /* Centra el botón horizontalmente, universalmente útil */
    margin-top: -30px;       /* MOBILE-FIRST: Margen negativo para superponer sobre el gradiente.
                                 Este valor podría requerir ajuste si cambias el padding-bottom del .collapsed
                                 o la altura del pseudo-elemento ::after del texto SEO. */
    margin-bottom: 0.2rem; /* MOBILE-FIRST: Reducir el margen inferior del contenedor del botón */
  	position: relative;      /* Necesario para z-index, universalmente útil */
    z-index: 2;              /* Asegura que el botón esté por encima del gradiente, universalmente útil */
}

/*
 * Estilos del botón "Ver más / Ver menos" (Mobile-First)
 * Define la apariencia y la interacción del botón.
 */
.seo-toggle-container .ver-mas-toggle {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 6px 18px; /* MOBILE-FIRST: Padding ligeramente más compacto para móvil */
    font-size: 0.85rem; /* MOBILE-FIRST: Tamaño de fuente ligeramente más pequeño para móvil */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Estado hover del botón */
.seo-toggle-container .ver-mas-toggle:hover {
    background-color: #f5f5f5;
}

@media (min-width: 768px) { /* Punto de quiebre para tablets y escritorio */
    .seo-toggle-container {
        margin-top: -20px; /* ESCRITORIO: Mantiene el mismo margen o ajusta si el diseño lo requiere */
    }

    .seo-toggle-container .ver-mas-toggle {
        padding: 8px 24px;   /* ESCRITORIO: Restaura el padding original */
        font-size: 0.9rem;   /* ESCRITORIO: Restaura el tamaño de fuente original */
    }
}