/*==========================================================================
   1. ESTILOS GLOBALES Y ESTRUCTURA
   (Se aplica a todo el sitio: Barra naranja, menú, contenedor principal...)
   ==========================================================================*/
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13pt;
    margin: 0;
    padding: 0;
    color: #000000;            /*CAMBIA COLOR TEXTO PAGINA*/
    background-color:#8a8888;  /*CAMBIA TODO EL FONDO de PAGINA*/
}

/*Contenedor Principal del Contenido (DONDE ESTÁ EL TEXTO)*/
main {
    background-color: #f6f6ef;     /*Fondo Blanco para el contenido*/
    max-width: 1050px;               /*Limita el ancho del CONTENEDOR*/
    margin: 0px auto;                /*MUEVE el CONTENEDOR blanco hacia arriba o abajo*/
    padding: 3px 40px 20px 40px;     /*3px separacion primer titulo inicio de barra naranja*/
    border-radius: 0px;     /*opcion: usar: border-top-left-radius: 8px; o border-top-right-radius: 8px;*/
    box-shadow: 0 4px 8px rgba(70, 3, 3, 0.1); 
}

/*BARRA NARANJA (Header)*/
.topbar {
    max-width: 1130px;      /*Limita el ancho para igualar al contenido*/
    margin-top: 10px;       /*REGLA QUE CREA EL ESPACIO GRIS SUPERIOR*/
    margin-left: auto;      /*Asegura que el 'auto' no interfiera con el margin-top*/
    margin-right: auto;     /*Asegura que el 'auto' no interfiera con el margin-top*/
    /* margin: 0 auto;      /*Pega la barra arriba de la pantalla*/
    background: #ff6600;
    padding: 8px 0;         /*BARRA 8px GROSOR Arriba/Abajo y 0; es Derecha o Izquierda*/ 
}
    /*(Opcional)Redondea SOLO las esquinas de arriba del todo */
    /*border-top-left-radius: 8px; /* O el valor que uses en main */
    /*border-top-right-radius: 8px;
/*}*/

/*barra naranja elementos internos*/
.topbar .inner {  
    margin: 0 50px;
    width: auto;
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    gap: 40px;
}

/*Logo y Menú*/
.logo {
    display: flex;
    align-items: center;
    font-size: 16px;        /*Tamaño nombre "TierraSapiens*/
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.header-logo {
    height: 21px;   /*TAMAÑO logo Buho*/
    margin-right: 5px;  /*Margen Derecho*/
}

.menu a {
    margin-left: 20px;
    color: black;
    font-size: 16px;
    text-decoration: none;
}

.menu a:hover {
    text-decoration: underline;
}

/*Estilos para el Pie de Página (Footer)*/
footer {
    max-width: 1130px; /* Limita el ancho del fondo gris oscuro */
    border-top: 2px solid #ff6600 !important; 
    margin: 0px auto 0 auto; /* Centra el footer */
    padding: 10px 0px;        /*TAMAÑO COLOR*/
    background-color:#f6f6ef;  /*fondo color*/
    color: #7e7e7e;             /*color texto*/
    text-align: center;        /* Alineación del texto al centro*/
    font-size: 0.6em;          /*TAMAÑO LETRAS*/
}

.footer-menu a {
    color: #ff6600;         /*Color naranja de los enlaces*/
    text-decoration: none;    /*Quita el subrayado predeterminado*/
    margin: 0 6px;            /*Espacio entre los enlaces*/
}

/*=============================================================================
   2. ESTILOS DE LA PÁGINA DE INICIO (Listado de Publicaciones and Miniaturas)
================================================================================*/
.intro {
    text-align: center;    /*Centra todo el texto dentro de este contenedor*/
    margin: 0;             /*Elimina cualquier margen externo alrededor del contenedor*/
    padding-top: 0px;      /*Elimina el relleno (espacio interno) en la parte superior*/
    padding-bottom: 10px;  /*Agrega 10 píxeles de relleno (espacio interno) en la parte inferior*/
}

.intro h1 {
    font-size: 1.0em;  /*Establece el tamaño de fuente al tamaño estándar (no lo agranda ni achica)*/
    color: #333;     /*Define un color gris oscuro para el texto*/
    margin: 0;         /*Elimina cualquier margen alrededor del título (h1)*/
}

/*Lista de Posts*/
.post-list {               /*Contenedor que agrupa todos los ítems de la lista.*/
    font-family: Verdana, Helvetica, arial, sans-serif;  /*Define una tipografía para el texto de la lista*/
    list-style: none;      /*Elimina los puntos/viñetas (bullets) que normalmente tienen las listas de HTML*/
    padding: 0 !important; /*Elimina el relleno (espacio interno) por defecto que tienen las listas, pegando el contenido a la izquierda*/
    margin-top: 2px;       /*Elimina el margen superior del listado completo*/
    padding-top: 1px;      /* Frena el colapso de márgenes y pega el contenido */
}

/*LINEA DIVIDE TITULOS*/ 
.post-item {             /*Esta es la regla controla la fila completa que contiene la miniatura y el texto*/
    display: flex;       /*Activa el modelo Flexbox, lo que permite colocar la imagen y el texto uno al lado del otro*/
    align-items: center; /*Centra verticalmente la imagen con el texto. (La imagen se alinea con el centro del texto)*/
    margin-bottom: 5px;  /*Elimina el margen inferior de cada ítem (es decir, el espacio entre las filas)*/
    padding-bottom: 5px; /*Agrega 5 píxeles de relleno en la parte inferior de la fila*/
    border-bottom: 1px solid #acacac;  /*Dibuja la línea divisoria de 1 píxel de grosor y color negro debajo de cada post*/
    gap: 15px;           /*Agrega el espacio horizontal entre la imagen (miniatura) y el texto*/                        
}

.post-list .post-item:first-child { /*Regla que solo afecta al primer post de la lista*/
    padding-left: 0 !important;      /*relleno izquierdo:*/
    margin-left: 0 !important;       /*margen izquierdo:*/
}

/*Miniatura (Imagen pequeña)*/
.post-thumb {
    width: 80px;  /*Ancho*/
    height: 50px; /*Alto*/
    object-fit: cover; /*Asegura que la imagen siempre cubra el espacio de..., recortando el exceso si es necesario, sin distorsionar la imagen*/
    border-radius: 4px;  /*Redondea ligeramente las esquinas de la miniatura.*/
    margin: 0;    /*Elimina el margen alrededor de la imagen.*/
}

.post-content {      /*Textos de la lista (Título y Fecha)*/
    display: flex;          /*Este contenedor envuelve solo el Título y la Fecha*/
    flex-direction: column; /*Apila los elementos verticalmente (el título va arriba y la fecha abajo)*/
    gap: 0;                 /*Elimina el espacio entre el título y la fecha*/
}

.post-title {
    font-family: Verdana, Helvetica, Arial, Arial Black, sans-serif; /*Define la tipografía para los títulos.*/
    font-size: 0.75em; /*Reduce ligeramente el tamaño de la fuente del título.*/
    color: #000000;  /*Color negro puro para el texto*/
    text-decoration: none;  /*Elimina el subrayado que normalmente tienen los enlaces.*/
    margin: 0;   /*Elimina cualquier margen alrededor del título.*/
    line-height: 1.2;  /*Establece el espacio entre las líneas del texto si el título ocupa más de una línea*/
}

/*Fecha y Autor*/
.post-meta {
    font-size: 0.65em;     /*Reduce mucho el tamaño de la fuente (para la fecha o metadato).*/
    color: #888;         /*Color gris claro para que sea menos prominente que el título.*/
    margin-top: 2px;       /*Agrega 2 píxeles de espacio arriba de la fecha, separándola del título.*/
    margin-left: 0px;      /*Mueve la fecha a la derecha (una indentación o sangría), haciendo que parezca que está alineada con el texto del post, no con el borde.*/
    margin-bottom: 2px;    /*la fecha(.post-meta)tenga un pequeño margen en la parte inferior*/
}

/*=========================================
   2.1 FORMATO PARA MOBILES V 1.2 / ANDROID y Cnia.
   =========================================*/
@media (max-width: 600px) {
/*Color de Fondo*/
    body {
        background-color: #f6f6ef !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        margin: 0 !important;          /*Elimina el espacio blanco sobre la barra naranja */
    }

/*Configuración del Contenedor Principal*/
    main {
        padding: 10px 8px !important;  /* Ajuste de márgenes del contenedor principal. Se alinea el contenido. */
        width: auto !important;
    }

    .topbar {    
        margin-top: 0 !important;      /*Se elimina el margen que viene del CSS principal*/
        margin-left: 0 !important;     /*Margenes laterales sigan centrados o retirados*/
        margin-right: 0 !important;    /*margin: 0 auto !important; - de forma corta*/                        
        padding: 5px 0 !important; 
        width: 100% !important;        /*Ocupa todo el ancho*/
    }

    .post-container > img.post-header-image {
        all: unset !important;
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        max-width: 100% !important;
    }

/* Si usas videos o iframes (YouTube), también agrégalo para prevenir desbordes */
    .post-content video,
    .post-content iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
/*Configuración del Artículo (FILAS)*/
    .post-item {
        display: block !important;
        padding: 6px 0 !important;      /*Espacio interno vertical*/
        margin: 0 !important;           /*SIN margen externo */
        border-bottom: none !important; /*SIN líneas divisorias */
        overflow: hidden;
    }

/*Ocultar miniaturas, esta en respaldo se quiero agregar regla*/
    .post-thumb {
        display: none !important;
    }

/*CONTENEDOR del texto*/
    .post-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-left: 5px !important; /*Ajuste a la izquierda*/
        padding-right: 5px !important;
        width: 100% !important;
        text-align: left !important;
    }

/*ESTILO de TITULOS PUBLICACIONES*/
    .post-content .post-title {
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 1px !important;   /*ESPACIO entre TITULO y METADATOS*/
        font-size: 12px !important;      /*TAMAÑO LETRA*/
        font-weight: 500 !important;     /* Peso normal o semi-negrita*/
        color: #000000 !important;     /* Color negro para el título*/
        letter-spacing: normal !important; /*Quitamos el espaciado negativo*/
        line-height: 1.2 !important;     /*Interlineado más compacto*/
    }

/*Reset de listas */
    .post-list {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

/* Topbar*/
    .topbar .inner {
        margin: 0;
        padding: 5px 10px;
        gap: 10px;
        flex-wrap: wrap;
    }

/*Estilo de los Metadatos Fecha-Autor*/
    .post-meta {
        font-size: 11px !important;     /*TAMAÑO de FUENTE*/    
        color: #828282 !important;    /*Color*/
        display: block !important;
        margin-top: 2px !important;     /*Espacio mínimo respecto al título */
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

/*Estilos para el Pie de Página (Footer)*/
footer {
    border-top: 2px solid #ff6600 !important; 
    margin: 0px auto 0 auto;     /* Centra el footer */
    padding: 10px 0px;           /*TAMAÑO COLOR*/
    background-color:#f6f6ef;  /*fondo color*/
    color: #777777;            /*color texto*/
    text-align: center;          /* Alineación del texto al centro*/
    font-size: 0.6em;            /*TAMAÑO LETRAS*/
}

/*Color y Tamaño "Preguntar y Sobre Nosotros*/
.footer-menu a {
    color: #ff6600;         /*Color naranja de los enlaces*/
    text-decoration: none;    /*Quita el subrayado predeterminado*/
    margin: 0 6px;            /*Espacio entre los enlaces*/
}

/* Desactive la regla de una sola línea para que se lea completo en el celular */
/*.titulo-linea-unica {
/*   white-space: normal;  /* Permite saltos de línea */
/*   overflow: visible;    /* Muestra todo el texto */
/*   text-overflow: clip;  /* Quita los puntos suspensivos */
/*}*/

/* =============================================
2.2 AJUSTES "SOBRE NOSOTROS" (Movil)
============================================== */
/*Reducir el padding general de la página en móvil */
    .sobre-nosotros-page {
        padding: 10px 15px 20px 15px !important; /*Margenes laterales de 40px a 15px*/
    }

/*Achicar Título Principal (h1) en móvil*/
    .sobre-nosotros-page h1 {
        font-size: 1.4em !important; /*Más compacto en móvil*/
        margin-bottom: 10px !important;
    }

/*Achicar Subtítulos (h2) en móvil*/
    .sobre-nosotros-page h2 {
        font-size: 1.1em !important; /* Más compacto en móvil */
        margin-top: 15px !important;
        margin-bottom: 8px !important;
    }

/*Reducir el tamaño de los Párrafos */
    .sobre-nosotros-page p {
        font-size: 0.75em !important;    /*TAMAÑO de FUENTE Movil*/
        margin-bottom: 10px !important;  /*Espacio entre párrafos*/
    }

/*Reducir tamaño de Leyenda de la figura (figcaption) Movil*/
    .sobre-nosotros-page figcaption {
        /* Reducimos el tamaño de la fuente de 0.9em a 0.75em */
        font-size: 0.75em !important; 
    }

/* =============================================
2.3 AJUSTES DE "CONTACTANOS" (Movil)
============================================== */
    .contactanos-page {
        padding: 10px 15px 20px 15px !important; 
    }

    /* Títulos Móvil */
    .contactanos-page h1 {
        font-size: 1.4em !important; 
        margin-bottom: 15px !important;
    }

    .contactanos-page h2 {
        font-size: 1.1em !important; 
        margin-top: 15px !important;
    }

    /* ✅ LO NUEVO: Movil Reducir letra también en las LISTAS */
    .contactanos-page p,
    .contactanos-page li {
        font-size: 0.85em !important; /* Ahora sí achicará el texto de los puntos */
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    /* Imágenes Móvil */
    .contactanos-page figure {
        max-width: 100% !important; 
        margin: 15px auto !important;
    }
}

/* ==========================================================================
   3. ESTILOS DE LA PUBLICACIÓN INDIVIDUAL (Página del Post)
   ========================================================================== */

/*Contenedor Principal de la Publicación*/
.post-container {
    max-width: 850px !important;     /*ANCHO PUBLICACION*/
    padding-top: 0;
    margin-top: 0;
    margin-left: auto !important;    /*Centrado*/
    margin-right: auto !important;
    /* width: 100%; */  
}

/*IMAGEN PRINCIPAL(BANNER) */
.post-container > img {
/*Dimensiones*/
    width: 800px !important;
    max-width: 800px !important;  /* Usamos el valor real para el máximo */
    height: auto;
    max-height: 350px;
/*Estilo de imagen*/
    object-position: top center;
    object-fit: cover;
    display: block !important;
    border-radius: 4px;

/* CENTRADO CLÁSICO Y FUNCIONAL PARA ELEMENTOS DE BLOQUE */
    position: static; /* Desactiva cualquier posición relativa/absoluta */
    margin-left: 20px !important; /*CENTRADO MANUAL Izquierda publicacion e imagen */
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

}
/*TÍTULO PRINCIPAL (H1)*/
.post-content h1 {
    font-size: 1.2em !important;    /*Tamaño Título */
    color: #000000 !important;
    margin-top: 10px;
    margin-bottom: 20px;            /*Espacio abajo del título*/
    line-height: 1.2;
    font-family:  Helvetica, Verdana, Arial, sans-serif;
    font-weight: 800;               /*extra bold*/
  /*text-align: center;*/           /*CENTRA todos los titulos*/
}

/*SUBTÍTULOS DE SECCIÓN (H2) */
.post-content h2 {
    font-size: 1.1em !important;    /*TAMAÑO Subtitulo texto*/
    color: #222222;
    margin-top: 40px !important;    /* IMPORTANTE: Mucho margen arriba para separar del párrafo anterior */
    margin-bottom: 15px !important;
    font-weight: bold !important;   /* Descomentado y forzado */
    border-bottom: 2px solid #c5c5c5;  /* OPCIONAL: Una línea fina abajo ayuda mucho a los subtítulos */
    padding-bottom: 10px;           /* Espacio para la línea opcional */
}

/*Párrafos del texto, articulo escrito*/
.post-content p {
    font-size: 1.0em !important; /* TEXTO si .md para leer */
    line-height: 1.6;            /* Espacio entre renglones (vital para lectura) */
     margin-top: 2px !important; /*Pegado al elemento anterior*/
    margin-bottom: 20px;         /* Espacio entre párrafos */
    color: #000000;            /*COLOR TEXTO*/
    letter-spacing: -0.3px !important; /*ARRIMA las Palabras -0.3px, -0.5px, etc. */
}

/*IMÁGENES SECUNDARIAS (Cuerpo del Post)*/
.post-content img {
    max-width: 500px !important;
    max-height: 350px;           
    width: 100%;  
    height: auto;
    display: block; 
    margin: 20px auto;
     border: 1px solid #860101;   /* ← MARCO DE 1px */
}

/*VIDEOS (Estilos para el reproductor)*/
.post-content video {
    max-width: 700px !important;    /* Mismo ancho tope que tus imágenes */
    width: 100%;                    /*Se adapta en móviles */
    height: auto;
    display: block;                 /*Para que respete los márgenes*/
    margin: 20px auto;              /*Centrado horizontal */
    border-radius: 4px;             /*Bordes redondeados estéticos */
    background-color: #000;       /*Fondo negro elegante mientras carga */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra suave */
}

/* =========================================
 3.1 ESTILOS PARA LISTAS (Puntos y Numeración)
========================================= */
/* El contenedor de la lista */
.post-content ul,         /*Es lo que controla el Markdown (*)(**) y toda la merda*/
.post-content ol {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    padding-left: 40px !important; /* Espacio a la izquierda para que no se pegue al borde */
    
}

/* Cada elemento de la lista (lo que va después del punto) */
.post-content li {
    font-size: 1.0em !important;  /*TEXTO con * igualar al texto comun*/
    line-height: 1.6 !important;  /* Separación entre renglones para leer bien */
    letter-spacing: -0.3px !important; /*ARRIMA las Palabras -0.3px, -0.5px, etc. */
    color: #000000 !important;
    margin-bottom: 10px !important; /* Espacio entre cada punto */
}

/* Las negritas dentro de la lista (ej: "El argumento:") */
.post-content li strong {
    color: #000000 !important; /* Negro puro para destacar */
    font-weight: bold !important;
}

/*Estilos para la Leyenda/Pie de Foto (figcaption)*/
.post-content figcaption {
    text-align: center;
    font-size: 0.70em;     
    color: #666;           
    margin-top: 2px;       
    margin-bottom: 10px;   
    font-style: italic;    
}

/*Enlaces dentro del artículo*/
main p a {
    color: #002646; 
    text-decoration: underline;
}

/* Corte Para títulos extra largos solo en PC/Notebook */
/*.titulo-linea-unica {
/*  white-space: nowrap;      /* Obliga a no saltar de línea */
/*  overflow: hidden;         /* Esconde el texto sobrante */
/*  text-overflow: ellipsis;  /* Pone los puntos "..." */
/*  max-width: 100%;          /* Asegura que no rompa el contenedor */
/*}*/

/*==========================================================================
   4. ESTILOS DE LA PÁGINA "SOBRE NOSOTROS"
==========================================================================*/
/*Estilos Gles. de la Página "Sobre Nosotros"*/
.sobre-nosotros-page {
    padding: 10px 20px 20px 20px;
    max-width: 1090px;     /*Ancho de Contenedor*/
}

/*Estilos de la Figura (CONTENEDOR DE LA IMAGEN)*/
.sobre-nosotros-page figure {
    margin: 10px auto 10px auto; 
    padding: 0;
    max-width: 600px;
    display: block;
}

/*Estilos de Imágenes dentro de la figura*/
.sobre-nosotros-page figure img {
    max-width: 100%; 
    max-height: 400px; 
    height: auto;
    margin: 0 auto; 
    display: block; 
}

/*Estilos de la Leyenda de la figura (figcaption)*/
.sobre-nosotros-page figcaption {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px; 
}

/*Achicar Título Principal (h1)*/
.sobre-nosotros-page h1 {
    font-size: 1.0em; /* Reducido de un tamaño más grande a 2.0em */
    margin-bottom: 20px;
    line-height: 1.2;
}

/*Achicar Subtítulos (h2)*/
.sobre-nosotros-page h2 {
    font-size: 0.9em; /* Reducido de un tamaño más grande a 1.5em */
    margin-top: 25px;
    margin-bottom: 15px;
}

/*Estilos de Párrafos dentro de esta página*/
.sobre-nosotros-page p {
    font-size: 0.8em;
    color: #444; 
    margin-bottom: 15px; 
}

/*==========================================================================
   5. ESTILOS DE PÁGINA "CONTACTANOS"
==========================================================================*/
.contactanos-page {
    padding: 10px 20px 20px 20px;
    max-width: 1090px;         /*Ancho de Contenedor*/
}

/* Títulos */
.contactanos-page h1 {
    font-size: 1.0em; 
    margin-bottom: 20px;
    line-height: 1.2;
}

.contactanos-page h2 {
    font-size: 0.8em;
    margin-top: 25px;
    margin-bottom: 15px;
}

/*Estilos para Párrafos Y LISTAS */
.contactanos-page p, 
.contactanos-page li {  /* <--- Agregado 'li' para que afecte a tus listas */
    font-size: 0.9em; 
    color: #444; 
    margin-bottom: 15px; 
    line-height: 1.6;
}

/* Ajuste específico para que las listas tengan espacio */
.contactanos-page ul {
    margin-bottom: 20px;
    padding-left: 20px; /* Espacio para las viñetas */
}

/* Imágenes */
.contactanos-page figure {
    margin: 20px auto; 
    padding: 0;
    max-width: 500px; 
    display: block;
}

.contactanos-page figure img {
    width: 100%;       
    height: auto;
    display: block; 
}

.contactanos-page figcaption {
    text-align: center;
    font-size: 0.85em;
    color: #666;
}