pais {
            display: block;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background: 
                linear-gradient(145deg, #f5deb3 0%, #deb887 100%);
            border-radius: 0;
            box-shadow: 
                0 0 0 8px #8b4513,
                0 0 0 12px #a0522d,
                inset 0 0 20px rgba(139, 69, 19, 0.1),
                0 15px 30px rgba(0, 0, 0, 0.3);
            border: 4px solid #654321;
            position: relative;
        }

        /* Decoración de esquinas estilo colonial */
        pais::before {
            content: "";
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            background: 
                radial-gradient(circle at 20px 20px, #8b4513 0%, transparent 20px),
                radial-gradient(circle at calc(100% - 20px) 20px, #8b4513 0%, transparent 20px),
                radial-gradient(circle at 20px calc(100% - 20px), #8b4513 0%, transparent 20px),
                radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), #8b4513 0%, transparent 20px);
            z-index: -1;
        }

        /* Título del país */
        pais::after {
            content: "🏛️ " attr(nombre) " 🏛️";
            display: block;
            font-family: 'Crimson Text', serif;
            font-size: 32px;
            font-weight: 700;
            color: #654321;
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: 
                linear-gradient(90deg, transparent 0%, #8b4513 20%, #8b4513 80%, transparent 100%),
                #f4a460;
            background-size: 100% 3px, 100% 100%;
            background-position: center bottom, center;
            background-repeat: no-repeat;
            text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3);
            border: 2px solid #8b4513;
            box-shadow: inset 0 2px 4px rgba(139, 69, 19, 0.2);
        }

        departamento {
            display: block;
            background: 
                linear-gradient(135deg, #faebd7 0%, #f5e6d3 100%);
            border: 3px solid #a0522d;
            margin: 25px 0;
            padding: 30px;
            box-shadow: 
                inset 0 0 10px rgba(139, 69, 19, 0.1),
                0 8px 16px rgba(139, 69, 19, 0.2);
            position: relative;
            background-image: 
                radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Header del departamento */
        departamento::before {
            content: "📍 Departamento " attr(id) " - " attr(nombre);
            display: block;
            font-family: 'Crimson Text', serif;
            font-size: 24px;
            font-weight: 600;
            color: #f4a460;
            background: #8b4513;
            padding: 15px 20px;
            margin: -30px -30px 25px -30px;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 8px rgba(139, 69, 19, 0.3);
            border-bottom: 3px solid #654321;
        }

        cabecera {
            display: block;
            font-size: 20px;
            font-weight: 700;
            color: #654321;
            margin: 15px 0;
            padding: 12px 20px;
            background: 
                linear-gradient(90deg, #deb887, #f4a460);
            border-left: 6px solid #8b4513;
            border-radius: 0 8px 8px 0;
            box-shadow: 0 2px 6px rgba(139, 69, 19, 0.2);
            text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.2);
        }

        cabecera::before {
            content: "🏛️ Capital: ";
            font-weight: 400;
            color: #8b4513;
        }

        habitantes {
            display: block;
            font-size: 18px;
            color: #654321;
            margin: 15px 0;
            padding: 12px 20px;
            background: 
                linear-gradient(90deg, #f5deb3, #deb887);
            border-left: 6px solid #a0522d;
            border-radius: 0 8px 8px 0;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(139, 69, 19, 0.2);
        }

        habitantes::before {
            content: "👥 Habitantes: ";
            font-weight: 400;
            color: #8b4513;
        }

        altura {
            display: block;
            font-size: 18px;
            color: #654321;
            margin: 15px 0;
            padding: 12px 20px;
            background: 
                linear-gradient(90deg, #deb887, #d2b48c);
            border-left: 6px solid #8b4513;
            border-radius: 0 8px 8px 0;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(139, 69, 19, 0.2);
        }

        altura::before {
            content: "⛰️ Altitud: ";
            font-weight: 400;
            color: #8b4513;
        }

        /* Efectos hover rústicos */
        departamento:hover {
            transform: translateY(-2px);
            box-shadow: 
                inset 0 0 15px rgba(139, 69, 19, 0.15),
                0 12px 20px rgba(139, 69, 19, 0.3);
            border-color: #654321;
        }

        cabecera:hover,
        habitantes:hover,
        altura:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 8px rgba(139, 69, 19, 0.3);
        }

        /* Decoración adicional */
        departamento::after {
            content: "";
            position: absolute;
            bottom: 10px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: 
                radial-gradient(circle, #8b4513 30%, transparent 30%),
                radial-gradient(circle, #a0522d 20%, transparent 20%);
            background-size: 8px 8px, 12px 12px;
            opacity: 0.1;
        }

        /* Responsive */
        @media (max-width: 600px) {
            pais {
                margin: 15px;
                padding: 25px;
            }
            
            pais::after {
                font-size: 24px;
                padding: 15px;
            }
            
            departamento::before {
                font-size: 20px;
                padding: 12px 15px;
            }
            
            cabecera, habitantes, altura {
                font-size: 16px;
                padding: 10px 15px;
            }
        }

        /* Animación sutil de entrada */
        departamento {
            animation: slideInRustic 0.8s ease-out;
        }

        @keyframes slideInRustic {
            from {
                opacity: 0;
                transform: translateY(30px) rotate(-1deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
            }
        }