/* -------------------------
   Contenedor de la portada
--------------------------*/
.portada {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    max-width: 1000px; /* ancho máximo de la portada */
    margin: 0 auto;
}

/* Columnas proporcionales */
.columna.izquierda { flex: 4; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.columna.central  { flex: 2; display: flex; justify-content: center; align-items: center; height: 100%; box-sizing: border-box; }
.columna.derecha  { flex: 4; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }

/* Columna central: logo centrado vertical y horizontal */
.columna.central img {
    max-width: 50%;
    height: auto;
    display: block;
}

/* -------------------------
   Posts
--------------------------*/
.mis-posts { display: flex; flex-direction: column; width: 100%; }

.mi-post {
    background-color: #e0e0e0;       /* fondo más visible */
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;               /* importante para sombras en pseudo-elementos */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover */
.mi-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Sombra en la esquina sesgada y parte inferior */
.mi-post::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    clip-path: inherit; /* toma el clip-path de cada post */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    pointer-events: none;
}

/* Miniatura */
.mi-post .miniatura img {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* Título */
.mi-post .titulo-post { font-size: 1.3em; margin-bottom: 10px; font-weight: 600; color: #222; }

/* Extracto */
.mi-post .extracto { font-size: 1em; margin-bottom: 10px; color: #333; line-height: 1.5; }

/* Leer más */
.mi-post .leer-mas { font-weight: bold; color: #0073aa; text-decoration: none; }
.mi-post .leer-mas:hover { text-decoration: underline; }

/* -------------------------
   Esquinas sesgadas
--------------------------*/
/* Columna izquierda */
.columna.izquierda .mi-post:nth-of-type(1) {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}

.columna.izquierda .mi-post:nth-of-type(2) {
    clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
}

/* Columna derecha */
.columna.derecha .mi-post:nth-of-type(1) {
    clip-path: polygon(10% 100%, 100% 100%, 100% 0, 0 0, 0 90%);
}

.columna.derecha .mi-post:nth-of-type(2) {
    clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 100%, 0 100%);
}