* {
    box-sizing: border-box;
}

:root {
    --rojo: #cc0000;
    --rojo-claro: #ff2a1a;
    --negro: #0d0d0d;
    --gris: #1c1c1c;
    --gris-borde: #333;
    --blanco: #f5f5f5;
}

html {
    font-family: "Roboto", "Lucida Sans", sans-serif;
}
body {
    margin: 0;
    padding: 0 0 20px;
    color: var(--blanco);
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px),
        var(--negro);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
h1, h2, h3 {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
}
p {
    line-height: 1.5;
    margin: 10px 0 0;
}
h3, p {
    overflow-wrap: break-word;
}

/* ---------- Encabezado ---------- */
.encabezado {
    text-align: center;
    padding: 40px 15px 0;
    background: linear-gradient(160deg, #000 0%, #3a0000 55%, var(--rojo) 100%);
    border-bottom: 4px solid var(--rojo-claro);
}
.encabezado-sup {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffb3ad;
}
.encabezado h1 {
    font-size: clamp(2rem, 8vw, 4.5rem);
    margin: 10px 0;
    font-style: italic;
    text-shadow: 3px 3px 0 #000;
}
.encabezado h1 span {
    color: var(--rojo-claro);
}
.encabezado-sub {
    margin: 0 0 30px;
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    color: #eee;
}

/* Franja de bandera a cuadros */
.bandera {
    height: 18px;
    background:
        repeating-conic-gradient(#fff 0% 25%, #000 0% 50%) 0 0 / 18px 18px;
}

/* ---------- Títulos de sección ---------- */
.titulo-seccion {
    font-size: clamp(1.3rem, 5vw, 2rem);
    margin: 30px 15px 15px;
    padding-left: 12px;
    border-left: 6px solid var(--rojo-claro);
}

/* ---------- Cuadrícula ---------- */
.row::after {
    content: "";
    clear: both;
    display: block;
}

/* Móvil primero: todas las columnas ocupan el 100% */
[class*="col-"] {
    float: left;
    width: 100%;
    padding: 15px;
    background: var(--gris);
    border: 1px solid var(--gris-borde);
    border-top: 4px solid var(--rojo);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
[class*="col-"]:hover {
    transform: translateY(-4px);
    border-top-color: var(--rojo-claro);
    box-shadow: 0 8px 20px rgba(204, 0, 0, 0.35);
    position: relative;
    z-index: 1;
}
[class*="col-"] [class*="col-"] {
    background: #242424;
}
.anidado:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- Detalles de las tarjetas ---------- */
.etiqueta {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--rojo);
    color: #fff;
    transform: skewX(-12deg);
}
.foto {
    overflow: hidden;
    border: 2px solid var(--rojo);
    border-radius: 4px;
}
.foto img {
    width: 100%;
    transition: transform 0.4s ease;
}
[class*="col-"]:hover .foto img {
    transform: scale(1.06);
}
.destacado {
    margin-top: 20px;
    padding: 10px 15px;
    border-left: 4px solid var(--rojo-claro);
    background: rgba(204, 0, 0, 0.15);
    font-style: italic;
}
.meta {
    margin: 0;
    font-size: 2rem;
    text-align: center;
}

/* ---------- Pie de página ---------- */
.pie {
    margin-top: 30px;
    text-align: center;
    color: #aaa;
}
.pie p {
    margin: 12px 0 0;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ---------- Contenedor original ---------- */
.contenedor {
    width: 95%;
    margin: 20px auto;
    border: 3px solid var(--rojo);
    padding: 5px;
}

/* ---------- Tablet y escritorio (768px o más) ---------- */
@media only screen and (min-width: 768px) {
    [class*="col-"] {
        padding: 25px;
    }

    .col-1  {width: 8.33%;}
    .col-2  {width: 16.66%;}
    .col-3  {width: 25%;}
    .col-4  {width: 33.33%;}
    .col-5  {width: 41.66%;}
    .col-6  {width: 50%;}
    .col-7  {width: 58.33%;}
    .col-8  {width: 66.66%;}
    .col-9  {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .contenedor {
        width: 70%;
        margin: 60px auto;
    }

    /* En la columna estrecha el emoji no necesita tanto relleno */
    .col-1 {
        padding: 25px 5px;
    }

    /* Tarjetas de la misma altura en cada fila */
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .row::after {
        display: none;
    }

    /* Columnas anidadas: también de la misma altura */
    .anidado {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }
    .anidado > [class*="col-"] {
        padding: 15px;
    }
    .anidado h3 {
        font-size: 1rem;
        letter-spacing: 0;
    }
}

/* Tablet (768px a 1023px): las columnas anidadas se apilan para no quedar angostas */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .anidado > [class*="col-"] {
        width: 100%;
    }
}